/* App.wizz */
[data-wizz-s="sj00x36"].page {
    inline-size: 100%;
    max-inline-size: 78rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    view-transition-name: doc-main;
  }

  [data-wizz-s="sj00x36"].hero {
    padding-block: clamp(4rem, 12vw, 8rem) clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
  }

  [data-wizz-s="sj00x36"].copy {
    max-inline-size: 72rem;
    margin-inline: auto;
  }

  [data-wizz-s="sj00x36"].title {
    margin: 0;
    font-size: clamp(2.8rem, 1.4rem + 5vw, 6rem);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-wrap: balance;
    text-shadow: var(--ink-shadow);
  }

  /* Mirrors the ::selection tint so the word reads as already highlighted. */
  [data-wizz-s="sj00x36"].mark {
    background-color: color-mix(in oklch, var(--accent) 35%, transparent);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  [data-wizz-s="sj00x36"].shine {
    background: linear-gradient(100deg, var(--cyan), var(--accent) 45%, var(--amber) 80%, var(--cyan));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: shine-sj00x36 9s linear infinite;
  }

  @keyframes shine-sj00x36 {
    to { background-position: -200% 0; }
  }

  [data-wizz-s="sj00x36"].lede {
    max-inline-size: 50rem;
    margin: 1.5rem auto 0;
    color: var(--ink-2);
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.65;
    text-wrap: pretty;
  }

  .lede code[data-wizz-s="sj00x36"] {
    padding: 0.1em 0.35em;
    border-radius: 6px;
    background-color: var(--well);
    color: var(--ink);
    font-size: 0.9em;
  }

  [data-wizz-s="sj00x36"].cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 2.5rem;
  }

  [data-wizz-s="sj00x36"].btn-hero {
    min-block-size: 3.5rem;
    padding-inline: 2rem;
    font-size: 1.1rem;
  }

  [data-wizz-s="sj00x36"].btn-primary.btn-hero {
    padding-inline: 2.5rem;
    font-weight: 700;
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent),
      0 18px 50px -12px color-mix(in oklch, var(--accent) 90%, transparent),
      inset 0 1px 0 oklch(1 0 0 / 0.6);
  }

  [data-wizz-s="sj00x36"].btn-primary.btn-hero:hover {
    transform: translateY(-2px);
  }

  .btn-primary.btn-hero [data-wizz-s="sj00x36"].icon {
    transition: transform var(--dur) var(--ease-out);
  }

  .btn-primary.btn-hero:hover [data-wizz-s="sj00x36"].icon {
    transform: translateX(3px);
  }

  [data-wizz-s="sj00x36"].install {
    max-inline-size: 60rem;
    margin: 2.5rem auto 0;
    text-align: start;
  }

  [data-wizz-s="sj00x36"].band {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }

  [data-wizz-s="sj00x36"].band-head {
    max-inline-size: 40rem;
    margin-block-end: 2rem;
  }

  [data-wizz-s="sj00x36"].eyebrow {
    margin: 0 0 0.5rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  h2[data-wizz-s="sj00x36"] {
    margin: 0;
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
  }

  h2 code[data-wizz-s="sj00x36"] {
    font-size: 0.85em;
    color: var(--accent);
  }

  [data-wizz-s="sj00x36"].features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
  }

  [data-wizz-s="sj00x36"].feature {
    padding: 1.5rem;
  }

  [data-wizz-s="sj00x36"].f-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: var(--r-sm);
    border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
    background: linear-gradient(135deg, color-mix(in oklch, var(--cyan) 22%, transparent), color-mix(in oklch, var(--accent) 22%, transparent));
    color: var(--ink);
    font-size: 1.15rem;
    box-shadow: inset 0 1px 0 var(--glint);
  }

  .feature h3[data-wizz-s="sj00x36"] {
    margin: 1rem 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
  }

  .feature p[data-wizz-s="sj00x36"] {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.65;
  }

  [data-wizz-s="sj00x36"].pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  [data-wizz-s="sj00x36"].step {
    position: relative;
    padding: 1.5rem;
  }

  [data-wizz-s="sj00x36"].n {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
  }

  .step h3[data-wizz-s="sj00x36"] {
    margin: 0.5rem 0 0.35rem;
    font-size: 1.2rem;
  }

  .step p[data-wizz-s="sj00x36"] {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.93rem;
    line-height: 1.6;
  }

  [data-wizz-s="sj00x36"].tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
  }

  [data-wizz-s="sj00x36"].tile {
    display: grid;
    gap: 0.3rem;
    padding: 1.4rem 3.25rem 1.4rem 1.4rem;
    color: var(--ink);
    text-decoration: none;
  }

  [data-wizz-s="sj00x36"].tile:hover {
    color: var(--ink);
  }

  [data-wizz-s="sj00x36"].t-kicker {
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  [data-wizz-s="sj00x36"].t-title {
    font-size: 1.15rem;
    font-weight: 700;
  }

  [data-wizz-s="sj00x36"].t-body {
    color: var(--ink-2);
    font-size: 0.92rem;
  }

  [data-wizz-s="sj00x36"].t-go {
    position: absolute;
    inset-block-start: 1.4rem;
    inset-inline-end: 1.4rem;
    color: var(--accent);
    transition: transform var(--dur) var(--ease-out);
  }

  .tile:hover [data-wizz-s="sj00x36"].t-go {
    transform: translateX(4px);
  }

  /* Card fly-in + hover lift. The entrance uses the individual translate and
     scale properties so it never fights the hover's transform. Transitions
     live only on .is-in, so re-arming a card hides it instantly. */
  [data-wizz-s="sj00x36"].fly {
    transition: transform var(--dur) var(--ease-out);
  }

  @media (hover: hover) {
    [data-wizz-s="sj00x36"].fly:hover {
      transform: translateY(-5px);
    }
  }

  [data-reveal="armed"] [data-wizz-s="sj00x36"].fly:not(.is-in) {
    opacity: 0;
    translate: 0 3rem;
    scale: 0.94;
  }

  [data-reveal="armed"] [data-wizz-s="sj00x36"].fly.is-in {
    --delay: calc(var(--i, 0) * var(--stagger) * 1.4);
    transition:
      transform var(--dur) var(--ease-out),
      opacity var(--dur-slow) var(--ease-out) var(--delay),
      translate 900ms var(--ease-spring) var(--delay),
      scale 900ms var(--ease-spring) var(--delay);
  }

  [data-wizz-s="sj00x36"].foot {
    padding-block: 2rem 3rem;
    border-block-start: 1px solid var(--hairline);
    color: var(--ink-3);
    font-size: 0.88rem;
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-wizz-s="sj00x36"].shine {
      animation: none;
    }

    /* Fade only: no travel, no lift. */
    [data-reveal="armed"] [data-wizz-s="sj00x36"].fly:not(.is-in) {
      translate: none;
      scale: none;
    }

    [data-wizz-s="sj00x36"].fly:hover {
      transform: none;
    }
  }

/* components/ApiDemo.wizz */
[data-wizz-s="sd7x4oi"].api-demo {
    display: grid;
    gap: 0.9rem;
  }

  [data-wizz-s="sd7x4oi"].row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  [data-wizz-s="sd7x4oi"].field {
    display: flex;
    flex: 1;
    align-items: center;
    min-inline-size: 16rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background-color: var(--well);
    overflow: hidden;
  }

  [data-wizz-s="sd7x4oi"].field:focus-within {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--focus-ring) 22%, transparent);
  }

  [data-wizz-s="sd7x4oi"].prefix {
    padding-inline: 1rem 0.2rem;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    white-space: nowrap;
  }

  input[data-wizz-s="sd7x4oi"] {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    outline: none;
  }

  [data-wizz-s="sd7x4oi"].send {
    min-block-size: 2.75rem;
    padding-inline: 1.2rem;
    border: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, oklch(0.88 0.12 210), oklch(0.8 0.14 292));
    color: oklch(0.16 0.03 270);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="sd7x4oi"].send:active {
    transform: scale(0.96);
  }

  [data-wizz-s="sd7x4oi"].response {
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background-color: var(--well);
    overflow: hidden;
  }

  [data-wizz-s="sd7x4oi"].meta {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0.5rem 0.9rem;
    border-block-end: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-3);
  }

  [data-wizz-s="sd7x4oi"].status {
    font-weight: 700;
  }

  [data-wizz-s="sd7x4oi"].is-loading { color: var(--amber); }
  [data-wizz-s="sd7x4oi"].is-ok { color: var(--mint); }
  [data-wizz-s="sd7x4oi"].is-error { color: var(--rose); }

  pre[data-wizz-s="sd7x4oi"] {
    margin: 0;
    padding: 0.9rem 1rem;
    max-block-size: 16rem;
    overflow: auto;
    color: var(--code-ink);
    font-size: 0.84rem;
    line-height: 1.6;
  }

/* components/ApiEntry.wizz */
[data-wizz-s="suri9xc"].entry {
    display: grid;
    /* minmax(0, 1fr) rather than the implicit auto track: an auto track grows
       to the min-content of long code lines and pushes every row past the card. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    margin-block-start: 1.5rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--hairline);
    background-color: var(--hover-fill);
    box-shadow: inset 0 1px 0 var(--glint);
    scroll-margin-block-start: calc(var(--chrome-top) + 1rem);
  }

  [data-wizz-s="suri9xc"].head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
  }

  [data-wizz-s="suri9xc"].name {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  [data-wizz-s="suri9xc"].self {
    color: var(--ink);
    text-decoration: none;
  }

  [data-wizz-s="suri9xc"].self:hover {
    color: var(--accent);
  }

  [data-wizz-s="suri9xc"].kind {
    padding: 0.12rem 0.55rem;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
    background-color: color-mix(in oklch, var(--accent) 14%, transparent);
    color: var(--accent-strong);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  [data-wizz-s="suri9xc"].origin {
    margin-inline-start: auto;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  [data-wizz-s="suri9xc"].sig {
    margin: 0;
    padding: 0.7rem 0.95rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--well-border);
    background-color: var(--well);
    color: var(--tok-fn);
    font-size: 0.88rem;
    overflow-x: auto;
    white-space: pre-wrap;
  }

  [data-wizz-s="suri9xc"].summary {
    margin: 0;
    color: var(--ink-2);
    line-height: 1.7;
  }

  [data-wizz-s="suri9xc"].params {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--well-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background-color: var(--well);
    font-size: 0.88rem;
  }

  th[data-wizz-s="suri9xc"],
  td[data-wizz-s="suri9xc"] {
    padding: 0.55rem 0.8rem;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--well-border);
    color: var(--ink-2);
  }

  th[data-wizz-s="suri9xc"] {
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--hover-fill);
  }

  tr:last-child td[data-wizz-s="suri9xc"] {
    border-block-end: 0;
  }

  td code[data-wizz-s="suri9xc"] {
    color: var(--ink);
    font-size: 0.85em;
    white-space: nowrap;
  }

  td code[data-wizz-s="suri9xc"].type {
    color: var(--tok-tag);
  }

  [data-wizz-s="suri9xc"].table-scroll {
    overflow-x: auto;
  }

  [data-wizz-s="suri9xc"].returns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    color: var(--ink-2);
    font-size: 0.95rem;
  }

  [data-wizz-s="suri9xc"].is-hidden {
    display: none;
  }

  [data-wizz-s="suri9xc"].ret-label {
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block-start: 0.2rem;
  }

/* components/Callout.wizz */
[data-wizz-s="s14al3ry"].callout {
    --tone: var(--cyan);
    position: relative;
    margin: 0;
    padding: 1rem 1.15rem 1rem 1.35rem;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in oklch, var(--tone) 32%, transparent);
    background:
      linear-gradient(110deg, color-mix(in oklch, var(--tone) 13%, transparent), transparent 70%),
      var(--well);
    box-shadow: inset 0 1px 0 var(--glint);
    overflow: hidden;
  }

  [data-wizz-s="s14al3ry"].callout::before {
    content: "";
    position: absolute;
    inset-block: 0.75rem;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--tone);
    box-shadow: 0 0 14px var(--tone);
  }

  [data-wizz-s="s14al3ry"].tip { --tone: var(--mint); }
  [data-wizz-s="s14al3ry"].warn { --tone: var(--amber); }

  [data-wizz-s="s14al3ry"].title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
  }

  [data-wizz-s="s14al3ry"].glyph {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background-color: var(--tone);
  }

  [data-wizz-s="s14al3ry"].body {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.96rem;
    line-height: 1.65;
  }

/* components/CodeBlock.wizz */
[data-wizz-s="s1cz5o6a"].code {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-md);
  }

  [data-wizz-s="s1cz5o6a"].bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.5rem 0.45rem 0.95rem;
    border-block-end: 1px solid var(--well-border);
    background-color: var(--hover-fill);
    font-size: 0.78rem;
  }

  [data-wizz-s="s1cz5o6a"].dots {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-radius: 50%;
    background-color: oklch(0.72 0.17 25);
    box-shadow:
      0.9rem 0 0 oklch(0.82 0.15 85),
      1.8rem 0 0 oklch(0.76 0.16 150);
    margin-inline-end: 1.9rem;
    opacity: 0.85;
  }

  [data-wizz-s="s1cz5o6a"].title {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-weight: 500;
  }

  [data-wizz-s="s1cz5o6a"].copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 2rem;
    padding-inline: 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition:
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="s1cz5o6a"].copy:hover {
    color: var(--ink);
    background-color: var(--hover-fill);
    border-color: var(--hairline);
  }

  [data-wizz-s="s1cz5o6a"].copy:active {
    transform: scale(0.94);
  }

  .is-copied [data-wizz-s="s1cz5o6a"].copy {
    color: var(--mint);
    border-color: color-mix(in oklch, var(--mint) 45%, transparent);
    background-color: color-mix(in oklch, var(--mint) 14%, transparent);
  }

  .is-copied [data-wizz-s="s1cz5o6a"].icon {
    animation: pop-s1cz5o6a 420ms var(--ease-spring) both;
  }

  .is-copied [data-wizz-s="s1cz5o6a"].copy-label {
    animation: slide-in-s1cz5o6a 320ms var(--ease-out) both;
  }

  @keyframes pop-s1cz5o6a {
    from { transform: scale(0.3) rotate(-25deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
  }

  @keyframes slide-in-s1cz5o6a {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  pre[data-wizz-s="s1cz5o6a"] {
    margin: 0;
    padding: 1rem 1.15rem 1.1rem;
    overflow-x: auto;
    color: var(--code-ink);
    font-size: 0.86rem;
    line-height: 1.7;
    tab-size: 2;
    scrollbar-width: thin;
  }

  code[data-wizz-s="s1cz5o6a"] {
    font-family: var(--font-mono);
    font-weight: 450;
  }

  [data-wizz-s="s1cz5o6a"].t-kw { color: var(--tok-kw); font-weight: 550; }
  [data-wizz-s="s1cz5o6a"].t-str { color: var(--tok-str); }
  [data-wizz-s="s1cz5o6a"].t-num { color: var(--tok-num); }
  [data-wizz-s="s1cz5o6a"].t-com { color: var(--tok-com); font-style: italic; }
  [data-wizz-s="s1cz5o6a"].t-tag { color: var(--tok-tag); }
  [data-wizz-s="s1cz5o6a"].t-attr { color: var(--tok-attr); }
  [data-wizz-s="s1cz5o6a"].t-dir { color: var(--tok-dir); font-weight: 550; }
  [data-wizz-s="s1cz5o6a"].t-fn { color: var(--tok-fn); }
  [data-wizz-s="s1cz5o6a"].t-pun { color: var(--tok-pun); }

/* components/Counter.wizz */
[data-wizz-s="s15jl1a4"].counter {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    text-align: center;
  }

  [data-wizz-s="s15jl1a4"].label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  [data-wizz-s="s15jl1a4"].live {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background-color: var(--mint);
    box-shadow: 0 0 10px var(--mint);
  }

  [data-wizz-s="s15jl1a4"].value {
    display: block;
    min-inline-size: 4ch;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 2.5rem + 4vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--cyan), var(--accent) 55%, var(--amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  [data-wizz-s="s15jl1a4"].bump-a { animation: bump-a-s15jl1a4 380ms var(--ease-spring); }
  [data-wizz-s="s15jl1a4"].bump-b { animation: bump-b-s15jl1a4 380ms var(--ease-spring); }

  @keyframes bump-a-s15jl1a4 {
    from { transform: scale(0.82) translateY(4px); filter: blur(2px); }
    to { transform: scale(1); filter: blur(0); }
  }

  @keyframes bump-b-s15jl1a4 {
    from { transform: scale(0.82) translateY(4px); filter: blur(2px); }
    to { transform: scale(1); filter: blur(0); }
  }

  [data-wizz-s="s15jl1a4"].meta {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.85rem;
    font-family: var(--font-mono);
  }

  .meta strong[data-wizz-s="s15jl1a4"] {
    color: var(--ink);
  }

  [data-wizz-s="s15jl1a4"].controls {
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.4rem;
  }

  button[data-wizz-s="s15jl1a4"] {
    min-block-size: 2.75rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background-color: var(--hover-fill);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glint);
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }

  button[data-wizz-s="s15jl1a4"]:hover {
    border-color: color-mix(in oklch, var(--accent) 50%, transparent);
  }

  button[data-wizz-s="s15jl1a4"]:active {
    transform: scale(0.92);
  }

  [data-wizz-s="s15jl1a4"].step {
    inline-size: 2.75rem;
    font-size: 1.3rem;
  }

  [data-wizz-s="s15jl1a4"].primary {
    border-color: transparent;
    color: oklch(0.16 0.03 270);
    background: linear-gradient(135deg, oklch(0.88 0.12 210), oklch(0.8 0.14 292));
  }

  [data-wizz-s="s15jl1a4"].reset {
    padding-inline: 1.1rem;
    font-size: 0.85rem;
  }

/* components/LiveClock.wizz */
[data-wizz-s="s3hu5ck"].clock {
    display: grid;
    gap: 0.35rem;
  }

  [data-wizz-s="s3hu5ck"].time {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  [data-wizz-s="s3hu5ck"].ticks {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.85rem;
  }

  .ticks strong[data-wizz-s="s3hu5ck"] {
    color: var(--ink);
    font-family: var(--font-mono);
  }

/* components/Meter.wizz */
[data-wizz-s="sq1mduo"].meter {
    --tone: var(--cyan);
    display: grid;
    gap: 0.5rem;
  }

  [data-wizz-s="sq1mduo"].warm { --tone: var(--amber); }
  [data-wizz-s="sq1mduo"].hot { --tone: var(--rose); }

  [data-wizz-s="sq1mduo"].row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
  }

  [data-wizz-s="sq1mduo"].name {
    color: var(--ink-2);
    font-weight: 600;
  }

  [data-wizz-s="sq1mduo"].num {
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
  }

  [data-wizz-s="sq1mduo"].rail {
    block-size: 0.7rem;
    border-radius: var(--r-pill);
    background-color: var(--hover-fill);
    border: 1px solid var(--hairline);
    overflow: hidden;
  }

  [data-wizz-s="sq1mduo"].fill {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in oklch, var(--tone) 50%, transparent), var(--tone));
    box-shadow: 0 0 14px var(--tone);
    transform-origin: 0 50%;
    transition: transform var(--dur) var(--ease-out);
  }

/* components/PageNav.wizz */
[data-wizz-s="s1b2y4ta"].pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-inline-size: var(--content-max);
    margin: 3.5rem auto 0;
  }

  [data-wizz-s="s1b2y4ta"].card {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background-color: var(--hover-fill);
    color: var(--ink);
    text-decoration: none;
    box-shadow: inset 0 1px 0 var(--glint);
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }

  [data-wizz-s="s1b2y4ta"].card:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--accent) 50%, transparent);
    background-color: var(--active-fill);
  }

  [data-wizz-s="s1b2y4ta"].next {
    grid-column: 2;
    text-align: end;
  }

  [data-wizz-s="s1b2y4ta"].is-empty {
    visibility: hidden;
  }

  [data-wizz-s="s1b2y4ta"].dir {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .next [data-wizz-s="s1b2y4ta"].dir {
    justify-content: flex-end;
  }

  [data-wizz-s="s1b2y4ta"].icon {
    transition: transform var(--dur) var(--ease-out);
  }

  .prev:hover [data-wizz-s="s1b2y4ta"].icon {
    transform: translateX(-3px);
  }

  .next:hover [data-wizz-s="s1b2y4ta"].icon {
    transform: translateX(3px);
  }

  [data-wizz-s="s1b2y4ta"].name {
    font-size: 1.05rem;
    font-weight: 700;
  }

  @media (max-width: 36rem) {
    [data-wizz-s="s1b2y4ta"].pager {
      grid-template-columns: 1fr;
    }

    [data-wizz-s="s1b2y4ta"].next {
      grid-column: auto;
    }

    [data-wizz-s="s1b2y4ta"].is-empty {
      display: none;
    }
  }

/* components/PropsDemo.wizz */
[data-wizz-s="s7jbrqy"].props-demo {
    display: grid;
    gap: 1.1rem;
  }

  [data-wizz-s="s7jbrqy"].controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
  }

  [data-wizz-s="s7jbrqy"].field {
    display: grid;
    gap: 0.4rem;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }

  input[data-wizz-s="s7jbrqy"] {
    font: inherit;
  }

  .field input[data-wizz-s="s7jbrqy"][type="text"] {
    min-block-size: 2.5rem;
    padding-inline: 0.85rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background-color: var(--well);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.95rem;
  }

  .field input[data-wizz-s="s7jbrqy"][type="range"] {
    accent-color: var(--accent);
    min-block-size: 2.5rem;
  }

  [data-wizz-s="s7jbrqy"].child {
    padding: 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background-color: var(--hover-fill);
  }

  [data-wizz-s="s7jbrqy"].note {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.85rem;
  }

  .note strong[data-wizz-s="s7jbrqy"] {
    color: var(--ink);
    font-family: var(--font-mono);
  }

/* components/Sidebar.wizz */
[data-wizz-s="s1e4x8xk"].sidebar {
    position: sticky;
    inset-block-start: var(--chrome-top);
    display: flex;
    flex-direction: column;
    max-block-size: calc(100dvh - var(--chrome-top) - 1rem);
    padding: 0.75rem;
    border-radius: var(--r-lg);
    overflow: hidden;
    view-transition-name: sidebar;
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility var(--dur) allow-discrete;
  }

  :root[data-sidebar="collapsed"] [data-wizz-s="s1e4x8xk"].sidebar {
    opacity: 0;
    transform: translateX(-1.5rem);
    visibility: hidden;
    pointer-events: none;
  }

  [data-wizz-s="s1e4x8xk"].nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-inline-end: 0.15rem;
  }

  .group + [data-wizz-s="s1e4x8xk"].group {
    margin-block-start: 0.5rem;
  }

  summary[data-wizz-s="s1e4x8xk"] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-sm);
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  summary[data-wizz-s="s1e4x8xk"]::-webkit-details-marker {
    display: none;
  }

  summary[data-wizz-s="s1e4x8xk"]:hover {
    color: var(--ink-2);
  }

  summary [data-wizz-s="s1e4x8xk"].icon {
    font-size: 0.85rem;
    transition: transform var(--dur) var(--ease-out);
  }

  .group[open] summary [data-wizz-s="s1e4x8xk"].icon {
    transform: rotate(90deg);
  }

  /* Animate the disclosure body open and closed where supported. */
  [data-wizz-s="s1e4x8xk"].group::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
  }

  [data-wizz-s="s1e4x8xk"].group[open]::details-content {
    block-size: auto;
  }

  @supports (interpolate-size: allow-keywords) {
    [data-wizz-s="s1e4x8xk"].sidebar {
      interpolate-size: allow-keywords;
    }
  }

  ul[data-wizz-s="s1e4x8xk"] {
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
  }

  [data-wizz-s="s1e4x8xk"].side-link {
    position: relative;
    display: grid;
    gap: 0.05rem;
    padding: 0.5rem 0.75rem 0.5rem 1.05rem;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    text-decoration: none;
    isolation: isolate;
    transition: color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="s1e4x8xk"].side-link:hover {
    color: var(--ink);
    transform: translateX(2px);
  }

  [data-wizz-s="s1e4x8xk"].side-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background-color: var(--hover-fill);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="s1e4x8xk"].side-link:hover::after {
    opacity: 1;
  }

  [data-wizz-s="s1e4x8xk"].label {
    font-size: 0.92rem;
    font-weight: 600;
  }

  [data-wizz-s="s1e4x8xk"].hint {
    color: var(--ink-3);
    font-size: 0.74rem;
    font-weight: 500;
  }

  [data-wizz-s="s1e4x8xk"].nav-pill {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
  }

  /* The active pill is a real element with a view-transition-name, so the
     cross-document transition glides it from the previous page's row. */
  .is-active [data-wizz-s="s1e4x8xk"].nav-pill {
    opacity: 1;
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--accent) 22%, transparent), color-mix(in oklch, var(--cyan) 8%, transparent));
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--accent) 38%, transparent),
      inset 0 1px 0 var(--glint);
    view-transition-name: nav-pill;
  }

  .is-active [data-wizz-s="s1e4x8xk"].nav-pill::before {
    content: "";
    position: absolute;
    inset-block: 0.55rem;
    inset-inline-start: 0.35rem;
    inline-size: 3px;
    border-radius: var(--r-pill);
    background: linear-gradient(var(--cyan), var(--accent));
    box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 70%, transparent);
  }

  [data-wizz-s="s1e4x8xk"].side-link.is-active {
    color: var(--ink);
  }

  [data-wizz-s="s1e4x8xk"].versions {
    display: grid;
    gap: 0.45rem;
    justify-items: start;
    margin-block-start: 0.75rem;
    padding: 0.8rem 0.6rem 0.3rem;
    border-block-start: 1px solid var(--hairline);
  }

  .versions code[data-wizz-s="s1e4x8xk"] {
    color: var(--ink-3);
    font-size: 0.68rem;
  }

  @media (max-width: 56rem) {
    [data-wizz-s="s1e4x8xk"].sidebar {
      position: fixed;
      inset-block: calc(var(--chrome-top) - 0.25rem) 0.75rem;
      inset-inline-start: 0.75rem;
      z-index: 40;
      inline-size: min(20rem, calc(100vw - 1.5rem));
      max-block-size: none;
      /* Over body copy the drawer needs a higher opacity floor. */
      --pane-top: light-dark(oklch(1 0 0 / 0.9), oklch(0.22 0.035 268 / 0.88));
      --pane-bottom: light-dark(oklch(1 0 0 / 0.84), oklch(0.17 0.03 268 / 0.84));
      opacity: 0;
      transform: translateX(-110%);
      visibility: hidden;
    }

    :root[data-sidebar="collapsed"] [data-wizz-s="s1e4x8xk"].sidebar {
      transform: translateX(-110%);
    }

    :root[data-drawer="open"] [data-wizz-s="s1e4x8xk"].sidebar {
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
    }
  }

/* components/Toc.wizz */
[data-wizz-s="s1utck6c"].toc {
    position: sticky;
    inset-block-start: var(--chrome-top);
    max-block-size: calc(100dvh - var(--chrome-top) - 1rem);
    padding: 1rem 0.75rem 0.85rem;
    border-radius: var(--r-lg);
    overflow-y: auto;
    scrollbar-width: thin;
    view-transition-name: toc;
    animation: toc-in-s1utck6c 700ms var(--ease-out) 240ms both;
  }

  @keyframes toc-in-s1utck6c {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
  }

  [data-wizz-s="s1utck6c"].heading {
    margin: 0 0 0.6rem 0.6rem;
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  [data-wizz-s="s1utck6c"].track {
    position: relative;
  }

  [data-wizz-s="s1utck6c"].pill {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 2.1rem;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 20%, transparent), transparent);
    box-shadow: inset 2px 0 0 var(--accent);
    transition: transform 420ms var(--ease-spring), opacity var(--dur) var(--ease-out);
    pointer-events: none;
  }

  ul[data-wizz-s="s1utck6c"] {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-wizz-s="s1utck6c"].toc-link {
    display: block;
    block-size: 2.1rem;
    padding-inline: 0.75rem 0.5rem;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 0.84rem;
    font-weight: 550;
    line-height: 2.1rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="s1utck6c"].toc-link:hover {
    color: var(--ink);
    transform: translateX(2px);
  }

  [data-wizz-s="s1utck6c"].toc-link.is-sub {
    padding-inline-start: 1.5rem;
    font-size: 0.8rem;
  }

  [data-wizz-s="s1utck6c"].toc-link.is-active {
    color: var(--ink);
  }

  [data-wizz-s="s1utck6c"].top {
    display: inline-block;
    margin: 0.75rem 0 0 0.75rem;
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
  }

  [data-wizz-s="s1utck6c"].top:hover {
    color: var(--accent);
  }

  @media (max-width: 75rem) {
    [data-wizz-s="s1utck6c"].toc {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-wizz-s="s1utck6c"].toc {
      animation: none;
    }
  }

/* components/TodoDemo.wizz */
[data-wizz-s="s1cakhqm"].todo {
    display: grid;
    gap: 0.85rem;
  }

  [data-wizz-s="s1cakhqm"].add {
    display: flex;
    gap: 0.5rem;
  }

  .add input[data-wizz-s="s1cakhqm"] {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding-inline: 1rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background-color: var(--well);
    color: var(--ink);
    font: inherit;
    box-shadow: inset 0 2px 6px light-dark(oklch(0.3 0.05 270 / 0.05), oklch(0 0 0 / 0.3));
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

  .add input[data-wizz-s="s1cakhqm"]:focus-visible {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--focus-ring) 22%, transparent);
  }

  [data-wizz-s="s1cakhqm"].add-btn {
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
    border: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, oklch(0.88 0.12 210), oklch(0.8 0.14 292));
    color: oklch(0.16 0.03 270);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="s1cakhqm"].add-btn:active {
    transform: scale(0.95);
  }

  [data-wizz-s="s1cakhqm"].list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-wizz-s="s1cakhqm"].item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem 0.55rem 0.75rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background-color: var(--hover-fill);
    animation: item-in-s1cakhqm 360ms var(--ease-out) both;
  }

  @keyframes item-in-s1cakhqm {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  [data-filter="active"] [data-wizz-s="s1cakhqm"].is-done,
  [data-filter="done"] [data-wizz-s="s1cakhqm"].item:not(.is-done) {
    display: none;
  }

  [data-wizz-s="s1cakhqm"].check {
    position: relative;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--ink-3);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }

  .is-done [data-wizz-s="s1cakhqm"].check {
    border-color: var(--mint);
    background-color: var(--mint);
  }

  .is-done [data-wizz-s="s1cakhqm"].check::after {
    content: "";
    position: absolute;
    inset: 0.28rem 0.42rem 0.36rem;
    border: solid oklch(0.18 0.03 160);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: tick-s1cakhqm 260ms var(--ease-spring) both;
  }

  @keyframes tick-s1cakhqm {
    from { transform: rotate(45deg) scale(0); }
    to { transform: rotate(45deg) scale(1); }
  }

  [data-wizz-s="s1cakhqm"].title {
    flex: 1;
    color: var(--ink);
    transition: color var(--dur) var(--ease-out);
  }

  .is-done [data-wizz-s="s1cakhqm"].title {
    color: var(--ink-3);
    text-decoration: line-through;
  }

  [data-wizz-s="s1cakhqm"].remove {
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }

  .item:hover [data-wizz-s="s1cakhqm"].remove,
  [data-wizz-s="s1cakhqm"].remove:focus-visible {
    opacity: 1;
  }

  [data-wizz-s="s1cakhqm"].remove:hover {
    color: var(--rose);
    background-color: color-mix(in oklch, var(--rose) 14%, transparent);
  }

  [data-wizz-s="s1cakhqm"].footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-3);
    font-size: 0.85rem;
  }

  [data-wizz-s="s1cakhqm"].left {
    font-variant-numeric: tabular-nums;
  }

  [data-wizz-s="s1cakhqm"].tabs {
    display: inline-flex;
    gap: 0.2rem;
    margin-inline: auto;
    padding: 0.2rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background-color: var(--well);
  }

  [data-wizz-s="s1cakhqm"].tab,
  [data-wizz-s="s1cakhqm"].clear {
    min-block-size: 2rem;
    padding-inline: 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-3);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }

  [data-wizz-s="s1cakhqm"].tab:hover,
  [data-wizz-s="s1cakhqm"].clear:hover {
    color: var(--ink);
  }

  [data-wizz-s="s1cakhqm"].tab.is-active {
    color: var(--ink);
    background-color: var(--active-fill);
    border-color: color-mix(in oklch, var(--accent) 35%, transparent);
    box-shadow: inset 0 1px 0 var(--glint);
  }

/* components/TopNav.wizz */
[data-wizz-s="sd7lymq"].dock-wrap {
    position: sticky;
    inset-block-start: var(--nav-gap);
    z-index: 50;
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
    margin-block-start: var(--nav-gap);
    view-transition-name: topnav;
  }

  [data-wizz-s="sd7lymq"].skip {
    position: absolute;
    inset-inline-start: 1.5rem;
    inset-block-start: 0.6rem;
    z-index: 2;
    padding: 0.5rem 1rem;
    border-radius: var(--r-pill);
    background-color: var(--ink);
    color: var(--canvas);
    font-weight: 650;
    opacity: 0;
    transform: translateY(-140%);
    pointer-events: none;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
  }

  [data-wizz-s="sd7lymq"].skip:focus-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  [data-wizz-s="sd7lymq"].dock {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-inline-size: 89rem;
    min-block-size: var(--nav-h);
    margin-inline: auto;
    padding-inline: 0.75rem;
    border-radius: var(--r-pill);
    animation: dock-in-sd7lymq 640ms var(--ease-out) both;
  }

  @keyframes dock-in-sd7lymq {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  [data-wizz-s="sd7lymq"].brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline: 0.35rem 0.5rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
  }

  [data-wizz-s="sd7lymq"].brand:hover {
    color: var(--ink);
  }

  [data-wizz-s="sd7lymq"].mark {
    display: grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 11px;
    background: conic-gradient(from 210deg, oklch(0.84 0.12 210), oklch(0.72 0.18 292), oklch(0.86 0.15 80), oklch(0.84 0.12 210));
    color: oklch(0.15 0.03 270);
    font-size: 1.05rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), 0 6px 18px -6px oklch(0.6 0.2 292 / 0.7);
    transition: transform var(--dur) var(--ease-spring);
  }

  .brand:hover [data-wizz-s="sd7lymq"].mark {
    transform: rotate(-8deg) scale(1.06);
  }

  [data-wizz-s="sd7lymq"].dot {
    color: var(--accent);
  }

  [data-wizz-s="sd7lymq"].ver {
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  [data-wizz-s="sd7lymq"].links {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-wizz-s="sd7lymq"].link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.4rem;
    padding-inline: 0.95rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    color: var(--ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }

  [data-wizz-s="sd7lymq"].link:hover {
    color: var(--ink);
    background-color: var(--hover-fill);
  }

  [data-wizz-s="sd7lymq"].link.is-active {
    color: var(--ink);
    background-color: var(--active-fill);
    border-color: color-mix(in oklch, var(--accent) 40%, transparent);
    box-shadow: inset 0 1px 0 var(--glint);
  }

  [data-wizz-s="sd7lymq"].actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-inline-start: auto;
  }

  [data-wizz-s="sd7lymq"].search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-inline-size: 15rem;
    min-block-size: 2.5rem;
    padding-inline: 0.9rem 0.45rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background-color: var(--well);
    color: var(--ink-3);
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: inset 0 2px 6px light-dark(oklch(0.3 0.05 270 / 0.05), oklch(0 0 0 / 0.3));
    transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }

  [data-wizz-s="sd7lymq"].search-trigger:hover {
    color: var(--ink-2);
    border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  }

  [data-wizz-s="sd7lymq"].search-text {
    flex: 1;
    text-align: start;
  }

  [data-wizz-s="sd7lymq"].icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-size: 1.05rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="sd7lymq"].icon-btn:hover {
    color: var(--ink);
    background-color: var(--hover-fill);
    border-color: var(--hairline);
  }

  [data-wizz-s="sd7lymq"].is-hidden {
    display: none;
  }

  [data-wizz-s="sd7lymq"].icon-btn:active {
    transform: scale(0.92);
  }

  .theme [data-wizz-s="sd7lymq"].icon {
    animation: spin-in-sd7lymq 520ms var(--ease-spring) both;
  }

  @keyframes spin-in-sd7lymq {
    from { transform: rotate(-90deg) scale(0.5); opacity: 0; }
    to { transform: rotate(0) scale(1); opacity: 1; }
  }

  /* Spotlight search */
  [data-wizz-s="sd7lymq"].spotlight {
    inline-size: min(94vw, 38rem);
    max-block-size: min(80dvh, 34rem);
    margin-block-start: 12vh;
    padding: 0;
    border-radius: var(--r-lg);
    color: var(--ink);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      overlay var(--dur) allow-discrete,
      display var(--dur) allow-discrete;
  }

  [data-wizz-s="sd7lymq"].spotlight[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* @starting-style bodies are not scope-rewritten: raise specificity so the
     start state beats the scoped [open] rule above. */
  @starting-style {
    :root .spotlight.spotlight[open] {
      opacity: 0;
      transform: translateY(12px) scale(0.96);
    }
  }

  [data-wizz-s="sd7lymq"].spotlight::backdrop {
    background-color: oklch(0.08 0.02 268 / 0);
    transition: background-color var(--dur) var(--ease-out), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
  }

  [data-wizz-s="sd7lymq"].spotlight[open]::backdrop {
    background-color: oklch(0.08 0.02 268 / 0.55);
  }

  @starting-style {
    :root .spotlight.spotlight[open]::backdrop {
      background-color: oklch(0.08 0.02 268 / 0);
    }
  }

  [data-wizz-s="sd7lymq"].panel {
    display: flex;
    flex-direction: column;
    max-block-size: inherit;
  }

  [data-wizz-s="sd7lymq"].field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-block-end: 1px solid var(--hairline);
    color: var(--ink-3);
    font-size: 1.1rem;
  }

  .field input[data-wizz-s="sd7lymq"] {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    outline: none;
  }

  .field input[data-wizz-s="sd7lymq"]::placeholder {
    color: var(--ink-3);
  }

  [data-wizz-s="sd7lymq"].results {
    flex: 1;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    overflow-y: auto;
  }

  [data-wizz-s="sd7lymq"].result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .result [data-wizz-s="sd7lymq"].icon {
    color: var(--ink-3);
  }

  [data-wizz-s="sd7lymq"].r-title {
    flex: 1;
    font-weight: 600;
  }

  [data-wizz-s="sd7lymq"].r-group {
    color: var(--ink-3);
    font-size: 0.8rem;
  }

  [data-wizz-s="sd7lymq"].r-enter {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  [data-wizz-s="sd7lymq"].result.is-active {
    color: var(--ink);
    background-color: var(--active-fill);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent);
  }

  .result.is-active [data-wizz-s="sd7lymq"].r-enter {
    opacity: 1;
    transform: translateX(0);
  }

  [data-wizz-s="sd7lymq"].empty {
    display: none;
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--ink-3);
  }

  .is-empty [data-wizz-s="sd7lymq"].empty {
    display: block;
  }

  [data-wizz-s="sd7lymq"].foot {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0.6rem 1.1rem;
    border-block-start: 1px solid var(--hairline);
    color: var(--ink-3);
    font-size: 0.78rem;
  }

  [data-wizz-s="sd7lymq"].count {
    margin-inline-start: auto;
  }

  @media (max-width: 75rem) {
    [data-wizz-s="sd7lymq"].search-trigger {
      min-inline-size: 11rem;
    }
  }

  @media (max-width: 62rem) {
    [data-wizz-s="sd7lymq"].links {
      display: none;
    }
  }

  @media (max-width: 40rem) {
    [data-wizz-s="sd7lymq"].search-trigger {
      min-inline-size: 0;
      inline-size: 2.5rem;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }

    [data-wizz-s="sd7lymq"].search-text,
    [data-wizz-s="sd7lymq"].search-kbd,
    [data-wizz-s="sd7lymq"].ver {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-wizz-s="sd7lymq"].dock,
    .theme [data-wizz-s="sd7lymq"].icon {
      animation: none;
    }
  }

/* pages/docs/examples.wizz */
[data-wizz-s="s1rpbqag"].example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    align-items: start;
  }