.i0[data-astro-cid-cn5cjeui] {
  --d: 0s;
}

.i1[data-astro-cid-cn5cjeui] {
  --d: 80ms;
}

.i2[data-astro-cid-cn5cjeui] {
  --d: .16s;
}

.i3[data-astro-cid-cn5cjeui] {
  --d: .24s;
}

.i4[data-astro-cid-cn5cjeui] {
  --d: .32s;
}

.i5[data-astro-cid-cn5cjeui] {
  --d: .4s;
}

.i6[data-astro-cid-cn5cjeui] {
  --d: .48s;
}

.i7[data-astro-cid-cn5cjeui] {
  --d: .56s;
}

.fw[data-astro-cid-cn5cjeui] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (width >= 900px) {
  .fw[data-astro-cid-cn5cjeui] {
    grid-template-columns: repeat(4, 1fr);
  }

  .fw[data-astro-cid-cn5cjeui].c5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.f[data-astro-cid-cn5cjeui] {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  background: #ffffff09;
  opacity: 0;
  animation: .5s ease-out forwards fin;
  animation-delay: var(--d);
}

.light .f[data-astro-cid-cn5cjeui] {
  background: var(--surface-2);
  border-color: var(--line);
}

.code[data-astro-cid-cn5cjeui] {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--cyan);
  line-height: 1;
}

.light .code[data-astro-cid-cn5cjeui] {
  color: var(--cyan-ink);
}

.f[data-astro-cid-cn5cjeui] strong[data-astro-cid-cn5cjeui] {
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
}

.light .f[data-astro-cid-cn5cjeui] strong[data-astro-cid-cn5cjeui] {
  color: var(--fg);
}

.f[data-astro-cid-cn5cjeui] small[data-astro-cid-cn5cjeui] {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8ea3b5;
  font-weight: 600;
}

.f[data-astro-cid-cn5cjeui] p[data-astro-cid-cn5cjeui] {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
}

.compact[data-astro-cid-cn5cjeui] .f[data-astro-cid-cn5cjeui] {
  padding: 12px 14px;
  text-align: center;
  justify-items: center;
}

@keyframes fin {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f[data-astro-cid-cn5cjeui] {
    animation: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .f[data-astro-cid-cn5cjeui] {
      opacity: 1;
      animation: linear both sd-fade;
      animation-timeline: view(0 10%);
      animation-range: entry calc(var(--s, 0)*6%) cover 30%;
    }

    .i0[data-astro-cid-cn5cjeui] {
      --s: 0;
    }

    .i1[data-astro-cid-cn5cjeui] {
      --s: 1;
    }

    .i2[data-astro-cid-cn5cjeui] {
      --s: 2;
    }

    .i3[data-astro-cid-cn5cjeui] {
      --s: 3;
    }

    .i4[data-astro-cid-cn5cjeui] {
      --s: 4;
    }

    .i5[data-astro-cid-cn5cjeui] {
      --s: 5;
    }

    .i6[data-astro-cid-cn5cjeui] {
      --s: 6;
    }

    .i7[data-astro-cid-cn5cjeui] {
      --s: 7;
    }

    .i8[data-astro-cid-cn5cjeui] {
      --s: 8;
    }

    .i9[data-astro-cid-cn5cjeui] {
      --s: 9;
    }

    @keyframes sd-fade {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}