#bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

@layer hakoniwa.base, hakoniwa.components, hakoniwa.utilities;

@layer hakoniwa.components {

  /* ----- コンテナ（利用者が調整できる値） ----- */
  .hakoniwa-media-cards {
    --hakoniwa-media-card-thumb-size: 32cqi;
    --hakoniwa-media-card-thumb-min: 72px;
    --hakoniwa-media-card-thumb-max: 280px;
    --hakoniwa-media-card-thumb-aspect: 4 / 3;
    --hakoniwa-media-card-title-lines: 3;

    container: hakoniwa-media-card / inline-size;
  }

  /* ----- レイアウト ----- */
  .hakoniwa-media-card__inner {
    display: grid;
    grid-template-columns:
      1fr
      clamp(
        var(--hakoniwa-media-card-thumb-min),
        var(--hakoniwa-media-card-thumb-size),
        var(--hakoniwa-media-card-thumb-max)
      ) !important;
    grid-template-areas: "body thumb";
    gap: clamp(0.75rem, 3cqi, 2rem);
    align-items: start;
    padding: clamp(0.75rem, 3cqi, 1.5rem);
    border: 1px solid var(--hakoniwa-color-line, #d3d9e2);
    border-radius: 6px;
    background: var(--hakoniwa-color-surface, #fff);
    color: inherit;

    &:hover{
      border-color: var(--hakoniwa-color-accent, #7d519e);
    }

    &:focus-visible {
      outline: 2px solid var(--hakoniwa-color-accent, #7d519e);
      outline-offset: 2px;
    }
  }

  .hakoniwa-media-card__body {
    grid-area: body;
    min-width: 0;
  }

  .hakoniwa-media-card__thumb {
    grid-area: thumb;
    aspect-ratio: var(--hakoniwa-media-card-thumb-aspect);
    border-radius: 4px;
    overflow: hidden;
  }

  .hakoniwa-media-card__thumb {
    figure,
    img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* ----- テキスト ----- */
  .hakoniwa-media-card__meta {
    display: none;
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    color: var(--hakoniwa-color-muted, #5e6878);
  }

  .hakoniwa-media-card__title {
    margin: 0;
    font-size: clamp(0.8125rem, 3cqi, 1.25rem) !important;
    line-height: 1.6;
    overflow: hidden;

    a{
      display: -webkit-box !important;
      -webkit-line-clamp: var(--hakoniwa-media-card-title-lines);
      -webkit-box-orient: vertical;
    }
  }

  .hakoniwa-media-card__excerpt {
    display: none;
  }

  /* ----- 中：360px以上で日付・カテゴリを表示 ----- */
  @container hakoniwa-media-card (min-width: 360px) {
    .hakoniwa-media-card__meta {
      display: block;
    }
  }

  /* ----- 大：600px以上で抜粋を足して間延びを防ぐ ----- */
  @container hakoniwa-media-card (min-width: 600px) {
    
    .hakoniwa-media-card__body {
      max-width: 40em;
    }

    .hakoniwa-media-card__title {
      --hakoniwa-media-card-title-lines: 2;
    }

    .hakoniwa-media-card__excerpt {
      margin: 0.4rem 0 0;
      font-size: 0.875rem;
      color: var(--hakoniwa-color-muted, #5e6878);
      display: -webkit-box;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  /* ----- モディファイア：画像を左に ----- */
  .hakoniwa-media-card--reverse .hakoniwa-media-card__inner {
    grid-template-columns:
      clamp(
        var(--hakoniwa-media-card-thumb-min),
        var(--hakoniwa-media-card-thumb-size),
        var(--hakoniwa-media-card-thumb-max)
      )
      1fr;
    grid-template-areas: "thumb body";
  }

  /* ----- モディファイア：240px以下で縦積みを許可 ----- */
  @container hakoniwa-media-card (max-width: 240px) {
    .hakoniwa-media-card--stackable .hakoniwa-media-card__inner {
      grid-template-columns: 1fr;
      grid-template-areas:
        "thumb"
        "body";
    }
  }

  /* featured card */
  .hakoniwa-feature-card {
    container: feature / inline-size;
    position: relative;
  }

  .hakoniwa-feature-card__inner {
    display: grid;
    gap: 1rem;
    padding: clamp(0.75rem, 3cqi, 1.5rem);
    border: 1px solid var(--hakoniwa-color-line, #d3d9e2);
    border-radius: 6px;
    background: var(--hakoniwa-color-surface, #fff);
    color: inherit;
    text-decoration: none;
  }

  .hakoniwa-feature-card__inner:hover {
    border-color: var(--hakoniwa-color-accent, #0073aa);
  }

  .hakoniwa-feature-card__thumb {
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    display: grid;
    place-items: center;
    overflow: hidden;

    svg,
    figure{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .hakoniwa-feature-card__title a{
    font-size: clamp(1.125rem, 4.5cqi, 1.5rem) !important;
  }

  .hakoniwa-feature-card__excerpt {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--hakoniwa-color-muted, #5e6878);
  }

  @container feature (max-width: 360px) {
    .hakoniwa-feature-card__title { -webkit-line-clamp: 3; }
    .hakoniwa-feature-card__excerpt { display: none; }
  }

  @container feature (min-width: 560px) {
    .hakoniwa-feature-card__inner { grid-template-columns: 45% 1fr; align-items: center; }
    .hakoniwa-feature-card__title { font-size: clamp(1.125rem, 3cqi, 1.5rem); }
  }
}

.archive .hakoniwa-media-cards {
  --hakoniwa-media-card-thumb-max: 320px;
  --hakoniwa-media-card-thumb-aspect: 16 / 9;
}

.related-posts .hakoniwa-media-cards {
  --hakoniwa-media-card-thumb-aspect: 16 / 9;
}

.top-title{
  position: relative;

  &::before{
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 1rem); /* 文字の手前 1rem で線を止める */
    width: 100vw;             /* 左へ十分に長く伸ばす */
    height: 1px;
    background: currentColor;
  }
}

/* @layer の外に書く */
@media (min-width: 782px) {
  /* ① 左カラムを右カラムの高さまで伸ばす */
  .animagate-top-posts > .wp-block-column.hakoniwa-featured-card {
    align-self: stretch;
  }

  /* ② カードまで高さを受け渡す */
  .hakoniwa-featured-card > .wp-block-query,
  .hakoniwa-featured-card .wp-block-post-template,
  .hakoniwa-featured-card .wp-block-post,
  .hakoniwa-featured-card .hakoniwa-feature-card__inner {
    height: 100%;
  }

  /* ③ 中身は上に詰め、余った高さは下の余白にする */
  .hakoniwa-featured-card .hakoniwa-feature-card__inner {
    align-content: start;
  }
}

.animagate-products.is-layout-grid {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 740px) {
  .animagate-products.is-layout-grid {
    --bottom-padding: 10rem;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: var(--bottom-padding);

    > .wp-block-group:nth-child(even) {
      transform: translateY(var(--bottom-padding));
    }
  }
}

.bleed-left-wide{
  padding-inline:calc(var(--wp--style--root--padding-left) + max(0px, (100% - var(--wp--style--global--wide-size)) / 2)) var(--wp--style--root--padding-right);
}

.bleed-right-wide{
  padding-inline:var(--wp--style--root--padding-left) calc(var(--wp--style--root--padding-right) + max(0px, (100% - var(--wp--style--global--wide-size)) / 2));
}

.animagate-section-height{
  min-height:calc( 100svh - var(--header-height, 0px) - var(--wp--custom--style--block-gap) );
}

.animagate-hero-section{
  height:100svh;
  padding-top:calc( var(--wp--custom--style--block-gap) * 3 + 1rem * var(--wp--custom--line-height--md) );
/*  padding-top:calc(var(--header-height, 0px) + var(--wp--custom--style--block-gap) );*/
}

.dot-arrow a{
  --dot: 2px;
  --gap: 1px;
  --speed: .9s;
  --u: calc(var(--dot) + var(--gap));               /* ドットの間隔 */
  --aw: calc(var(--u) * 6 + var(--dot));            /* 矢印の幅 */
  --ah: calc(var(--u) * 4 + var(--dot));            /* 矢印の高さ */
  position: relative;
  display: inline-block;
  padding-right: calc(var(--aw) + 10px);            /* 文字と矢印の間 10px */
}

.dot-arrow a:hover{
/*  color: var(--wp--preset--color--primary);*/
}

.dot-arrow a::after {
  content: "";
  position: absolute;
  left: calc(100% - var(--aw));
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--ah) / -2);
  pointer-events: none;
  box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor;
}

.dot-arrow a:is(:hover, :focus-visible)::after {
  animation: dot-arrow-wave var(--speed) steps(1) infinite;
}

@keyframes dot-arrow-wave {
  0% { box-shadow:
    0 var(--u) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
  12% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) var(--u) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
  25% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) var(--u) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
  38% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) var(--u) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
  50% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * -1) currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor; }
  62% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) 0 currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
  75% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
  88% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) var(--u) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 4) currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-arrow a::after { animation: none !important; }
}

.dot-ext a {
  --dot: 2px;
  --gap: 1px;
  --speed: 1.2s;
  --u: calc(var(--dot) + var(--gap));
  --dim: color-mix(in srgb, currentColor 25%, transparent);
  --size: calc(var(--u) * 7 + var(--dot));      /* アイコンの幅・高さ */
  position: relative;
  display: inline-block;
  padding-right: calc(var(--size) + 8px);       /* 文字とアイコンの間 8px */
}
.dot-ext a::after {
  content: "";
  position: absolute;
  left: calc(100% - var(--size));
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--size) / -2);
  pointer-events: none;
  box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) currentColor,
    calc(var(--u) * 7) 0 currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) 0 currentColor,
    calc(var(--u) * 6) 0 currentColor,
    calc(var(--u) * 7) var(--u) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 3) currentColor;
}
.dot-ext a:is(:hover, :focus-visible)::after {
  animation: dot-ext-draw var(--speed) steps(1) infinite;
}
@keyframes dot-ext-draw {
  0% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) var(--dim),
    calc(var(--u) * 3) calc(var(--u) * 4) var(--dim),
    calc(var(--u) * 4) calc(var(--u) * 3) var(--dim),
    calc(var(--u) * 5) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 6) var(--u) var(--dim),
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 var(--dim),
    calc(var(--u) * 5) 0 var(--dim),
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 3) var(--dim); }
  10% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) var(--dim),
    calc(var(--u) * 4) calc(var(--u) * 3) var(--dim),
    calc(var(--u) * 5) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 6) var(--u) var(--dim),
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 var(--dim),
    calc(var(--u) * 5) 0 var(--dim),
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 3) var(--dim); }
  20% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) var(--dim),
    calc(var(--u) * 5) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 6) var(--u) var(--dim),
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 var(--dim),
    calc(var(--u) * 5) 0 var(--dim),
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 3) var(--dim); }
  30% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 6) var(--u) var(--dim),
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 var(--dim),
    calc(var(--u) * 5) 0 var(--dim),
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 3) var(--dim); }
  40% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) var(--dim),
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 var(--dim),
    calc(var(--u) * 5) 0 var(--dim),
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 3) var(--dim); }
  50% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) var(--dim),
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) 0 var(--dim),
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 3) currentColor; }
  60% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) currentColor,
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) 0 currentColor,
    calc(var(--u) * 6) 0 var(--dim),
    calc(var(--u) * 7) var(--u) var(--dim),
    calc(var(--u) * 7) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 3) currentColor; }
  70% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) currentColor,
    calc(var(--u) * 7) 0 var(--dim),
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) 0 currentColor,
    calc(var(--u) * 6) 0 currentColor,
    calc(var(--u) * 7) var(--u) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 3) currentColor; }
  80% { box-shadow:
    0 calc(var(--u) * 2) currentColor,
    var(--u) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 2) currentColor,
    0 calc(var(--u) * 3) currentColor,
    0 calc(var(--u) * 4) currentColor,
    0 calc(var(--u) * 5) currentColor,
    0 calc(var(--u) * 6) currentColor,
    0 calc(var(--u) * 7) currentColor,
    var(--u) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 7) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 6) currentColor,
    calc(var(--u) * 2) calc(var(--u) * 5) currentColor,
    calc(var(--u) * 3) calc(var(--u) * 4) currentColor,
    calc(var(--u) * 4) calc(var(--u) * 3) currentColor,
    calc(var(--u) * 5) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 6) var(--u) currentColor,
    calc(var(--u) * 7) 0 currentColor,
    calc(var(--u) * 4) 0 currentColor,
    calc(var(--u) * 5) 0 currentColor,
    calc(var(--u) * 6) 0 currentColor,
    calc(var(--u) * 7) var(--u) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 2) currentColor,
    calc(var(--u) * 7) calc(var(--u) * 3) currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-ext a::after { animation: none !important; }
}