@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-agent {
    --home-agent-inset: clamp(1rem, 2vw, 1.75rem);
    z-index: 1;
    isolation: isolate;
    text-align: left;
    container: home-agent / inline-size;

    &:after {
      z-index: 20;
      border-radius: inherit;
      box-shadow: var(--home-edge);
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
    }
  }

  .home-agent-window {
    --home-agent-chrome: color-mix(in oklab, var(--home-sheet) 50%, var(--home-well));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tabs"
                         "pane"
                         "steps";
    display: grid;

    @container home-agent (width >= 56rem) {
      grid-template: "bar-chat bar-file"
                     "chat code"
                     "chat output" 1fr
                     "steps steps"
                     / minmax(0, 5fr) minmax(0, 7fr);
    }
  }

  .home-agent-bar {
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    height: 3.5rem;
    padding-inline: var(--home-agent-inset);
    border-bottom: 1px solid var(--home-hairline);
    background-color: var(--home-agent-chrome);
    background-image: linear-gradient(light-dark(color-mix(in oklab, var(--home-float) 70%, transparent), color-mix(in oklab, var(--home-float) 12%, transparent)), transparent);
    display: flex;
  }

  .home-agent-bar-chat {
    grid-area: bar-chat;
  }

  .home-agent-bar-label {
    font-size: var(--home-caption);
    font-weight: var(--font-weight-medium);
    color: var(--home-text-body);
  }

  .home-agent-bar-file {
    grid-area: bar-file;
  }

  .home-agent-bar-chat, .home-agent-bar-file {
    display: none;

    @container home-agent (width >= 56rem) {
      display: flex;
    }
  }

  .home-agent-tabs {
    align-items: flex-end;
    gap: var(--spacing-sm);
    padding-inline: var(--home-agent-inset) var(--spacing-xs);
    grid-area: tabs;

    & > .home-agent-dots {
      flex: none;
      align-self: center;

      @container home-agent (width < 24rem) {
        display: none;
      }
    }

    @container home-agent (width >= 56rem) {
      display: none;
    }
  }

  .home-agent-tab-list {
    flex: 1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-end;
    min-width: 0;
    display: grid;
  }

  .home-agent-tab {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-3xs);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    white-space: nowrap;
    min-width: 0;
    height: 2.75rem;
    color: var(--home-text-faint);
    cursor: pointer;
    transition: color var(--home-quick) var(--home-ease);
    background-color: #0000;
    border: 1px solid #0000;
    border-bottom: 0;
    flex: auto;
    margin-bottom: -1px;
    padding: 0 .625rem;
    font-size: .8125rem;
    display: inline-flex;
    position: relative;

    &:nth-child(2) {
      font-family: var(--home-mono);
      font-size: .75rem;
    }

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

    &[aria-pressed="true"] {
      z-index: 1;
      border-color: var(--home-hairline);
      color: var(--home-text);
      background-color: var(--home-sheet);
      box-shadow: var(--home-edge);
    }

    &:first-child[aria-pressed="true"] {
      background-color: var(--home-well);
    }

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

    & svg {
      flex: none;
    }
  }

  .home-agent-tab-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .home-agent-dots {
    margin-right: var(--spacing-2xs);
    gap: .375rem;
    display: flex;

    & > span {
      background-color: var(--home-rule);
      background-image: linear-gradient(light-dark(color-mix(in oklab, var(--home-float) 45%, transparent), color-mix(in oklab, var(--home-float) 20%, transparent)), transparent);
      width: .625rem;
      height: .625rem;
      box-shadow: inset 0 0 0 .5px var(--home-hairline), 0 1px 0 light-dark(color-mix(in oklab, var(--home-float) 85%, transparent), color-mix(in oklab, var(--home-float) 8%, transparent));
      border-radius: 3.40282e38px;
    }
  }

  .home-agent-server {
    font-family: var(--home-mono);
    white-space: nowrap;
    margin-left: auto;
    font-size: .6875rem;

    &:before {
      transition: background-color var(--home-base) var(--home-ease), box-shadow var(--home-base) var(--home-ease);
    }
  }

  .home-agent-bar-file {
    padding-inline: calc(var(--home-agent-inset) - .75rem - 1px);
    align-items: flex-end;
  }

  .home-agent-file-tab {
    z-index: 1;
    align-items: center;
    gap: var(--spacing-xs);
    border: 1px solid var(--home-hairline);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    min-width: 0;
    height: 2.375rem;
    font-family: var(--home-mono);
    color: var(--home-text);
    background-color: var(--home-sheet);
    box-shadow: var(--home-edge);
    border-bottom: 0;
    margin-bottom: -1px;
    padding-inline: .75rem .875rem;
    font-size: .75rem;
    display: inline-flex;
    position: relative;
  }

  .home-agent-file-icon {
    color: var(--home-text-quiet);
    flex: none;
  }

  .home-agent-file-status {
    flex: none;
    align-items: center;
    display: inline-flex;
  }

  .home-agent-pane {
    grid-area: pane;
    min-width: 0;

    @container home-agent (width < 56rem) {
      visibility: hidden;
      opacity: 0;
      transition: opacity var(--home-quick) var(--home-ease), visibility 0s linear var(--home-quick);

      &[data-active] {
        visibility: visible;
        opacity: 1;
        transition: opacity var(--home-base) var(--home-ease) var(--home-quick), visibility 0s;
      }
    }
  }

  .home-agent-chat {
    background-color: var(--home-well);
    min-height: 24rem;
    position: relative;

    @container home-agent (width >= 56rem) {
      grid-area: chat;
      min-height: 0;
    }
  }

  .home-agent-log {
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl) var(--home-agent-inset) var(--home-agent-inset);
    transition: opacity .5s var(--home-ease);
    flex-direction: column;
    margin: 0;
    list-style: none;
    display: flex;
    position: absolute;
    inset: 0;
    overflow: hidden;
    mask-image: linear-gradient(#0000, #000 4.5rem);
  }

  .home-agent-entry {
    grid-template-rows: 1fr;
    margin: -.875rem;
    display: grid;
  }

  .home-agent-entry-inner {
    min-height: 0;
    padding: .875rem;
    overflow: hidden;
  }

  .home-agent-log {
    --home-agent-indent: 2.25rem;
  }

  .home-agent-entry-inner[data-turn] {
    padding-top: 1.5rem;
  }

  .home-agent-message {
    align-items: flex-start;
    gap: .75rem;
    display: flex;

    & p {
      min-width: 0;
      color: var(--home-text-body);
      text-wrap: pretty;
      margin: 0;
      font-size: .875rem;
      line-height: 1.6;
    }
  }

  .home-agent-message-user {
    flex-direction: row-reverse;

    & p {
      border-radius: var(--radius-2xl) var(--radius-sm) var(--radius-2xl) var(--radius-2xl);
      max-width: 82%;
      color: var(--home-text);
      background-color: var(--home-sheet);
      box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
      padding: .5rem .875rem;
    }
  }

  .home-agent-avatar {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--home-text-quiet);
    background-color: var(--home-sheet);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-edge);
    border-radius: 3.40282e38px;
    flex: none;
    place-content: center;
    margin-top: .0625rem;
    display: grid;

    .home-agent-message-agent & {
      color: #d97757;
    }

    .home-agent-message-user & {
      margin-top: .375rem;
    }

    & img {
      width: inherit;
      height: inherit;
      border-radius: inherit;
      object-fit: cover;
      object-position: 50% 25%;
      display: block;
    }
  }

  .home-agent-edit {
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 2rem;
    margin-left: var(--home-agent-indent);
    font-size: var(--home-caption);
    color: var(--home-text-quiet);
    display: flex;

    & code {
      font-family: var(--home-mono);
      color: var(--home-text-body);
      font-size: .75rem;
    }
  }

  .home-agent-edit-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--home-text-quiet);
    flex: none;
    place-content: center;
    display: grid;
  }

  .home-agent-edit-count {
    font-family: var(--home-mono);
    margin-left: auto;
    font-size: .75rem;
  }

  .home-agent-call {
    margin-left: calc(var(--home-agent-indent) - var(--spacing-sm));
    margin-right: calc(var(--spacing-sm) * -1);
    border-radius: var(--radius-xl);
    transition: background-color var(--home-slow) var(--home-ease), box-shadow var(--home-slow) var(--home-ease);
    position: relative;

    &[data-expanded] {
      background-color: var(--home-sheet);
      box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
    }
  }

  .home-agent-call-header {
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 2rem;
    padding-inline: var(--spacing-sm);
    transition: min-height var(--home-slow) var(--home-ease);
    display: flex;

    [data-expanded] > & {
      min-height: 3rem;
    }

    @container home-agent (width < 24rem) {
      gap: var(--spacing-2xs);
    }
  }

  .home-agent-call-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--home-text-quiet);
    flex: none;
    place-content: center;
    display: grid;

    [data-expanded] & {
      color: var(--home-text);
    }
  }

  .home-agent-call-icon .home-compact-icon, .home-agent-edit-icon .home-compact-icon {
    --home-illustration-size: 2.5rem;
  }

  .home-agent-call-name {
    min-width: 0;
    font-family: var(--home-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text);
    margin-right: auto;
    font-size: .75rem;
    overflow: hidden;

    @container home-agent (width < 24rem) {
      font-size: var(--home-label);
    }
  }

  .home-agent-call-summary {
    white-space: nowrap;
    color: var(--home-text-quiet);
    transition: opacity var(--home-base) var(--home-ease);
    flex: none;
    font-size: .75rem;

    [data-expanded] & {
      opacity: 0;
    }

    @container home-agent (width < 30rem) {
      display: none;
    }

    @container home-agent (width >= 56rem) and (width < 72rem) {
      display: none;
    }
  }

  .home-agent-call-status {
    width: 1rem;
    height: 1rem;
    color: var(--home-text-quiet);
    flex: none;
    place-content: center;
    display: grid;
  }

  .home-agent-call-body {
    transition: grid-template-rows var(--home-slow) var(--home-ease);
    grid-template-rows: 0fr;
    display: grid;

    .home-agent-call[data-expanded] > & {
      grid-template-rows: 1fr;
    }

    .home-agent-call:not([data-expanded]) > & {
      transition-delay: var(--home-quick);
    }
  }

  .home-agent-call-inner {
    min-height: 0;
    overflow: hidden;
  }

  .home-agent-call-detail {
    gap: var(--spacing-2xs);
    margin-inline: var(--spacing-sm);
    padding: var(--spacing-sm) 0 var(--spacing-md);
    border-top: 1px solid var(--home-hairline);
    opacity: 0;
    transition: opacity var(--home-quick) var(--home-ease);
    display: grid;

    [data-expanded] & {
      opacity: 1;
      transition-duration: var(--home-base);
      transition-delay: var(--home-quick);
    }
  }

  .home-agent-call-line {
    gap: var(--spacing-xs);
    min-width: 0;
    font-family: var(--home-mono);
    overflow-wrap: anywhere;
    color: var(--home-text-body);
    font-size: .75rem;
    line-height: 1.65;
    display: flex;
  }

  .home-agent-call-arrow {
    text-align: center;
    width: 1.25rem;
    color: var(--home-text-faint);
    flex: none;
  }

  .home-agent-json {
    color: var(--home-text-quiet);
  }

  .home-agent-json-key {
    color: var(--home-code-property);
  }

  .home-agent-json-string {
    color: var(--home-code-string);
  }

  .home-agent-pending {
    align-items: center;
    gap: .25rem;
    height: 1.65em;
    display: inline-flex;

    & > span {
      background-color: var(--home-text-faint);
      border-radius: 3.40282e38px;
      width: .25rem;
      height: .25rem;
    }
  }

  .home-agent-code {
    background-color: var(--home-sheet);
    container: home-agent-file / inline-size;

    @container home-agent (width >= 56rem) {
      grid-area: code;
    }
  }

  @container home-agent (width >= 56rem) {
    .home-agent-bar-file, .home-agent-code, .home-agent-panel {
      border-left: 1px solid var(--home-hairline);
    }
  }

  .home-agent-code-stack {
    padding-block: var(--home-agent-inset);
    font-family: var(--home-mono);
    font-size: var(--home-code);
    font-variant-numeric: tabular-nums;
    color: var(--home-text-body);
    line-height: 1.85;
    display: grid;

    @container home-agent-file (width < 38rem) {
      font-size: .75rem;
    }

    @container home-agent-file (width < 30rem) {
      padding-block: var(--spacing-md);
      font-size: .75rem;
      line-height: 1.7;
    }
  }

  .home-agent-code-view, .home-agent-panel-view {
    visibility: hidden;
    opacity: 0;
    min-width: 0;
    transition: opacity var(--home-quick) var(--home-ease), visibility 0s linear var(--home-quick);
    grid-area: 1 / 1;
    position: relative;

    &[data-active] {
      visibility: visible;
      opacity: 1;
      transition: opacity var(--home-base) var(--home-ease) var(--home-quick), visibility 0s;
    }
  }

  .home-agent-line {
    padding-inline: var(--home-agent-inset);
    display: flex;
  }

  .home-agent-gutter {
    text-align: right;
    width: 2ch;
    color: var(--home-text-faint);
    flex: none;
  }

  .home-agent-sign {
    text-align: center;
    width: 3ch;
    color: var(--home-text-faint);
    flex: none;
  }

  .home-agent-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .home-agent-class, .home-agent-word {
    white-space: nowrap;
  }

  [data-draft="plain"] .home-agent-attr {
    display: none;
  }

  .home-agent-squiggle {
    text-decoration-skip-ink: none;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--home-slow) var(--home-ease);
    text-decoration: underline wavy #0000;

    [data-draft="problems"] & {
      text-decoration-color: color-mix(in oklab, var(--home-warn) 85%, transparent);
    }
  }

  .home-agent-conflict, .home-agent-inspected, .home-agent-removed-class {
    transition: background-color var(--home-base) var(--home-ease), box-shadow var(--home-base) var(--home-ease);
    border-radius: 3px;
  }

  [data-draft="problems"] .home-agent-conflict {
    background-color: color-mix(in oklab, var(--home-warn) 16%, transparent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--home-warn) 16%, transparent);
  }

  [data-draft="inspect"] .home-agent-inspected {
    background-color: color-mix(in oklab, var(--home-info) 14%, transparent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--home-info) 14%, transparent);
  }

  .home-agent-removed-class {
    background-color: color-mix(in oklab, var(--home-error) 16%, transparent);
    text-decoration: line-through color-mix(in oklab, var(--home-error) 70%, transparent);
  }

  .home-agent-line-removed, .home-agent-line-added {
    --home-agent-gutter-end: calc(var(--home-agent-inset) + 5ch);
    background-image: linear-gradient(90deg, var(--home-agent-diff-gutter) 0 var(--home-agent-gutter-end), var(--home-agent-diff) var(--home-agent-gutter-end));
  }

  .home-agent-line-removed {
    --home-agent-diff-gutter: color-mix(in oklab, var(--home-error) 15%, transparent);
    --home-agent-diff: color-mix(in oklab, var(--home-error) 6%, transparent);

    & :is(.home-agent-sign, .home-agent-gutter) {
      color: var(--home-error);
    }
  }

  .home-agent-line-added {
    --home-agent-diff-gutter: color-mix(in oklab, var(--home-ok) 17%, transparent);
    --home-agent-diff: color-mix(in oklab, var(--home-ok) 7%, transparent);

    & :is(.home-agent-sign, .home-agent-gutter) {
      color: var(--home-ok);
    }
  }

  .home-agent-hover {
    bottom: 0;
    left: calc(var(--home-agent-inset) + 17ch);
    z-index: 2;
    gap: var(--spacing-2xs);
    max-width: calc(100% - var(--home-agent-inset) - 17ch);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-xl);
    background-color: var(--home-float);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-2);
    opacity: 0;
    transition: opacity var(--home-base) var(--home-ease), translate var(--home-base) var(--home-ease);
    display: grid;
    position: absolute;
    translate: 0 6px;

    [data-draft="inspect"] & {
      opacity: 1;
      translate: 0;
    }

    @container home-agent-file (width < 40rem) {
      left: var(--home-agent-inset);
      max-width: calc(100% - var(--home-agent-inset) * 2);
    }
  }

  .home-agent-rule {
    font-family: var(--home-mono);
    font-size: inherit;
    white-space: pre-wrap;
    color: var(--home-text-body);
    background-color: #0000;
    margin: 0;
    padding: 0;
    line-height: 1.7;
    overflow: hidden;
  }

  .home-agent-rule-selector {
    color: var(--home-code-selector);
  }

  .home-agent-rule-property {
    color: var(--home-code-property);
  }

  .home-agent-rule-value, .home-agent-fact-argument {
    white-space: nowrap;
  }

  .home-agent-panel {
    background-color: var(--home-sheet);
    flex-direction: column;
    display: flex;
    position: relative;
    container: home-agent-file / inline-size;

    @container home-agent (width >= 56rem) {
      border-top: 1px solid var(--home-hairline);
      grid-area: output;
    }
  }

  .home-agent-panel-signal {
    background-image: linear-gradient(90deg, transparent, var(--home-signal), transparent);
    opacity: 0;
    pointer-events: none;
    width: 30%;
    height: 1px;
    position: absolute;
    top: -1px;
    left: 0;
  }

  .home-agent-panel-header {
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    min-height: 3rem;
    padding: var(--spacing-sm) var(--home-agent-inset);
    border-bottom: 1px solid var(--home-hairline);
    background-color: var(--home-agent-chrome);
    display: flex;
  }

  .home-agent-panel-label {
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--home-caption);
    font-weight: var(--font-weight-medium);
    color: var(--home-text-body);
    flex: none;
    display: inline-flex;

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

  .home-agent-panel-tool {
    min-width: 0;
    font-family: var(--home-mono);
    font-size: var(--home-label);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text-quiet);
    margin-left: auto;
    overflow: hidden;
  }

  .home-agent-panel-body {
    padding: var(--spacing-md) var(--home-agent-inset) var(--home-agent-inset);
    flex: auto;
    display: grid;
  }

  .home-agent-panel-idle {
    border-radius: var(--home-radius-well);
    box-shadow: inset 0 0 0 1px var(--home-guide);
  }

  .home-agent-tokens {
    gap: .125rem var(--spacing-xl);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;

    @container home-agent-file (width >= 32rem) {
      grid-template-rows: repeat(6, auto);
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
    }
  }

  .home-agent-token {
    align-items: center;
    gap: var(--spacing-xs);
    grid-template-columns: 6.5rem 4rem minmax(0, 1fr);
    font-size: .75rem;
    line-height: 1.75;
    display: grid;

    & code {
      font-family: var(--home-mono);
      color: var(--home-text-body);
    }
  }

  .home-agent-token-value {
    font-family: var(--home-mono);
    color: var(--home-text-faint);
  }

  .home-agent-token-bar {
    width: max(2px, calc(var(--home-agent-token) * 100%));
    background-color: var(--home-rule-strong);
    transform-origin: 0;
    border-radius: 3.40282e38px;
    justify-self: start;
    height: .375rem;
  }

  .home-agent-problems {
    align-content: start;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .home-agent-problem {
    gap: .625rem;
    display: flex;

    & svg {
      flex: none;
      margin-top: .21875rem;
    }
  }

  .home-agent-problem-message {
    font-size: var(--home-caption);
    color: var(--home-text);
    text-wrap: pretty;
    line-height: 1.6;
    display: block;

    @container home-agent-file (width < 30rem) {
      font-size: .8125rem;
    }
  }

  .home-agent-problem-meta {
    margin-top: var(--spacing-2xs);
    font-family: var(--home-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text-faint);
    font-size: .6875rem;
    line-height: 1.5;
    display: block;
    overflow: hidden;
  }

  .home-agent-facts {
    align-content: start;
    gap: var(--spacing-sm);
    margin: 0;
    display: grid;

    & > div {
      gap: .125rem var(--spacing-md);
      display: grid;

      @container home-agent-file (width >= 30rem) {
        grid-template-columns: 9.5rem minmax(0, 1fr);
        align-items: baseline;
      }
    }

    & dt {
      font-size: var(--home-caption);
      color: var(--home-text-quiet);
    }

    & dd {
      align-items: baseline;
      gap: var(--spacing-3xs) var(--spacing-sm);
      min-width: 0;
      font-size: var(--home-caption);
      color: var(--home-text);
      flex-wrap: wrap;
      margin: 0;
      display: flex;
    }

    & code {
      font-family: var(--home-mono);
      font-variant-numeric: tabular-nums;
      font-size: .75rem;
    }
  }

  .home-agent-diffstat {
    font-family: var(--home-mono);
    font-size: .75rem;
  }

  .home-agent-token-chip {
    padding: .0625rem var(--spacing-2xs);
    border-radius: var(--home-radius-chip);
    color: var(--home-text);
    background-color: var(--home-well);
    box-shadow: inset 0 0 0 1px var(--home-hairline);
  }

  .home-agent-fact-note {
    color: var(--home-text-faint);
    font-size: .75rem;
  }

  .home-agent-hash {
    border-radius: var(--radius-sm);
    min-width: 13ch;
    color: var(--home-text);
    margin-inline: -.25rem;
    padding-inline: .25rem;
    display: inline-block;
  }

  [data-hashing] .home-agent-hash-live {
    color: var(--home-text-faint);
  }

  .home-agent-match {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--home-ok);
    opacity: 0;
    transition: opacity var(--home-base) var(--home-ease), scale var(--home-base) var(--home-ease);
    border-radius: 3.40282e38px;
    place-content: center;
    align-self: center;
    margin-block: -.25rem;
    display: inline-grid;
    scale: .9;
  }

  .home-agent-match-shown {
    opacity: 1;
    scale: 1;
  }

  .home-agent-fact-later {
    opacity: 0;
    transition: opacity var(--home-slow) var(--home-ease);
  }

  .home-agent-fact-shown {
    opacity: 1;
  }

  .home-agent-clean {
    flex-direction: column;
    align-self: stretch;
    display: flex;
  }

  .home-agent-verdict {
    align-items: center;
    gap: var(--spacing-md);
    margin-block: var(--spacing-sm) var(--spacing-xl);
    display: flex;

    & code {
      font-family: var(--home-mono);
      color: var(--home-text-faint);
      font-size: .75rem;
    }
  }

  .home-agent-verdict-mark {
    width: 3rem;
    height: 3rem;
    color: var(--home-ok);
    background-color: var(--home-well);
    box-shadow: var(--home-groove), var(--home-edge);
    border-radius: 3.40282e38px;
    flex: none;
    place-content: center;
    display: grid;

    [data-checking] & {
      color: var(--home-text-faint);
    }
  }

  .home-agent-verdict-title {
    margin: 0 0 var(--spacing-3xs);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -.02em;
    color: var(--home-text);
  }

  .home-agent-verdict-count {
    font-family: var(--home-mono);
    font-size: 2.75rem;
    font-weight: var(--font-weight-regular);
    font-variant-numeric: tabular-nums;
    color: var(--home-text);
    margin-left: auto;
    line-height: 1;
  }

  .home-agent-receipt {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--home-hairline);
    color: var(--home-text-faint);
    flex-wrap: wrap;
    margin-top: auto;
    font-size: .75rem;
    display: flex;

    & > span {
      align-items: center;
      gap: var(--spacing-xs);
      display: inline-flex;
    }

    & svg {
      color: var(--home-ok);
      flex: none;
    }

    & code {
      font-family: var(--home-mono);
      font-size: var(--home-label);
    }
  }

  .home-agent-steps {
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) calc(var(--home-agent-inset) - var(--spacing-xs)) var(--spacing-xs) var(--home-agent-inset);
    border-top: 1px solid var(--home-hairline);
    background-color: var(--home-agent-chrome);
    grid-area: steps;
    display: flex;
  }

  .home-agent-play {
    box-sizing: border-box;
    border-radius: 3.40282e38px;
    flex: none;
    place-content: center;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
  }

  .home-agent-step-list {
    gap: var(--spacing-xs);
    flex: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    & > li {
      flex: 1 1 0;
      min-width: 0;
    }

    @container home-agent (width < 34rem) {
      gap: 0;

      & > li {
        flex: auto;
      }
    }
  }

  .home-agent-step {
    align-items: baseline;
    gap: var(--spacing-xs);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--spacing-sm) var(--spacing-xs);
    border-radius: var(--radius-lg);
    font-size: var(--home-caption);
    text-align: left;
    border: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label"
                         "track";
    display: grid;

    @container home-agent (width < 34rem) {
      padding-inline: var(--spacing-3xs);
      font-size: var(--home-label);
      text-align: center;
    }

    color: var(--home-text-faint);
    cursor: pointer;
    transition: color var(--home-quick) var(--home-ease);
    background-color: #0000;

    &:hover, &[aria-current] {
      color: var(--home-text);
    }

    &[aria-current] {
      background-color: color-mix(in oklab, var(--home-sheet) 75%, transparent);
      box-shadow: var(--home-edge);
    }

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

  .home-agent-step-name {
    align-items: baseline;
    gap: var(--spacing-xs);
    white-space: nowrap;
    grid-area: label;
    display: inline-flex;

    @container home-agent (width < 34rem) {
      justify-content: center;
    }
  }

  .home-agent-step-index {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    font-variant-numeric: tabular-nums;
    color: var(--home-text-faint);

    @container home-agent (width < 56rem) {
      display: none;
    }
  }

  .home-agent-step-track {
    background-color: var(--home-rule);
    border-radius: 3.40282e38px;
    grid-area: track;
    height: 2px;
    position: relative;
    overflow: hidden;

    [data-state="done"] > & {
      background-color: var(--home-rule-strong);
    }
  }

  .home-agent-step-fill {
    background-color: var(--home-text);
    transform-origin: 0;
    animation-name: home-agent-step;
    animation-timing-function: linear;
    animation-fill-mode: both;
    position: absolute;
    inset: 0;
  }

  [data-state="done"] > .home-agent-step-track:after {
    background-color: var(--home-text-quiet);
    content: "";
    position: absolute;
    inset: 0;
  }

  [data-state="done"][aria-current] > .home-agent-step-track:after {
    background-color: var(--home-text);
  }

  [data-outro] :is(.home-agent-log, .home-agent-code-stack, .home-agent-panel-body) {
    opacity: 0;
  }

  .home-agent-code-stack, .home-agent-panel-body {
    transition: opacity .5s var(--home-ease);
  }

  @container home-agent (width < 16rem) {
    .home-agent-tabs {
      height: auto;
      padding: var(--spacing-xs) var(--home-agent-inset);
      align-items: stretch;
    }

    .home-agent-tab-list {
      gap: var(--spacing-3xs);
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }

    .home-agent-tab {
      height: auto;
      min-height: 44px;
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: var(--radius-lg);
      border-bottom: 1px solid #0000;
      justify-content: flex-start;
      margin: 0;

      &[aria-pressed="true"] {
        border-bottom-color: var(--home-hairline);
      }
    }

    .home-agent-tab-label, .home-agent-class, .home-agent-rule-value, .home-agent-fact-argument, .home-agent-problem-message .home-agent-word {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .home-agent-rule, .home-agent-facts {
      overflow-wrap: anywhere;
    }

    .home-agent-facts > div, .home-agent-problem {
      min-width: 0;
    }

    .home-agent-facts code {
      min-width: 0;
      max-width: 100%;
    }

    .home-agent-hash {
      min-width: 0;
    }

    .home-agent-problem-meta {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .home-agent-token {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .home-agent-token-bar {
      display: none;
    }

    .home-agent-panel-header {
      flex-wrap: wrap;
    }

    .home-agent-panel-tool {
      white-space: normal;
      overflow-wrap: anywhere;
      flex-basis: 100%;
      margin-left: 0;
    }

    .home-agent-steps {
      padding-inline: var(--home-agent-inset);
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .home-agent-play {
      width: 44px;
      height: 44px;
    }

    .home-agent-step-list {
      flex: 1 0 100%;
      grid-template-columns: minmax(0, 1fr);
      display: grid;
    }

    .home-agent-step {
      align-items: center;
      gap: var(--spacing-sm);
      min-height: 44px;
      padding: var(--spacing-xs) 0;
      text-align: left;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "label track";
    }

    .home-agent-step-name {
      justify-content: flex-start;
    }
  }

  @container home-agent-file (width < 16rem) {
    .home-agent-verdict {
      grid-template-columns: 48px minmax(0, 1fr);
      display: grid;

      & > div {
        grid-area: 2 / 1 / 3 / 3;
      }
    }

    .home-agent-verdict-mark {
      width: 48px;
      height: 48px;
    }

    .home-agent-verdict-count {
      grid-area: 1 / 2;
      justify-self: end;
      font-size: 44px;
    }
  }

  @media (prefers-reduced-motion: no-preference){
    .home-agent-scene[data-paused] .home-agent-call:before, .home-agent-scene[data-paused] :is(.home-agent-word, .home-agent-pending > span, .home-agent-panel-signal, .home-spin) {
      animation-play-state: paused;
    }

    .home-agent-entry {
      animation-name: home-agent-entry;
      animation-duration: .55s;
      animation-timing-function: var(--home-ease);
      animation-fill-mode: both;
    }

    .home-agent-word {
      animation-name: home-agent-word;
      animation-duration: .5s;
      animation-timing-function: var(--home-ease);
      animation-delay: calc(var(--home-agent-word) * 45ms);
      animation-fill-mode: both;
    }

    .home-agent-scene[data-mode="chosen"] :is(.home-agent-entry, .home-agent-word) {
      animation: none;
    }

    .home-agent-call[data-state="running"]:before {
      background-image: linear-gradient(90deg, transparent, var(--home-signal), transparent);
      height: 1px;
      animation: home-agent-request .9s var(--home-ease-inout) infinite;
      content: "";
      background-repeat: no-repeat;
      background-size: 40% 100%;
      position: absolute;
      top: -1px;
      left: .75rem;
      right: .75rem;
    }

    .home-agent-panel-signal {
      animation: home-agent-arrive 1s var(--home-ease-inout) both;
    }

    [data-matched] .home-agent-hash {
      animation: home-agent-matched 2.6s var(--home-ease) both;
    }

    .home-agent-match-shown {
      animation: home-agent-seal 2.6s var(--home-ease) both;
    }

    .home-agent-pending > span {
      animation: home-agent-pending 1s var(--home-ease-inout) infinite;

      &:nth-child(2) {
        animation-delay: .15s;
      }

      &:nth-child(3) {
        animation-delay: .3s;
      }
    }

    [data-draft="typing"] .home-agent-attr {
      vertical-align: top;
      white-space: pre;
      animation-name: home-agent-type;
      animation-duration: .8s;
      animation-timing-function: steps(32, end);
      animation-delay: calc(var(--home-agent-index) * .6s);
      animation-fill-mode: both;
      display: inline-block;
      overflow: hidden;

      @container home-agent-file (width < 40rem) {
        animation-name: home-agent-entry-fade;
        animation-timing-function: var(--home-ease);
        display: inline;
      }
    }

    .home-agent-code-view[data-active] .home-agent-line-changed {
      animation: home-agent-changed 2.6s var(--home-ease) both;
    }

    .home-agent-panel-view[data-active] .home-agent-token-bar {
      animation: home-agent-bar .7s var(--home-ease) both;
    }

    .home-agent-panel-view[data-active] .home-agent-problem {
      animation: home-agent-entry-fade .4s var(--home-ease) both;

      &:nth-child(2) {
        animation-delay: 80ms;
      }

      &:nth-child(3) {
        animation-delay: .16s;
      }

      &:nth-child(4) {
        animation-delay: .24s;
      }
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-agent, .home-agent *, .home-agent :before, .home-agent :after {
      transition: none !important;
      animation: none !important;
    }
  }

  .home-spin {
    animation: .9s linear infinite home-spin;
  }

  @media (prefers-reduced-motion: reduce){
    .home-marquee-track, .home-spin {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .home-agent-step[aria-current] {
      outline: 1px solid highlight;
    }

    .home-agent-step-track {
      outline: 1px solid canvastext;
    }

    .home-agent-step-fill {
      forced-color-adjust: none;
      background-color: highlight;
    }
  }
}

@keyframes home-agent-entry {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

@keyframes home-agent-entry-fade {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

@keyframes home-agent-word {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes home-agent-request {
  from {
    background-position: -60% 0;
  }

  to {
    background-position: 160% 0;
  }
}

@keyframes home-agent-arrive {
  0% {
    translate: 0 0;
    opacity: 0;
  }

  15%, 80% {
    opacity: 1;
  }

  100% {
    translate: 233.33% 0;
    opacity: 0;
  }
}

@keyframes home-agent-matched {
  0%, 35% {
    background-color: color-mix(in oklab, var(--home-signal) 26%, transparent);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes home-agent-seal {
  0% {
    color: var(--home-signal);
    scale: 0.5;
    box-shadow: 0 0 0 0 transparent;
  }

  18% {
    color: var(--home-signal);
    scale: 1.12;
    box-shadow: 0 0 16px 3px var(--home-signal-glow);
  }

  50% {
    color: var(--home-signal);
    scale: 1;
    box-shadow: 0 0 16px 3px transparent;
  }

  100% {
    color: var(--home-ok);
    scale: 1;
    box-shadow: 0 0 16px 3px transparent;
  }
}

@keyframes home-agent-pending {
  0%, 100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes home-agent-type {
  from {
    max-width: 0;
  }

  to {
    max-width: 64ch;
  }
}

@keyframes home-agent-changed {
  0%, 30% {
    background-color: color-mix(in oklab, var(--home-ok) 12%, transparent);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes home-agent-bar {
  from {
    scale: 0 1;
  }
}

@keyframes home-agent-step {
  from {
    scale: 0 1;
  }
}

@keyframes home-spin {
  to {
    rotate: 1turn;
  }
}

@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;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--spacing-3xs:.25rem;--spacing-2xs:.375rem;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-xl:2rem}: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))}}@keyframes fade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}@keyframes float {
  0% {
    transform: none;
  }

  50% {
    transform: translateY(-1.25rem);
  }

  to {
    transform: none;
  }
}@keyframes heart {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
}@keyframes jump {
  0%, to {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }
}@keyframes ping {
  75%, to {
    transform: scale(2);
    opacity: 0;
  }
}@keyframes pulse {
  0% {
    transform: none;
  }

  50% {
    transform: scale(1.05);
  }

  to {
    transform: none;
  }
}@keyframes rotate {
  0% {
    transform: rotate(-360deg);
  }

  to {
    transform: none;
  }
}@keyframes shake {
  0% {
    transform: none;
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: none;
  }
}@keyframes zoom {
  0% {
    transform: scale(0);
  }

  to {
    transform: none;
  }
}@keyframes slide-to-right {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(100%);
    }
  }@layer components {
  .home-mcp {
    --home-mcp-gap: clamp(2.5rem, 1.25rem + 3vw, 4rem);
    margin-top: var(--home-mcp-gap);
    position: relative;
    container: home-mcp / inline-size;
  }

  .home-mcp-stage {
    --home-mcp-radius: min(432px, calc(50cqw - 48px));
    --home-mcp-depth: .31;
    --home-mcp-radius-y: max(60px, calc(var(--home-mcp-tile) * 1.4), calc(var(--home-mcp-radius) * var(--home-mcp-depth)));
    --home-mcp-tile: 52px;
    --home-mcp-core: 84px;
    isolation: isolate;
    height: max(272px, calc(var(--home-mcp-radius-y) * 2 + var(--home-mcp-core) + 12px));
    position: relative;

    @container home-mcp (width < 512px) {
      --home-mcp-radius: calc(50cqw - 32px);
      --home-mcp-depth: .48;
      --home-mcp-tile: 38px;
      --home-mcp-core: 62px;
    }
  }

  .home-mcp-frame {
    z-index: -1;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .home-mcp-canvas {
    top: calc(var(--home-mcp-gap) * -1);
    visibility: hidden;
    width: 100%;
    height: calc(100% + var(--home-mcp-gap));
    pointer-events: none;
    color: var(--home-text);
    border-color: var(--home-rule-strong);
    caret-color: var(--home-signal);
    font-family: var(--home-mono);
    background-color: #0000;
    display: block;
    position: absolute;
    left: 0;
  }

  .home-mcp-beam {
    top: calc(var(--home-mcp-gap) * -1);
    width: 1px;
    height: calc(var(--home-mcp-gap) + 56% - var(--home-mcp-core));
    background-image: linear-gradient(var(--home-rule-strong), var(--home-rule));
    position: absolute;
    left: calc(50% - .5px);
  }

  .home-mcp-fallback-ring {
    width: calc(var(--home-mcp-radius) * 2);
    height: calc(var(--home-mcp-radius-y) * 2);
    border: 1px solid var(--home-rule);
    border-radius: 50%;
    position: absolute;
    top: 56%;
    left: 50%;
    translate: -50% -50%;
  }

  .home-mcp-clients {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-mcp-client {
    top: calc(56% + sin(var(--home-mcp-angle)) * var(--home-mcp-radius-y) - var(--home-mcp-tile) / 2 - 6px);
    left: calc(50% + cos(var(--home-mcp-angle)) * var(--home-mcp-radius));
    width: var(--home-mcp-tile);
    height: var(--home-mcp-tile);
    position: absolute;
    translate: -50% -50%;

    &:hover, &:focus-within {
      z-index: 3;
    }
  }

  .home-mcp-client-link {
    border-radius: calc(var(--home-mcp-tile) * .32);
    min-width: 44px;
    min-height: 44px;
    color: var(--home-text);
    place-items: center;
    text-decoration: none;
    display: grid;
    position: absolute;
    inset: 0;

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

    @container home-mcp (width < 512px) {
      inset: 50% auto auto 50%;
      translate: -50% -50%;
    }
  }

  .home-mcp-client-mark {
    width: var(--home-mcp-tile);
    height: var(--home-mcp-tile);
    border-radius: calc(var(--home-mcp-tile) * .32);
    color: var(--home-brand, var(--home-text));
    background-color: var(--home-sheet);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
    place-content: center;
    display: grid;

    & svg {
      width: calc(var(--home-mcp-tile) * .46);
      height: calc(var(--home-mcp-tile) * .46);
    }
  }

  .home-mcp-client-name {
    --home-mcp-tip-x: clamp(calc(8px - 50cqw - cos(var(--home-mcp-angle)) * var(--home-mcp-radius)), -50%, calc(50cqw - cos(var(--home-mcp-angle)) * var(--home-mcp-radius) - 100% - 8px));
    --home-mcp-tip-rise: -3px;
    z-index: 5;
    border-radius: var(--home-radius-chip);
    text-align: center;
    overflow-wrap: anywhere;
    width: max-content;
    max-width: calc(100cqw - 16px);
    color: var(--home-text-body);
    background-color: var(--home-float);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
    opacity: 0;
    visibility: hidden;
    translate: var(--home-mcp-tip-x) var(--home-mcp-tip-rise);
    pointer-events: none;
    transition: opacity var(--home-quick) var(--home-ease), translate var(--home-quick) var(--home-ease), visibility 0s linear var(--home-quick);
    padding: .375rem .625rem;
    font-size: .75rem;
    line-height: 1.4;
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;

    :is(:hover, :focus-visible) > & {
      opacity: 1;
      visibility: visible;
      translate: var(--home-mcp-tip-x) 0;
      transition-delay: 0s;
    }
  }

  .home-mcp-client[data-side="above"] .home-mcp-client-name {
    --home-mcp-tip-rise: 3px;
    top: auto;
    bottom: calc(100% + .75rem);
  }

  .home-mcp-core {
    top: calc(56% - var(--home-mcp-core) / 2 - 6px);
    width: var(--home-mcp-core);
    height: var(--home-mcp-core);
    border-radius: calc(var(--home-mcp-core) * .3);
    pointer-events: none;
    place-content: center;
    justify-items: center;
    gap: .375rem;
    display: grid;
    position: absolute;
    left: 50%;
    translate: -50% -50%;

    & svg {
      width: calc(var(--home-mcp-core) * .46);
      height: calc(var(--home-mcp-core) * .46);
    }
  }

  .home-mcp-core-label {
    font-family: var(--home-mono);
    font-size: .5625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: .18em;
    text-indent: .18em;
    color: var(--home-text-faint);
    line-height: 1;
  }

  [data-canvas-ready] :is(.home-mcp-core, .home-mcp-client-mark) {
    box-shadow: none;
    background: none;
    border-color: #0000;
  }

  .home-mcp-core.home-stone .home-mcp-core-label {
    color: color-mix(in oklab, var(--stone-text) 56%, transparent);
  }

  [data-canvas-ready] .home-mcp-canvas {
    visibility: visible;
  }

  [data-canvas-ready] :is(.home-mcp-fallback-ring, .home-mcp-beam) {
    display: none;
  }

  @media (forced-colors: active) {
    [data-canvas-ready] .home-mcp-canvas {
      visibility: hidden;
    }

    .home-mcp-client-link, .home-mcp-core {
      outline: 1px solid canvastext;
    }

    [data-canvas-ready] .home-mcp-fallback-ring {
      border-color: canvastext;
      display: block;
    }

    [data-canvas-ready] :is(.home-mcp-core, .home-mcp-client-mark) {
      background: canvas;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-mcp-client-name {
      --home-mcp-tip-rise: 0px;
      transition: none;
    }

    .home-mcp-client[data-side="above"] .home-mcp-client-name {
      --home-mcp-tip-rise: 0px;
    }
  }
}

@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}: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-window-surface{overflow:var(--home-window-overflow,clip);border-radius:var(--home-radius-sheet);background-color:var(--home-sheet);box-shadow:0 0 0 1px var(--home-hairline), var(--home-contact), 0 14px 28px -20px var(--home-shade-near), 0 40px 80px -48px var(--home-shade-far);position:relative}@media (forced-colors:active){.home-window-surface{outline:1px solid canvastext}}.home-code-tag{color:var(--home-code-tag)}.home-code-punct{color:var(--home-text-faint)}.home-code-attr{color:var(--home-code-attr)}.home-code-string{color:var(--home-code-string)}.home-icon-artwork{filter:grayscale()}.home-header .ui-version{display:none}}@layer components {
  .home-bench {
    padding-block: var(--spacing-sm);
    position: relative;
  }

  .home-bench-layout {
    gap: var(--spacing-xl);
    display: grid;
  }

  .home-bench-summary {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md) var(--spacing-lg);
    flex-wrap: wrap;
    display: flex;
  }

  .home-bench-caption {
    gap: var(--spacing-2xs) var(--spacing-xs);
    flex-wrap: wrap;
    margin: 0;
    line-height: 1.6;
    display: flex;
  }

  .home-bench-chart {
    --home-bench-brand-width: 0px;
    --home-bench-bar: 1.25rem;
    --home-bench-paint-rule: var(--home-rule);
    --home-bench-paint-tick: var(--home-rule-strong);
    --home-bench-paint-hatch: var(--color-line-subtle);
    --home-bench-paint-light: #ffffff29;
    --home-bench-paint-shade: #00000014;
    --home-bench-paint-silk-shadow: var(--silk-shadow);
    --home-bench-paint-silk-body: var(--silk-body);
    --home-bench-paint-silk-fold: color-mix(in oklab, var(--silk-body) 55%, var(--silk-sheen));
    --home-bench-paint-silk-sheen: var(--silk-sheen);
    position: relative;

    @media (width >= 52.125rem){
      --home-bench-brand-width: 10rem;
    }
  }

  .home-bench-canvas {
    top: 0;
    left: var(--home-bench-brand-width);
    z-index: 0;
    width: calc(100% - var(--home-bench-brand-width));
    pointer-events: none;
    height: 100%;
    display: block;
    position: absolute;
  }

  .home-bench-chart:not([data-renderer="canvas"]) .home-bench-canvas {
    visibility: hidden;
  }

  @media screen {
    .home-bench-chart[data-renderer="canvas"] {
      & :is(.home-bench-grid, .home-bench-bar) {
        display: none;
      }

      & .home-bench-track:before {
        content: none;
      }

      & .home-bench-axis {
        background: none;
      }
    }
  }

  .home-bench-grid {
    inset: 0 0 1.75rem var(--home-bench-brand-width);
    pointer-events: none;
    display: grid;
    position: absolute;

    @media (width < 52rem) {
      opacity: .5;
    }
  }

  .home-bench-gridline {
    background-image: linear-gradient(var(--home-rule) 50%, transparent 0);
    opacity: .6;
    background-size: 1px 4px;
    width: 1px;
    position: absolute;
    inset-block: 0;
  }

  .home-bench-rows {
    z-index: 1;
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;

    @media (width >= 52.125rem){
      gap: var(--spacing-xs);
    }
  }

  .home-bench-row {
    --home-bench-color: var(--home-signal);
    --home-bench-color-end: var(--home-bench-color);
    align-items: center;
    gap: var(--spacing-xs);
    display: grid;

    @media (width >= 52.125rem){
      grid-template-columns: var(--home-bench-brand-width) minmax(0, 1fr);
      gap: 0;
      min-height: 3.25rem;
    }
  }

  .home-bench-row[data-brand="React"] {
    --home-bench-color: #149eca;
    --home-bench-color-end: #00d8ff;
  }

  .home-bench-row[data-brand="Material UI"] {
    --home-bench-color: #0081cb;
    --home-bench-color-end: #00b0ff;
  }

  .home-bench-row[data-brand="Bootstrap"] {
    --home-bench-color: #6610f2;
    --home-bench-color-end: #9013fe;
  }

  .home-bench-row[data-brand="Angular"] {
    --home-bench-color: #f0060b;
    --home-bench-color-end: #c026d3;
  }

  .home-bench-row[data-brand="Vue.js"] {
    --home-bench-color: #2f9468;
    --home-bench-color-end: #41b883;
  }

  .home-bench-row[data-brand="Next.js"] {
    --home-bench-color: light-dark(#18181b, #a1a1aa);
    --home-bench-color-end: light-dark(#52525b, #e4e4e7);
  }

  .home-bench-row[data-brand="Tailwind CSS"] {
    --home-bench-color: #0891b2;
    --home-bench-color-end: #38bdf8;
  }

  .home-bench-brand {
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    font-size: var(--home-caption);
    color: var(--home-text-quiet);
    padding-right: 7rem;
    line-height: 1.5;
    display: flex;

    @media (width >= 52.125rem){
      padding-right: var(--spacing-md);
    }
  }

  .home-bench-icon {
    background-color: var(--home-ground);
    flex: none;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
  }

  .home-bench-track {
    min-width: 0;
    height: 1.5rem;
    position: relative;

    @media (width >= 52.125rem){
      height: 3.25rem;
    }
  }

  .home-bench-track:before {
    height: var(--home-bench-bar);
    background-image: var(--home-hatch);
    background-size: var(--home-hatch-size) var(--home-hatch-size);
    opacity: .5;
    content: "";
    border-radius: 0 3px 3px 0;
    position: absolute;
    inset: 50% 0 auto;
    translate: 0 -50%;
  }

  .home-bench-bar {
    min-width: 1px;
    height: var(--home-bench-bar);
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--home-bench-color) 64%, var(--home-ground)),
      var(--home-bench-color) 55%, var(--home-bench-color-end));
    border-radius: 0 3px 3px 0;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    box-shadow: inset 0 1px #ffffff29, inset 0 -1px #00000014;
  }

  .home-bench-readout {
    white-space: nowrap;
    pointer-events: none;
    align-items: center;
    display: inline-flex;
    position: absolute;
    top: -1.25rem;
    right: 0;
    translate: 0 -50%;

    @media (width >= 52.125rem){
      top: 50%;
      right: auto;
      left: var(--home-bench-end);
      padding-left: var(--spacing-sm);
    }
  }

  .home-bench-label {
    align-items: baseline;
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
    background-color: var(--home-ground);
    padding-inline: .25rem;
    display: inline-flex;
  }

  .home-bench-value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--home-text);
  }

  .home-bench-ratio {
    font-family: var(--home-mono);
    font-variant-numeric: tabular-nums;
    color: var(--home-text-faint);
    opacity: 0;
    font-size: .625rem;
    translate: 0 3px;
  }

  .home-bench-row[data-settled] .home-bench-ratio {
    opacity: 1;
    translate: none;

    @media (prefers-reduced-motion: no-preference){
      transition: opacity .24s var(--home-ease), translate .24s var(--home-ease);
    }
  }

  .home-bench-row-signal .home-bench-brand {
    color: var(--home-text);
  }

  .home-bench-row-signal .home-bench-bar {
    background: linear-gradient(180deg, transparent 12%, color-mix(in oklab, var(--silk-sheen) 85%, transparent) 34%, transparent 58%),
      linear-gradient(90deg, var(--silk-shadow), var(--silk-body) 28%, var(--home-bench-paint-silk-fold) 64%, var(--silk-body) 86%, var(--silk-shadow));
    box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--silk-shadow) 70%, transparent), 0 2px 6px -3px color-mix(in oklab, var(--silk-shadow) 80%, transparent);

    @media (width < 40rem) {
      background: linear-gradient(180deg, transparent 12%, color-mix(in oklab, var(--silk-sheen) 85%, transparent) 34%, transparent 58%),
        linear-gradient(90deg, var(--silk-body), var(--home-bench-paint-silk-fold) 70%, var(--silk-body));
      box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--silk-shadow) 70%, transparent);
    }
  }

  .home-bench-axis {
    margin-top: var(--spacing-sm);
    margin-left: var(--home-bench-brand-width);
    padding-top: var(--spacing-xs);
    background: linear-gradient(var(--home-rule), var(--home-rule)) 0 0 / 100% 1px no-repeat,
      linear-gradient(90deg, var(--home-rule) 0 1px, transparent 1px) 0 0 / var(--home-bench-minor, 5%) .375rem repeat-x;
    display: grid;
  }

  .home-bench-tick {
    font-family: var(--home-mono);
    font-variant-numeric: tabular-nums;
    color: var(--home-text-faint);
    font-size: .625rem;
  }

  .home-bench-axis[data-switched] .home-bench-tick {
    @media (prefers-reduced-motion: no-preference){
      animation: home-bench-tick-in .5s var(--home-ease) .45s backwards;
    }
  }

  @media (forced-colors: active) {
    .home-bench-chart {
      --home-bench-paint-rule: GrayText;
      --home-bench-paint-tick: CanvasText;
      --home-bench-paint-hatch: GrayText;
      --home-bench-paint-silk-shadow: Highlight;
      --home-bench-paint-silk-body: Highlight;
      --home-bench-paint-silk-fold: Highlight;
      --home-bench-paint-silk-sheen: Highlight;
    }

    .home-bench-row[data-brand] {
      --home-bench-color: CanvasText;
      --home-bench-color-end: CanvasText;
    }

    .home-bench-bar {
      box-shadow: none;
      background: canvastext;
    }

    .home-bench-row-signal .home-bench-bar {
      box-shadow: none;
      background: highlight;
    }
  }

  @media print {
    .home-bench-canvas {
      display: none;
    }

    :is(.home-bench-row, .home-bench-readout) {
      transform: none !important;
    }

    :is(.home-bench-bar, .home-bench-gridline, .home-bench-axis) {
      print-color-adjust: exact;
    }
  }

  @media (forced-colors: active) {
    .home-bench-bar {
      forced-color-adjust: none;
    }
  }
}

@keyframes home-bench-tick-in {
  from {
    opacity: 0;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--color-line-subtle:light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .06))}:root,:host{--font-weight-medium:500;--font-size-md:1rem;--radius-sm:.25rem;--spacing-2xs:.375rem;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem}: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))}}@keyframes fade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}@keyframes float {
  0% {
    transform: none;
  }

  50% {
    transform: translateY(-1.25rem);
  }

  to {
    transform: none;
  }
}@keyframes heart {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
}@keyframes jump {
  0%, to {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }
}@keyframes ping {
  75%, to {
    transform: scale(2);
    opacity: 0;
  }
}@keyframes pulse {
  0% {
    transform: none;
  }

  50% {
    transform: scale(1.05);
  }

  to {
    transform: none;
  }
}@keyframes rotate {
  0% {
    transform: rotate(-360deg);
  }

  to {
    transform: none;
  }
}@keyframes shake {
  0% {
    transform: none;
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: none;
  }
}@keyframes zoom {
  0% {
    transform: scale(0);
  }

  to {
    transform: none;
  }
}@keyframes slide-to-right {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(100%);
    }
  }@layer components {
  .home-segmented-control {
    --home-segment-pad: 3px;
    isolation: isolate;
    width: fit-content;
    padding: var(--home-segment-pad);
    background-color: color-mix(in oklab, var(--home-text) 4%, var(--home-ground));
    box-shadow: inset 0 0 0 1px var(--home-hairline);
    border-radius: 3.40282e38px;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .home-segmented-control-thumb {
    top: var(--home-segment-pad);
    bottom: var(--home-segment-pad);
    z-index: -1;
    width: var(--home-segment-width, 0);
    background-color: light-dark(var(--home-sheet), color-mix(in oklab, var(--home-sheet) 86%, white));
    box-shadow: 0 0 0 1px var(--home-hairline),
      0 1px 2px light-dark(oklch(18% 0 none / .06), oklch(0% 0 none / .4)),
      calc(var(--cast-x, 1px) * .6) calc(var(--cast-y, 4px) * .6) 8px -3px light-dark(oklch(18% 0 none / .1), oklch(0% 0 none / .5)),
      inset 0 1px 0 var(--home-highlight);
    translate: var(--home-segment-x, 0) 0;
    opacity: 0;
    border-radius: 3.40282e38px;
    position: absolute;
    left: 0;

    &:before {
      border-radius: inherit;
      background: linear-gradient(var(--lit-angle, -20deg), light-dark(oklch(20% 0 none / .06), #ffffff0d), transparent 35%, transparent 62%, light-dark(#fff, #ffffff38));
      pointer-events: none;
      content: "";
      padding: 1px;
      position: absolute;
      inset: 0;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }

    .home-segmented-control[data-ready] & {
      opacity: 1;
      transition: translate var(--home-base) var(--home-ease), width var(--home-base) var(--home-ease);
    }
  }

  .home-segmented-control-option {
    min-width: 3.75rem;
    height: 1.875rem;
    font-size: .8125rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -.005em;
    white-space: nowrap;
    color: var(--home-text-quiet);
    cursor: pointer;
    transition: color var(--home-quick) var(--home-ease);
    background-color: #0000;
    border: 0;
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    padding-inline: .875rem;
    line-height: 1;
    display: inline-flex;

    &:hover, &[aria-pressed="true"] {
      color: var(--home-text);
    }

    .home-segmented-control:not([data-ready]) &[aria-pressed="true"] {
      background-color: var(--home-sheet);
      box-shadow: 0 0 0 1px var(--home-hairline);
    }

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

  @media (prefers-reduced-motion: reduce){
    .home-segmented-control-thumb {
      transition: none !important;
    }
  }
}

@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}: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-cta-section {
    padding-block: 0;
  }

  .home-cta {
    --home-cta-field-height: clamp(15rem, 9rem + 12vw, 22rem);
    isolation: isolate;
    text-align: center;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-top: clamp(5rem, 3rem + 6vw, 9rem);
    display: grid;
    position: relative;

    &:before {
      inset: 0 calc(-1 * var(--home-gutter));
      z-index: -1;
      background: radial-gradient(44rem 30rem at var(--cta-lamp-x, 42%) var(--cta-lamp-y, 46%), light-dark(#0000, oklch(60% .1 75 / .065)), light-dark(#0000, oklch(60% .1 75 / .03)) 35%, light-dark(#0000, oklch(60% .1 75 / .008)) 60%, transparent 80%);
      pointer-events: none;
      content: "";
      position: absolute;
      mask-image: radial-gradient(60% 58% at 50% 48%, #000 35%, #0000);
    }
  }

  .home-cta-title {
    z-index: 1;
    max-width: 100%;
    font-size: clamp(2.75rem, 1.25rem + 4.4vw, 5.5rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.05em;
    color: var(--home-text);
    text-wrap: balance;
    justify-items: center;
    gap: clamp(1rem, .5rem + 1vw, 1.5rem);
    margin: 0;
    line-height: 1.04;
    display: grid;
    position: relative;

    @media (width < 24rem) {
      font-size: clamp(2.375rem, 11.3vw, 2.75rem);
    }
  }

  .home-cta-title-start {
    letter-spacing: -.02em;
    color: var(--home-text-quiet);
    font-size: clamp(1.0625rem, .875rem + .8vw, 1.5rem);
    line-height: 1.5;
    display: block;
  }

  .home-cta-title-finish {
    overflow-wrap: anywhere;
    text-wrap: wrap;
    min-width: 0;
    max-width: 8.5em;
    display: block;

    &:lang(zh) {
      font-feature-settings: "halt";
      line-height: 1.16;
    }
  }

  .home-cta-actions {
    z-index: 1;
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
    display: flex;
    position: relative;

    & .home-cta-start, & .home-command {
      box-sizing: border-box;
      border-radius: 1.625rem;
      min-width: 0;
      height: auto;
      min-height: 3.25rem;
    }

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

  .home-cta-title-finish, .home-cta-actions > * {
    --lit-x: 30%;
    --lit-y: -160%;
    --lit-angle: -20deg;
    --cast-x: 1px;
    --cast-y: 4px;
    --lit-near: 0;
  }

  .home-cta-actions .home-cta-start {
    --stone-mirror: light-dark(oklch(84% .1 82 / .5), oklch(74% .12 78 / .55));
    padding: var(--spacing-sm) 1.5rem;
    font-weight: var(--font-weight-medium);
    text-shadow: 0 -1px light-dark(#00000080, #ffffffb3);

    & > svg {
      transition: translate var(--home-base) var(--home-ease);
    }

    &:is(:hover, :focus-visible) {
      box-shadow: inset 0 1px 0 var(--stone-lip),
        inset 0 -12px 18px -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) 32px -10px var(--stone-cast);

      & > svg {
        translate: 3px;
      }
    }

    &: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);
    }

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

  .home-cta .home-command {
    --glass-fill: light-dark(#ffffff80, #ffffff0a);
    --glass-top: light-dark(#ffffffa6, #ffffff0f);
    --glass-lip: light-dark(#fff, #ffffff29);
    --glass-pool: light-dark(oklch(93% .06 85 / .55), oklch(75% .11 78 / .12));
    --glass-rim: light-dark(#fff, #ffffff80);
    --glass-rim-far: light-dark(oklch(78% .12 78 / .55), oklch(78% .12 80 / .4));
    --glass-contour: light-dark(oklch(35% .03 70 / .11), #ffffff0d);
    --glass-cast: light-dark(oklch(40% .05 70 / .16), oklch(3% .01 60 / .6));
    isolation: isolate;
    color: var(--home-text);
    background-color: var(--glass-fill);
    background-image: linear-gradient(180deg, var(--glass-top), transparent 50%);
    box-shadow: inset 0 0 0 1px var(--glass-contour),
      inset 0 1px 1px var(--glass-lip),
      inset 0 -10px 16px -12px var(--glass-pool),
      0 1px 2px light-dark(oklch(40% .06 70 / .08), #0000004d),
      var(--cast-x) var(--cast-y) 16px -6px var(--glass-cast);
    backdrop-filter: blur(6px) saturate(1.35) brightness(1.04);
    transition: background-color var(--home-quick) var(--home-ease);
    border: 1px solid #0000;
    flex: auto;
    padding: .1875rem .1875rem .1875rem 1.125rem;
    font-size: .875rem;
    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);
    }

    &:focus-within {
      --glass-fill: light-dark(#ffffff9e, #ffffff12);
    }

    & .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(#0000000a, #ffffff12);
      }

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

    @media (width < 40rem) {
      width: 100%;
    }

    @media (width < 24rem) {
      gap: var(--spacing-xs);
      padding-left: var(--spacing-sm);
      font-size: .8125rem;
    }

    @media (width < 22rem) {
      font-size: .75rem;
    }
  }

  .home-cta-field {
    width: calc(100% + 2 * var(--home-gutter));
    height: var(--home-cta-field-height);
    pointer-events: none;
    margin-top: clamp(1.5rem, 1rem + 1vw, 2rem);
    position: relative;

    &:before {
      background: radial-gradient(circle at 35% 30%, var(--silk-sheen), var(--silk-body) 55%, var(--silk-shadow));
      width: 4px;
      height: 4px;
      box-shadow: 0 0 12px 3px var(--home-signal-glow);
      content: "";
      border-radius: 50%;
      position: absolute;
      top: 9%;
      left: 50%;
      translate: -50% -50%;
    }

    &:after {
      background: linear-gradient(var(--home-signal-glow), transparent 90%);
      opacity: .65;
      width: 1px;
      transition: opacity var(--home-base) var(--home-ease);
      content: "";
      position: absolute;
      inset: 9% auto 0 50%;
    }

    &:has(canvas[data-ready]):after {
      opacity: 0;
    }
  }

  .home-cta-canvas {
    width: 100%;
    height: 100%;
    color: light-dark(color-mix(in oklab, var(--silk-shadow) 80%, var(--stone-mid)), var(--silk-body));
    border-color: light-dark(var(--stone-mid), var(--stone-top));
    outline-color: light-dark(var(--silk-shadow), var(--silk-sheen));
    column-rule-color: light-dark(#000, #fff);
    display: block;
    mask-image: linear-gradient(#0000 9%, #000 22% 60%, #0000), linear-gradient(90deg, #0000, #000 15% 85%, #0000);
    mask-composite: intersect;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-cta-field:after, .home-cta-actions :is(.home-command, .home-command-copy) {
      transition-duration: 0s;
    }

    .home-cta-actions .home-cta-start > svg {
      transition: none;
      translate: none !important;
    }
  }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .home-cta .home-command {
      --glass-fill: light-dark(oklch(98.5% .012 85), oklch(20% .01 70));
      backdrop-filter: none;
    }
  }

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

    .home-cta {
      padding-bottom: clamp(5rem, 3rem + 6vw, 9rem);
    }

    .home-cta-actions :is(.home-cta-start, .home-command) {
      text-shadow: none;
    }

    .home-cta .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;
      }
    }
  }
}

@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;--spacing-xs:.5rem;--spacing-sm:.75rem}: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-command {
    align-items: center;
    gap: var(--spacing-sm);
    box-sizing: border-box;
    max-width: 100%;
    height: 2.75rem;
    padding: 0 .25rem 0 var(--spacing-md);
    border-radius: var(--home-radius-control);
    font-family: var(--home-mono);
    color: var(--home-text);
    font-size: .875rem;
    display: inline-flex;
  }

  .home-command > code {
    text-align: left;
    flex: auto;
  }

  .home-command-copy {
    border-radius: calc(var(--home-radius-control) - .25rem);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--home-text-quiet);
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing-smooth), background-color var(--duration-fast) var(--easing-smooth);
    flex: none;
    place-content: center;
    display: grid;

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

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

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--spacing-sm:.75rem;--spacing-md:1rem;--duration-fast:.15s;--easing-smooth:cubic-bezier(.4, 0, .2, 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))}}@property --delivery-code-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@layer components {
  .home-delivery {
    --delivery-static-on: 0;
    --delivery-progressive-on: 0;
    --delivery-runtime-on: 0;
    --delivery-static-visibility: hidden;
    --delivery-progressive-visibility: hidden;
    --delivery-runtime-visibility: hidden;
    --delivery-artwork-light: block;
    --delivery-artwork-dark: none;
  }

  .dark .home-delivery {
    --delivery-artwork-light: none;
    --delivery-artwork-dark: block;
  }

  .home-delivery:has(#home-delivery-static:checked) {
    --delivery-static-on: 1;
    --delivery-static-visibility: visible;
  }

  .home-delivery:has(#home-delivery-progressive:checked) {
    --delivery-progressive-on: 1;
    --delivery-progressive-visibility: visible;
  }

  .home-delivery:has(#home-delivery-runtime:checked) {
    --delivery-runtime-on: 1;
    --delivery-runtime-visibility: visible;
  }

  .home-delivery-figure {
    container: home-delivery / inline-size;
  }

  .home-delivery-stage:not([data-playing]) {
    --delivery-reveal-rate: 1000;
    --delivery-variant-duration: 0s;
  }

  .home-delivery-stage:not([data-playing]) .home-delivery-variant {
    transition: none;
  }

  .home-delivery-layout {
    --delivery-row: 1.375rem;
    --delivery-code: .75rem;
    --delivery-html-height: 22rem;
    --delivery-css-height: 14rem;
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .home-delivery-drawing {
    grid-row: 3;
    margin-top: 2.25rem;
    position: relative;
  }

  .home-delivery-workbench {
    scroll-margin-top: 4.5rem;
    position: relative;
    overflow: hidden;
  }

  .home-delivery-board {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .home-delivery-code-column {
    min-width: 0;
    display: grid;
  }

  .home-delivery-pane {
    grid-template-rows: 3rem minmax(0, 1fr) 2.75rem;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    display: grid;
    position: relative;
    container: delivery-pane / inline-size;
  }

  .home-delivery-template {
    grid-template-rows: 3rem var(--delivery-html-height) 2.75rem;
  }

  .home-delivery-css {
    grid-template-rows: 3rem var(--delivery-css-height) 2.75rem;
    border-top: 1px solid var(--home-hairline);
  }

  .home-delivery-browser {
    min-height: 0;
  }

  .home-delivery-pane-bar {
    gap: .5rem;
    padding-inline: .875rem;
  }

  .home-delivery-pane-bar .home-editor-tab {
    padding-inline: .75rem;
  }

  .home-delivery-pane-bar .home-delivery-pane-status {
    align-items: center;
    font-size: .625rem;
    display: inline-flex;
  }

  .home-delivery-filenames, .home-delivery-css-origin {
    display: grid;
  }

  .home-delivery-live-dot {
    align-items: center;
    gap: .375rem;
    display: inline-flex;
  }

  .home-delivery-live-dot:before {
    background: var(--home-ok);
    content: "";
    border-radius: 50%;
    width: 4px;
    height: 4px;
  }

  .home-delivery-code-stack {
    min-width: 0;
    display: grid;
    position: relative;
    overflow: hidden;
  }

  .home-delivery-code-stack > .home-delivery-variant {
    min-height: 0;
  }

  .home-delivery-code-stack:after {
    z-index: 1;
    background: linear-gradient(to right, transparent, var(--home-sheet));
    pointer-events: none;
    content: "";
    width: 1rem;
    position: absolute;
    inset: 0 0 0 auto;
  }

  .home-delivery-variant {
    visibility: hidden;
    opacity: 0;
    min-width: 0;
    transition: opacity var(--home-quick) var(--home-ease), visibility 0s linear var(--home-quick);
    grid-area: 1 / 1;
    position: relative;
  }

  .home-delivery:has(#home-delivery-static:checked) .home-delivery-variant[data-mode="static"], .home-delivery:has(#home-delivery-progressive:checked) .home-delivery-variant[data-mode="progressive"], .home-delivery:has(#home-delivery-runtime:checked) .home-delivery-variant[data-mode="runtime"] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .home-delivery-code-scroll {
    height: 100%;
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--delivery-code-fade)), transparent);
    scroll-margin-block: 4.5rem 1rem;
    overflow: hidden;
  }

  @supports (animation-timeline: scroll()) {
    .home-delivery-code-scroll {
      animation-name: home-delivery-code-fade;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(self);
    }
  }

  @keyframes home-delivery-code-fade { from { --delivery-code-fade: 1.75rem; } to { --delivery-code-fade: 0px; } }

  .home-delivery-code-scroll:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: -3px;
    mask-image: none;
  }

  .home-delivery-code {
    width: max-content;
    min-width: 100%;
    font-family: var(--home-mono);
    font-size: var(--delivery-code);
    font-variant-ligatures: none;
    line-height: var(--delivery-row);
    color: var(--home-text-body);
    padding: .875rem 1rem .875rem 0;
  }

  .home-delivery-code-row {
    min-height: var(--delivery-row);
    grid-template-columns: 2.5rem 1fr;
    display: grid;
    position: relative;
  }

  .home-delivery-line-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--home-text-faint) 75%, transparent);
    user-select: none;
    padding-right: .75rem;
    font-size: .625rem;
  }

  .home-delivery-line-content {
    white-space: pre;
    opacity: var(--on);
    padding-inline: .25rem .75rem;
    position: relative;
  }

  .home-delivery-stage:not([data-playing]) .home-delivery-line-content {
    opacity: 1;
  }

  .home-delivery-code-comment {
    color: var(--home-text-faint);
  }

  .home-delivery-code-tag {
    color: var(--home-code-tag);
  }

  .home-delivery-code-punct {
    color: var(--home-text-faint);
  }

  .home-delivery-code-attr, .home-delivery-code-at {
    color: var(--home-code-attr);
  }

  .home-delivery-code-string {
    color: var(--home-code-string);
  }

  .home-delivery-code-selector {
    color: var(--home-code-selector);
  }

  .home-delivery-code-property {
    color: var(--home-code-property);
  }

  .home-delivery-code-value {
    color: var(--home-code-string);
  }

  .home-delivery-token, .home-delivery-code-selector, .home-delivery-code-property, .home-delivery-code-value {
    box-decoration-break: clone;
    border-radius: .1875rem;
  }

  .home-delivery-token[data-hot] {
    background: color-mix(in oklab, var(--home-signal) 17%, transparent);
  }

  .home-delivery-rule-row :is(.home-delivery-code-selector, .home-delivery-code-property, .home-delivery-code-value) {
    background: color-mix(in oklab, var(--home-signal) calc(var(--flash) * 18%), transparent);
  }

  .home-delivery-template-new {
    width: calc(var(--added) * 12ch);
    vertical-align: top;
    color: var(--home-code-string);
    display: inline-block;
    position: relative;
    overflow: clip;
  }

  .home-delivery-stage:not([data-playing]) .home-delivery-template-new[aria-hidden="false"] {
    width: 12ch;
  }

  .home-delivery-edit-row .home-delivery-template-new .home-delivery-token {
    background: color-mix(in oklab, var(--home-signal) calc(clamp(0, min(var(--home-delivery-t) - 3.04, 3.9 - var(--home-delivery-t)) * 8, 1) * 14%), transparent);
  }

  .home-delivery-caret {
    border-left: 1px solid var(--home-text);
    height: 1rem;
    opacity: clamp(0, min(var(--home-delivery-t) - 3.04, 3.25 - var(--home-delivery-t)) * 10, 1);
    display: block;
    position: absolute;
    top: .1875rem;
    right: 0;
  }

  [data-css-reference] {
    text-underline-offset: 3px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--home-rule-strong);
  }

  .home-delivery-code-reference {
    font: inherit;
    line-height: inherit;
    vertical-align: baseline;
    white-space: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .home-delivery-code-reference:hover:enabled {
    text-decoration-color: var(--home-signal);
    text-decoration-style: solid;
  }

  .home-delivery-code-reference:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: 2px;
  }

  .home-delivery-code-reference:disabled {
    cursor: text;
  }

  .home-delivery-stage[data-inspecting] [data-css-reference] {
    background: color-mix(in oklab, var(--home-signal) 15%, transparent);
    text-decoration-color: var(--home-signal);
  }

  .home-delivery-stage[data-inspecting] .home-delivery-css .home-editor-tab {
    --home-editor-tab-line: var(--home-signal);
  }

  .home-delivery-template-action, .home-delivery-pane-footer {
    border-top: 1px solid var(--home-hairline);
    min-width: 0;
    font-size: var(--home-label);
    color: var(--home-text-faint);
    background: color-mix(in oklab, var(--home-ground) 45%, var(--home-sheet));
    align-items: center;
    padding-inline: .875rem;
    display: grid;
  }

  .home-delivery-template-action {
    padding: 0;
  }

  .home-delivery-add {
    width: 100%;
    min-height: 2.75rem;
    color: var(--home-text-quiet);
    cursor: pointer;
    background: none;
    border: 0;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    font-size: .6875rem;
    display: flex;
  }

  .home-delivery-add code {
    font-family: var(--home-mono);
    color: var(--home-text);
    margin-left: auto;
    font-size: .625rem;
  }

  .home-delivery-add:hover:enabled {
    background: color-mix(in oklab, var(--home-signal) 7%, transparent);
  }

  .home-delivery-add:focus-visible {
    z-index: 5;
    outline: 2px solid var(--home-ink);
    outline-offset: -3px;
    position: relative;
  }

  .home-delivery-add:disabled {
    cursor: default;
  }

  .home-delivery-css-footer {
    justify-content: space-between;
    display: flex;
  }

  .home-delivery-footer-receipts {
    min-width: 0;
    display: grid;
  }

  .home-delivery-css-receipt, .home-delivery-applied {
    opacity: var(--on);
    align-items: center;
    gap: .375rem;
    display: inline-flex;
  }

  .home-delivery-file-reference {
    min-width: 0;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  .home-delivery-file-reference:hover:enabled {
    text-underline-offset: 3px;
    text-decoration: underline;
  }

  .home-delivery-file-reference:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: 4px;
  }

  .home-delivery-file-reference:disabled {
    cursor: default;
  }

  .home-delivery-inspect {
    border-radius: var(--home-radius-chip);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--home-text-faint);
    cursor: pointer;
    background: none;
    border: 0;
    flex: none;
    place-items: center;
    padding: 0;
    display: grid;
  }

  .home-delivery-inspect:hover:enabled {
    color: var(--home-text);
    background: var(--home-well);
  }

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

  .home-delivery-inspect:disabled {
    cursor: default;
  }

  .home-delivery-process {
    z-index: 3;
    background: color-mix(in oklab, var(--home-ground) 70%, var(--home-sheet));
    border-block: 1px solid var(--home-hairline);
    place-items: center;
    min-height: 6rem;
    display: grid;
    position: relative;
  }

  .home-delivery-process > .home-delivery-variant {
    width: 100%;
  }

  .home-delivery-flow-label {
    font-family: var(--home-mono);
    color: var(--home-text-faint);
    font-size: .625rem;
    position: absolute;
    top: calc(50% - 1rem);
  }

  .home-delivery-flow-label[data-flow-label="input"] {
    left: 1.25rem;
  }

  .home-delivery-flow-label[data-flow-label="output"] {
    right: 1.25rem;
  }

  .home-delivery-engine-group {
    min-height: 6rem;
    display: grid;
    position: relative;
  }

  .home-delivery-engine {
    opacity: var(--phase);
    grid-area: 1 / 1;
    align-content: center;
    justify-items: center;
    gap: .5rem;
    display: grid;
    position: relative;
  }

  .home-delivery-engine-core {
    box-sizing: border-box;
    border-radius: .875rem;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    position: relative;
  }

  .home-delivery-engine-core.home-stone {
    --stone-mirror: color-mix(in oklab, var(--stone-gold) calc(28% + var(--glow) * 40%), transparent);
    box-shadow: var(--stone-shadow), 0 0 0 calc(var(--glow) * 4px) var(--home-signal-glow);
  }

  .home-delivery-engine-core:before {
    border: 1px solid color-mix(in oklab, var(--stone-text) 10%, transparent);
    content: "";
    border-radius: .625rem;
    position: absolute;
    inset: 3px;
  }

  .home-delivery-engine-core img {
    z-index: 1;
    width: 30px;
    height: auto;
    opacity: calc(.75 + var(--glow) * .25);
    filter: grayscale(calc(1 - var(--glow)));
    position: relative;
  }

  .dark .home-delivery-engine-core img {
    opacity: 1;
    filter: grayscale(calc(1 - var(--glow))) brightness(calc(.5 + var(--glow) * .5));
  }

  .home-delivery-engine-core i {
    background: color-mix(in oklab, var(--home-signal) calc(var(--glow) * 100%), var(--home-rule));
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 3px var(--home-ground);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: -3px;
  }

  .home-delivery-engine-core i:last-child {
    left: auto;
    right: -3px;
  }

  .home-delivery-engine-label {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    white-space: nowrap;
    color: var(--home-text-quiet);
    line-height: 1.2;
  }

  .home-delivery-engine-state {
    --delivery-reveal-rate: 1000;
    font-family: var(--home-mono);
    color: var(--home-text-faint);
    font-size: .625rem;
    line-height: 1.2;
    display: grid;
    position: absolute;
    top: calc(50% + 2.25rem);
    left: 50%;
    translate: -50%;
  }

  .home-delivery-engine-state code {
    opacity: var(--on);
    grid-area: 1 / 1;
  }

  .home-delivery-engine[data-deferred] .home-delivery-engine-core {
    opacity: calc(.55 + var(--ready) * .45);
  }

  .home-delivery-preview-host {
    contain: inline-size;
    scrollbar-width: thin;
    background: var(--home-ground);
    min-height: 0;
    overflow: auto;
  }

  .home-delivery-arrivals {
    pointer-events: none;
    display: grid;
    position: absolute;
    inset: 3rem 0 2.75rem;
  }

  .home-delivery-arrivals > .home-delivery-variant {
    width: 100%;
    height: 100%;
  }

  .home-delivery-arrivals [data-carry] {
    position: absolute;
    inset: 0;
  }

  .home-delivery-routes {
    z-index: 4;
    width: 100%;
    height: 100%;
    color: var(--home-rule-strong);
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: visible;
  }

  .home-delivery-routes > path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1px;
    marker-end: url("#home-delivery-arrow");
    opacity: clamp(0, var(--home-delivery-t) * 10, 1);
  }

  .home-delivery-routes > [data-route="paint"] {
    opacity: clamp(0, (var(--home-delivery-t) - 1.68) * 10, 1);
  }

  .home-delivery-flights {
    z-index: 6;
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .home-delivery-flights > [data-flight="class"], .home-delivery-flights > [data-flight="packet"] {
    border: 1px solid var(--home-hairline);
    border-radius: var(--home-radius-chip);
    font-family: var(--home-mono);
    white-space: nowrap;
    color: var(--home-text);
    background: var(--home-float);
    box-shadow: var(--home-elevation-2);
    will-change: transform, opacity;
    padding: .25rem .5rem;
    font-size: .625rem;
    line-height: 1.4;
    position: absolute;
    top: 0;
    left: 0;
  }

  .home-delivery-flights > [data-flight="class"] {
    border-color: color-mix(in oklab, var(--home-signal) 55%, var(--home-hairline));
  }

  .home-delivery-flights > [data-flight="rule"] {
    background: var(--home-signal);
    width: 4px;
    height: 4px;
    box-shadow: 0 0 0 3px var(--home-signal-glow);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .home-delivery-flights > [data-flight="ripple"] {
    box-shadow: 0 0 0 1px var(--home-signal), 0 0 .75rem var(--home-signal-glow);
    border-radius: 1rem;
    position: absolute;
  }

  @container home-delivery (width >= 52rem) {
    .home-delivery-layout {
      --delivery-css-height: 14.5rem;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      column-gap: 3rem;
    }

    .home-delivery-drawing {
      grid-area: 1 / 1 / auto / -1;
      margin: 0;
    }

    .home-delivery-board {
      grid-template-columns: minmax(0, 1.08fr) 6.5rem minmax(0, 1fr);
    }

    .home-delivery-process {
      border-block: 0;
      border-inline: 1px solid var(--home-hairline);
    }

    .home-delivery-flow-label {
      display: none;
    }

    .home-delivery-engine-group {
      min-height: 8rem;
    }

    .home-delivery-engine {
      gap: .75rem;
    }

    .home-delivery-engine-core {
      border-radius: 1rem;
      width: 3.25rem;
      height: 3.25rem;
    }

    .home-delivery-engine-core:before {
      border-radius: .75rem;
    }

    .home-delivery-engine-state {
      top: calc(50% + 2.75rem);
    }

    .home-delivery-browser {
      min-height: 0;
    }
  }

  @container home-delivery (width >= 72rem) {
    .home-delivery-layout {
      --delivery-code: .8125rem;
    }
  }

  @container delivery-pane (width < 26rem) {
    .home-delivery-class-attribute {
      padding-left: 2ch;
      display: block;
    }
  }

  @container delivery-pane (width < 20rem) {
    .home-delivery-pane-bar {
      padding-inline: .5rem;
    }

    .home-delivery-pane-bar .home-editor-dots, .home-delivery-pane-bar .home-delivery-pane-status {
      display: none;
    }

    .home-delivery-pane-bar .home-editor-tab {
      max-width: 100%;
      padding-inline: .5rem;
    }

    .home-delivery-filenames > .home-delivery-variant {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-delivery-variant, .home-delivery-add, .home-delivery-moment {
      transition: none;
    }
  }

  .home-delivery-controls {
    display: contents;
  }

  @container home-delivery (width >= 52rem) {
    .home-delivery-controls {
      grid-area: 2 / 1 / auto / -1;
      grid-template-columns: subgrid;
      align-items: start;
      row-gap: 2.5rem;
      margin-top: 3.5rem;
      display: grid;
    }
  }

  .home-delivery-switch.home-segmented-control {
    grid-area: 1 / 1 / auto / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    display: grid;
  }

  .home-delivery-switch > label {
    min-width: 0;
    padding-inline: clamp(.5rem, 2cqw, .875rem);
    position: relative;
  }

  .home-delivery-switch input {
    top: 50%;
    left: 50%;
  }

  @container home-delivery (width >= 52rem) {
    .home-delivery-switch.home-segmented-control {
      grid-area: 1 / 1;
      justify-self: start;
      margin-top: .25rem;
      display: inline-flex;
    }
  }

  .home-delivery:has(#home-delivery-static:checked) .home-delivery-switch [data-mode="static"], .home-delivery:has(#home-delivery-progressive:checked) .home-delivery-switch [data-mode="progressive"], .home-delivery:has(#home-delivery-runtime:checked) .home-delivery-switch [data-mode="runtime"] {
    color: var(--home-text);
    background-color: var(--home-sheet);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-contact);
  }

  .home-delivery-switch > label:focus-within {
    outline: 2px solid var(--home-ink);
    outline-offset: 1px;
  }

  .home-delivery-player {
    grid-area: 2 / 1 / auto / -1;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: end;
    gap: .5rem 1rem;
    margin-top: 1.5rem;
    display: grid;
  }

  @container home-delivery (width >= 52rem) {
    .home-delivery-player {
      grid-area: 1 / 2 / auto / -1;
      margin-top: 0;
    }
  }

  .home-delivery-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: .5rem;
    display: grid;
  }

  @container home-delivery (width >= 52rem) {
    .home-delivery-timeline {
      column-gap: .75rem;
    }
  }

  .home-delivery-moment {
    border-radius: var(--home-radius-chip);
    min-width: 0;
    min-height: 2.75rem;
    font-size: var(--home-caption);
    text-align: left;
    white-space: nowrap;
    color: var(--home-text-faint);
    cursor: pointer;
    transition: color var(--home-base) var(--home-ease);
    background-color: #0000;
    border: 0;
    gap: .625rem;
    padding: .25rem 0 .75rem;
    line-height: 1.2;
    display: grid;

    &:hover, &[aria-pressed="true"] {
      color: var(--home-text);
    }

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

    &:disabled {
      cursor: default;
    }
  }

  .home-delivery-moment-label {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .home-delivery-moment-track {
    background-color: var(--home-rule);
    height: 1px;
    position: relative;
  }

  .home-delivery-moment-fill {
    background-color: var(--home-text);
    transform-origin: 0;
    scale: clamp(0, var(--home-delivery-t) - var(--i), 1) 1;
    position: absolute;
    inset: 0;
  }

  .home-delivery-stage[data-playing] .home-delivery-moment[aria-pressed="true"] .home-delivery-moment-fill {
    background-color: var(--home-signal);
  }

  .home-delivery-explanations {
    grid-column: 2;
    min-width: 0;
    display: grid;
  }

  .home-delivery-explanation {
    font-size: var(--home-caption);
    color: var(--home-text-quiet);
    text-wrap: pretty;
    margin: 0;
    line-height: 1.6;
    display: grid;
  }

  .home-delivery-explanation > span {
    visibility: hidden;
    grid-area: 1 / 1;
  }

  .home-delivery-stage[data-moment="0"] [data-explanation-moment="0"], .home-delivery-stage[data-moment="1"] [data-explanation-moment="1"], .home-delivery-stage[data-moment="2"] [data-explanation-moment="2"], .home-delivery-stage[data-moment="3"] [data-explanation-moment="3"] {
    visibility: inherit;
  }

  .home-delivery-moment[aria-pressed="true"] .home-delivery-moment-track:after {
    top: -3px;
    left: calc(clamp(0, var(--home-delivery-t) - var(--i), 1) * 100% - 3.5px);
    background-color: var(--home-text);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px var(--home-ground);
    content: "";
    border-radius: 3.40282e38px;
    position: absolute;
  }

  .home-delivery-play {
    box-sizing: border-box;
    border-radius: 3.40282e38px;
    place-content: center;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;

    &[hidden] {
      visibility: hidden;
      display: grid;
    }

    &:disabled {
      cursor: default;
    }

    & svg {
      grid-area: 1 / 1;
    }

    &:not([data-playback="playing"]) [data-icon="playing"], &:not([data-playback="paused"]) [data-icon="paused"], &:not([data-playback="ended"]) [data-icon="ended"] {
      visibility: hidden;
    }
  }

  @container home-delivery (width < 52rem) {
    .home-delivery-player {
      grid-template-columns: minmax(0, 1fr) 2.75rem;
      align-items: center;
    }

    .home-delivery-timeline {
      grid-area: 1 / 1 / auto / -1;
    }

    .home-delivery-play {
      grid-area: 2 / 2;
    }

    .home-delivery-explanations {
      grid-area: 2 / 1;
    }
  }

  @container home-delivery (width < 20rem) {
    .home-delivery-timeline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .25rem .75rem;
    }
  }

  @container home-delivery (width < 14rem) {
    .home-delivery-switch.home-segmented-control {
      border-radius: var(--home-radius-control);
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @container home-delivery (width < 11rem) {
    .home-delivery-timeline {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}: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-editor-bar {
    align-items: flex-end;
    gap: var(--spacing-md);
    background-color: color-mix(in oklab, var(--home-ground) 62%, var(--home-sheet));
    background-image: linear-gradient(color-mix(in oklab, var(--home-sheet) 55%, transparent), transparent 80%);
    height: 3rem;
    box-shadow: inset 0 1px 0 var(--home-highlight), inset 0 -1px 0 var(--home-hairline);
    padding-inline: clamp(.875rem, 2cqw, 1.5rem);
    display: flex;
  }

  .home-editor-dots {
    align-self: center;
    gap: .4375rem;
    margin-right: .25rem;
    display: flex;

    & > span {
      background: linear-gradient(var(--home-rule), var(--home-rule-strong));
      width: .625rem;
      height: .625rem;
      box-shadow: inset 0 1px 1px var(--home-highlight), 0 1px 0 var(--home-highlight);
      border-radius: 3.40282e38px;
    }
  }

  .home-editor-tab {
    --home-editor-tab-radius: .75rem;
    --home-editor-tab-fill: var(--home-sheet);
    --home-editor-tab-line: var(--home-hairline);
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    height: 2.25rem;
    padding-inline: var(--spacing-md);
    border-radius: var(--home-editor-tab-radius) var(--home-editor-tab-radius) 0 0;
    font-family: var(--home-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text);
    background-color: var(--home-editor-tab-fill);
    box-shadow: inset 1px 0 0 var(--home-editor-tab-line), inset -1px 0 0 var(--home-editor-tab-line), inset 0 1px 0 var(--home-editor-tab-line);
    align-self: flex-end;
    font-size: .75rem;
    line-height: 1;
    display: inline-flex;
    position: relative;

    &:before, &:after {
      width: calc(var(--home-editor-tab-radius) + 1px);
      height: var(--home-editor-tab-radius);
      background-image: radial-gradient(circle var(--home-editor-tab-radius) at var(--home-editor-tab-corner) 0,
          transparent calc(100% - 1.25px),
          var(--home-editor-tab-line) calc(100% - .75px),
          var(--home-editor-tab-line) calc(100% - .25px),
          transparent calc(100% + .25px)),
        radial-gradient(circle var(--home-editor-tab-radius) at var(--home-editor-tab-corner) 0,
          transparent calc(100% - .25px),
          var(--home-editor-tab-fill) calc(100% + .25px));
      pointer-events: none;
      content: "";
      position: absolute;
      bottom: 0;
    }

    &:before {
      --home-editor-tab-corner: left;
      left: calc(-1 * var(--home-editor-tab-radius));
    }

    &:after {
      --home-editor-tab-corner: right;
      right: calc(-1 * var(--home-editor-tab-radius));
    }

    & svg {
      color: var(--home-text-faint);
      flex: none;
    }
  }

  .home-editor-status {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--home-text-faint);
    flex: none;
    align-self: center;
    margin-left: auto;

    @container (width < 26rem) {
      display: none;
    }
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--spacing-xs:.5rem;--spacing-md:1rem}: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))}}@property --home-token-percent {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@layer components {
  .home-ds-row > .home-bento-card {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    display: grid;
  }

  .home-ds-row .home-bento-visual {
    margin-top: 0;
  }

  .home-theme {
    container-type: inline-size;
  }

  .home-theme-slider {
    cursor: ew-resize;
    user-select: none;
    touch-action: pan-y pinch-zoom;
    outline: none;
    place-items: center;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .home-theme-board {
    gap: .75rem;
    width: min(100% - 4rem, 21rem);
    display: grid;

    @container (width < 22rem) {
      width: calc(100% - 3rem);
    }

    @container (width >= 40rem) {
      zoom: 1.16;
    }
  }

  .home-theme-labels {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    color: var(--home-text-faint);
    justify-content: space-between;
    margin: 0;
    line-height: 1;
    display: flex;
  }

  .home-theme-artboard {
    border-radius: var(--home-radius-sheet);
    box-shadow: var(--home-elevation-2);
    display: grid;
    position: relative;
  }

  .home-theme-copy {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .home-theme-copy-light {
    clip-path: inset(0 calc(100% - var(--home-split)) 0 0);
  }

  .home-theme-copy-dark {
    clip-path: inset(0 0 0 var(--home-split));
  }

  .home-theme-screen {
    border-radius: var(--home-radius-sheet);
    position: relative;

    &:after {
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px var(--home-hairline);
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
    }
  }

  .dark .home-theme-copy-dark .home-theme-screen:after {
    box-shadow: inset 0 0 0 1px var(--home-rule-strong), inset 0 1px 0 #ffffff0f;
  }

  .home-theme-divider {
    inset-block: -.75rem;
    left: var(--home-split);
    background-color: var(--home-rule-strong);
    pointer-events: none;
    width: 1px;
    transition: background-color var(--home-quick) var(--home-ease);
    margin-left: -.5px;
    position: absolute;

    .home-theme[data-dragging] &, .home-theme-slider:focus-visible & {
      background-color: var(--home-signal);
    }
  }

  .home-theme-knob.home-stone {
    --home-grip: color-mix(in oklab, var(--stone-text) 58%, transparent);
    top: 50%;
    left: var(--home-split);
    box-sizing: border-box;
    background: linear-gradient(var(--home-grip), var(--home-grip)) calc(50% - 2px) 50% / 1px .875rem no-repeat padding-box,
      linear-gradient(var(--home-grip), var(--home-grip)) calc(50% + 2px) 50% / 1px .875rem no-repeat padding-box,
      var(--stone-face),
      var(--stone-edge);
    width: 1.125rem;
    height: 2.75rem;
    box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--home-ground) 85%, transparent), var(--stone-shadow);
    pointer-events: none;
    transition: scale var(--home-quick) var(--home-ease);
    border-radius: 3.40282e38px;
    margin: -1.375rem 0 0 -.5625rem;
    position: absolute;

    .home-theme-slider:hover &, .home-theme[data-dragging] & {
      scale: 1.08;
    }

    .home-theme[data-dragging] & {
      --stone-mirror: light-dark(oklch(86% .1 82 / .55), oklch(74% .12 78 / .65));
    }

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

  .home-theme-measure {
    height: .875rem;
    font-family: var(--home-mono);
    font-size: var(--home-label);
    font-variant-numeric: tabular-nums;
    color: var(--home-text-faint);
    background: linear-gradient(var(--home-rule-strong), var(--home-rule-strong)) 0 50% / 100% 1px no-repeat,
      linear-gradient(var(--home-rule-strong), var(--home-rule-strong)) 0 0 / 1px 100% no-repeat,
      linear-gradient(var(--home-rule-strong), var(--home-rule-strong)) 100% 0 / 1px 100% no-repeat;
    margin: .25rem 0 0;
    line-height: .875rem;
    position: relative;

    &:before {
      inset-block: 0;
      left: var(--home-split);
      background-color: var(--home-rule-strong);
      width: 1px;
      transition: background-color var(--home-quick) var(--home-ease);
      content: "";
      margin-left: -.5px;
      position: absolute;
    }

    .home-theme[data-dragging] &:before, .home-theme-slider:focus-visible &:before {
      background-color: var(--home-signal);
    }
  }

  .home-theme-measure-label {
    background-color: var(--home-well);
    padding-inline: .3125rem;
    position: absolute;
    top: 0;
    translate: -50%;

    &:empty {
      display: none;
    }
  }

  .home-tokens {
    --home-gutter: 2.75rem;
    height: 28rem;
    container-type: inline-size;

    @media (width < 64rem) {
      height: auto;
    }

    @media (width >= 90rem){
      height: 30rem;
    }
  }

  .home-tokens-code {
    height: 100%;
    position: relative;

    & :is(pre, code) {
      font-size: .875rem;
    }

    & .home-code-window-pre {
      padding: 1.75rem 0;
    }

    & .home-code-window-pre > code {
      width: auto;
      min-width: 0;
    }

    @container (width < 34rem) {
      & :is(pre, code) {
        font-size: var(--home-code);
      }
    }

    @container (width < 30rem) {
      --home-gutter: 2.25rem;

      & :is(pre, code) {
        font-size: .75rem;
      }
    }
  }

  .home-tokens-code .line {
    padding: 0 1.25rem 0 calc(var(--home-gutter) + 1rem + 4ch);
    text-indent: -4ch;
    white-space: pre-wrap;
    line-height: 1.625rem;

    @container (width < 34rem) {
      line-height: 1.375rem;
    }

    &:not(:only-child):before {
      width: var(--home-gutter);
      margin: 0 1rem 0 calc((var(--home-gutter) + 1rem) * -1);
      text-indent: 0;
      color: var(--home-text-faint);
      padding-right: .75rem;
    }
  }

  .home-tokens-code .line[style] {
    --home-token-percent: calc(var(--home-token-share, 0) * 100);
    z-index: 0;
    counter-reset: home-token var(--home-token-percent);
    position: relative;

    &:not(:only-child):before {
      color: var(--home-text-body);
    }

    &:after {
      z-index: -1;
      font-family: var(--home-mono);
      font-size: var(--home-label);
      font-variant-numeric: tabular-nums;
      text-indent: 0;
      color: var(--home-text-faint);
      background-color: color-mix(in oklab, var(--home-signal) calc(var(--home-token-share, 0) * 30%), transparent);
      transition: background-color var(--home-quick) linear;
      pointer-events: none;
      content: counter(home-token) "%";
      justify-content: flex-end;
      align-items: center;
      padding-right: 1.25rem;
      display: flex;
      position: absolute;
      inset: 0;
    }
  }

  .home-ds-row > .home-ds-palette {
    grid-row: auto;
    display: flex;
  }

  .home-palette-stage {
    flex-direction: column;
    flex: auto;
    min-width: 0;
    display: flex;
    container-type: inline-size;
  }

  .home-palette-annotations {
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .375rem 1rem;
    padding: 1.25rem 1.5rem 0;
    display: flex;

    & > span {
      overflow-wrap: anywhere;
      max-width: 100%;
    }

    & > span:last-child {
      text-align: end;
      margin-inline-start: auto;
    }

    @container (width < 36rem) {
      padding: 1rem 1rem 0;
    }
  }

  .home-palette-scene {
    touch-action: pan-y pinch-zoom;
    outline: none;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-width: 0;
    height: 19rem;
    padding: 2.5rem 1.5rem 4.75rem;
    display: grid;
    position: relative;
    overflow: hidden;

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

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

    @media (width >= 64rem) {
      height: clamp(24rem, 32vw, 30rem);
    }

    @media (width >= 90rem){
      height: 35rem;
    }
  }

  .home-palette-canvas {
    border-color: var(--home-rule);
    border-bottom-color: var(--home-text-inverse);
    width: 100%;
    height: 100%;
    font-family: var(--home-mono);
    color: var(--home-text-faint);
    text-decoration-color: var(--home-sheet);
    background-color: var(--home-well);
    column-rule-color: var(--home-text);
    caret-color: var(--home-signal);
    pointer-events: none;
    forced-color-adjust: none;
    display: none;
    position: absolute;
    inset: 0;
  }

  .home-palette-stage[data-renderer="canvas"] {
    & .home-palette-canvas {
      display: block;
    }

    & .home-palette-scene {
      cursor: crosshair;
    }

    & .home-palette {
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }
  }

  .home-palette-inspector {
    inset-inline: 1.5rem;
    min-height: 2.75rem;
    font-family: var(--home-mono);
    color: var(--home-text-faint);
    visibility: hidden;
    pointer-events: none;
    grid-template-columns: .75rem max-content minmax(0, 1fr) auto;
    align-items: center;
    gap: .375rem .75rem;
    font-size: .6875rem;
    line-height: 1.5;
    display: grid;
    position: absolute;
    bottom: .75rem;

    .home-palette-stage[data-active] & {
      visibility: visible;
    }
  }

  .home-palette-current-swatch {
    width: .75rem;
    height: .75rem;
    box-shadow: inset 0 0 0 1px var(--home-hairline);
    forced-color-adjust: none;
    border-radius: 2px;
  }

  .home-palette-token {
    overflow-wrap: anywhere;
    min-width: 0;
    color: var(--home-text-body);
  }

  .home-palette-value {
    overflow-wrap: anywhere;
    justify-self: end;
    min-width: 0;
  }

  .home-palette-gamut {
    font-size: .625rem;
  }

  @container (width < 36rem) {
    .home-palette-inspector {
      grid-template-rows: auto auto;
      grid-template-columns: .75rem minmax(0, 1fr) auto;
      align-content: center;
      row-gap: .125rem;
      min-height: 3.5rem;
      inset-inline: 1rem;
    }

    .home-palette-token {
      grid-area: 1 / 2;
    }

    .home-palette-gamut {
      grid-area: 1 / 3;
    }

    .home-palette-value {
      grid-area: 2 / 2 / auto / -1;
      justify-self: start;
    }
  }

  .home-palette {
    grid-auto-rows: minmax(0, 1fr);
    grid-template-columns: 1.5rem repeat(var(--home-palette-columns), minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
  }

  .home-palette-label {
    min-width: 0;
    font-family: var(--home-mono);
    white-space: nowrap;
    color: var(--home-text-quiet);
    justify-content: center;
    align-items: center;
    font-size: .625rem;
    display: flex;
    overflow: hidden;
  }

  .home-palette-name {
    @media (width < 64rem) {
      display: none;
    }
  }

  .home-palette-tier {
    padding-right: var(--spacing-3xs);
    font-variant-numeric: tabular-nums;
    justify-content: flex-end;
  }

  .home-swatch {
    background-color: var(--home-swatch-color);
    min-height: 0;
    box-shadow: inset 0 0 0 1px var(--home-hairline);
    cursor: crosshair;
    forced-color-adjust: none;
    border-radius: 2px;
    display: block;
    position: relative;

    &[data-active] {
      z-index: 1;
      outline: 2px solid var(--home-signal);
      outline-offset: 1px;
    }
  }

  .home-gallery {
    --home-gallery-pad: var(--spacing-lg);
    min-height: 28rem;
    container-type: inline-size;

    @media (width >= 64rem){
      min-height: 32rem;
    }

    @container (width >= 36rem) {
      --home-gallery-pad: var(--spacing-xl);
    }
  }

  .home-gallery-grid {
    gap: var(--spacing-xs);
    padding: var(--home-gallery-pad);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(12, minmax(0, 1fr));
    display: grid;
    position: absolute;
    inset: 0;
  }

  .home-gallery-guides {
    pointer-events: none;
    grid-template-rows: minmax(0, 1fr);
    padding-block: 0;

    & > span {
      background-color: color-mix(in oklab, var(--home-text) 2%, var(--home-well));
      position: relative;

      &:before, &:after {
        background-color: var(--home-rule-strong);
        opacity: 0;
        height: 2px;
        transition: opacity var(--home-base) var(--home-ease), background-color var(--home-base) var(--home-ease);
        content: "";
        position: absolute;
        inset-inline: 0;
      }

      &:before {
        top: calc(var(--home-gallery-pad) / 2 - 1px);
      }

      &:after {
        bottom: calc(var(--home-gallery-pad) / 2 - 1px);
      }

      &[data-active]:before, &[data-active]:after {
        background-color: var(--home-signal);
        opacity: 1;
      }
    }

    .home-gallery:is(:hover, :focus-within) & > span:not([data-active]):before, .home-gallery:is(:hover, :focus-within) & > span:not([data-active]):after {
      opacity: .6;
    }
  }

  .home-gallery-photo {
    background-color: var(--home-sheet);
    cursor: zoom-in;
    border: 0;
    border-radius: 6px;
    min-width: 0;
    padding: 0;
    position: relative;
    overflow: hidden;

    &:after {
      z-index: 1;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px var(--home-hairline);
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
    }

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

  .home-gallery-frame {
    border-radius: inherit;
    background-color: color-mix(in oklab, var(--home-text) 8%, var(--home-well));
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;

    & img {
      transition: scale var(--home-slow) var(--home-ease), opacity var(--home-slow) var(--home-ease);
    }

    &[data-pending] img {
      opacity: 0;
    }

    .home-gallery-photo:is(:hover, :focus-visible) & img {
      scale: 1.03;
    }
  }

  .home-gallery-classes {
    bottom: var(--spacing-xs);
    left: var(--spacing-xs);
    z-index: 2;
    max-width: calc(100% - var(--spacing-xs) * 2);
    border-radius: var(--home-radius-chip);
    font-family: var(--home-mono);
    color: var(--home-text);
    background-color: var(--home-float);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-contact);
    opacity: 0;
    transition: opacity var(--home-base) var(--home-ease), translate var(--home-base) var(--home-ease);
    pointer-events: none;
    flex-wrap: wrap;
    gap: .125rem .5rem;
    padding: .25rem .5rem;
    font-size: .6875rem;
    line-height: 1.3;
    display: flex;
    position: absolute;
    translate: 0 4px;

    & > code {
      white-space: nowrap;
    }

    .home-gallery-photo[data-selected] & {
      opacity: 1;
      translate: 0;
    }

    @container (width < 30rem) {
      display: none;
    }
  }

  .home-gallery-dialog {
    --home-gallery-height: min(82dvh, calc(100dvh - 8rem));
    z-index: 2147483647;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    color: var(--home-text);
    background-color: #0000;
    border: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 1rem;
    margin: 0;
    padding: 3.75rem 1rem 1.25rem;
    display: grid;
    position: fixed;
    inset: 0;

    &:not([open]) {
      display: none;
    }
  }

  .home-gallery-dialog::backdrop {
    background-color: color-mix(in oklab, var(--home-ground) 86%, transparent);
    backdrop-filter: blur(6px);
  }

  .home-gallery-view {
    border-radius: var(--home-radius-sheet);
    background-color: var(--home-well);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-3);
    margin: 0;
    position: relative;
    overflow: hidden;
  }

  .home-gallery-caption {
    text-align: center;
    max-width: 100%;
    color: var(--home-text-body);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .375rem 1.25rem;
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    display: flex;

    & > code {
      font-family: var(--home-mono);
      overflow-wrap: anywhere;
      color: var(--home-text-faint);
      font-size: .6875rem;
    }
  }

  .home-gallery-close {
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 1;
    border-radius: var(--home-radius-control);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--home-text);
    background-color: var(--home-float);
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-2);
    cursor: pointer;
    transition: background-color var(--home-quick) var(--home-ease);
    border: 0;
    place-content: center;
    display: grid;
    position: absolute;

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

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

  ::view-transition-group(home-gallery-photo) {
    animation-duration: .52s;
    animation-timing-function: cubic-bezier(.2, 0, 0, 1);
  }

  ::view-transition-old(home-gallery-photo), ::view-transition-new(home-gallery-photo) {
    animation-duration: .52s;
  }

  .home-layers {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 28rem;
    display: grid;
    container-type: inline-size;

    @media (width >= 64rem){
      min-height: 32rem;
    }
  }

  .home-layers-element {
    z-index: 1;
    font-family: var(--home-mono);
    white-space: nowrap;
    color: var(--home-text-body);
    margin: 0;
    padding: 1.375rem 1.375rem 0;
    font-size: .75rem;

    @container (width < 19rem) {
      padding-inline: 1rem;
      font-size: .625rem;
    }
  }

  .home-layers-figure {
    min-height: 0;
    position: relative;
  }

  .home-layers-drawing {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 34rem;
    font-family: var(--home-mono);
    padding: .25rem .75rem;
    position: absolute;
    inset: 0;
    overflow: visible;
  }

  .home-layer-light {
    stop-color: var(--home-sheet);
  }

  .home-layer-shade {
    stop-color: color-mix(in oklab, var(--home-sheet) 92%, var(--home-well));
  }

  .home-layer-signal-light {
    stop-color: color-mix(in oklab, var(--home-signal) 8%, var(--home-sheet));
  }

  .home-layer-signal-shade {
    stop-color: color-mix(in oklab, var(--home-signal) 15%, var(--home-sheet));
  }

  .home-layer-edge-light {
    stop-color: color-mix(in oklab, var(--home-sheet) 90%, var(--home-text));
  }

  .home-layer-edge-shade {
    stop-color: color-mix(in oklab, var(--home-sheet) 86%, var(--home-text));
  }

  .home-layer-shadow {
    stop-color: var(--home-shade-far);
  }

  .home-layers-registration {
    stroke: var(--home-rule-strong);
    stroke-width: .75px;
    opacity: .6;
  }

  .home-layer-group {
    transition: transform var(--home-slow) var(--home-ease);

    .home-bento-card:is(:hover, :focus-within) & {
      transform: translateY(var(--home-layer-offset));
    }
  }

  .home-layer-face {
    stroke: var(--home-rule-strong);
    stroke-width: .8px;
  }

  .home-layer-inset {
    stroke: var(--home-hairline);
    stroke-width: .8px;
  }

  .home-layer-seam, .home-layer-detail {
    stroke: var(--home-rule);
    stroke-width: 1px;
  }

  .home-layer-detail {
    opacity: .65;
  }

  .home-layer-etched {
    fill: var(--home-text-faint);
    font-size: 12px;
  }

  .home-layer-pin {
    fill: var(--home-rule-strong);
    stroke: var(--home-highlight);
    stroke-width: .7px;
  }

  .home-layer-rule-slot {
    fill: var(--home-well);
    stroke: var(--home-rule);
    stroke-width: .8px;
  }

  .home-layer-rule {
    fill: var(--home-text-quiet);
    font-size: 14px;
  }

  .home-layer-strike {
    stroke: var(--home-text-faint);
  }

  .home-layer-check {
    stroke: var(--home-text-body);
    stroke-width: 1.75px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-layer-leader, .home-layer-tick {
    stroke: var(--home-rule-strong);
    stroke-width: .8px;
  }

  .home-layer-anchor {
    fill: var(--home-rule-strong);
  }

  .home-layer-label {
    fill: var(--home-text-quiet);
    font-size: 14px;
  }

  .home-layer-number {
    fill: var(--home-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
  }

  .home-layer-group[data-wins] {
    & .home-layer-face {
      stroke: var(--home-signal);
    }

    & .home-layer-inset {
      stroke: color-mix(in oklab, var(--home-signal) 28%, transparent);
    }

    & .home-layer-rule-slot {
      fill: color-mix(in oklab, var(--home-signal) 20%, var(--home-sheet));
    }

    & .home-layer-rule, & .home-layer-label {
      fill: var(--home-text);
    }

    & .home-layer-number {
      fill: var(--home-text-body);
    }

    & .home-layer-anchor {
      fill: var(--home-signal);
    }
  }

  .home-layers-result {
    border-top: 1px solid var(--home-hairline);
    font-family: var(--home-mono);
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
    margin: 0 1.375rem;
    padding: .875rem 0 1.125rem;
    font-size: .6875rem;
    line-height: 1.6;
    display: flex;
  }

  .home-layers-result-selector {
    color: var(--home-text);
    align-items: center;
    gap: .375rem;
    display: inline-flex;

    & > svg {
      color: var(--home-text-quiet);
    }
  }

  .home-layers-result-declaration {
    overflow-wrap: anywhere;
    color: var(--home-text-faint);
  }

  @media (prefers-reduced-motion: no-preference){
    .home-gallery-dialog::backdrop {
      transition: opacity var(--home-base) var(--home-ease);

      @starting-style {
        opacity: 0;
      }
    }

    @supports (animation-timeline: view()) {
      .home-tokens-code .line {
        animation-name: home-token-line;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 40%;
      }
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-layer-group, .home-theme-knob, .home-tokens-code .line[style]:after, .home-gallery-frame img, .home-gallery-classes, .home-gallery-guides > span:before, .home-gallery-guides > span:after, .home-theme-divider, .home-theme-measure:before {
      transition: none;
    }

    .home-gallery-photo:is(:hover, :focus-visible) .home-gallery-frame img {
      scale: none;
    }

    .home-gallery-classes {
      translate: 0;
    }
  }

  .home-dot-grid {
    background-image: radial-gradient(var(--home-rule) 1px, transparent 1px);
    background-position: 8px 8px;
    background-size: 16px 16px;
  }

  @media (forced-colors: active) {
    .home-theme-divider {
      forced-color-adjust: none;
      background-color: canvastext !important;
    }

    .home-theme-knob {
      outline: 1px solid canvastext;
    }
  }

  .home-theme-shop-name {
    font-size: var(--font-size-sm);
  }

  .home-theme-caption {
    font-size: var(--font-size-2xs);
  }
}

@keyframes home-token-line {
  from {
    opacity: 0.12;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-size-2xs:.625rem;--font-size-sm:.875rem;--spacing-3xs:.25rem;--spacing-xs:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem}: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-bento-frame {
    position: relative;
  }

  .home-bento-grid {
    gap: var(--home-gap);
    display: grid;

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

  .home-bento-card {
    border-radius: var(--home-radius-sheet);
    background-color: var(--home-sheet);
    min-width: 0;
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
    transition: box-shadow var(--home-base) var(--home-ease);
    flex-direction: column;
    display: flex;
    position: relative;

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

  .home-bento-card-header {
    padding: 1.75rem 1.5rem 2rem;
    container: home-card / inline-size;

    @media (width >= 52.125rem){
      padding: 2.25rem 2.25rem 2.5rem;
    }

    @media (width >= 80rem){
      padding: 2.5rem 2.75rem 2.75rem;
    }
  }

  .home-bento-card-caption {
    grid-template-columns: minmax(0, 44ch) 7rem;
    place-content: start space-between;
    align-items: start;
    column-gap: 1.5rem;
    display: grid;
  }

  .home-bento-card-copy {
    min-width: 0;
  }

  .home-bento-card-caption > .home-illustration {
    --home-illustration-size: 7rem;
  }

  @container home-card (width < 28rem) {
    .home-bento-card-caption {
      grid-template-columns: minmax(0, 1fr) 4rem;
      align-items: center;
      gap: .75rem 1rem;
    }

    .home-bento-card-copy {
      display: contents;
    }

    .home-bento-card-title {
      grid-area: 1 / 1;
    }

    .home-bento-card-body {
      grid-area: 2 / 1 / auto / -1;
      max-width: none;
      margin-top: 0;
    }

    .home-bento-card-hint {
      grid-area: 3 / 1 / auto / -1;
      margin-top: 0;
    }

    .home-bento-card-caption > .home-illustration {
      --home-illustration-size: 4rem;
      grid-area: 1 / 2;
      margin-block: 0;
    }
  }

  @container home-card (width < 16rem) {
    .home-bento-card-caption {
      grid-template-columns: minmax(0, 1fr) 3rem;
      column-gap: .75rem;
    }

    .home-bento-card-caption > .home-illustration {
      --home-illustration-size: 3rem;
    }
  }

  @container home-card (width < 12rem) {
    .home-bento-card-caption {
      grid-template-columns: minmax(0, 1fr);
    }

    .home-bento-card-caption > .home-illustration {
      display: none;
    }
  }

  @container home-card (width >= 28rem) {
    .home-bento-card-caption {
      column-gap: 3rem;
    }
  }

  .home-bento-card-title {
    min-width: 0;
    font-size: var(--home-card-title);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.025em;
    color: var(--home-text);
    text-wrap: balance;
    margin: 0;
    line-height: 1.25;
  }

  .home-bento-card-body {
    min-width: 0;
    max-width: 44ch;
    font-size: var(--home-body);
    color: var(--home-text-quiet);
    text-wrap: pretty;
    margin: .75rem 0 0;
    line-height: 1.6;
  }

  .home-bento-card-hint {
    font-size: var(--home-caption);
    color: var(--home-text-faint);
    margin: .75rem 0 0;
    line-height: 1.5;
  }

  .home-heading-link {
    color: inherit;
    text-underline-offset: .2em;
    text-decoration: none;

    &:hover {
      text-decoration-line: underline;
    }

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

  .home-bento-visual {
    isolation: isolate;
    margin: auto var(--home-gap) var(--home-gap);
    border-radius: var(--home-radius-well);
    background-color: var(--home-well);
    position: relative;
    overflow: hidden;

    &:after {
      z-index: 20;
      border-radius: inherit;
      box-shadow: var(--home-groove);
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
    }
  }

  .home-bento-visual-top {
    margin-top: 0;
  }

  @media (forced-colors: active) {
    .home-bento-card {
      outline: 1px solid canvastext;
    }
  }

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

@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;--radius-sm:.25rem}: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-code-window {
    tab-size: 2;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;

    & .ui-code {
      box-shadow: none;
      background: none;
      border: 0;
      border-radius: 0;
    }

    & .home-code-window-pre {
      padding: var(--spacing-lg) var(--spacing-sm);
      background-color: #0000;
      border-radius: 0;
      overflow: hidden;
    }
  }

  @media (forced-colors: active) {
    .home-code-window {
      outline: 1px solid canvastext;
    }
  }

  .home-code-window-body {
    flex: auto;
    min-height: 0;
  }

  .home-code-window-body :focus-visible {
    outline-offset: -2px;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--spacing-sm:.75rem;--spacing-lg:1.5rem}: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-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))}}@property --editor-ch {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

@property --editor-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

@layer components {
  .home-editor-stage {
    --editor-string: color-mix(in oklab, var(--home-code-string) 70%, var(--home-text-faint));
    --editor-dim: var(--home-text-faint);
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    display: grid;
    container: home-editor-stage / inline-size;
  }

  .home-editor-guide {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  }

  #language-service .home-section-heading {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  #language-service .home-section-header {
    grid-template-columns: minmax(0, 1fr);
  }

  #language-service .home-section-caption {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    margin-inline-start: 0;

    & > .home-illustration {
      margin-inline-start: -.4rem;

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

  .home-editor-frame {
    position: relative;
  }

  .home-editor-stage .home-editor-window {
    user-select: none;
    container-type: inline-size;
  }

  .home-editor-stage .home-editor-tab {
    --home-editor-tab-fill: var(--color-code-surface);
  }

  .home-editor-file-name {
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden;
  }

  @container (width < 18rem) {
    .home-editor-stage .home-editor-dots, .home-editor-stage .home-editor-tab > svg {
      display: none;
    }

    .home-editor-stage .home-editor-bar {
      padding-inline: .75rem;
    }

    .home-editor-stage .home-editor-tab {
      max-width: 100%;
      padding-inline: .375rem;
    }

    .home-editor-file-name {
      white-space: normal;
      overflow-wrap: anywhere;
      overflow: visible;
    }
  }

  .home-editor-body {
    --editor-ch: 1ch;
    --editor-shift: 0px;
    --editor-row: 1.5rem;
    --editor-css-line: 1.0625rem;
    --editor-pad-y: 1.5rem;
    --editor-pad-x: 1rem;
    --editor-fade: 2.5rem;
    --editor-gutter: calc(var(--editor-ch) * 2 + 2.25rem);
    --editor-x0: calc(var(--editor-gutter) + var(--editor-pad-x));
    height: calc(var(--editor-lines) * var(--editor-row) + var(--editor-pad-y) * 2);
    font-family: var(--home-mono);
    font-variant-ligatures: none;
    font-size: .8125rem;
    line-height: var(--editor-row);
    color: var(--home-text-body);
    background-color: var(--color-code-surface);
    display: flex;
    position: relative;

    @container (width >= 64rem) {
      --editor-row: 1.5rem;
      --editor-css-line: 1.125rem;
      --editor-pad-y: 1.75rem;
      --editor-pad-x: 1.25rem;
      --editor-gutter: calc(var(--editor-ch) * 2 + 2.5rem);
      font-size: .875rem;
    }

    @container (width < 80rem) {
      --editor-fade: 4.5rem;
    }

    @container (width < 40rem) {
      --editor-row: 1.375rem;
      --editor-css-line: 1rem;
      --editor-pad-y: 1rem;
      --editor-pad-x: .75rem;
      --editor-fade: 4.5rem;
      --editor-gutter: calc(var(--editor-ch) * 2 + 1.25rem);
      font-size: .8125rem;
    }
  }

  .home-editor-gutter {
    width: var(--editor-gutter);
    padding: var(--editor-pad-y) .75rem 0 0;
    box-shadow: 1px 0 0 color-mix(in oklab, var(--home-hairline) 65%, transparent);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--home-text-faint) 70%, transparent);
    user-select: none;
    flex: none;

    & > span {
      height: var(--editor-row);
      transition: color var(--home-quick) var(--home-ease);
      display: block;
      position: relative;
    }

    & > [data-current] {
      color: var(--home-text);

      &:before {
        background-color: var(--home-signal);
        content: "";
        border-radius: 3.40282e38px;
        width: 2px;
        height: 50%;
        position: absolute;
        top: 25%;
        left: .75rem;
      }
    }
  }

  .home-editor-footer {
    align-items: center;
    gap: var(--spacing-md);
    min-height: 3.25rem;
    box-shadow: inset 0 1px 0 var(--home-hairline);
    font-size: var(--home-caption);
    color: var(--home-text-quiet);
    padding: .25rem clamp(.875rem, 2cqw, 1.5rem);
    display: flex;
  }

  .home-editor-file-type, .home-editor-scene, .home-editor-playback {
    align-items: center;
    gap: var(--spacing-xs);
    display: inline-flex;
  }

  .home-editor-file-type {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    letter-spacing: .04em;

    @container (width < 30rem) {
      display: none;
    }
  }

  .home-editor-scene {
    gap: var(--spacing-sm);
    padding-left: var(--spacing-md);
    border-left: 1px solid var(--home-hairline);

    & > span {
      font-family: var(--home-mono);
      font-size: var(--home-label);
      font-variant-numeric: tabular-nums;
      color: var(--home-text-faint);
    }

    @container (width < 40rem) {
      border-left: 0;
      padding-left: 0;

      & > span {
        display: none;
      }
    }
  }

  .home-editor-playback {
    min-height: 2.75rem;
    padding-inline: var(--spacing-sm);
    border-radius: var(--home-radius-chip);
    font: inherit;
    color: var(--home-text-body);
    cursor: pointer;
    transition: background-color var(--home-quick) var(--home-ease);
    background: none;
    border: 0;
    justify-content: center;
    margin-left: auto;

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

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

  @container (width < 22rem) {
    .home-editor-footer {
      justify-content: space-between;
      column-gap: var(--spacing-sm);
      flex-wrap: wrap;
    }

    .home-editor-playback {
      margin-left: 0;
    }
  }

  .home-editor-viewport {
    user-select: text;
    min-width: 0;
    mask-image: linear-gradient(90deg, transparent, black clamp(0px, var(--editor-shift) * -1, 1.5rem), black calc(100% - var(--editor-fade)), transparent calc(100% - .25rem));
    flex: auto;
    position: relative;
    overflow: hidden;

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

  .home-editor-current-line {
    inset-inline: 0;
    top: calc(var(--editor-pad-y) + var(--editor-caret-line) * var(--editor-row));
    height: var(--editor-row);
    z-index: -3;
    background-color: color-mix(in oklab, var(--home-text) 4%, transparent);
    transition: top .18s var(--home-ease);
    position: absolute;
  }

  .home-editor-plane {
    isolation: isolate;
    width: max-content;
    min-width: 100%;
    padding: var(--editor-pad-y) var(--editor-pad-x);
    position: relative;
  }

  .home-editor-line {
    height: var(--editor-row);
    white-space: pre;
    position: relative;

    &:before {
      width: calc(var(--editor-indent) * var(--editor-ch));
      background: repeating-linear-gradient(90deg, var(--home-hairline) 0 1px, transparent 1px calc(var(--editor-ch) * 2));
      opacity: .6;
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
    }
  }

  .home-editor-body[data-pane] .home-editor-line:not([data-lit]) {
    & :is([data-tone], .home-editor-classes, .home-editor-classes [data-role]) {
      color: var(--editor-dim);
    }

    & .home-editor-swatch {
      opacity: .35;
    }
  }

  .home-editor-line [data-tone] {
    transition: color var(--home-base) var(--home-ease);
  }

  .home-editor-swatch {
    transition: opacity var(--home-base) var(--home-ease);
  }

  .home-editor-line [data-tone="tag"] {
    color: var(--home-code-tag);
  }

  .home-editor-line [data-tone="attr"] {
    color: var(--home-code-attr);
  }

  .home-editor-line [data-tone="punct"] {
    color: var(--home-text-faint);
  }

  .home-editor-line [data-tone="string"] {
    color: var(--editor-string);
  }

  .home-editor-line [data-tone="text"] {
    color: var(--home-text-body);
  }

  .home-editor-classes {
    color: var(--editor-string);

    & [data-role] {
      transition: color .32s var(--home-ease);
    }
  }

  :where(.home-editor-classes[data-lit], .home-editor-hover-css, .home-editor-hover-heading code, .home-editor-typed) {
    color: var(--home-text);

    & [data-role="utility"] {
      color: var(--home-text);
    }

    & [data-role="property"] {
      color: var(--home-code-property);
    }

    & [data-role="value"] {
      color: var(--home-text-body);
    }

    & :is([data-role="number"], [data-role="base"]) {
      color: var(--home-code-string);
    }

    & [data-role="selector"] {
      color: var(--home-code-selector);
    }

    & [data-role="query"] {
      color: var(--home-code-attr);
    }

    & [data-role="punct"] {
      color: var(--home-text-faint);
    }
  }

  .home-editor-class {
    cursor: text;
  }

  .home-editor-swatch {
    width: calc(var(--editor-ch) * 2);
    vertical-align: -.12em;
    height: 1em;
    font: inherit;
    background: none;
    border: 0;
    border-radius: .1875rem;
    padding: 0;
    display: inline-block;
    position: relative;

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

    &:before {
      background: linear-gradient(var(--editor-swatch), var(--editor-swatch)),
        repeating-conic-gradient(light-dark(#d9d9d9, #555) 0 25%, light-dark(#fff, #333) 0 50%) 0 0 / .42em .42em;
      content: "";
      border-radius: .1875rem;
      width: .84em;
      height: .84em;
      position: absolute;
      top: .08em;
      left: .12em;
      box-shadow: inset 0 0 0 1px light-dark(#00000024, #ffffff29);
    }
  }

  .home-editor-swatch[data-editable] {
    cursor: pointer;
  }

  .home-editor-caret {
    z-index: 2;
    top: calc(var(--editor-pad-y) + var(--editor-caret-line) * var(--editor-row) + (var(--editor-row) - 1.3em) / 2);
    left: calc(var(--editor-pad-x) + var(--editor-caret-column) * var(--editor-ch) - 1px);
    background-color: var(--home-text);
    width: 2px;
    height: 1.3em;
    transition: left .11s var(--home-ease), top .16s var(--home-ease);
    border-radius: 1px;
    animation-name: home-manifest-suggestions-caret-blink;
    animation-duration: 1.1s;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    position: absolute;

    &[data-moving] {
      animation-name: none;
    }
  }

  .home-editor-stage[data-running] .home-editor-caret {
    animation-play-state: running;
  }

  .home-editor-selection, .home-editor-hover-range {
    z-index: -1;
    top: calc(var(--editor-pad-y) + var(--editor-anchor-line) * var(--editor-row) + .125rem);
    left: calc(var(--editor-pad-x) + var(--editor-from) * var(--editor-ch));
    width: calc((var(--editor-to) - var(--editor-from)) * var(--editor-ch));
    height: calc(var(--editor-row) - .25rem);
    border-radius: .1875rem;
    position: absolute;
  }

  .home-editor-selection {
    background-color: color-mix(in oklab, var(--home-info) 24%, transparent);
  }

  .home-editor-context {
    z-index: -2;
    top: calc(var(--editor-pad-y) + var(--editor-anchor-line) * var(--editor-row) + .0625rem);
    left: calc(var(--editor-pad-x) + var(--editor-from) * var(--editor-ch) - .25rem);
    width: calc((var(--editor-to) - var(--editor-from)) * var(--editor-ch) + .5rem);
    height: calc(var(--editor-row) - .125rem);
    background-color: light-dark(color-mix(in oklab, var(--home-signal) 18%, transparent), color-mix(in oklab, var(--home-signal) 12%, transparent));
    opacity: 0;
    transition: top .3s var(--home-ease), left .3s var(--home-ease), width .3s var(--home-ease), opacity .2s var(--home-ease);
    border-radius: .3125rem;
    position: absolute;

    &[data-visible] {
      opacity: 1;
    }
  }

  .home-editor-hover-range {
    background-color: color-mix(in oklab, var(--home-text) 8%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--home-signal) 72%, transparent);
  }

  .home-editor-overlays {
    --editor-picker-effective-width: min(var(--editor-picker-width), 100cqw - 1rem);
    --editor-picker-plane-width: calc(var(--editor-picker-effective-width) - 2 * var(--editor-picker-inset) - 2 * var(--editor-picker-strip) - 2 * var(--editor-picker-gap));
    z-index: 3;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  :is(.home-editor-pane, .home-editor-suggest, .home-editor-pointer) {
    --editor-anchor-x: calc(var(--editor-x0) + var(--editor-anchor-column) * var(--editor-ch) + var(--editor-shift));
    --editor-anchor-top: calc(var(--editor-pad-y) + var(--editor-anchor-line) * var(--editor-row));
    --editor-picker-box: round(up, var(--editor-picker-height), var(--editor-row));
    --editor-picker-x: clamp(.5rem, var(--editor-anchor-x) - var(--editor-picker-left), 100cqw - var(--editor-picker-effective-width) - .5rem);
    --editor-picker-y: calc(var(--editor-anchor-top) - var(--editor-picker-box));
  }

  .home-editor-pane {
    border-radius: var(--home-radius-control);
    background-color: var(--home-float);
    box-shadow: var(--home-edge),
      0 0 0 1px var(--home-rule),
      0 1px 3px var(--home-shade-near),
      0 10px 24px -8px var(--home-shade-near),
      0 22px 48px -20px var(--home-shade-far);
    opacity: 0;
    visibility: hidden;
    transform-origin: 1.5rem 0;
    transition: opacity .18s var(--home-ease),
      transform .42s var(--home-ease),
      visibility 0s linear .42s,
      left var(--home-base) var(--home-ease),
      top var(--home-base) var(--home-ease),
      bottom var(--home-base) var(--home-ease);
    position: absolute;
    transform: perspective(60rem) rotateX(-16deg) translateY(-.375rem) scale(.98);
  }

  :is(.home-editor-pane[data-open], .home-editor-suggest[data-open] > .home-editor-suggest-list, .home-editor-suggest[data-open] > .home-editor-suggest-docs[data-open]) {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    transform: none;
  }

  .home-editor-pane:is([data-above], .home-editor-picker) {
    transform-origin: 1.5rem 100%;
    transform: perspective(60rem) rotateX(16deg) translateY(.375rem) scale(.98);
  }

  .home-editor-hover-card {
    --editor-card-width: min(28rem, 100cqw - 1rem);

    @container (width >= 64rem) {
      --editor-card-width: 30rem;
    }

    --editor-card-height: calc(3.5rem + var(--editor-card-tokens) * 2rem + var(--editor-card-lines) * var(--editor-css-line));
    top: calc(var(--editor-anchor-top) + var(--editor-row));
    left: clamp(.5rem, var(--editor-anchor-x) - .75rem, 100cqw - var(--editor-card-width) - .5rem);
    width: var(--editor-card-width);
    height: min(round(up, var(--editor-card-height), var(--editor-row)), var(--editor-room-rows) * var(--editor-row));
    flex-direction: column;
    display: flex;

    &[data-open] {
      pointer-events: auto;
    }

    &[data-above] {
      top: auto;
      bottom: calc(100% - var(--editor-anchor-top));
    }
  }

  .home-editor-hover-heading {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--home-hairline);
    min-height: 2.25rem;
    color: var(--home-text);
    flex: none;
    padding-inline: .875rem;
    display: flex;

    & code {
      font-family: var(--home-mono);
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: .75rem;
      overflow: hidden;
    }

    & > span {
      font-family: var(--home-mono);
      letter-spacing: .06em;
      color: var(--home-text-faint);
      flex: none;
      font-size: .625rem;
    }
  }

  .home-editor-hover-content {
    user-select: text;
    flex: auto;
    min-width: 0;
    min-height: 0;
    padding: .75rem .875rem;
    overflow: hidden;
    mask-image: linear-gradient(#000 calc(100% - .75rem), #0000), linear-gradient(90deg, #000 calc(100% - .875rem), #0000);
    mask-composite: intersect;
  }

  .home-editor-hover-tokens {
    align-items: center;
    gap: var(--spacing-xs);
    border-top: 1px solid var(--home-hairline);
    min-height: 2rem;
    color: var(--home-text-quiet);
    flex: none;
    margin: 0;
    padding: .25rem .875rem;
    line-height: 1.5;
    display: flex;
    overflow: hidden;

    & code {
      font-family: var(--home-mono);
      color: var(--home-text);
      white-space: nowrap;
      flex: none;
      font-size: .6875rem;
    }
  }

  .home-editor-hover-css {
    font-family: var(--home-mono);
    font-size: .71875rem;
    line-height: var(--editor-css-line);
    white-space: pre;
    margin: 0;

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

    & [data-role="keyword"] {
      color: var(--color-code-keyword);
    }

    & [data-role="function"] {
      color: var(--color-code-function);
    }

    & [data-role="number"] {
      color: var(--color-code-number);
    }

    @container (width >= 64rem) {
      font-size: .78125rem;
    }

    @container (width < 40rem) {
      font-size: .6875rem;
    }
  }

  .home-editor-css-line {
    min-height: 1lh;
    display: block;
  }

  .home-editor-hover-css[data-reveal] .home-editor-css-line {
    animation: home-editor-rule-reveal .3s var(--home-ease) both;
    animation-delay: var(--editor-line-delay);
  }

  .home-editor-suggest {
    --editor-suggest-width: min(20rem, 100cqw - 1rem);
    --editor-suggest-span: var(--editor-suggest-width);

    @container (width >= 56rem) {
      --editor-suggest-span: calc(var(--editor-suggest-width) + 22.25rem);
    }

    top: calc(var(--editor-anchor-top) + var(--editor-row));
    left: clamp(.5rem, var(--editor-anchor-x) - 1.875rem, 100cqw - var(--editor-suggest-span) - .5rem);
    transition: left var(--home-base) var(--home-ease);
    align-items: flex-start;
    gap: .25rem;
    font-size: .75rem;
    display: flex;
    position: absolute;
  }

  .home-editor-suggest-list, .home-editor-suggest-docs {
    position: relative;
  }

  .home-editor-suggest-list {
    width: var(--editor-suggest-width);
    height: calc((var(--editor-suggest-rows) + 1) * var(--editor-row) + .5rem);
    transition: opacity .18s var(--home-ease),
      transform .42s var(--home-ease),
      visibility 0s linear .42s,
      height var(--home-base) var(--home-ease);
    padding: .25rem;
    overflow: hidden;
  }

  .home-editor-suggest-heading {
    height: var(--editor-row);
    font-family: var(--font-family-sans);
    color: var(--home-text-quiet);
    justify-content: space-between;
    align-items: center;
    padding-inline: .375rem .625rem;
    font-size: .6875rem;
    display: flex;

    & > span:last-child {
      font-family: var(--home-mono);
      font-variant-numeric: tabular-nums;
      color: var(--home-text-faint);
    }
  }

  .home-editor-suggest-inline {
    align-items: center;
    gap: var(--spacing-xs);
    height: var(--editor-row);
    border-top: 1px solid var(--home-hairline);
    white-space: nowrap;
    color: var(--home-text-quiet);
    margin-inline: -.25rem;
    padding-inline: .625rem;
    font-size: .625rem;
    display: none;
    overflow: hidden;

    & > * {
      flex: none;
    }
  }

  @container (width < 56rem) {
    .home-editor-suggest-inline {
      display: flex;
    }

    .home-editor-suggest-list:has(.home-editor-suggest-inline) {
      height: calc((var(--editor-suggest-rows) + 2) * var(--editor-row) + .5rem);
    }
  }

  .home-editor-suggest-item {
    height: var(--editor-row);
    white-space: nowrap;
    color: var(--home-text-body);
    border-radius: .375rem;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    padding-inline: .375rem .625rem;
    display: grid;

    & b {
      font-weight: var(--font-weight-semibold);
      color: var(--home-code-property);
    }
  }

  .home-editor-suggest-item[data-focused] {
    color: var(--home-text);
    background-color: color-mix(in oklab, var(--home-text) 7%, transparent);
  }

  .home-editor-suggest-icon {
    color: var(--home-code-attr);
  }

  .home-editor-suggest-label {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .home-editor-suggest-scroll {
    top: calc(var(--editor-row) + .25rem);
    width: .1875rem;
    height: calc(var(--editor-suggest-thumb) * (100% - var(--editor-row)));
    background-color: var(--home-rule);
    border-radius: 3.40282e38px;
    position: absolute;
    right: .125rem;
  }

  .home-editor-suggest-docs {
    width: 22rem;
    min-height: calc(var(--editor-row) * 4);
    padding: calc(var(--editor-row) / 2) .875rem;
    font-size: .6875rem;
    line-height: calc(var(--editor-row) * .75);

    @container (width < 56rem) {
      display: none;
    }

    & p {
      overflow-wrap: normal;
      word-break: normal;
      margin: 0;
    }
  }

  .home-editor-suggest-docs-token {
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--home-text);
    margin-bottom: .25rem;
    display: flex;
  }

  .home-editor-suggest-docs-scope {
    color: var(--home-text-faint);
  }

  .home-editor-suggest-docs-value {
    color: var(--home-text-body);
  }

  .home-editor-nowrap {
    white-space: nowrap;
  }

  .home-editor-picker {
    top: var(--editor-picker-y);
    left: var(--editor-picker-x);
    width: var(--editor-picker-effective-width);
    height: var(--editor-picker-box);
    flex-direction: column;
    display: flex;
    overflow: hidden;

    &[data-open] {
      pointer-events: auto;
    }
  }

  .home-editor-picker-header {
    flex: auto;
    display: flex;
  }

  .home-editor-picker-new {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    color: #000;
    flex: auto;
    font-size: .6875rem;
    display: flex;
    position: relative;

    & input {
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

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

    &[data-dark] {
      color: #fff;
    }
  }

  .home-editor-picker-original {
    cursor: pointer;
    border: 0;
    flex: none;
    width: 44px;
    padding: 0;
  }

  .home-editor-picker-close {
    width: 44px;
    color: var(--home-text-body);
    background-color: var(--home-float);
    cursor: pointer;
    border: 0;
    flex: none;
    place-items: center;
    padding: 0;
    display: grid;
  }

  :is(.home-editor-picker-original, .home-editor-picker-close):focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: -3px;
  }

  .home-editor-picker-body {
    flex: none;
    display: flex;
  }

  .home-editor-picker-plane, .home-editor-picker-strip {
    touch-action: none;
    cursor: crosshair;
    border-radius: .25rem;
    flex: none;
    position: relative;
  }

  .home-editor-picker-plane {
    background: linear-gradient(to top, black, transparent),
      linear-gradient(to right, white, hsl(calc(var(--editor-picker-hue) * 1deg) 100% 50%));
    flex: auto;
    min-width: 0;
  }

  .home-editor-picker-handle {
    border-radius: 3.40282e38px;
    width: .75rem;
    height: .75rem;
    position: absolute;
    translate: -50% -50%;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px #00000073;
  }

  .home-editor-picker-strip > span {
    background-color: #fff;
    border-radius: .125rem;
    height: .25rem;
    position: absolute;
    inset-inline: -.1875rem;
    translate: 0 -50%;
    box-shadow: 0 0 0 1px #0000004d;
  }

  .home-editor-picker-hue {
    background: linear-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red);
  }

  .home-editor-picker-alpha {
    background: linear-gradient(var(--editor-picker-color), transparent),
      repeating-conic-gradient(#ccc 0 25%, white 0 50%) 0 0 / .5rem .5rem;
    cursor: default;
  }

  .home-editor-pointer {
    z-index: 4;
    top: calc(var(--editor-anchor-top) + var(--editor-pointer-rows) * var(--editor-row) + var(--editor-pointer-dy));
    left: calc(var(--editor-anchor-x) + var(--editor-pointer-dx));
    fill: var(--home-text);
    stroke: var(--home-sheet);
    stroke-width: 1.25px;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px #00000047);
    opacity: 0;
    transform-origin: 4px 2.5px;
    transition: left .76s cubic-bezier(.45, .05, .25, 1), top .76s cubic-bezier(.6, 0, .3, 1), opacity .2s var(--home-ease), scale var(--home-quick) var(--home-ease);
    position: absolute;
    translate: -4px -2.5px;

    &[data-visible] {
      opacity: 1;
    }

    &[data-instant] {
      transition: opacity .2s var(--home-ease), scale var(--home-quick) var(--home-ease);
    }

    &[data-picker="original"] {
      left: calc(var(--editor-picker-x) + var(--editor-picker-effective-width) - 66px);
      top: calc(var(--editor-picker-y) + (var(--editor-picker-box) - var(--editor-picker-plane-height) - 2 * var(--editor-picker-inset)) / 2);
    }

    &[data-picker="plane"] {
      left: calc(var(--editor-picker-x) + var(--editor-picker-inset) + var(--editor-pointer-u) * var(--editor-picker-plane-width));
      top: calc(var(--editor-anchor-top) - var(--editor-picker-inset) - var(--editor-pointer-v) * var(--editor-picker-plane-height));
    }

    &[data-pressed] {
      scale: .86;
    }
  }

  .home-editor-chapters {
    gap: var(--spacing-sm) clamp(1.5rem, .5rem + 2vw, 2.5rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;

    @container home-editor-stage (width < 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .home-editor-chapter {
    grid-template-rows: subgrid;
    place-items: start;
    gap: var(--spacing-sm);
    border-radius: var(--home-radius-well);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--home-quick) var(--home-ease);
    background: none;
    border: 0;
    grid-row: span 3;
    margin-inline: -.75rem;
    padding: 1rem .75rem;
    display: grid;
    position: relative;

    @media (hover: hover) {
      &:hover {
        background-color: color-mix(in oklab, var(--home-text) 3%, transparent);
      }
    }

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

  .home-editor-chapter-track {
    background-color: var(--home-rule);
    border-radius: 3.40282e38px;
    height: 2px;
    position: absolute;
    inset: 0 .75rem auto;
    overflow: hidden;
  }

  .home-editor-chapter-progress {
    background-color: var(--home-text);
    transform-origin: 0;
    position: absolute;
    inset: 0;
    scale: 0 1;
  }

  .home-editor-chapter[aria-pressed="true"] .home-editor-chapter-progress {
    scale: 1;
  }

  .home-editor-chapter[aria-pressed="true"][data-touring] .home-editor-chapter-progress {
    background-color: var(--home-signal);
    scale: var(--editor-progress, 0) 1;
  }

  .home-editor-chapter-title {
    min-width: 0;
    max-width: 100%;
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -.02em;
    color: var(--home-text-quiet);
    text-wrap: balance;
    transition: color var(--home-base) var(--home-ease);
    line-height: 1.4;
  }

  .home-editor-chapter .home-illustration {
    --home-illustration-size: 6rem;
  }

  .home-editor-chapter-body {
    min-width: 0;
    max-width: min(32ch, 100%);
    font-size: var(--home-body);
    color: var(--home-text-quiet);
    text-wrap: pretty;
    opacity: 0;
    transition: opacity var(--home-base) var(--home-ease), translate var(--home-base) var(--home-ease);
    line-height: 1.6;
    translate: 0 .25rem;

    @media print {
      opacity: 1;
      translate: none;
    }
  }

  .home-editor-chapter[aria-pressed="true"] .home-editor-chapter-body {
    opacity: 1;
    translate: none;
  }

  .home-editor-chapter-note {
    display: none;
  }

  @container home-editor-stage (width < 64rem) {
    .home-editor-chapter-body {
      display: none;
    }

    .home-editor-chapter-note {
      grid-column: 1 / -1;
      display: grid;

      & > p {
        max-width: 48ch;
        font-size: var(--home-body);
        color: var(--home-text-quiet);
        text-wrap: pretty;
        opacity: 0;
        transition: opacity var(--home-base) var(--home-ease), translate var(--home-base) var(--home-ease);
        grid-area: 1 / 1;
        margin: 0;
        line-height: 1.6;
        translate: 0 .25rem;
      }

      & > p[data-active] {
        opacity: 1;
        translate: none;
      }
    }
  }

  .home-editor-chapter:is([aria-pressed="true"], :hover) .home-editor-chapter-title {
    color: var(--home-text);
  }

  @container home-editor-stage (width < 64rem) {
    .home-editor-chapter .home-illustration {
      --home-illustration-size: 5rem;
    }
  }

  @container home-editor-stage (width < 40rem) {
    .home-editor-chapters {
      column-gap: var(--spacing-lg);
    }

    .home-editor-chapter .home-illustration {
      --home-illustration-size: 4rem;
    }

    .home-editor-chapter-title {
      font-size: 1.125rem;
    }
  }

  @container home-editor-stage (width < 16rem) {
    .home-editor-chapters {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-editor-body, .home-editor-current-line, .home-editor-line [data-tone], .home-editor-swatch, .home-editor-context, .home-editor-caret, .home-editor-classes [data-role], .home-editor-pane, .home-editor-suggest, .home-editor-suggest-list, .home-editor-pointer, .home-editor-playback, .home-editor-chapter, .home-editor-chapter-title, .home-editor-chapter-body, .home-editor-chapter-note > p {
      transition: none;
    }

    .home-editor-caret {
      animation-name: none;
    }

    .home-editor-hover-css[data-reveal] .home-editor-css-line {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .home-editor-pane {
      outline: 1px solid canvastext;
    }

    .home-editor-viewport, .home-editor-hover-content {
      mask-image: none;
    }

    .home-editor-chapter-track {
      background-color: canvastext;
    }

    .home-editor-chapter[aria-pressed="true"] .home-editor-chapter-progress {
      background-color: highlight;
    }

    .home-editor-hover-range {
      border-bottom: 1px solid highlight;
    }

    .home-editor-caret {
      background-color: canvastext;
    }

    :is(.home-editor-swatch, .home-editor-picker-new, .home-editor-picker-original, .home-editor-picker-plane, .home-editor-picker-strip) {
      forced-color-adjust: none;
    }
  }
}

@keyframes home-editor-rule-reveal {
  from { opacity: 0; translate: 0 0.2rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes home-manifest-suggestions-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-weight-medium:500;--font-weight-semibold:600;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem}: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-sans:"Geist", "Noto Sans TC"}}@keyframes fade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}@keyframes float {
  0% {
    transform: none;
  }

  50% {
    transform: translateY(-1.25rem);
  }

  to {
    transform: none;
  }
}@keyframes heart {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
}@keyframes jump {
  0%, to {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }
}@keyframes ping {
  75%, to {
    transform: scale(2);
    opacity: 0;
  }
}@keyframes pulse {
  0% {
    transform: none;
  }

  50% {
    transform: scale(1.05);
  }

  to {
    transform: none;
  }
}@keyframes rotate {
  0% {
    transform: rotate(-360deg);
  }

  to {
    transform: none;
  }
}@keyframes shake {
  0% {
    transform: none;
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: none;
  }
}@keyframes zoom {
  0% {
    transform: scale(0);
  }

  to {
    transform: none;
  }
}@keyframes slide-to-right {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(100%);
    }
  }@property --home-lint-scan-column {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@layer components {
  .home-lint-frame {
    container: home-lint / inline-size;
  }

  .home-lint {
    --home-lint-tone: var(--home-warn);
    --home-lint-code-size: var(--home-code);
    --home-lint-row: 1.375rem;
    --home-lint-inset: 1rem;
    --home-lint-gutter: 3.25rem;
    --home-lint-ruler: 1.5rem;
    --home-lint-lead: 1rem;
    --home-lint-tuck: 1.25rem;
    --home-lint-behind: .75rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside"
                         "stage";
    row-gap: 2.5rem;
    display: grid;

    @container home-lint (width < 40rem) {
      --home-lint-code-size: .75rem;
      --home-lint-row: 1.25rem;
      --home-lint-gutter: 2.75rem;
      --home-lint-behind: .5rem;
    }

    @container home-lint (width >= 40rem) {
      --home-lint-inset: 1.25rem;
      --home-lint-behind: 1.25rem;
    }

    &[data-severity="error"] {
      --home-lint-tone: var(--home-error);
    }

    &[data-severity="info"] {
      --home-lint-tone: var(--home-info);
    }

    @container home-lint (width >= 68rem) {
      grid-template-columns: 16.5rem minmax(0, 1fr);
      grid-template-areas: "aside stage";
      column-gap: 3rem;
    }
  }

  .home-lint-aside {
    flex-direction: column;
    grid-area: aside;
    min-width: 0;
    display: flex;
  }

  .home-lint-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    display: grid;

    @container home-lint (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 1.75rem;
    }

    @container home-lint (width >= 68rem) {
      border-bottom: 1px solid var(--home-rule);
      flex: auto;
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: 1fr;
    }
  }

  .home-lint-rule {
    isolation: isolate;
    text-align: left;
    min-width: 0;
    min-height: 4.5rem;
    color: var(--home-text-quiet);
    cursor: pointer;
    transition: color var(--home-base) var(--home-ease);
    border-radius: .25rem;
    align-items: center;
    gap: .875rem;
    padding: 1rem 0;
    display: flex;
    position: relative;

    @container home-lint (width >= 68rem) {
      gap: .875rem;
      padding: .875rem 0;
    }

    &:before {
      background-color: var(--home-rule);
      height: 1px;
      transition: background-color var(--home-base) var(--home-ease);
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    &:hover, &[aria-selected="true"] {
      color: var(--home-text);
    }

    &:after {
      z-index: -1;
      border-radius: var(--home-radius-control);
      background-color: var(--home-sheet);
      box-shadow: inset 0 0 0 1px var(--home-hairline);
      opacity: 0;
      transition: opacity var(--home-base) var(--home-ease);
      content: "";
      position: absolute;
      inset: .375rem -.75rem;
    }

    &[aria-selected="true"]:after {
      opacity: 1;
    }

    &:focus-visible {
      outline: none;
    }

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

  .home-lint-rule-glyph {
    opacity: .7;
    width: 3rem;
    height: 3rem;
    transition: opacity var(--home-base) var(--home-ease);
    flex: none;
    place-items: center;
    display: grid;

    .home-lint-rule:hover > &, [aria-selected="true"] > & {
      opacity: 1;
    }
  }

  .home-lint-rule-title {
    letter-spacing: -.01em;
    min-width: 0;
    font-size: .9375rem;
    line-height: 1.45;

    @container home-lint (width >= 68rem) {
      font-size: var(--home-body);
    }
  }

  .home-lint-rule-progress {
    background-color: color-mix(in oklab, var(--home-signal) 70%, var(--home-rule));
    transform-origin: 0;
    height: 2px;
    scale: var(--home-lint-progress, 0) 1;
    border-radius: 1px;
    display: none;
    position: absolute;
    bottom: .375rem;
    left: 0;
    right: 0;

    [data-touring] & {
      display: block;
    }
  }

  .home-lint-stage {
    isolation: isolate;
    grid-area: stage;
    min-width: 0;
    display: grid;
    position: relative;

    &:before {
      z-index: -1;
      pointer-events: none;
      content: "";
      background-image: radial-gradient(closest-side, light-dark(#fffffff2, #ffffff0b), #0000);
      height: 75%;
      position: absolute;
      top: -2.5rem;
      left: 5%;
      right: 5%;
    }
  }

  .home-lint-editor, .home-lint-pane {
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .home-lint-editor {
    z-index: 2;
  }

  .home-lint-bar, .home-lint-pane-bar {
    min-width: 0;
    padding-inline: var(--home-lint-inset);
    align-items: center;
    position: relative;
  }

  .home-lint-tab-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .home-lint-tab-icon {
    color: var(--home-text-quiet);
    flex: none;
  }

  .home-lint-surface-name, .home-lint-pane-package {
    font-family: var(--home-mono);
    font-size: var(--home-label);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text-faint);
    overflow: hidden;
  }

  .home-lint-surface-name {
    display: none;

    @container home-lint (width >= 30rem) {
      display: inline;
    }
  }

  .home-lint-status {
    white-space: nowrap;
    color: var(--home-text-quiet);
    transition: color var(--home-base) var(--home-ease);
    flex: none;
    align-items: center;
    gap: .4375rem;
    margin-left: auto;
    font-size: .75rem;
    display: inline-flex;

    &:before {
      background-color: var(--home-rule);
      width: .375rem;
      height: .375rem;
      transition: background-color var(--home-base) var(--home-ease), box-shadow var(--home-base) var(--home-ease);
      content: "";
      border-radius: 3.40282e38px;
    }

    &[data-tone="idle"] {
      color: var(--home-text-faint);
    }

    &[data-tone="running"]:before {
      background-color: var(--home-signal);
      box-shadow: 0 0 0 3px var(--home-signal-glow);
    }

    &[data-tone="error"]:before {
      background-color: var(--home-error);
    }

    &[data-tone="warning"]:before {
      background-color: var(--home-warn);
    }

    &[data-tone="info"]:before {
      background-color: var(--home-info);
    }

    &[data-tone="ok"]:before {
      background-color: var(--home-ok);
    }

    &[data-tone="off"] {
      color: var(--home-text-faint);

      &:before {
        box-shadow: inset 0 0 0 1px var(--home-rule-strong);
        background-color: #0000;
      }
    }
  }

  .home-lint-code {
    font-size: var(--home-lint-code-size);
    background-color: var(--home-well);
    padding-block: 1.25rem;
    position: relative;
    container: home-lint-code / inline-size;
  }

  .home-lint-reading {
    position: relative;
  }

  .home-lint-sources {
    min-height: 9.5rem;
    padding-top: var(--home-lint-lead);
    display: grid;

    @container home-lint-code (width >= 49em) {
      min-height: 8.5rem;
    }
  }

  .home-lint-source {
    min-width: 0;
    font-family: var(--home-mono);
    font-size: var(--home-lint-code-size);
    line-height: var(--home-lint-row);
    font-variant-ligatures: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--home-base) var(--home-ease), visibility 0s var(--home-base);
    grid-area: 1 / 1;
    position: relative;

    &[data-active] {
      visibility: visible;
      opacity: 1;
      transition: opacity var(--home-base) var(--home-ease);
    }
  }

  .home-lint-line {
    grid-template-columns: var(--home-lint-gutter) minmax(0, 1fr);
    transition: background-color var(--home-base) var(--home-ease);
    display: grid;

    &[data-problem] {
      background-color: color-mix(in oklab, var(--home-lint-tone) 5%, transparent);
    }
  }

  .home-lint-gutter {
    color: color-mix(in oklab, var(--home-text-faint) 70%, transparent);
    user-select: none;
    justify-content: flex-end;
    align-items: flex-start;
    gap: .5rem;
    padding-right: .75rem;
    display: flex;
  }

  .home-lint-glyph {
    width: .875rem;
    height: var(--home-lint-row);
    place-items: center;
    display: grid;
    position: relative;

    &:after {
      width: .875rem;
      height: .875rem;
      box-shadow: 0 0 0 1px var(--home-lint-tone);
      opacity: 0;
      pointer-events: none;
      content: "";
      border-radius: 3.40282e38px;
      margin: -.4375rem 0 0 -.4375rem;
      position: absolute;
      top: 50%;
      left: 50%;
    }

    & > svg {
      animation-name: home-lint-pop;
      animation-duration: .42s;
      animation-timing-function: var(--home-ease);
      animation-fill-mode: both;
    }
  }

  .home-lint-bulb {
    color: var(--home-signal);
  }

  .home-lint-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    transition: color var(--home-base) var(--home-ease);

    [data-problem] & {
      color: var(--home-text);
    }
  }

  .home-lint-text {
    min-width: 0;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--home-text-body);
    padding-right: 1.25rem;
  }

  .home-lint-punct {
    color: var(--home-text-faint);
  }

  .home-lint-tag {
    color: var(--home-code-tag);
  }

  .home-lint-attr {
    color: var(--home-code-attr);
  }

  .home-lint-string {
    color: var(--home-code-string);
  }

  .home-lint-property {
    color: var(--home-code-property);
  }

  .home-lint-token {
    color: var(--home-text);
    transition: box-shadow var(--home-base) var(--home-ease), background-color var(--home-base) var(--home-ease), color var(--home-base) var(--home-ease), opacity var(--home-base) var(--home-ease);
    border-radius: .25rem;
    line-height: 1.35;
    display: inline-block;
    position: relative;

    &:after {
      background-color: var(--home-lint-tone);
      transform-origin: 0;
      content: "";
      height: .25rem;
      position: absolute;
      bottom: -.1875rem;
      left: 0;
      right: 0;
      scale: 0 1;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath d='M0 2 Q1 0.4 2 2 T4 2' fill='none' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 / .25rem .25rem repeat-x;
    }

    &[data-marked-next]:after {
      right: -1ch;
    }

    &[data-marked]:after {
      scale: 1;
    }

    &[data-moving="slide"] {
      z-index: 1;
      color: var(--home-text-quiet);
    }

    &[data-moving="lift"] {
      z-index: 2;
      color: var(--home-text);
      background-color: var(--home-float);
      box-shadow: 0 0 0 .125rem var(--home-float), 0 0 0 calc(.125rem + 1px) var(--home-rule), 0 6px 14px -4px light-dark(oklch(18% 0 none / .18), oklch(0% 0 none / .6));
    }

    &[data-keeps] {
      box-shadow: 0 0 0 .1875rem var(--home-well), 0 0 0 calc(.1875rem + 1px) color-mix(in oklab, var(--home-ok) 60%, transparent);
    }

    &:before {
      background-color: var(--home-lint-tone);
      transform-origin: 0;
      content: "";
      height: 1px;
      position: absolute;
      top: 52%;
      left: -.125rem;
      right: -.125rem;
      scale: 0 1;
    }

    &[data-removing] {
      animation-name: home-lint-fold;
      animation-duration: .52s;
      animation-timing-function: var(--home-ease);
      animation-delay: .3s;
      animation-fill-mode: both;

      &:before {
        animation-name: home-lint-strike;
        animation-duration: .28s;
        animation-timing-function: var(--home-ease);
        animation-fill-mode: both;
      }

      &:after {
        scale: 0 1;
      }
    }
  }

  .home-lint-order {
    font-variant-numeric: tabular-nums;
    color: var(--home-text);
    animation-name: home-lint-badge;
    animation-duration: .4s;
    animation-timing-function: var(--home-ease);
    animation-fill-mode: both;
    animation-delay: calc(var(--order) * 70ms);
    font-size: .625rem;
    line-height: 1;
    position: absolute;
    bottom: calc(100% + .0625rem);
    left: 50%;
    translate: -50%;

    @container home-lint-code (width < 49em) {
      display: none;
    }
  }

  .home-lint-line[data-diff="remove"] {
    background-color: color-mix(in oklab, var(--home-error) 6%, transparent);
  }

  .home-lint-line[data-diff="add"] {
    background-color: color-mix(in oklab, var(--home-ok) 7%, transparent);
  }

  .home-lint-diff-sign {
    [data-diff="remove"] & {
      color: var(--home-error);
    }

    [data-diff="add"] & {
      color: var(--home-ok);
    }
  }

  .home-lint:is([data-phase="idle"], [data-phase="scan"]) .home-lint-source[data-active] [data-diff="add"] {
    background-color: #0000;

    & :is(.home-lint-text, .home-lint-diff-sign) {
      opacity: 0;
    }
  }

  .home-lint:is([data-phase="report"], [data-phase="action"]) .home-lint-source[data-active] [data-diff="add"] :is(.home-lint-punct, .home-lint-tag, .home-lint-attr, .home-lint-diff-sign) {
    animation-name: home-lint-fade;
    animation-duration: .5s;
    animation-timing-function: var(--home-ease);
    animation-fill-mode: both;
  }

  .home-lint-ruler {
    height: var(--home-lint-ruler);
    margin-left: var(--home-lint-gutter);
    font-family: var(--home-mono);
    font-size: var(--home-lint-code-size);
    display: none;
    position: relative;

    @container home-lint-code (width >= 49em) {
      display: block;
    }

    &:before {
      background-image: linear-gradient(to right, var(--home-rule) 0 1px, transparent 1px),
        linear-gradient(to right, var(--home-hairline) 0 1px, transparent 1px);
      content: "";
      background-position: 9ch 100%, 0 100%;
      background-repeat: repeat-x;
      background-size: 10ch .375rem, 1ch .1875rem;
      position: absolute;
      inset: 0;
      mask-image: linear-gradient(to right, #000 calc(100% - 3rem), #0000 calc(100% - .5rem));
    }
  }

  .home-lint-ruler-label {
    bottom: .5rem;
    left: calc((var(--column) - 1) * 1ch);
    width: 0;
    transition: opacity var(--home-base) var(--home-ease);
    justify-content: center;
    display: flex;
    position: absolute;

    & > span {
      font-variant-numeric: tabular-nums;
      color: var(--home-text-faint);
      font-size: .5625rem;
      line-height: 1;
    }

    .home-lint[data-phase="report"] &[data-covered] {
      opacity: 0;
    }

    .home-lint[data-phase="action"] & {
      opacity: .25;
    }
  }

  .home-lint-range {
    bottom: 0;
    left: calc((var(--column) - 1) * 1ch);
    width: calc((var(--end) - var(--column)) * 1ch);
    border-inline: 1px solid var(--home-lint-tone);
    visibility: hidden;
    opacity: 0;
    height: .5rem;
    transition: opacity var(--home-base) var(--home-ease);
    position: absolute;

    &:before {
      background-color: var(--home-lint-tone);
      transform-origin: 0;
      content: "";
      height: 1px;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
    }

    &:after, & > .home-lint-range-end {
      width: 1px;
      height: calc(var(--home-lint-lead) + (var(--line) - 1) * var(--home-lint-row) + .1875rem);
      background-image: linear-gradient(var(--home-lint-tone) 50%, transparent 50%);
      opacity: .7;
      transform-origin: top;
      content: "";
      background-size: 1px 3px;
      position: absolute;
      top: 100%;
      left: -1px;
    }

    & > .home-lint-range-end {
      left: auto;
      right: -1px;
    }

    .home-lint[data-phase="report"] & {
      visibility: visible;
      opacity: 1;

      &:before {
        animation-name: home-lint-draw;
        animation-duration: .6s;
        animation-timing-function: var(--home-ease);
        animation-delay: .1s;
        animation-fill-mode: both;
      }

      &:after, & > .home-lint-range-end {
        animation-name: home-lint-drop;
        animation-duration: .4s;
        animation-timing-function: var(--home-ease);
        animation-fill-mode: both;
      }

      & > .home-lint-range-end {
        animation-delay: .5s;
      }
    }
  }

  .home-lint-range-label {
    font-size: .625rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--home-lint-tone);
    background-color: color-mix(in oklab, var(--home-lint-tone) 10%, var(--home-well));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--home-lint-tone) 32%, transparent), 0 1px 2px light-dark(oklch(18% 0 none / .06), oklch(0% 0 none / .4));
    border-radius: .25rem .25rem .25rem 0;
    padding: .0625rem .375rem;
    line-height: 1.4;
    position: absolute;
    bottom: calc(100% + .25rem);
    left: -1px;
  }

  .home-lint-beam {
    top: 0;
    left: var(--home-lint-gutter);
    width: 1px;
    height: calc(var(--home-lint-ruler) + var(--home-lint-lead) + var(--home-lint-lines) * var(--home-lint-row));
    font-size: var(--home-lint-code-size);
    background-image: linear-gradient(transparent, var(--home-signal) 18%, var(--home-signal) 82%, transparent);
    box-shadow: 0 0 5px .5px color-mix(in oklab, var(--home-signal) 45%, transparent);
    opacity: 0;
    counter-reset: home-lint-column var(--home-lint-scan-column);
    pointer-events: none;
    position: absolute;

    &:before {
      top: var(--home-lint-ruler);
      background-image: linear-gradient(to right, transparent, color-mix(in oklab, var(--home-signal) 14%, transparent));
      content: "";
      width: 3rem;
      position: absolute;
      bottom: 0;
      right: 1px;
      mask-image: linear-gradient(#0000, #000 30% 70%, #0000);
    }

    &:after {
      font-family: var(--home-mono);
      font-size: .5625rem;
      font-weight: var(--font-weight-medium);
      font-variant-numeric: tabular-nums;
      color: var(--home-signal-ink);
      background-color: var(--home-signal);
      content: counter(home-lint-column);
      border-radius: .1875rem;
      padding: .0625rem .25rem;
      line-height: 1.2;
      position: absolute;
      top: .0625rem;
      left: .375rem;
    }

    @container home-lint-code (width < 49em) {
      height: auto;
      bottom: 0;

      &:before {
        top: 0;
      }

      &:after {
        display: none;
      }
    }
  }

  .home-lint-problems {
    min-height: 3.75rem;
    padding: .875rem var(--home-lint-inset);
    border-top: 1px solid var(--home-hairline);
    align-items: center;
    gap: .75rem;
    display: flex;
    position: relative;
  }

  .home-lint-problems:after {
    inset: .875rem var(--home-lint-inset);
    border-radius: var(--home-radius-well);
    background-image: var(--home-hatch);
    background-size: var(--home-hatch-size) var(--home-hatch-size);
    box-shadow: inset 0 0 0 1px var(--home-guide);
    transition: opacity var(--home-quick) var(--home-ease);
    pointer-events: none;
    content: "";
    position: absolute;
  }

  .home-lint-problems:has(.home-lint-problem[data-shown]):after {
    opacity: 0;
  }

  .home-lint-replay {
    border-radius: var(--home-radius-chip);
    height: 1.75rem;
    color: var(--home-text-quiet);
    cursor: pointer;
    transition: color var(--home-quick) var(--home-ease), background-color var(--home-quick) var(--home-ease);
    flex: none;
    align-items: center;
    gap: .375rem;
    padding-inline: .625rem;
    font-size: .75rem;
    display: inline-flex;

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

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

  .home-lint-problem-stack {
    flex: auto;
    min-width: 0;
    display: grid;
  }

  .home-lint-problem-cell {
    visibility: hidden;
    grid-area: 1 / 1;
    min-width: 0;
    display: grid;

    &[data-active] {
      visibility: visible;
    }

    & > * {
      grid-area: 1 / 1;
    }
  }

  .home-lint-problem {
    opacity: 0;
    transition: opacity var(--home-quick) var(--home-ease), translate var(--home-quick) var(--home-ease);
    translate: 0 .25rem;

    &[data-shown] {
      opacity: 1;
      transition-duration: var(--home-base);
      transition-delay: var(--home-quick);
      translate: 0;
    }
  }

  .home-lint-problem {
    min-width: 0;
    font-family: var(--home-mono);
    color: var(--home-text-quiet);
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .625rem;
    margin: 0;
    font-size: .75rem;
    line-height: 1.5;
    display: grid;
  }

  .home-lint-problem-rule {
    overflow-wrap: anywhere;
    color: var(--home-text);
  }

  .home-lint-problem-icon {
    flex: none;
  }

  .home-lint-menu {
    z-index: 3;
    width: max-content;
    max-width: min(30rem, 100% - 1rem);
    font-family: var(--font-family-sans);
    background-color: var(--home-float);
    box-shadow: 0 0 0 1px var(--home-hairline),
      var(--home-edge),
      0 1px 2px light-dark(oklch(18% 0 none / .06), oklch(0% 0 none / .4)),
      0 8px 20px -6px light-dark(oklch(18% 0 none / .14), oklch(0% 0 none / .55)),
      0 24px 48px -16px light-dark(oklch(18% 0 none / .12), oklch(0% 0 none / .5));
    transform-origin: 1rem 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--home-quick) var(--home-ease), translate var(--home-quick) var(--home-ease), scale var(--home-quick) var(--home-ease), visibility 0s var(--home-quick);
    border-radius: .625rem;
    padding: .3125rem;
    line-height: 1.4;
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 -.25rem;
    scale: .97;

    &[data-open] {
      visibility: visible;
      opacity: 1;
      transition: opacity var(--home-base) var(--home-ease), translate var(--home-base) var(--home-ease), scale var(--home-base) var(--home-ease);
      translate: 0;
      scale: 1;
    }
  }

  .home-lint-menu-label {
    padding: .25rem .5rem .375rem;
  }

  .home-lint-menu-item {
    text-align: left;
    width: 100%;
    color: var(--home-text);
    cursor: pointer;
    transition: background-color var(--home-quick) var(--home-ease);
    border-radius: .375rem;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .625rem;
    font-size: .8125rem;
    display: flex;

    & > span {
      overflow-wrap: anywhere;
      min-width: 0;
    }

    & code {
      font-family: var(--home-mono);
      white-space: normal;
      font-size: .75rem;
    }

    &:hover, [data-open] > & {
      background-color: color-mix(in oklab, var(--home-text) 6%, transparent);
    }

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

  .home-lint-menu-icon {
    color: var(--home-signal);
    flex: none;
    margin-top: .0625rem;
  }

  .home-lint-surfaces {
    z-index: 1;
    align-content: start;
    gap: var(--home-gap);
    margin-top: calc(-1 * var(--home-lint-tuck));
    padding-inline: var(--home-lint-behind);
    display: grid;
    position: relative;

    @container home-lint (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .home-lint-pane {
    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-edge), var(--home-contact), 0 12px 28px -18px light-dark(oklch(18% 0 none / .12), oklch(0% 0 none / .55));
    transition: translate var(--home-slow) var(--home-ease), opacity var(--home-slow) var(--home-ease);
    container: home-lint-pane / inline-size;

    @container home-lint (width < 40rem) {
      & + & {
        z-index: -1;
        margin-top: calc(-1 * var(--home-lint-tuck) - var(--home-gap));
      }
    }

    &:is([data-state="idle"], [data-state="running"]) {
      opacity: .7;
      transition-duration: var(--home-base);
      translate: 0 -.625rem;
    }

    &[data-state="off"] {
      opacity: .6;
    }
  }

  .home-lint-pane-bar:after, .home-lint-problems:before {
    background-image: linear-gradient(to right, transparent, var(--home-signal), transparent);
    opacity: 0;
    pointer-events: none;
    content: "";
    width: 40%;
    height: 1px;
    position: absolute;
    left: 0;
  }

  .home-lint-pane-bar {
    height: calc(3rem + var(--home-lint-tuck));
    padding-top: var(--home-lint-tuck);
  }

  .home-lint-pane-package {
    @container home-lint-pane (width < 26rem) {
      display: none;
    }
  }

  .home-lint-pane-bar:after {
    bottom: -1px;
  }

  .home-lint-problems:before {
    top: -1px;
  }

  .home-lint-pane-body {
    padding: 1.25rem var(--home-lint-inset) 1.5rem;
    background-color: var(--home-well);
    flex: auto;
    display: grid;
  }

  .home-lint-pane-cell {
    visibility: hidden;
    opacity: 0;
    min-width: 0;
    transition: opacity var(--home-base) var(--home-ease), visibility 0s var(--home-base);
    grid-area: 1 / 1;

    &[data-active] {
      visibility: visible;
      opacity: 1;
      transition: opacity var(--home-base) var(--home-ease);
    }
  }

  .home-lint-terminal {
    font-family: var(--home-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--home-text-body);
    background: none;
    gap: .375rem;
    margin: 0;
    padding: 0;
    font-size: .75rem;
    line-height: 1.75;
    display: grid;

    & > * {
      text-indent: -2ch;
      min-width: 0;
      padding-left: 2ch;
      display: block;
    }
  }

  .home-lint-command {
    color: var(--home-text);
  }

  .home-lint-prompt, .home-lint-call {
    color: var(--home-text-faint);
  }

  .home-lint-report {
    text-indent: 0;
    flex-wrap: wrap;
    column-gap: 2ch;
    padding-left: 2ch;
    display: flex;
  }

  .home-lint-rule-id {
    color: var(--home-text-body);
  }

  .home-lint-json-key {
    color: var(--home-code-attr);
  }

  .home-lint-json-string {
    color: var(--home-code-string);
  }

  .home-lint-json-number {
    color: var(--color-code-number);
  }

  .home-lint-out {
    opacity: 0;
    transition: opacity var(--home-base) var(--home-ease);

    :is([data-state="lit"], [data-state="resolved"]) [data-active] & {
      opacity: 1;
    }

    [data-state="resolved"] [data-active] & {
      opacity: .4;
    }
  }

  .home-lint-loc {
    border-radius: .1875rem;
  }

  @media (prefers-reduced-motion: no-preference){
    .home-lint[data-phase="scan"] .home-lint-beam {
      animation: 1s linear both home-lint-scan;
    }

    .home-lint[data-phase="fixed"] .home-lint-beam {
      animation: .6s linear .1s both home-lint-scan;
    }

    .home-lint[data-phase="report"] [data-problem] .home-lint-glyph:after {
      animation: .9s ease-out .2s both home-lint-ring;
    }

    .home-lint[data-phase="scan"] .home-lint-source[data-active] .home-lint-token {
      animation: .5s ease-out both home-lint-read;
      animation-delay: calc(var(--column) / var(--home-lint-columns) * 1s - 80ms);
    }

    .home-lint[data-phase="report"] .home-lint-token[data-marked]:after {
      animation-name: home-lint-squiggle;
      animation-duration: .32s;
      animation-timing-function: var(--home-ease);
      animation-delay: calc((var(--column) - 1) * 4ms);
      animation-fill-mode: both;
    }

    .home-lint[data-reported] :is([data-active], .home-lint-range) .home-lint-loc {
      animation-name: home-lint-lit;
      animation-duration: 2.2s;
      animation-timing-function: var(--home-ease);
      animation-fill-mode: both;
    }

    .home-lint-problem[data-shown] .home-lint-problem-icon {
      animation-name: home-lint-pop;
      animation-duration: .42s;
      animation-timing-function: var(--home-ease);
      animation-fill-mode: both;
    }

    [data-state="lit"] [data-active] .home-lint-out {
      animation-name: home-lint-print;
      animation-duration: .42s;
      animation-timing-function: var(--home-ease);
      animation-delay: calc(var(--i) * 70ms + .12s);
      animation-fill-mode: both;
    }

    .home-lint[data-phase="report"] .home-lint-problems:before, [data-state="lit"] > .home-lint-pane-bar:after {
      animation-name: home-lint-pulse;
      animation-duration: 1.1s;
      animation-timing-function: var(--home-ease-inout);
      animation-fill-mode: both;
    }

    [data-state="running"] [data-active] .home-lint-command:after {
      vertical-align: -.2em;
      background-color: var(--home-text-quiet);
      content: "";
      width: .5em;
      height: 1.1em;
      margin-inline: .25em -.75em;
      animation: .8s step-end infinite home-lint-caret;
      display: inline-block;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .home-lint-pane, .home-lint-pane:is([data-state="idle"], [data-state="running"]) {
      opacity: 1;
      transition: none;
      translate: none;
    }

    .home-lint-token[data-removing], .home-lint-token[data-removing]:before, .home-lint-order, .home-lint-glyph > svg, .home-lint-range:before, .home-lint-range:after, .home-lint-range-end {
      animation: none;
    }

    .home-lint-problem, .home-lint-menu {
      translate: none;
      scale: none;
    }
  }

  .home-lint-tab {
    --home-editor-tab-fill: var(--home-well);
  }
}

@keyframes home-lint-scan {
  0% {
    left: var(--home-lint-gutter);
    opacity: 0;
    --home-lint-scan-column: 1;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: min(100% - 1rem, var(--home-lint-gutter) + var(--home-lint-columns) * 1ch);
    opacity: 0;
    --home-lint-scan-column: var(--home-lint-columns);
  }
}

@keyframes home-lint-ring {
  from {
    opacity: 0.9;
    scale: 0.6;
  }

  to {
    opacity: 0;
    scale: 2.4;
  }
}

@keyframes home-lint-read {
  35% {
    color: var(--home-text);
    background-color: color-mix(in oklab, var(--home-signal) 20%, transparent);
  }
}

@keyframes home-lint-squiggle {
  from {
    scale: 0 1;
  }
}

@keyframes home-lint-strike {
  to {
    scale: 1 1;
  }
}

@keyframes home-lint-fold {
  to {
    margin-right: calc((var(--length) + 1) * -1ch);
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes home-lint-badge {
  from {
    opacity: 0;
    translate: -50% 0.25rem;
  }
}

@keyframes home-lint-pop {
  from {
    opacity: 0;
    scale: 0.5;
  }
}

@keyframes home-lint-fade {
  from {
    opacity: 0;
  }
}

@keyframes home-lint-draw {
  from {
    scale: 0 1;
  }
}

@keyframes home-lint-drop {
  from {
    scale: 1 0;
  }
}

@keyframes home-lint-lit {
  0% {
    background-color: transparent;
    box-shadow: 0 0 0 0.125rem transparent;
  }

  14% {
    color: var(--home-text);
    background-color: color-mix(in oklab, var(--home-signal) 34%, transparent);
    box-shadow: 0 0 0 0.125rem color-mix(in oklab, var(--home-signal) 34%, transparent);
  }

  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0.125rem transparent;
  }
}

@keyframes home-lint-pulse {
  0% {
    opacity: 0;
    translate: -100% 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 250% 0;
  }
}

@keyframes home-lint-print {
  from {
    opacity: 0;
    translate: 0 0.25rem;
  }
}

@keyframes home-lint-caret {
  50% {
    opacity: 0;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-weight-medium:500}: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-sans:"Geist", "Noto Sans TC"}}@layer components {
  .home-wf-grid > .home-bento-card {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    display: grid;
  }

  .home-wf-figure {
    min-width: 0;
    padding: 0 1.75rem 1.75rem;
    position: relative;
    container: home-workflow / inline-size;

    @media (width >= 52.125rem){
      padding: 0 2.25rem 2.25rem;
    }

    @media (width >= 80rem){
      padding: 0 2.75rem 2.75rem;
    }
  }

  .home-wf-scene {
    isolation: isolate;
    width: 100%;
    min-width: 0;
    font-family: var(--home-mono);
    color: var(--home-text);
    position: relative;
  }

  .home-wf-scene > site-island {
    display: contents;
  }

  .home-wf-canvas {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    color: var(--home-text);
    background-color: var(--home-sheet);
    border-top-color: var(--home-rule);
    border-right-color: light-dark(color-mix(in oklab, var(--home-sheet) 15%, var(--home-ground)), color-mix(in oklab, var(--home-sheet) 84%, white));
    border-bottom-color: light-dark(color-mix(in oklab, var(--home-ground) 95%, var(--home-text)), color-mix(in oklab, var(--home-sheet) 94%, black));
    caret-color: var(--home-text-quiet);
    outline-color: var(--home-signal);
    text-decoration-color: light-dark(var(--home-highlight), #ffffff1f);
    column-rule-color: var(--home-ground);
    flood-color: light-dark(#18181b21, #00000073);
    stop-color: var(--stone-quiet-top);
    fill: var(--stone-quiet-mid);
    lighting-color: var(--stone-quiet-bottom);
    text-emphasis-color: var(--stone-rim);
    stroke: var(--stone-mirror);
    font-family: var(--home-mono);
    position: absolute;
    inset: 0;
  }

  .home-wf-scene[data-renderer="canvas"] {
    & .home-wf-canvas {
      opacity: 1;
    }

    & .home-wf-anchor {
      left: var(--home-wf-x);
      top: var(--home-wf-y);
      width: var(--home-wf-w, auto);
      height: var(--home-wf-h, auto);
      box-shadow: none;
      background: none;
      border: 0;
      margin: 0;
      padding: 0;
      position: absolute;
      translate: -50% -50%;
    }
  }

  .home-wf-anchor {
    font-family: var(--home-mono);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    border-radius: 7px;
    outline: none;

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

  .home-wf-scene[data-wf-native] {
    height: auto;
  }

  .home-wf-trace-stage[data-wf-native]:not([data-renderer="canvas"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-wf-native] .home-wf-routes-defs {
    margin-bottom: 1rem;
  }

  [data-wf-native] .home-wf-framework-grid {
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  }

  .home-wf-routes:has([data-wf-native]) .home-wf-routes-tabs {
    border-radius: var(--home-radius-control);
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    display: grid;

    &:before {
      display: none;
    }

    & .home-wf-routes-tab {
      border-radius: calc(var(--home-radius-control) - 3px);

      &:has(:checked) {
        background-color: var(--home-sheet);
        box-shadow: 0 0 0 1px var(--home-hairline);
      }
    }

    & .home-wf-routes-input {
      height: 100%;
      inset: 0;
    }
  }

  .home-wf-stage {
    height: 24rem;
  }

  .home-wf-framework-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .75rem;
    padding-block: 2rem;
    display: grid;
  }

  .home-wf-framework {
    -webkit-tap-highlight-color: transparent;
    border-radius: 9px;
    place-items: center;
    min-width: 0;
    min-height: 44px;
    display: grid;
  }

  .home-wf-framework-logo {
    opacity: .62;
    filter: grayscale(.6);
    width: 30px;
    height: 30px;
    transition: opacity var(--home-base) var(--home-ease), filter var(--home-base) var(--home-ease), translate var(--home-slow) var(--home-ease);

    [data-lit] > & {
      opacity: calc(.62 + var(--home-wf-charge, 1) * .38);
      filter: grayscale(calc(.6 * (1 - var(--home-wf-charge, 1))));
      translate: 0 calc(-3px * var(--home-wf-charge, 1));
    }

    :is(:hover, :focus-visible) > & {
      opacity: 1;
      filter: grayscale(0);
      translate: 0 -3px;
    }

    @media (prefers-reduced-motion: reduce){
      &, [data-lit] > &, :is(:hover, :focus-visible) > & {
        translate: none;
      }
    }
  }

  .home-wf-integration-grid {
    justify-content: center;
    gap: var(--spacing-xs);
    margin-block: var(--spacing-md);
    flex-wrap: wrap;
    display: flex;
  }

  .home-wf-integration {
    font-size: var(--home-label);
    color: var(--home-text-faint);
    background-color: var(--home-ground);
    place-items: center;
    padding: .375rem .5rem;
    display: grid;

    &[data-lit] {
      color: var(--home-text);
    }
  }

  .home-wf-manifest {
    width: fit-content;
    color: var(--stone-text);
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 1rem auto;
    padding: .75rem;
    font-size: .6875rem;
    display: flex;
  }

  .home-wf-source-mark {
    opacity: .55;
    font-size: .875rem;
  }

  .home-wf-readout {
    min-height: 1.5em;
    font-family: var(--home-mono);
    font-size: var(--home-label);
    color: var(--home-text-faint);
    text-align: center;
    margin: 1rem 0 0;
  }

  @container home-workflow (width < 30rem) {
    .home-wf-stage {
      height: 28rem;
    }

    .home-wf-framework-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container home-workflow (width < 16rem) {
    .home-wf-integration {
      font-size: .625rem;
    }
  }

  .home-wf-repo-stage {
    height: 24rem;
  }

  .home-wf-repo-app {
    margin-block: 1.5rem;
  }

  .home-wf-repo-entry {
    color: var(--stone-text);
    font-size: var(--home-label);
    place-items: center;
    padding: .5rem;
    display: grid;
  }

  .home-wf-scene[data-active="0"] [data-wf-anchor="entry-1"], .home-wf-scene[data-active="1"] [data-wf-anchor="entry-0"] {
    color: var(--home-text-body);
  }

  .home-wf-scene:not([data-renderer="canvas"])[data-active="0"] [data-wf-anchor="entry-1"], .home-wf-scene:not([data-renderer="canvas"])[data-active="1"] [data-wf-anchor="entry-0"] {
    background: var(--home-sheet);
    box-shadow: 0 0 0 1px var(--home-hairline);
    border-color: #0000;
  }

  .home-wf-repo-file {
    width: 100%;
    color: var(--home-text);
    background-color: var(--home-ground);
    cursor: pointer;
    place-content: center;
    gap: .5rem;
    padding: 1rem;
    display: grid;
  }

  .home-wf-repo-directory, .home-wf-repo-file-name {
    font-size: var(--home-label);
    color: var(--home-text-faint);
  }

  .home-wf-repo-class {
    justify-content: center;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    display: flex;
  }

  .home-wf-repo-swatch {
    background-color: var(--home-wf-primary);
    border-radius: 3px;
    width: .625rem;
    height: .625rem;
    box-shadow: inset 0 0 0 1px #0000001a;
  }

  [data-renderer="canvas"] {
    & .home-wf-repo-directory {
      display: none;
    }
  }

  .home-wf-routes-tabs.home-segmented-control {
    --home-segment-pad: 3px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 14.25rem);
    margin-bottom: 1rem;
    display: inline-grid;

    &:before {
      content: "";
      z-index: -1;
      inset-block: var(--home-segment-pad);
      left: var(--home-segment-pad);
      width: calc((100% - var(--home-segment-pad) * 2) / 3);
      border-radius: inherit;
      background-color: light-dark(var(--home-sheet), color-mix(in oklab, var(--home-sheet) 86%, white));
      box-shadow: 0 0 0 1px var(--home-hairline), var(--home-contact), inset 0 1px 0 var(--home-highlight);
      transition: translate var(--home-base) var(--home-ease);
      position: absolute;
      translate: 0;
    }

    &:has([value="1"]:checked):before {
      translate: 100%;
    }

    &:has([value="2"]:checked):before {
      translate: 200%;
    }
  }

  .home-wf-routes-tab.home-segmented-control-option {
    min-width: 0;
    height: 2rem;
    min-height: 32px;
    padding-inline: .75rem;
    font-size: .75rem;
    position: relative;

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

    &:has(:focus-visible), [data-wf-keyboard] &:has(:focus) {
      outline: 2px solid var(--home-ink);
      outline-offset: 1px;
    }
  }

  .home-wf-routes-input {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: calc(100% + 12px);
    margin: 0;
    position: absolute;
    inset: -6px 0;
  }

  .home-wf-routes-stage {
    height: 22.5rem;
  }

  .home-wf-routes-paper {
    background-color: var(--home-ground);
    border-radius: 10px;
  }

  .home-wf-routes-sheet {
    padding: .875rem 1rem;
    display: none;
  }

  .home-wf-routes:has([value="0"]:checked) [data-sheet="0"], .home-wf-routes:has([value="1"]:checked) [data-sheet="1"], .home-wf-routes:has([value="2"]:checked) [data-sheet="2"] {
    display: block;
  }

  .home-wf-routes-filename {
    border-bottom: 1px solid var(--home-hairline);
    font-size: var(--home-label);
    color: var(--home-text-faint);
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    display: block;
  }

  .home-wf-routes-code {
    color: var(--home-text-body);
    white-space: pre;
    font-size: .6875rem;
    line-height: 1.65;
    display: block;
    overflow: hidden;

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

  .home-wf-routes-code > code {
    font: inherit;
    display: block;
  }

  .home-wf-routes-line {
    min-height: 1.65em;
    display: block;
  }

  .home-wf-routes-ref {
    color: var(--home-text);
    text-decoration: underline var(--home-rule-strong);
    text-underline-offset: .25em;
  }

  .home-wf-routes-defs {
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
    display: flex;
  }

  .home-wf-routes-def {
    text-align: center;
    color: var(--home-text-body);
    font-size: .625rem;
    line-height: 22px;
  }

  .home-wf-routes-def[data-lit] {
    color: var(--home-text);
  }

  @container home-workflow (width >= 21.25rem) {
    .home-wf-routes-code {
      font-size: .75rem;
    }
  }

  .home-wf-trace-stage {
    height: 26rem;
  }

  .home-wf-trace-stage:not([data-renderer="canvas"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 1rem;
    display: grid;

    & .home-wf-trace-node {
      min-height: 44px;
      margin: 0;
    }

    & .home-wf-trace-node-definition, & .home-wf-trace-node-output {
      grid-column: 1 / -1;
    }
  }

  .home-wf-trace-node {
    min-height: 44px;
    color: var(--home-text-body);
    background-color: var(--home-ground);
    font-size: var(--home-label);
    cursor: pointer;
    transition: color var(--home-base) var(--home-ease);
    justify-content: center;
    align-items: center;
    gap: .375rem;
    margin-block: 1rem;
    padding: .5rem .75rem;
    display: flex;
  }

  .home-wf-trace-node-definition {
    color: var(--stone-text);
    flex-direction: column;
    gap: .375rem;
  }

  .home-wf-trace-change {
    align-items: center;
    gap: .375rem;
    display: flex;
  }

  .home-wf-trace-swatch {
    border-radius: 3px;
    width: .625rem;
    height: .625rem;
  }

  .home-wf-trace-arrow {
    opacity: .5;
    font-size: .625rem;
  }

  .home-wf-trace-dot {
    background-color: color-mix(in oklab, var(--home-wf-after) calc(var(--home-wf-changed, 1) * 100%), var(--home-wf-before));
    border-radius: 50%;
    width: .375rem;
    height: .375rem;
  }

  [data-renderer="canvas"] .home-wf-trace-node:not([data-lit]) {
    color: var(--home-text-quiet);

    &:is(:hover, :focus-visible) {
      color: var(--home-text-body);
    }
  }

  @container home-workflow (width < 30.625rem) {
    .home-wf-trace-stage {
      height: 28rem;
    }
  }

  .home-wf-play {
    z-index: 2;
    width: 44px;
    height: 44px;
    color: var(--home-text-quiet);
    cursor: pointer;
    isolation: isolate;
    transition: color var(--home-quick) var(--home-ease);
    background: none;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    display: none;
    position: absolute;
    bottom: -10px;
    right: 0;

    &:before {
      z-index: -1;
      border-radius: inherit;
      box-shadow: 0 0 0 1px var(--home-hairline),
        inset 0 1px 0 var(--home-highlight),
        calc(var(--cast-x) * .5) calc(var(--cast-y) * .5) 6px -2px light-dark(oklch(18% 0 none / .12), oklch(0% 0 none / .5));
      backdrop-filter: blur(4px);
      transition: box-shadow var(--home-quick) var(--home-ease);
      content: "";
      background: linear-gradient(light-dark(#fffffff2, #ffffff17), light-dark(#fff9, #ffffff08));
      position: absolute;
      inset: 8px;
    }

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

    &:hover:before {
      box-shadow: 0 0 0 1px var(--home-rule-strong), inset 0 1px 0 var(--home-highlight), calc(var(--cast-x) * .7) calc(var(--cast-y) * .7) 8px -2px light-dark(oklch(18% 0 none / .14), oklch(0% 0 none / .55));
    }

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

    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
      &:before {
        background: var(--home-sheet);
        backdrop-filter: none;
      }
    }
  }

  [data-renderer="canvas"] .home-wf-play {
    display: grid;
  }

  .home-wf-play-icon {
    display: none;
  }

  [data-wf-paused] {
    & .home-wf-pause-icon {
      display: none;
    }

    & .home-wf-play-icon {
      display: block;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-wf-routes-tabs.home-segmented-control:before {
      transition: none;
    }

    .home-wf-play {
      display: none !important;
    }

    .home-wf-anchor, .home-wf-framework-logo {
      transition: none;
    }
  }

  @media print {
    .home-wf-canvas, .home-wf-play {
      display: none !important;
    }

    .home-wf-scene {
      height: auto;
    }

    .home-wf-scene[data-renderer="canvas"] .home-wf-anchor {
      width: auto;
      height: auto;
      padding: .5rem;
      position: static;
      translate: none;
    }

    .home-wf-repo-app {
      justify-content: space-around;
      display: flex;
    }

    .home-wf-manifest, .home-wf-repo-entry, .home-wf-trace-node-definition {
      color: var(--home-text);
      box-shadow: none;
      background: none;
    }

    .home-wf-trace-stage {
      flex-wrap: wrap;
      gap: .5rem;
      display: flex;
    }
  }

  @media (forced-colors: active) {
    .home-wf-canvas, .home-wf-play {
      display: none !important;
    }

    .home-wf-routes-tabs {
      outline: 1px solid buttonborder;
    }

    .home-wf-routes-tab:has(:checked) {
      outline-offset: -2px;
      outline: 2px solid highlight;
    }
  }
}

@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;--spacing-xs:.5rem;--spacing-md:1rem}: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))}}