@layer components {
  :root:has(.home-page) {
    --home-ground: var(--color-surface-canvas);
    --home-tray: var(--color-surface-shell);
    --home-sheet: var(--color-surface-raised);
    --home-well: var(--color-surface-canvas);
    --home-float: var(--color-surface-floating);
    --home-ink: var(--color-surface-ink);
    --home-hairline: var(--color-line-contour);
    --home-rule: var(--color-line-divider);
    --home-rule-strong: color-mix(in oklab, var(--color-line-control) 55%, transparent);
    --home-guide: var(--color-line-subtle);
    --home-text: var(--color-text-strong);
    --home-text-body: var(--color-text-body);
    --home-text-quiet: var(--color-text-muted);
    --home-text-faint: color-mix(in oklab, var(--color-text-muted) 72%, var(--color-text-subtle));
    --home-text-inverse: var(--color-text-inverse);
    --home-signal: var(--color-amber-40);
    --home-signal-ink: var(--color-amber-95);
    --home-signal-glow: color-mix(in oklab, var(--color-amber-40) 32%, transparent);
    --home-ok: light-dark(oklch(53% .12 150), oklch(76% .12 150));
    --home-warn: light-dark(oklch(62% .13 65), oklch(80% .12 75));
    --home-error: light-dark(oklch(56% .17 25), oklch(72% .15 25));
    --home-info: light-dark(oklch(55% .1 250), oklch(76% .09 250));
    --home-code-tag: var(--color-code-function);
    --home-code-attr: var(--color-code-property);
    --home-code-string: var(--color-code-string);
    --home-code-property: var(--color-code-property);
    --home-code-selector: var(--color-code-function);
    --home-edge: var(--shadow-edge);
    --home-contact: var(--shadow-contact);
    --home-shade-near: light-dark(oklch(18% 0 none / .04), oklch(0% 0 none / .4));
    --home-shade-far: light-dark(oklch(18% 0 none / .07), oklch(0% 0 none / .55));
    --home-elevation-1: var(--home-edge), var(--home-contact);
    --home-elevation-2: var(--home-edge), var(--home-contact), 0 10px 28px -8px light-dark(oklch(18% 0 none / .05), oklch(0% 0 none / .45));
    --home-elevation-3: var(--home-edge), var(--home-contact), 0 24px 60px -28px light-dark(oklch(18% 0 none / .1), oklch(0% 0 none / .7));
    --home-groove: inset 0 0 0 1px var(--color-line-contour);
    --home-pressed: var(--shadow-pressed);
    --home-highlight: light-dark(#ffffffe6, #ffffff0f);
    --home-highlight-ink: #ffffff26;
    --home-gap: .75rem;
    --home-radius-chip: .375rem;
    --home-radius-well: .5rem;
    --home-radius-sheet: calc(var(--home-radius-well) + var(--home-gap));
    --home-radius-tray: calc(var(--home-radius-sheet) + var(--home-gap));
    --home-radius-stage: var(--home-radius-tray);
    --home-radius-control: .625rem;
    --home-ease: cubic-bezier(.22, 1, .36, 1);
    --home-ease-inout: cubic-bezier(.65, 0, .35, 1);
    --home-quick: .16s;
    --home-base: .28s;
    --home-slow: .64s;
    --home-display: clamp(2.75rem, 1.2rem + 5.4vw, 5.75rem);
    --home-title: clamp(2.25rem, 1.55rem + 2.1vw, 3.5rem);
    --home-lead: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
    --home-card-title: 1.5rem;
    --home-body: 1rem;
    --home-caption: .8125rem;
    --home-label: .6875rem;
    --home-code: .8125rem;
    --home-mono: var(--font-family-mono);
    --home-section-space: clamp(6rem, 3rem + 7.5vw, 10.5rem);
    --home-header-space: clamp(3rem, 2rem + 2.6vw, 5rem);
    --home-perspective: 1800px;
    --home-hatch: var(--stripe-image);
    --home-hatch-size: 8px;
    --home-mark: var(--home-rule-strong);
    --stone-top: light-dark(oklch(31% .004 270), oklch(96.5% .006 88));
    --stone-mid: light-dark(oklch(17% .003 270), oklch(91% .012 85));
    --stone-bottom: light-dark(oklch(8% .002 270), oklch(81% .022 80));
    --stone-quiet-top: light-dark(oklch(31% .004 270), oklch(79% .008 88));
    --stone-quiet-mid: light-dark(oklch(17% .003 270), oklch(71% .012 86));
    --stone-quiet-bottom: light-dark(oklch(8% .002 270), oklch(62% .02 82));
    --stone-text: light-dark(oklch(97% .008 85), oklch(20% .012 70));
    --stone-lip: light-dark(#ffffff47, #fffffff2);
    --stone-rim: light-dark(#fff6, #fff);
    --stone-gold: light-dark(oklch(86% .1 82), oklch(74% .12 78));
    --stone-mirror: light-dark(oklch(86% .1 82 / .24), oklch(74% .12 78 / .4));
    --stone-sheen: light-dark(#fff3, #ffffffe6);
    --stone-glare: light-dark(#ffffff52, #fff);
    --stone-adularescence: light-dark(#0000, oklch(92% .025 240 / .22));
    --stone-glint: light-dark(#ffffff24, #ffffffd9);
    --stone-contact: light-dark(#00000042, #00000080);
    --stone-cast: light-dark(oklch(25% .02 70 / .32), oklch(2% .005 60 / .65));
    --stone-press: light-dark(#000000b3, oklch(55% .05 80 / .5));
    --stone-type-top: light-dark(oklch(38% .004 270), oklch(99% .004 90));
    --stone-type-band: light-dark(oklch(46% .006 80), oklch(100% .002 90));
    --stone-type-mid: light-dark(oklch(20% .003 270), oklch(93% .012 86));
    --stone-type-bottom: light-dark(oklch(9% .002 270), oklch(80% .028 82));
    --stone-type-sheen: light-dark(oklch(72% .006 80 / .8), oklch(93% .07 84));
    --stone-type-adularescence: light-dark(#0000, oklch(90% .03 240 / .24));
    --stone-type-glint: light-dark(oklch(60% .008 80 / .95), oklch(92% .07 250 / .95));
    --stone-type-cast: light-dark(oklch(30% .03 70 / .1), oklch(0% 0 none / .55));
    --silk-shadow: light-dark(oklch(70% .13 72), oklch(40% .085 68));
    --silk-body: light-dark(oklch(83% .135 80), oklch(66% .13 78));
    --silk-sheen: light-dark(oklch(97% .05 92), oklch(93% .085 90));
  }

  :where(.home-lit, .home-stone, .home-stone-type) {
    --lit-x: 30%;
    --lit-y: -160%;
    --lit-angle: -20deg;
    --cast-x: 1px;
    --cast-y: 4px;
    --lit-near: 0;
  }

  .home-stone {
    --stone-face: radial-gradient(ellipse 30% 50% at clamp(12%, var(--lit-x), 88%) clamp(16%, var(--lit-y), 40%), color-mix(in oklab, var(--stone-glare) calc(var(--lit-near) * 100%), transparent), transparent) padding-box,
      radial-gradient(ellipse 90% 75% at var(--lit-x) -10%, var(--stone-sheen), transparent 70%) padding-box,
      radial-gradient(ellipse 60% 120% at calc(100% - var(--lit-x) * .6) 80%, var(--stone-adularescence), transparent 75%) padding-box,
      linear-gradient(180deg, var(--stone-top), var(--stone-mid) 52%, var(--stone-bottom)) padding-box;
    --stone-edge: linear-gradient(var(--lit-angle), var(--stone-mirror), transparent 40%, transparent 58%, var(--stone-rim)) border-box,
      var(--stone-mid) border-box;
    --stone-shadow: inset 0 1px 0 var(--stone-lip),
      inset 0 -8px 12px -10px var(--stone-mirror),
      0 1px 1px var(--stone-contact),
      var(--cast-x) var(--cast-y) 8px -3px var(--stone-cast),
      calc(var(--cast-x) * 2.5) calc(var(--cast-y) * 2.5) 22px -8px var(--stone-cast);
    color: var(--stone-text);
    background: var(--stone-face), var(--stone-edge);
    box-shadow: var(--stone-shadow);
    border: 1px solid #0000;
  }

  .home-stone-quiet {
    --stone-top: var(--stone-quiet-top);
    --stone-mid: var(--stone-quiet-mid);
    --stone-bottom: var(--stone-quiet-bottom);
  }

  .home-stone-button {
    isolation: isolate;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:after {
      z-index: -1;
      border-radius: inherit;
      background: linear-gradient(105deg, transparent 38%, var(--stone-glint) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat;
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
    }

    &:is(:hover, :focus-visible) {
      --stone-adularescence: light-dark(#0000, oklch(90% .035 240 / .45));
    }

    &:is(:hover, :focus-visible):after {
      transition: background-position .9s var(--home-ease);
      background-position: 0 0;
    }

    &:active {
      transition: box-shadow var(--home-quick) var(--home-ease);
      box-shadow: inset 0 2px 6px var(--stone-press),
        inset 0 -1px 0 var(--stone-mirror),
        0 1px 1px var(--stone-contact),
        calc(var(--cast-x) * .4) calc(var(--cast-y) * .4) 6px -3px var(--stone-cast);
    }

    &:focus-visible {
      outline: 2px solid var(--home-ink);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &:after {
        display: none;
      }
    }
  }

  .home-edge-light {
    --edge-near: light-dark(#fff0, #ffffff21);
    --edge-far: light-dark(oklch(20% 0 none / .05), #0000004d);
    --edge-glint: light-dark(oklch(78% .09 80 / .75), oklch(90% .07 85 / .6));
    z-index: 30;
    border-radius: inherit;
    background: radial-gradient(circle 12rem at var(--lit-x) var(--lit-y), color-mix(in oklab, var(--edge-glint) calc(var(--lit-near) * 100%), transparent), transparent),
      linear-gradient(var(--lit-angle), var(--edge-far), transparent 32%, transparent 64%, var(--edge-near));
    pointer-events: none;
    padding: 1px;
    position: absolute;
    inset: 0;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }

  .home-stone-type {
    --stone-type-sheen-size: 6rem 2.25rem;
    --stone-type-sheen-core: 20%;
    --stone-type-sheen-fade: 60%;
    --stone-type-glint-width: 1.25%;
    --stone-type-glint-from: 77%;
    --stone-type-glint-to: 23%;
    --stone-type-band-at: 27%;
    background-image: linear-gradient(105deg, transparent calc(50% - var(--stone-type-glint-width)), color-mix(in oklab, var(--stone-type-glint) 45%, transparent) calc(50% - var(--stone-type-glint-width) * .45), var(--stone-type-glint) 50%, color-mix(in oklab, var(--stone-type-glint) 45%, transparent) calc(50% + var(--stone-type-glint-width) * .45), transparent calc(50% + var(--stone-type-glint-width))),
      radial-gradient(ellipse var(--stone-type-sheen-size) at var(--lit-x) clamp(12%, var(--lit-y), 88%), color-mix(in oklab, var(--stone-type-sheen) calc(var(--lit-near) * 100%), transparent) var(--stone-type-sheen-core), transparent var(--stone-type-sheen-fade)),
      radial-gradient(ellipse 70% 140% at calc(100% - var(--lit-x) * .5) 75%, var(--stone-type-adularescence), transparent 70%),
      linear-gradient(180deg, var(--stone-type-top) 10%, var(--stone-type-band) var(--stone-type-band-at), var(--stone-type-mid) calc(var(--stone-type-band-at) + 13%), var(--stone-type-mid) 58%, var(--stone-type-bottom) 90%);
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(calc(var(--cast-x) * .1) calc(var(--cast-y) * .14) 3px var(--stone-type-cast));
    background-position: 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-y;
    background-size: 300% 100%, 100% 100%, 100% 100%, 100% 1lh;
    -webkit-background-clip: text;
    background-clip: text;

    .dark & {
      --stone-type-sheen-size: 13rem 5rem;
      --stone-type-sheen-core: 0%;
      --stone-type-sheen-fade: 75%;
      --stone-type-glint-width: 4%;
      --stone-type-glint-from: 85%;
      --stone-type-glint-to: 15%;
    }

    &:lang(zh) {
      --stone-type-band-at: 12%;
      --stone-type-band: light-dark(oklch(34% .005 80), oklch(97% .004 90));
    }

    @media (prefers-contrast: more) {
      --stone-type-glint: transparent;
      --stone-type-sheen: transparent;
    }

    @media (width < 48rem), (resolution < 2x) {
      filter: none;
    }
  }

  @media (forced-colors: active), print {
    .home-stone.home-stone {
      color: canvastext;
      box-shadow: none;
      background: canvas;
      border-color: currentColor;
    }

    .home-edge-light, .home-stone-button:after {
      display: none;
    }

    .home-stone-type {
      -webkit-text-fill-color: currentColor;
      filter: none;
      background: none;
    }
  }

  :root:has(.home-page), .home-page {
    background-color: var(--home-ground);
  }

  .home-sheet {
    border-radius: var(--home-radius-sheet);
    outline: 1px solid var(--home-hairline);
    background-color: var(--home-sheet);
    box-shadow: var(--home-elevation-1);
  }

  .home-float {
    border-radius: var(--home-radius-well);
    outline: 1px solid var(--home-hairline);
    background-color: var(--home-float);
    box-shadow: var(--home-elevation-2);
  }

  .home-glass {
    backdrop-filter: blur(10px) saturate(1.1);
    background-color: light-dark(#fcfcfc99, #1e1e1e8c);
    border: 1px solid light-dark(oklch(24% .002 265 / .05), #ffffff14);
    border-bottom-color: light-dark(oklch(24% .002 265 / .07), #0006);
    box-shadow: inset 0 1px light-dark(#ffffffbf, #ffffff0d), inset 1px 0 light-dark(#ffffff59, #0000), 0 .5px 1px light-dark(oklch(18% 0 none / .02), #0000004d), 0 3px 8px -2px light-dark(oklch(18% 0 none / .02), #00000040), 0 12px 32px -8px light-dark(oklch(18% 0 none / .035), #00000059);
  }

  .home-tone-ok {
    color: var(--home-ok);
  }

  .home-tone-warn {
    color: var(--home-warn);
  }

  .home-tone-error {
    color: var(--home-error);
  }

  .home-tone-info {
    color: var(--home-info);
  }

  .home-page:lang(zh) :is(.home-display, .home-section-heading, .home-cta-title) {
    letter-spacing: -.015em;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .home-page:lang(zh) .home-section-heading {
    max-width: 16em;
  }

  .home-page:lang(zh) .home-section-body {
    text-wrap: balance;
  }

  .home-page:lang(zh) .home-title-gap {
    font-size: 0;
  }

  .home-page ::selection {
    color: inherit;
    background-color: color-mix(in oklab, var(--home-signal) 42%, transparent);
  }

  .home-eyebrow {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--home-text-body);
    align-items: center;
    gap: .625rem;
    margin: 0;
    line-height: 1;
    display: flex;

    &:before {
      background-color: var(--home-rule-strong);
      transform-origin: 0;
      content: "";
      order: 1;
      width: 1.5rem;
      height: 1px;
    }

    & > :not(.home-eyebrow-index) {
      order: 2;
    }
  }

  .home-eyebrow-index {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--home-text-faint);
  }

  .home-status {
    color: var(--home-text-quiet);
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    display: inline-flex;

    &:before {
      content: "";
      background-color: currentColor;
      border-radius: 3.40282e38px;
      width: .375rem;
      height: .375rem;
    }
  }

  .home-status-live:before {
    background-color: var(--home-signal);
    box-shadow: 0 0 0 3px var(--home-signal-glow);
  }

  .home-annotation {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--home-text-faint);
    margin: 0;
    line-height: 1.4;
  }

  @media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: view()) {
      .home-eyebrow:before {
        animation-name: home-marker-rule;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 20% entry 80%;
      }
    }
  }
}

@keyframes home-marker-rule {
  from {
    scale: 0 1;
  }
}

@keyframes home-stone-glint {
  from {
    background-position: var(--stone-type-glint-from) 0, 0 0, 0 0, 0 0;
  }

  to {
    background-position: var(--stone-type-glint-to) 0, 0 0, 0 0, 0 0;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-30:oklch(78% .0025 265);--color-zinc-40:oklch(68.6% .0028 265);--color-zinc-50:oklch(58% .003 265);--color-zinc-60:oklch(48.6% .003 265);--color-zinc-70:oklch(39.8% .0028 265);--color-zinc-80:oklch(31.4% .0025 265);--color-zinc-90:oklch(24.6% .0022 265);--color-zinc-95:oklch(19.4% .0019 265);--color-zinc-100:oklch(15% .0016 265);--color-amber-40:oklch(83.04% .1701 81.1);--color-amber-95:oklch(29.27% .0971 37.4)}:root,:host{--color-surface-raised:light-dark(var(--color-white), var(--color-zinc-90));--color-surface-floating:light-dark(var(--color-white), var(--color-zinc-80));--color-line-divider:light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));--color-line-control:light-dark(var(--color-zinc-50), var(--color-zinc-40));--color-line-subtle:light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .06));--color-text-body:light-dark(var(--color-zinc-70), var(--color-zinc-30));--color-text-strong:light-dark(var(--color-zinc-100), var(--color-white));--color-text-muted:light-dark(var(--color-zinc-60), var(--color-zinc-40));--color-text-inverse:light-dark(var(--color-white), var(--color-black))}:root,:host{--color-white:oklch(100% 0 none);--color-black:oklch(0% 0 none)}:root,:host{--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root,:host{--color-surface-canvas:var(--ui-surface-canvas);--color-surface-shell:var(--ui-surface-tray);--color-surface-ink:var(--ui-surface-ink);--color-text-subtle:var(--ui-text-muted);--color-line-contour:var(--ui-line-contour)}:root,:host{--shadow-edge:inset 0 1px 0 var(--ui-highlight);--shadow-contact:0 1px 1px -.5px var(--ui-shade-1), 0 2px 2px -1px var(--ui-shade-2), 0 4px 4px -2px var(--ui-shade-3);--shadow-pressed:var(--ui-elevation-sink)}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}:root,:host{--font-mono:"IBM Plex Mono"}:root,:host{--stripe-image:linear-gradient(135deg, var(--color-line-subtle) 4.5%, transparent 0, transparent 50%, var(--color-line-subtle) 0, var(--color-line-subtle) 54.5%, transparent 0)}}

@layer components {
  .home-page {
    --home-gutter: 1.25rem;
    --home-column: min(100%, 100rem);
    --home-rail: calc((100% - var(--home-column)) / 2 + var(--home-gutter) - 1.25rem);

    @media (width >= 52.125rem){
      --home-gutter: 2.5rem;
    }
  }

  .home-section {
    isolation: isolate;
    padding-block: var(--home-section-space);
    position: relative;
  }

  @media (width >= 64rem){
    :is(.home-hero, .home-section):after {
      --home-tick: color-mix(in oklab, var(--home-text) 9%, var(--home-ground));
      --home-tick-major: color-mix(in oklab, var(--home-text) 20%, var(--home-ground));
      inset-block: 0;
      left: calc(var(--home-rail) - .75rem);
      right: calc(var(--home-rail) - .75rem);
      z-index: -1;
      background: linear-gradient(var(--home-guide), var(--home-guide)) left .75rem top 0 / 1px 100% no-repeat,
        linear-gradient(var(--home-guide), var(--home-guide)) right .75rem top 0 / 1px 100% no-repeat;
      pointer-events: none;
      content: "";
      position: absolute;
    }

    .home-section:after {
      background: linear-gradient(var(--home-tick-major) 0 1px, transparent 1px) left 0 top 0 / .75rem 8rem repeat-y,
        linear-gradient(var(--home-tick-major) 0 1px, transparent 1px) right 0 top 0 / .75rem 8rem repeat-y,
        linear-gradient(var(--home-tick) 0 1px, transparent 1px) left .375rem top 0 / .375rem 1rem repeat-y,
        linear-gradient(var(--home-tick) 0 1px, transparent 1px) right .375rem top 0 / .375rem 1rem repeat-y,
        linear-gradient(var(--home-guide), var(--home-guide)) left .75rem top 0 / 1px 100% no-repeat,
        linear-gradient(var(--home-guide), var(--home-guide)) right .75rem top 0 / 1px 100% no-repeat;
    }

    .home-hero:after {
      top: 3.75rem;
      mask-image: linear-gradient(#0000, #000 6rem);
    }

    .home-section:before {
      --home-cross: var(--home-rule-strong);
      top: -5px;
      left: calc(var(--home-rail) - 5px);
      right: calc(var(--home-rail) - 5px);
      background: linear-gradient(var(--home-cross), var(--home-cross)) 0 5px / 11px 1px no-repeat,
        linear-gradient(var(--home-cross), var(--home-cross)) 5px 0 / 1px 11px no-repeat,
        linear-gradient(var(--home-cross), var(--home-cross)) 100% 5px / 11px 1px no-repeat,
        linear-gradient(var(--home-cross), var(--home-cross)) calc(100% - 5px) 0 / 1px 11px no-repeat;
      pointer-events: none;
      content: "";
      height: 11px;
      position: absolute;
    }

    .home-section {
      border-top: 1px solid var(--home-guide);
    }
  }

  .home-header > * {
    max-width: 95rem;
  }

  .home-header[data-background="transparent"] :is(.ui-header-nav, .ui-header-end:not([data-home-controls="full"]) > :not(a[aria-label="GitHub"])) {
    display: none;
  }

  @media (width < 64rem) {
    .home-header[data-background="transparent"] .ui-header-end > :not(a[aria-label="GitHub"]) {
      display: none;
    }
  }

  .home-header[data-background="transparent"] .ui-header-end {
    width: var(--ui-header-target);
    justify-content: flex-end;

    @media (width >= 64rem) {
      width: auto;
    }
  }

  .home-header[data-background="transparent"] .ui-header-end > a[aria-label="GitHub"] {
    margin: 0;
    display: flex;
  }

  .home-section-wrap {
    max-width: 100rem;
    position: relative;
  }

  .home-hatch {
    background-image: var(--home-hatch);
    background-size: var(--home-hatch-size) var(--home-hatch-size);
  }

  .home-marks:before {
    --home-tick: .5rem;
    background: linear-gradient(var(--home-mark), var(--home-mark)) 0 0 / var(--home-tick) 1px no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 0 0 / 1px var(--home-tick) no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 100% 0 / var(--home-tick) 1px no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 100% 0 / 1px var(--home-tick) no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 0 100% / var(--home-tick) 1px no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 0 100% / 1px var(--home-tick) no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 100% 100% / var(--home-tick) 1px no-repeat,
      linear-gradient(var(--home-mark), var(--home-mark)) 100% 100% / 1px var(--home-tick) no-repeat;
    pointer-events: none;
    content: "";
    position: absolute;
    inset: -.375rem;
  }

  .home-section-header {
    max-width: 44rem;
    margin-bottom: var(--home-header-space);
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    display: grid;
  }

  .home-illustration {
    --home-illustration-size: 4rem;
    width: var(--home-illustration-size);
    height: var(--home-illustration-size);
    pointer-events: none;
    flex: none;
    display: block;
    position: relative;
  }

  .home-illustration img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }

  .home-illustration-hung {
    margin-block: calc(var(--home-illustration-size) / -2);
    align-self: center;
  }

  .home-illustration .home-illustration-dark, .dark .home-illustration .home-illustration-light {
    display: none;
  }

  .dark .home-illustration .home-illustration-dark {
    display: block;
  }

  .home-compact-icon {
    --home-illustration-size: 3rem;
  }

  .home-section-caption {
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-inline-start: -.4rem;
    display: flex;

    @media (width >= 64rem){
      margin-inline-start: -.5rem;

      & .home-illustration {
        --home-illustration-size: 5rem;
      }
    }
  }

  .home-section-heading {
    max-width: 22ch;
    font-size: var(--home-title);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.035em;
    color: var(--home-text);
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin: 1.5rem 0 0;
    line-height: 1.08;
  }

  .home-section-body {
    max-width: 40rem;
    font-size: var(--home-lead);
    color: var(--home-text-quiet);
    text-wrap: pretty;
    margin: 1.5rem 0 0;
    line-height: 1.6;
  }

  .home-section-header > .home-section-link {
    margin-top: 1.75rem;
  }

  .home-action {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--home-radius-control);
    height: 2.75rem;
    font-size: .9375rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -.005em;
    transition: background-color var(--home-quick) var(--home-ease), box-shadow var(--home-quick) var(--home-ease);
    padding-inline: 1.125rem;
    display: inline-flex;
  }

  .home-action-primary {
    color: var(--home-text-inverse);
    background-color: var(--home-ink);
    box-shadow: inset 0 1px 0 var(--home-highlight-ink), 0 0 0 1px var(--home-ink), var(--home-contact);

    &:hover {
      background-color: color-mix(in oklab, var(--home-ink) 86%, var(--home-ground));
    }

    &:active {
      box-shadow: inset 0 1px 2px #00000059, 0 0 0 1px var(--home-ink);
    }

    &:focus-visible {
      outline: 2px solid var(--home-ink);
      outline-offset: 2px;
    }
  }

  .home-action-secondary {
    color: var(--home-text);
    background-color: var(--home-sheet);
    box-shadow: 0 0 0 1px var(--home-rule), var(--home-elevation-1);

    &:hover {
      background-color: var(--home-float);
      box-shadow: 0 0 0 1px var(--home-rule-strong), var(--home-elevation-1);
    }

    &:active {
      box-shadow: 0 0 0 1px var(--home-rule), var(--home-pressed);
    }

    &:focus-visible {
      outline: 2px solid var(--home-ink);
      outline-offset: 2px;
    }
  }

  .home-section-link {
    color: var(--home-text-faint);
    transition: color var(--duration-fast) var(--easing-smooth);
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;

    & > svg {
      width: .875rem;
      height: .875rem;
      transition: translate var(--duration-normal) var(--easing-crisp);
    }

    &:hover {
      color: var(--home-text);

      & > svg {
        translate: 3px;
      }
    }

    &:focus-visible {
      border-radius: var(--radius-sm);
      outline: 2px solid var(--home-ink);
      outline-offset: 3px;
    }

    @media (pointer: coarse) {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        inset: -.75rem -.5rem;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference){
    .home-enter {
      animation-name: home-rise;
      animation-duration: .9s;
      animation-timing-function: var(--home-ease);
      animation-fill-mode: both;
    }

    .home-hero-pill {
      animation-delay: 50ms;
    }

    .home-display-line:first-child {
      animation-delay: .12s;
    }

    .home-display-line:last-child {
      animation-delay: .2s;
    }

    .home-hero-lead {
      animation-delay: .3s;
    }

    .home-hero-actions {
      animation-delay: .38s;
    }

    .home-stone-type[data-glint] {
      animation-name: home-stone-glint;
      animation-duration: 1.4s;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    @supports (animation-timeline: view()) {
      .home-section-header > :not(.home-eyebrow), .home-reveal-item {
        animation-name: home-reveal-item;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 0 entry 220px;
      }

      .home-section-header > :not(.home-eyebrow) {
        animation-range: entry 0 entry 160px;
      }

      .home-section-header > .home-section-heading {
        animation-range: entry 24px entry 184px;
      }

      .home-section-header > .home-section-heading.home-stone-type[data-glint] {
        animation-name: home-reveal-item, home-stone-glint;
        animation-duration: auto, 1.4s;
        animation-timing-function: linear, linear;
        animation-timeline: view(), auto;
        animation-range: entry 24px entry 184px, normal;
      }

      .home-section-header > .home-section-body {
        animation-range: entry 48px entry 208px;
      }

      .home-section-header > .home-section-link {
        animation-range: entry 72px entry 232px;
      }
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-section-link:hover > svg, .home-cta-actions .home-action-primary:is(:hover, :focus-visible) > svg {
      translate: none;
    }
  }

  @media (forced-colors: active) {
    .home-footer-mark {
      display: none;
    }
  }
}

:root[data-header-transition] {
  view-transition-name: none;
}

[data-header-transition] .home-header {
  view-transition-name: home-header;
}

[data-header-transition] .home-header .ui-header-end > a[aria-label="GitHub"] {
  view-transition-name: home-header-github;
}

[data-header-transition] .home-header .ui-header-brand {
  view-transition-name: home-header-logo;
}

[data-header-transition] .home-header .ui-version {
  view-transition-name: home-header-version;
}

[data-header-transition] .home-header .ui-header-menu {
  view-transition-name: home-header-menu;
}

[data-header-transition]::view-transition {
  pointer-events: none;
}

[data-header-transition]::view-transition-group(*) {
  animation-duration: var(--duration-slow);
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

[data-header-transition="top"]::view-transition-old(home-header) {
  animation-duration: var(--duration-fastest);
}

[data-header-transition="top"]::view-transition-new(home-header) {
  animation-duration: var(--duration-faster);
  animation-delay: var(--duration-normal);
}

[data-header-transition="tuck"]::view-transition-group(*) {
  animation-duration: var(--duration-normal);
}

[data-header-transition="tuck"]::view-transition-old(*) {
  opacity: 0;
  animation: none;
}

[data-header-transition="tuck"]::view-transition-new(*) {
  animation: none;
}

@keyframes home-reveal-item {
  from {
    opacity: 0;
    translate: 0 24px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-rise {
  from {
    opacity: 0;
    translate: 0 20px;
    filter: blur(6px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-weight-regular:400;--font-weight-medium:500;--radius-sm:.25rem;--spacing-xs:.5rem;--spacing-sm:.75rem;--duration-fastest:75ms;--duration-faster:.1s;--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.3s;--easing-smooth:cubic-bezier(.4, 0, .2, 1);--easing-crisp:cubic-bezier(.16, 1, .3, 1)}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}
@layer components {
  .home-hero {
    --hero-gold-shadow: light-dark(oklch(79% .105 76), oklch(19% .035 65));
    --hero-gold-body: light-dark(oklch(90% .1 84), oklch(57% .115 77));
    --hero-gold-sheen: light-dark(oklch(98.5% .035 92), oklch(91% .115 86));
    text-align: center;
    background-color: var(--home-ground);
    user-select: none;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    min-height: max(43rem, 100svh);
    padding-block: clamp(8rem, 6rem + 5vw, 10.5rem) clamp(8rem, 5rem + 7vw, 12rem);
    display: grid;

    & .home-command code {
      user-select: text;
    }

    &:before {
      z-index: -3;
      background-image: radial-gradient(ellipse at 10% 20%, color-mix(in oklab, var(--hero-gold-body) 85%, transparent), transparent 65%),
        radial-gradient(ellipse at 95% 55%, color-mix(in oklab, var(--hero-gold-body) 60%, transparent), transparent 50%);
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
    }

    &[data-lens-ready]:before {
      opacity: 0;
      transition: opacity 1.2s var(--home-ease) .9s;
    }

    @media (width >= 48rem) and (height < 50rem) {
      min-height: max(38rem, 100svh);
      padding-block: 6rem 3.5rem;

      & .home-display {
        margin-top: var(--spacing-lg);
      }

      & .home-hero-actions {
        margin-top: var(--spacing-xl);
      }
    }
  }

  .home-hero-field {
    z-index: -2;
    pointer-events: none;
    width: 100%;
    height: 100%;
    color: var(--hero-gold-shadow);
    caret-color: var(--hero-gold-body);
    outline-color: var(--hero-gold-sheen);
    position: absolute;
    inset: 0;
  }

  .home-hero-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
    min-width: 0;
    display: grid;
    container: hero-content / inline-size;
  }

  .home-hero :is(.home-hero-pill, .home-hero-actions .home-action-primary, .home-hero-actions .home-command) {
    --lit-x: 30%;
    --lit-y: -160%;
    --lit-angle: -20deg;
    --cast-x: 1px;
    --cast-y: 4px;
    --lit-near: 0;
    --cast-tone: light-dark(oklch(42% .07 72 / .2), oklch(4% .01 60 / .5));
  }

  .home-hero :is(.home-hero-pill, .home-hero-actions .home-command) {
    --glass-fill: light-dark(#ffffff14, oklch(12% .012 70 / .28));
    --glass-top: light-dark(#ffffff29, #ffffff12);
    --glass-lip: light-dark(#fffffff2, #ffffff29);
    --glass-pool: light-dark(#ffffff38, #ffffff17);
    --glass-rim: light-dark(#fff, #ffffff8c);
    --glass-rim-far: light-dark(#ffffff8c, #ffffff29);
    --glass-glint: light-dark(oklch(84% .13 82 / .55), oklch(82% .13 82 / .32));
    --glass-glare: light-dark(oklch(99.5% .02 90 / .95), #fff6);
    isolation: isolate;
    background-color: var(--glass-fill);
    background-image: radial-gradient(ellipse 18% 30% at clamp(10%, var(--lit-x), 90%) 8%, color-mix(in oklab, var(--glass-glare) calc(var(--lit-near) * 100%), transparent), transparent),
      linear-gradient(180deg, var(--glass-top), transparent 50%);
    box-shadow: inset 0 1px 1px var(--glass-lip),
      inset 0 -10px 16px -12px var(--glass-pool),
      0 1px 2px light-dark(oklch(40% .06 70 / .1), #0000004d),
      /* Glass passes most of the light, so it casts a faint shadow; the canvas adds its caustic. */
      var(--cast-x) var(--cast-y) 16px -6px color-mix(in oklab, var(--cast-tone) 50%, transparent);
    backdrop-filter: blur(6px) saturate(1.35) brightness(1.06);
    transition: background-color var(--home-quick) var(--home-ease);
    border: 1px solid #0000;
    position: relative;

    &:before {
      z-index: -1;
      border-radius: inherit;
      background-image: linear-gradient(var(--lit-angle), var(--glass-rim-far), transparent 32%, transparent 62%, var(--glass-rim));
      pointer-events: none;
      content: "";
      padding: 1px;
      position: absolute;
      inset: -1px;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }
  }

  .home-hero[data-lens-ready] :is(.home-hero-pill, .home-hero-actions .home-command) {
    backdrop-filter: blur(1px) saturate(1.2);
  }

  .home-hero .home-hero-actions .home-command:after {
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(105deg, transparent 40%, var(--glass-glint) 50%, transparent 60%);
    opacity: 0;
    pointer-events: none;
    content: "";
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 300% 100%;
    position: absolute;
    inset: -1px;
  }

  .home-hero .home-hero-actions .home-command[data-status="copied"]:after {
    animation-name: home-hero-glass-glint;
    animation-duration: 1s;
    animation-timing-function: var(--home-ease-inout);
  }

  .home-hero .home-hero-pill:is(:hover, :focus-visible), .home-hero .home-command:focus-within {
    --glass-fill: light-dark(#fff3, oklch(16% .012 70 / .36));
  }

  .home-hero-pill {
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 100%;
    min-height: 2rem;
    padding: .25rem var(--spacing-sm) .25rem .25rem;
    font-size: var(--home-caption);
    color: var(--home-text);
    text-wrap: balance;
    overflow-wrap: anywhere;
    transition: color var(--home-quick) var(--home-ease);
    border-radius: 3.40282e38px;
    line-height: 1.5;
    display: inline-flex;
    position: relative;

    & > svg {
      flex: none;
    }

    &:hover {
      color: var(--home-text);
    }

    &:is(:hover, :focus-visible) > svg {
      translate: 3px;
    }

    &:focus-visible {
      outline: 2px solid var(--home-ink);
      outline-offset: 4px;
    }
  }

  .home-hero-pill-badge {
    padding: .125rem var(--spacing-xs);
    font-family: var(--home-mono);
    font-size: var(--home-label);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--home-text);
    background-color: light-dark(#ffffff6b, #ffffff12);
    border-radius: 3.40282e38px;
    flex: none;
    align-items: center;
    gap: .375rem;
    display: inline-flex;
    box-shadow: inset 0 1px light-dark(#ffffffe6, #ffffff1a);

    &:before {
      background-color: var(--home-signal);
      background-image: radial-gradient(circle at clamp(25%, var(--lit-x), 75%) 28%, #ffffffd9, transparent 42%),
        radial-gradient(circle at 50% 80%, color-mix(in oklab, var(--home-signal), white 25%), transparent 60%);
      width: .4375rem;
      height: .4375rem;
      box-shadow: inset 0 -1px 1px oklch(45% .11 60 / .55),
        0 0 0 3px color-mix(in oklab, var(--home-signal-glow) calc(70% + var(--lit-near) * 30%), transparent),
        0 0 calc(3px + var(--lit-near) * 5px) color-mix(in oklab, var(--home-signal) calc(15% + var(--lit-near) * 35%), transparent);
      content: "";
      border-radius: 3.40282e38px;
    }
  }

  .home-hero-pill-label {
    min-width: 0;
  }

  .home-display {
    min-width: 0;
    max-width: min(15em, 100%);
    margin: var(--spacing-xl) 0 0;
    font-size: min(var(--home-display), 5.25rem, max(10.5svh, 3.25rem), max(12.5vw, 2.5rem));
    font-weight: var(--font-weight-medium);
    letter-spacing: -.045em;
    color: var(--home-text);
    text-wrap: balance;
    overflow-wrap: anywhere;
    line-height: 1.04;

    &:is(:lang(ja), :lang(ko)) {
      word-break: keep-all;
    }
  }

  .home-display-line {
    display: block;

    @media (width < 64rem) {
      display: inline;
    }
  }

  .home-hero[data-glass-ready] .home-display {
    -webkit-text-fill-color: transparent;
  }

  .home-hero :is(.home-hero-pill, .home-action-primary) > svg {
    transition: translate var(--home-base) var(--home-ease);
  }

  .home-hero .home-action-primary:is(:hover, :focus-visible) > svg {
    translate: 3px;
  }

  .home-hero .home-action-primary {
    --stone-top: light-dark(oklch(29% .004 270), oklch(96.5% .006 88));
    --stone-mid: light-dark(oklch(16% .003 270), oklch(91% .012 85));
    --stone-bottom: light-dark(oklch(7.5% .002 270), oklch(81% .022 80));
    --stone-text: light-dark(oklch(97% .008 85), oklch(20% .012 70));
    --stone-lip: light-dark(#fff3, #fffffff2);
    --stone-rim: light-dark(#ffffff6b, #fff);
    --stone-mirror: light-dark(oklch(84% .06 82 / .3), oklch(74% .1 78 / .45));
    --stone-sheen: light-dark(#ffffff21, #ffffffe6);
    --stone-glare: light-dark(#ffffff5c, #fff);
    --stone-adularescence: light-dark(#0000, oklch(92% .025 240 / .22));
    --stone-glint: light-dark(#ffffff24, #ffffffd9);
    --stone-contact: light-dark(oklch(30% .05 65 / .3), #00000080);
    --stone-cast: light-dark(oklch(42% .08 70 / .32), oklch(3% .01 60 / .7));
    --stone-press: light-dark(#000000b3, oklch(55% .05 80 / .5));
  }

  .home-hero-actions {
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
    margin-top: var(--spacing-2xl);
    flex-wrap: wrap;
    display: flex;

    & .home-action-primary, & .home-command {
      box-sizing: border-box;
      min-width: 0;
      height: auto;
      min-height: 3.25rem;
      color: var(--home-text);
      border-radius: 1.625rem;
    }

    & .home-action-primary {
      isolation: isolate;
      padding: var(--spacing-sm) 1.5rem;
      font-weight: var(--font-weight-medium);
      color: var(--stone-text);
      text-shadow: 0 -1px light-dark(#00000080, #ffffffb3);
      background-color: var(--stone-mid);
      background-image: radial-gradient(ellipse 13% 18% at clamp(14%, var(--lit-x), 86%) 24%, color-mix(in oklab, var(--stone-glare) calc(var(--lit-near) * 100%), transparent), color-mix(in oklab, var(--stone-glare) calc(var(--lit-near) * 30%), transparent) 45%, transparent),
        radial-gradient(ellipse 80% 70% at var(--lit-x) -10%, var(--stone-sheen), transparent 70%),
        radial-gradient(ellipse 34% 70% at clamp(30%, calc(100% - var(--lit-x) * .5), 70%) 75%, var(--stone-adularescence), transparent),
        linear-gradient(180deg, var(--stone-top), var(--stone-mid) 52%, var(--stone-bottom));
      box-shadow: inset 0 1px 0 var(--stone-lip),
        inset 0 -1px 0 var(--stone-mirror),
        inset 0 -10px 16px -12px var(--stone-mirror),
        0 1px 1px var(--stone-contact),
        var(--cast-x) var(--cast-y) 10px -3px var(--stone-cast),
        calc(var(--cast-x) * 2.5) calc(var(--cast-y) * 2.5) 28px -10px var(--stone-cast);
      backdrop-filter: none;
      transition: background-color var(--home-quick) var(--home-ease);
      border: 0;
      position: relative;
      overflow: hidden;

      &:before {
        z-index: -1;
        border-radius: inherit;
        background-image: linear-gradient(var(--lit-angle), var(--stone-mirror), transparent 40%, transparent 58%, var(--stone-rim));
        pointer-events: none;
        content: "";
        padding: 1px;
        position: absolute;
        inset: 0;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      }

      &:after {
        z-index: -1;
        border-radius: inherit;
        background-image: linear-gradient(105deg, transparent 38%, var(--stone-glint) 50%, transparent 62%);
        pointer-events: none;
        content: "";
        background-position: 100% 0;
        background-repeat: no-repeat;
        background-size: 250% 100%;
        position: absolute;
        inset: 0;
      }

      &:is(:hover, :focus-visible) {
        --stone-adularescence: light-dark(#0000, oklch(90% .035 240 / .45));
        box-shadow: inset 0 1px 0 var(--stone-lip),
          inset 0 -1px 0 var(--stone-mirror),
          inset 0 -14px 20px -12px var(--stone-mirror),
          0 1px 1px var(--stone-contact),
          var(--cast-x) var(--cast-y) 12px -3px var(--stone-cast),
          calc(var(--cast-x) * 3) calc(var(--cast-y) * 3) 34px -10px var(--stone-cast);
        border-color: #0000;

        &:after {
          transition: background-position .9s var(--home-ease);
          background-position: 0 0;
        }
      }

      &:active {
        box-shadow: inset 0 2px 6px var(--stone-press),
          inset 0 -1px 0 var(--stone-mirror),
          0 1px 1px var(--stone-contact),
          calc(var(--cast-x) * .4) calc(var(--cast-y) * .4) 6px -3px var(--stone-cast);
      }
    }

    & .home-command {
      flex: auto;
      padding: .1875rem .1875rem .1875rem 1.125rem;
      font-size: .875rem;
    }

    & .home-command-copy {
      width: 2.75rem;
      height: 2.75rem;
      color: var(--home-text);
      border-radius: 3.40282e38px;

      &:hover {
        color: var(--home-text);
        background-color: light-dark(#00000009, #ffffff12);
      }

      &:focus-visible {
        outline-offset: -2px;
      }
    }

    & .home-action-primary:focus-visible {
      outline: 2px solid var(--home-ink);
      outline-offset: 4px;
    }

    @media (width < 40rem) {
      flex-direction: column;
      width: min(100%, 21rem);

      & .home-command {
        width: 100%;
      }
    }
  }

  @container hero-content (width < 14em) {
    .home-hero-pill {
      text-align: left;
      border-radius: 1rem;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: .25rem .5rem;
      padding: .5rem .75rem;
      display: grid;
    }

    .home-hero-pill-badge {
      justify-self: start;
    }

    .home-hero-pill-label {
      grid-area: 2 / 1 / auto / -1;
    }

    .home-hero-pill > svg {
      grid-area: 1 / 2;
    }

    .home-hero-actions .home-action-primary {
      padding-inline: .75rem;
    }

    .home-hero-actions .home-command {
      border-radius: 1rem;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .125rem .5rem;
      padding: .5rem .75rem .25rem;
      display: grid;
    }

    .home-hero-actions .home-command > [aria-hidden] {
      align-self: start;
    }

    .home-hero-actions .home-command-copy {
      grid-column: 2;
      justify-self: end;
      margin-right: -.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-hero :is(.home-hero-pill, .home-action-primary, .home-command, .home-command-copy) {
      transition-duration: 0s;
    }

    .home-hero .home-action-primary:after, .home-hero .home-hero-actions .home-command:after {
      display: none;
    }

    .home-hero[data-lens-ready]:before {
      transition: none;
    }

    .home-hero :is(.home-hero-pill, .home-action-primary) > svg {
      transition: none;
      translate: none !important;
    }
  }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .home-hero :is(.home-hero-pill, .home-hero-actions .home-command), .home-hero[data-lens-ready] :is(.home-hero-pill, .home-hero-actions .home-command) {
      --glass-fill: light-dark(oklch(98.5% .012 85), oklch(20% .01 70));
      backdrop-filter: none;
    }
  }

  @media (forced-colors: active), print {
    .home-hero-field, .home-hero:before {
      display: none;
    }

    .home-hero .home-display, .home-hero[data-glass-ready] .home-display {
      color: var(--home-text);
      -webkit-text-fill-color: currentColor;
    }

    .home-hero :is(.home-hero-pill, .home-hero-actions .home-action-primary, .home-hero-actions .home-command) {
      color: canvastext;
      box-shadow: none;
      text-shadow: none;
      backdrop-filter: none;
      background-color: canvas;
      background-image: none;
      border: 1px solid;

      &:before, &:after {
        display: none;
      }
    }
  }

  @media print {
    .home-hero {
      --home-text: CanvasText;
      --home-text-body: CanvasText;
      --color-text-muted: CanvasText;
      color-scheme: light;
      background-color: canvas;
    }
  }
}

@keyframes home-hero-glass-glint {
  from {
    background-position: 100% 0;
    opacity: 1;
  }

  to {
    background-position: 0 0;
    opacity: 1;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-weight-medium:500;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}

@layer components {
  .home-hero .home-display {
    margin-top: 0;
  }

  :is(.home-products, .home-journal) {
    --home-section-space: clamp(5rem, 2.5rem + 6vw, 9rem);
    --home-header-space: clamp(2.5rem, 2rem + 2vw, 4rem);
    --home-product-inset: min(3rem, 1rem + 2vw, 6vw);
    scroll-margin-top: 3.75rem;
    container: home-overview / inline-size;
  }

  :is(.home-overview-header, .home-journal-header) {
    & .home-eyebrow {
      letter-spacing: .13em;
      flex-wrap: wrap;
      row-gap: .5rem;
      max-width: 100%;
      font-family: inherit;
      font-size: .6875rem;
      line-height: 1.5;
    }

    & .home-section-heading {
      letter-spacing: -.045em;
      max-width: none;
      margin-top: 1.5rem;
      font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
      line-height: 1.08;
    }

    & .home-section-heading > span {
      display: block;
    }

    & .home-section-body {
      max-width: 36ch;
      font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
      line-height: 1.65;
    }
  }

  .home-overview-header {
    max-width: none;
  }

  .home-product-grid {
    gap: 1rem;
    display: grid;
  }

  .home-product {
    min-width: 0;
    padding: var(--home-product-inset);
    border-radius: var(--home-radius-sheet);
    background: var(--home-sheet);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
    flex-direction: column;
    display: flex;
    position: relative;
    container-type: inline-size;
  }

  .home-product[data-upcoming] {
    box-shadow: inset 0 0 0 1px var(--home-rule);
    background: none;
  }

  .home-product-heading {
    --home-product-logo-size: min(1.75rem, 8.8cqi);
    min-width: 0;
    height: calc(var(--home-product-logo-size) * 164.6 / 130.26);
    margin: 0;
    line-height: 1;
  }

  .home-product-logotype {
    width: auto;
    max-width: 100%;
    height: var(--home-product-logo-size);
    object-fit: contain;
    object-position: left top;
    display: block;
  }

  .home-product[data-product="design"] .home-product-logotype {
    height: 100%;
  }

  .home-product-logotype[data-theme="dark"], .dark .home-product-logotype[data-theme="light"] {
    display: none;
  }

  .dark .home-product-logotype[data-theme="dark"] {
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.light):not(.dark) .home-product-logotype[data-theme="light"] {
      display: none;
    }

    :root:not(.light):not(.dark) .home-product-logotype[data-theme="dark"] {
      display: block;
    }
  }

  .home-product-status {
    min-height: 2.75rem;
    color: var(--home-text-quiet);
    text-wrap: balance;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    line-height: 1.5;
    display: inline-flex;
  }

  .home-product-status:before {
    content: "";
    border-radius: 50%;
    flex: none;
    width: .375rem;
    height: .375rem;
    box-shadow: inset 0 0 0 1px;
  }

  .home-product-description {
    max-width: 46ch;
    color: var(--home-text-quiet);
    text-wrap: pretty;
    overflow-wrap: anywhere;
    margin: 1.25rem 0 0;
    font-size: 1rem;
    line-height: 1.7;
  }

  .home-product-footer {
    margin-top: auto;
    padding-top: 2.5rem;
  }

  .home-product-footer .home-action {
    text-align: center;
    height: auto;
    min-height: 2.75rem;
    padding-block: .625rem;
  }

  .home-text-link {
    min-height: 2.75rem;
    color: var(--home-text-body);
    text-decoration: underline;
    text-decoration-color: var(--home-rule-strong);
    text-underline-offset: .35em;
    transition: color var(--home-quick), text-decoration-color var(--home-quick);
    align-items: center;
    font-size: .875rem;
    line-height: 1.5;
    text-decoration-thickness: 1px;
    display: inline-flex;
  }

  .home-text-link:hover {
    color: var(--home-text);
    text-decoration-color: currentColor;
  }

  .home-text-link:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: 4px;
    border-radius: 2px;
  }

  .home-journal-header > .home-text-link {
    margin-top: 1.25rem;
  }

  .home-journal-list {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-journal-entry {
    border-top: 1px solid var(--home-rule);
  }

  .home-journal-entry:last-child {
    border-bottom: 1px solid var(--home-rule);
  }

  .home-journal-link {
    color: inherit;
    padding-block: 2rem;
    text-decoration: none;
    display: block;
  }

  .home-journal-date {
    color: var(--home-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    line-height: 1.5;
    display: block;
  }

  .home-journal-link h3 {
    color: var(--home-text);
    font-size: clamp(1.375rem, 1.125rem + .6vw, 1.75rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.025em;
    text-wrap: pretty;
    text-underline-offset: .2em;
    margin: .875rem 0 0;
    line-height: 1.35;
    text-decoration-thickness: 1px;
  }

  .home-journal-title-line {
    display: block;
  }

  .home-journal-link p {
    max-width: 62ch;
    color: var(--home-text-quiet);
    text-wrap: pretty;
    margin: 1rem 0 0;
    font-size: .9375rem;
    line-height: 1.75;
  }

  .home-journal-link:hover h3 {
    text-decoration-line: underline;
  }

  .home-journal-link:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: 6px;
    border-radius: 2px;
  }

  @container home-overview (width >= 64rem) {
    .home-overview-header {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: end;
      column-gap: 1rem;
    }

    .home-overview-header > .home-eyebrow {
      grid-column: 1 / -1;
    }

    .home-overview-header > .home-section-heading {
      grid-column: 1 / 3;
    }

    .home-overview-header > .home-section-body {
      margin: 0 0 .125rem;
    }

    .home-overview-header > .home-section-body > span {
      display: block;
    }

    .home-product-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-journal-layout {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: start;
      gap: clamp(3rem, 6vw, 6rem);
      display: grid;
    }

    .home-journal-header {
      margin-bottom: 0;
    }

    .home-journal-header .home-section-body {
      max-width: 30ch;
    }

    .home-journal-link {
      padding-block: 2.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-text-link {
      transition: none;
    }
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-weight-regular:400}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}
@layer components {
  .home-footer {
    --home-gutter: 1.25rem;
    --home-column: min(100%, 100rem);
    --home-rail: calc((100% - var(--home-column)) / 2 + var(--home-gutter) - 1.25rem);
    isolation: isolate;
    background-color: var(--home-ground);
    box-shadow: inset 0 1px 0 var(--home-guide);
    position: relative;
    overflow: hidden;

    @media (width >= 52.125rem){
      --home-gutter: 2.5rem;
    }
  }

  .home-footer-drafting {
    display: none;

    @media (width >= 64rem){
      --home-tick: color-mix(in oklab, var(--home-text) 9%, var(--home-ground));
      --home-tick-major: color-mix(in oklab, var(--home-text) 20%, var(--home-ground));
      inset: 0 calc(var(--home-rail) - .75rem);
      z-index: -1;
      background: linear-gradient(var(--home-tick-major) 0 1px, transparent 1px) left 0 top 0 / .75rem 8rem repeat-y,
        linear-gradient(var(--home-tick-major) 0 1px, transparent 1px) right 0 top 0 / .75rem 8rem repeat-y,
        linear-gradient(var(--home-tick) 0 1px, transparent 1px) left .375rem top 0 / .375rem 1rem repeat-y,
        linear-gradient(var(--home-tick) 0 1px, transparent 1px) right .375rem top 0 / .375rem 1rem repeat-y,
        linear-gradient(var(--home-guide), var(--home-guide)) left .75rem top 0 / 1px 100% no-repeat,
        linear-gradient(var(--home-guide), var(--home-guide)) right .75rem top 0 / 1px 100% no-repeat;
      pointer-events: none;
      display: block;
      position: absolute;
      mask-image: linear-gradient(#000 55%, #0000);
    }
  }

  .home-footer-wrap {
    max-width: 100rem;
    position: relative;
    container-type: inline-size;
  }

  .home-footer-nav, .home-footer-base {
    z-index: 1;
    position: relative;
  }

  .home-footer-nav {
    align-content: start;
    gap: var(--spacing-2xl) var(--spacing-lg);
    padding-block: var(--spacing-2xl);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;

    @media (width >= 40rem) {
      gap: var(--spacing-xl);
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @media (width >= 52.125rem){
      padding-block: var(--spacing-3xl);
    }

    @media (width >= 64rem){
      padding-block: 5rem;
    }
  }

  .home-footer-group {
    min-width: 0;
  }

  .home-footer-heading {
    font-family: var(--home-mono);
    font-size: .75rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--home-text);
    margin: 0;
    line-height: 1.5;
  }

  .home-footer-links {
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .home-footer-link {
    min-width: 2.75rem;
    min-height: 2rem;
    color: var(--home-text-quiet);
    text-underline-offset: .3em;
    transition: color var(--home-quick) var(--home-ease), text-decoration-color var(--home-quick) var(--home-ease);
    align-items: center;
    font-size: .875rem;
    line-height: 1.6;
    text-decoration-line: underline;
    text-decoration-color: #0000;
    text-decoration-thickness: 1px;
    display: inline-flex;

    &:hover {
      color: var(--home-text);
      text-decoration-color: var(--home-rule-strong);
    }

    &:focus-visible {
      border-radius: var(--radius-sm);
      outline: 2px solid var(--home-ink);
      outline-offset: 3px;
    }
  }

  .home-footer-base {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg) var(--spacing-xl);
    padding-block: var(--spacing-lg);
    border-top: 1px solid var(--home-rule);
    background-color: var(--home-ground);
    color: var(--home-text-faint);
    flex-wrap: wrap;
    font-size: .75rem;
    line-height: 1.6;
    display: flex;

    & .home-footer-link {
      font-size: inherit;
      color: inherit;

      &:hover {
        color: var(--home-text);
      }
    }
  }

  .home-footer-meta {
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-xl);
    flex-wrap: wrap;
    display: flex;
  }

  .home-footer-preferences {
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    display: flex;
  }

  .home-footer-select {
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 2.5rem;
    color: inherit;
    transition: color var(--home-quick) var(--home-ease);
    display: inline-flex;
    position: relative;

    &:hover {
      color: var(--home-text);
    }

    &:has(select:focus-visible) {
      outline: 2px solid var(--home-ink);
      outline-offset: 3px;
    }
  }

  .home-footer-mark {
    --home-footer-engrave: color-mix(in oklab, var(--home-text) 12%, transparent);
    --home-footer-lamp: light-dark(oklch(72% .12 78 / .75), color-mix(in oklab, var(--home-text) 42%, transparent));
    inset-inline: var(--home-gutter);
    z-index: 0;
    opacity: .5;
    font-size: 20.6cqi;
    font-weight: var(--font-weight-medium);
    letter-spacing: -.055em;
    text-align: center;
    white-space: nowrap;
    color: #0000;
    background-image: linear-gradient(135deg, var(--home-footer-engrave) 9%, transparent 0 50%, var(--home-footer-engrave) 0 59%, transparent 0),
      linear-gradient(color-mix(in oklab, var(--home-text) 3%, transparent) 0 0);
    background-size: var(--home-hatch-size) var(--home-hatch-size), auto;
    pointer-events: none;
    user-select: none;
    background-clip: text;
    margin: 0;
    line-height: .78;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    mask-image: linear-gradient(#000 20%, #0000);

    &:after {
      color: #0000;
      background-image: linear-gradient(135deg, var(--home-footer-lamp) 9%, transparent 0 50%, var(--home-footer-lamp) 0 59%, transparent 0);
      background-size: var(--home-hatch-size) var(--home-hatch-size);
      opacity: var(--lit-near);
      mask-image: radial-gradient(ellipse 16rem 9rem at var(--lit-x) var(--lit-y), #000, transparent 75%);
      content: attr(data-mark);
      background-clip: text;
      position: absolute;
      inset: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-footer :is(a, label) {
      transition: none;
    }
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-weight-medium:500;--radius-sm:.25rem;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}