/* ui/ui.css */
@layer xz.tokens, xz.base, xz.components, xz.utilities;

@font-face {
  font-family: Instrument Sans;
  src: url("./fonts/instrument-sans.woff2") format(woff2);
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url("./fonts/jetbrains-mono.woff2") format(woff2);
  font-weight: 400 700;
  font-display: swap;
}

@layer xz.tokens {
  :root {
    --buncss-light: initial;
    --buncss-dark: ;
    color-scheme: light dark;
    --xz-hue: 250;
    --xz-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --xz-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --xz-display-stretch: 86%;
    --xz-bg: var(--buncss-light, oklch(96.6% .005 var(--xz-hue))) var(--buncss-dark, oklch(15.8% .014 var(--xz-hue)));
    --xz-surface: var(--buncss-light, oklch(99.3% .002 var(--xz-hue))) var(--buncss-dark, oklch(20.5% .016 var(--xz-hue)));
    --xz-sunken: var(--buncss-light, oklch(94.2% .006 var(--xz-hue))) var(--buncss-dark, oklch(13.5% .012 var(--xz-hue)));
    --xz-text: var(--buncss-light, oklch(21% .018 var(--xz-hue))) var(--buncss-dark, oklch(95% .006 var(--xz-hue)));
    --xz-muted: var(--buncss-light, oklch(49% .016 var(--xz-hue))) var(--buncss-dark, oklch(71% .014 var(--xz-hue)));
    --xz-line: var(--buncss-light, oklch(21% .03 var(--xz-hue) / .11)) var(--buncss-dark, oklch(95% .01 var(--xz-hue) / .11));
    --xz-line-strong: var(--buncss-light, oklch(21% .03 var(--xz-hue) / .2)) var(--buncss-dark, oklch(95% .01 var(--xz-hue) / .2));
    --xz-neutral: var(--buncss-light, oklch(38% .016 var(--xz-hue))) var(--buncss-dark, oklch(84% .012 var(--xz-hue)));
    --xz-accent: var(--buncss-light, oklch(51% .18 var(--xz-hue))) var(--buncss-dark, oklch(74% .13 var(--xz-hue)));
    --xz-success: var(--buncss-light, oklch(50% .12 155)) var(--buncss-dark, oklch(78% .13 155));
    --xz-warning: var(--buncss-light, oklch(56% .13 70)) var(--buncss-dark, oklch(83% .13 80));
    --xz-danger: var(--buncss-light, oklch(52% .19 25)) var(--buncss-dark, oklch(72% .16 22));
    --xz-on-tone: var(--buncss-light, oklch(99% .003 var(--xz-hue))) var(--buncss-dark, oklch(17% .02 var(--xz-hue)));
    --xz-radius-sm: 6px;
    --xz-radius: 9px;
    --xz-radius-lg: 16px;
    --xz-radius-xl: 24px;
    --xz-radius-pill: 999px;
    --xz-space-1: .25rem;
    --xz-space-2: .5rem;
    --xz-space-3: .75rem;
    --xz-space-4: 1rem;
    --xz-space-5: 1.5rem;
    --xz-space-6: 2rem;
    --xz-space-7: 3rem;
    --xz-text-xs: .75rem;
    --xz-text-sm: .8125rem;
    --xz-text-md: .9375rem;
    --xz-text-lg: 1.1875rem;
    --xz-text-xl: clamp(1.4rem, 1.2rem + .9vw, 1.85rem);
    --xz-text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    --xz-text-3xl: clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);
    --xz-glass-tint: var(--buncss-light, oklch(99.5% .003 var(--xz-hue) / .6)) var(--buncss-dark, oklch(23% .018 var(--xz-hue) / .56));
    --xz-glass-rim: linear-gradient(155deg, var(--buncss-light, oklch(100% 0 0 / .95)) var(--buncss-dark, oklch(100% 0 0 / .34)), var(--buncss-light, oklch(100% 0 0 / .3)) var(--buncss-dark, oklch(100% 0 0 / .07)) 32%, var(--buncss-light, oklch(21% .03 var(--xz-hue) / .1)) var(--buncss-dark, oklch(100% 0 0 / .03)) 62%, var(--buncss-light, oklch(100% 0 0 / .7)) var(--buncss-dark, oklch(100% 0 0 / .16)));
    --xz-glass-sheen: radial-gradient(120% 80% at 0% 0%, var(--buncss-light, oklch(100% 0 0 / .5)) var(--buncss-dark, oklch(100% 0 0 / .06)), transparent 55%);
    --xz-blur-1: 12px;
    --xz-blur-2: 20px;
    --xz-blur-3: 32px;
    --xz-shadow-1: 0 1px 1px oklch(18% .02 var(--xz-hue) / .05), 0 2px 8px -2px oklch(18% .02 var(--xz-hue) / .08);
    --xz-shadow-2: 0 1px 2px oklch(18% .02 var(--xz-hue) / .06), 0 10px 28px -8px oklch(18% .02 var(--xz-hue) / .18);
    --xz-shadow-3: 0 2px 4px oklch(12% .02 var(--xz-hue) / .08), 0 28px 70px -18px oklch(12% .02 var(--xz-hue) / .42);
    --xz-ease-out: cubic-bezier(.23, 1, .32, 1);
    --xz-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --xz-ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --xz-dur-1: .12s;
    --xz-dur-2: .2s;
    --xz-dur-3: .32s;
    --xz-backdrop: radial-gradient(90% 55% at 50% -12%, var(--buncss-light, oklch(100% 0 0 / .9)) var(--buncss-dark, oklch(34% .05 var(--xz-hue) / .55)), transparent 70%), radial-gradient(45% 50% at 100% 8%, var(--buncss-light, oklch(72% .13 var(--xz-hue) / .22)) var(--buncss-dark, oklch(60% .13 var(--xz-hue) / .22)), transparent 70%), radial-gradient(50% 45% at 0% 100%, var(--buncss-light, oklch(78% .09 calc(var(--xz-hue)  - 60) / .18)) var(--buncss-dark, oklch(55% .08 calc(var(--xz-hue)  - 60) / .16)), transparent 70%);
    --xz-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --buncss-light: ;
      --buncss-dark: initial;
    }
  }

  :root[data-theme="light"] {
    --buncss-light: initial;
    --buncss-dark: ;
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
  }
}

@layer xz.base {
  *, *:before, *:after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font: 450 var(--xz-text-md) / 1.55 var(--xz-font);
    font-kerning: normal;
    color: var(--xz-text);
    background: var(--xz-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
    margin: 0;
  }

  body:before {
    content: "";
    position: fixed;
    z-index: -1;
    background: var(--xz-grain), var(--xz-backdrop);
    pointer-events: none;
    inset: 0;
  }

  h1, h2, h3, h4 {
    margin: 0 0 var(--xz-space-3);
    font-stretch: var(--xz-display-stretch);
    letter-spacing: -.022em;
    text-wrap: balance;
    font-weight: 620;
    line-height: 1.08;
  }

  h1 {
    font-size: var(--xz-text-2xl);
    letter-spacing: -.034em;
    font-weight: 650;
  }

  h2 {
    font-size: var(--xz-text-xl);
    letter-spacing: -.026em;
  }

  h3 {
    font-size: var(--xz-text-lg);
    font-stretch: 94%;
  }

  h4 {
    font-size: var(--xz-text-md);
    letter-spacing: -.005em;
    font-stretch: 100%;
  }

  p {
    margin: 0 0 var(--xz-space-3);
    text-wrap: pretty;
  }

  a {
    color: var(--xz-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
  }

  strong, b {
    font-weight: 620;
  }

  code, kbd, pre {
    font-family: var(--xz-font-mono);
    font-variant-ligatures: none;
    font-size: .88em;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--xz-accent);
    outline-offset: 2px;
  }

  ::selection {
    background: oklch(72% .13 var(--xz-hue) / .32);
  }
}

@layer xz.components {
  [data-tone="neutral"] {
    --xz-tone: var(--xz-neutral);
  }

  [data-tone="accent"] {
    --xz-tone: var(--xz-accent);
  }

  [data-tone="success"] {
    --xz-tone: var(--xz-success);
  }

  [data-tone="warning"] {
    --xz-tone: var(--xz-warning);
  }

  [data-tone="danger"] {
    --xz-tone: var(--xz-danger);
  }

  [data-depth="0"] {
    background: var(--xz-surface);
    border: 1px solid var(--xz-line);
  }

  [data-depth="1"] {
    --xz-blur: var(--xz-blur-1);
    --xz-shadow: var(--xz-shadow-1);
  }

  [data-depth="2"] {
    --xz-blur: var(--xz-blur-2);
    --xz-shadow: var(--xz-shadow-2);
  }

  [data-depth="3"] {
    --xz-blur: var(--xz-blur-3);
    --xz-shadow: var(--xz-shadow-3);
  }

  :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
    background: var(--xz-glass-sheen), var(--xz-glass-tint);
    -webkit-backdrop-filter: blur(var(--xz-blur)) saturate(170%);
    backdrop-filter: blur(var(--xz-blur)) saturate(170%);
    box-shadow: inset 0 1px 0 0 var(--buncss-light, #ffffffb3) var(--buncss-dark, #ffffff1a), var(--xz-shadow);
    border: 1px solid #0000;
  }

  :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
    background: var(--xz-glass-sheen), var(--xz-glass-tint);
    -webkit-backdrop-filter: blur(var(--xz-blur)) saturate(170%);
    backdrop-filter: blur(var(--xz-blur)) saturate(170%);
    box-shadow: inset 0 1px 0 0 var(--buncss-light, #ffffffb3) var(--buncss-dark, #ffffff1a), var(--xz-shadow);
    border: 1px solid #0000;
  }

  :is([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
    background: var(--xz-glass-sheen), var(--xz-glass-tint);
    -webkit-backdrop-filter: blur(var(--xz-blur)) saturate(170%);
    backdrop-filter: blur(var(--xz-blur)) saturate(170%);
    box-shadow: inset 0 1px 0 0 var(--buncss-light, #ffffffb3) var(--buncss-dark, #ffffff1a), var(--xz-shadow);
    border: 1px solid #0000;
  }

  @supports (color: color(display-p3 0 0 0)) {
    :is([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      box-shadow: inset 0 1px 0 0 var(--buncss-light, color(display-p3 1 1 1 / .7)) var(--buncss-dark, color(display-p3 1 1 1 / .1)), var(--xz-shadow);
    }
  }

  @supports (color: lab(0% 0 0)) {
    :is([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      box-shadow: inset 0 1px 0 0 var(--buncss-light, lab(100% 0 0 / .7)) var(--buncss-dark, lab(100% 0 0 / .1)), var(--xz-shadow);
    }
  }

  :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"]):after {
    content: "";
    position: absolute;
    border-radius: inherit;
    background: var(--xz-glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    padding: 1px;
    inset: 0;
  }

  :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"]):after {
    content: "";
    position: absolute;
    border-radius: inherit;
    background: var(--xz-glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    padding: 1px;
    inset: 0;
  }

  :is([data-depth="1"], [data-depth="2"], [data-depth="3"]):after {
    content: "";
    position: absolute;
    border-radius: inherit;
    background: var(--xz-glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    padding: 1px;
    inset: 0;
  }

  :where([data-depth="1"], [data-depth="2"], [data-depth="3"]):where(:not(:-webkit-any(dialog, [popover], .xz-navbar, .xz-toolbar[data-sticky]))) {
    position: relative;
  }

  :where([data-depth="1"], [data-depth="2"], [data-depth="3"]):where(:not(:-moz-any(dialog, [popover], .xz-navbar, .xz-toolbar[data-sticky]))) {
    position: relative;
  }

  :where([data-depth="1"], [data-depth="2"], [data-depth="3"]):where(:not(:is(dialog, [popover], .xz-navbar, .xz-toolbar[data-sticky]))) {
    position: relative;
  }

  :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"])[data-tone] {
    background: var(--xz-glass-sheen), color-mix(in oklch, var(--xz-tone) 14%, var(--xz-glass-tint));
  }

  :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"])[data-tone] {
    background: var(--xz-glass-sheen), color-mix(in oklch, var(--xz-tone) 14%, var(--xz-glass-tint));
  }

  :is([data-depth="1"], [data-depth="2"], [data-depth="3"])[data-tone] {
    background: var(--xz-glass-sheen), color-mix(in oklch, var(--xz-tone) 14%, var(--xz-glass-tint));
  }

  @supports  not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
    }

    :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
    }

    :is([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    :is([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more) {
    :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
      border-color: var(--xz-text);
    }

    :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
      border-color: var(--xz-text);
    }

    :is([data-depth="1"], [data-depth="2"], [data-depth="3"]) {
      background: var(--xz-surface);
      border-color: var(--xz-text);
    }

    :-webkit-any([data-depth="1"], [data-depth="2"], [data-depth="3"]):after {
      display: none;
    }

    :-moz-any([data-depth="1"], [data-depth="2"], [data-depth="3"]):after {
      display: none;
    }

    :is([data-depth="1"], [data-depth="2"], [data-depth="3"]):after {
      display: none;
    }
  }

  .xz-glass {
    padding: var(--xz-space-4);
    border-radius: var(--xz-radius-lg);
  }

  .xz-panel {
    padding: var(--xz-space-5);
    border-radius: var(--xz-radius-lg);
    min-width: 0;
  }

  .xz-panel > header {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    margin-bottom: var(--xz-space-4);
  }

  .xz-panel > header h2 {
    font-size: var(--xz-text-md);
    letter-spacing: -.008em;
    flex: 1;
    margin: 0;
    font-weight: 600;
    font-stretch: 100%;
  }

  :is(.xz-glass, .xz-stat, .xz-list > li) {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .xz-panel > header h2 {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 100%;
  }

  :-webkit-any(.xz-glass, .xz-stat, .xz-list > li) > :-webkit-any(strong, b, small, span, .xz-muted) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 100%;
  }

  :-moz-any(.xz-glass, .xz-stat, .xz-list > li) > :-moz-any(strong, b, small, span, .xz-muted) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 100%;
  }

  :is(.xz-glass, .xz-stat, .xz-list > li) > :is(strong, b, small, span, .xz-muted) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 100%;
  }

  :-webkit-any(.xz-glass, .xz-stat) > p.xz-muted {
    display: block;
  }

  :-moz-any(.xz-glass, .xz-stat) > p.xz-muted {
    display: block;
  }

  :is(.xz-glass, .xz-stat) > p.xz-muted {
    display: block;
  }

  [data-gap="sm"] {
    --xz-gap: var(--xz-space-2);
  }

  [data-gap="md"] {
    --xz-gap: var(--xz-space-4);
  }

  [data-gap="lg"] {
    --xz-gap: var(--xz-space-6);
  }

  .xz-stack {
    display: flex;
    gap: var(--xz-gap, var(--xz-space-4));
    flex-direction: column;
    min-width: 0;
  }

  .xz-stack[data-direction="row"] {
    flex-direction: row;
    align-items:  center;
  }

  .xz-stack[data-align="start"] {
    align-items:  flex-start;
  }

  .xz-stack[data-align="center"] {
    align-items:  center;
  }

  .xz-stack[data-align="end"] {
    align-items:  flex-end;
  }

  .xz-stack[data-align="stretch"] {
    align-items: stretch;
  }

  .xz-stack[data-justify="start"] {
    justify-content: flex-start;
  }

  .xz-stack[data-justify="center"] {
    justify-content: center;
  }

  .xz-stack[data-justify="end"] {
    justify-content: flex-end;
  }

  .xz-stack[data-justify="between"] {
    justify-content: space-between;
  }

  .xz-stack[data-wrap] {
    flex-wrap: wrap;
  }

  .xz-grid {
    display: grid;
    gap: var(--xz-gap, var(--xz-space-4));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--xz-min, 16rem), 100%), 1fr));
  }

  .xz-toolbar {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-2);
    border-radius: var(--xz-radius-lg);
    flex-wrap: wrap;
  }

  .xz-toolbar[data-sticky] {
    position: sticky;
    top: var(--xz-space-3);
    z-index: 10;
  }

  .xz-navbar {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-1);
    padding: var(--xz-space-2);
  }

  .xz-navbar[data-kind="top"] {
    position: sticky;
    z-index: 20;
    padding-inline: max(var(--xz-space-4), env(safe-area-inset-left)) max(var(--xz-space-4), env(safe-area-inset-right));
    border-width: 0 0 1px;
    border-color: var(--xz-line);
    border-radius: 0;
    top: 0;
  }

  .xz-navbar[data-kind="top"]:after {
    display: none;
  }

  .xz-navbar[data-kind="side"] {
    position: sticky;
    top: var(--xz-space-3);
    max-height: calc(100dvh - 2 * var(--xz-space-3));
    padding: var(--xz-space-3);
    border-radius: var(--xz-radius-lg);
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .xz-navbar[data-kind="tabs"] {
    position: fixed;
    inset: auto max(var(--xz-space-3), env(safe-area-inset-right)) calc(var(--xz-space-3)  + env(safe-area-inset-bottom)) max(var(--xz-space-3), env(safe-area-inset-left));
    z-index: 20;
    border-radius: var(--xz-radius-pill);
    justify-content: space-around;
    max-width: 32rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .xz-navbar a {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-1) var(--xz-space-3);
    border-radius: var(--xz-radius);
    color: var(--xz-muted);
    text-decoration: none;
    min-height: 2.25rem;
    font-weight: 520;
  }

  .xz-navbar a:-webkit-any(.active, [aria-current="page"]) {
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
    background: var(--buncss-light, #ffffffc7) var(--buncss-dark, #ffffff14);
    background: var(--buncss-light, color(display-p3 1 1 1 / .78)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
    background: var(--buncss-light, lab(100% 0 0 / .78)) var(--buncss-dark, lab(100% 0 0 / .08));
  }

  .xz-navbar a:-moz-any(.active, [aria-current="page"]) {
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
    background: var(--buncss-light, #ffffffc7) var(--buncss-dark, #ffffff14);
    background: var(--buncss-light, color(display-p3 1 1 1 / .78)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
    background: var(--buncss-light, lab(100% 0 0 / .78)) var(--buncss-dark, lab(100% 0 0 / .08));
  }

  .xz-navbar a:is(.active, [aria-current="page"]) {
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
    background: var(--buncss-light, #ffffffc7) var(--buncss-dark, #ffffff14);
    background: var(--buncss-light, color(display-p3 1 1 1 / .78)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
    background: var(--buncss-light, lab(100% 0 0 / .78)) var(--buncss-dark, lab(100% 0 0 / .08));
  }

  .xz-navbar[data-kind="tabs"] a {
    padding: var(--xz-space-1) var(--xz-space-2);
    border-radius: var(--xz-radius-pill);
    font-size: var(--xz-text-xs);
    flex-direction: column;
    flex: 1;
    gap: 2px;
    max-width: 6rem;
    min-height: 3rem;
    font-weight: 560;
  }

  .xz-navbar[data-kind="tabs"] a:-webkit-any(.active, [aria-current="page"]) {
    color: var(--xz-accent);
    box-shadow: none;
    background: none;
  }

  .xz-navbar[data-kind="tabs"] a:-moz-any(.active, [aria-current="page"]) {
    color: var(--xz-accent);
    box-shadow: none;
    background: none;
  }

  .xz-navbar[data-kind="tabs"] a:is(.active, [aria-current="page"]) {
    color: var(--xz-accent);
    box-shadow: none;
    background: none;
  }

  @media (hover: hover) {
    .xz-navbar a:hover {
      color: var(--xz-text);
    }
  }

  .xz-tabs {
    display: flex;
    gap: var(--xz-space-1);
    border-bottom: 1px solid var(--xz-line);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .xz-tabs > button {
    position: relative;
    padding: var(--xz-space-2) var(--xz-space-3);
    color: var(--xz-muted);
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: 0;
    min-height: 2.5rem;
    font-weight: 540;
  }

  .xz-tabs > [aria-selected="true"] {
    color: var(--xz-text);
  }

  .xz-tabs > button:after {
    content: "";
    position: absolute;
    inset: auto var(--xz-space-2) -1px;
    background: var(--xz-accent);
    border-radius: 2px;
    height: 2px;
    scale: 0 1;
  }

  .xz-tabs > [aria-selected="true"]:after {
    scale: 1;
  }

  .xz-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    width: 1.15em;
    height: 1.15em;
  }

  .xz-button {
    --xz-mix: 11%;
    display: inline-flex;
    border-radius: var(--xz-radius);
    background: color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) var(--xz-mix), transparent);
    color: color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 82%, var(--xz-text));
    font-size: var(--xz-text-md);
    letter-spacing: -.006em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    border: 1px solid #0000;
    justify-content: center;
    align-items:  center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: 0 .875rem;
    font-weight: 560;
    line-height: 1;
  }

  .xz-button[data-variant="soft"]:-webkit-any([data-tone="neutral"], :not([data-tone])) {
    border-color: var(--xz-line-strong);
    background: linear-gradient(var(--buncss-light, #fff) var(--buncss-dark, #ffffff12), var(--buncss-light, oklch(97.5% .004 var(--xz-hue))) var(--buncss-dark, oklch(100% 0 0 / .03)));
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 1px 0 var(--buncss-light, #fff) var(--buncss-dark, #ffffff14);
  }

  .xz-button[data-variant="soft"]:-moz-any([data-tone="neutral"], :not([data-tone])) {
    border-color: var(--xz-line-strong);
    background: linear-gradient(var(--buncss-light, #fff) var(--buncss-dark, #ffffff12), var(--buncss-light, oklch(97.5% .004 var(--xz-hue))) var(--buncss-dark, oklch(100% 0 0 / .03)));
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 1px 0 var(--buncss-light, #fff) var(--buncss-dark, #ffffff14);
  }

  .xz-button[data-variant="soft"]:is([data-tone="neutral"], :not([data-tone])) {
    border-color: var(--xz-line-strong);
    background: linear-gradient(var(--buncss-light, #fff) var(--buncss-dark, #ffffff12), var(--buncss-light, oklch(97.5% .004 var(--xz-hue))) var(--buncss-dark, oklch(100% 0 0 / .03)));
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 1px 0 var(--buncss-light, #fff) var(--buncss-dark, #ffffff14);
  }

  @supports (color: color(display-p3 0 0 0)) {
    .xz-button[data-variant="soft"]:is([data-tone="neutral"], :not([data-tone])) {
      background: linear-gradient(var(--buncss-light, color(display-p3 1 1 1)) var(--buncss-dark, color(display-p3 1 1 1 / .07)), var(--buncss-light, oklch(97.5% .004 var(--xz-hue))) var(--buncss-dark, oklch(100% 0 0 / .03)));
      box-shadow: var(--xz-shadow-1), inset 0 1px 0 var(--buncss-light, color(display-p3 1 1 1)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
    }
  }

  @supports (color: lab(0% 0 0)) {
    .xz-button[data-variant="soft"]:is([data-tone="neutral"], :not([data-tone])) {
      background: linear-gradient(var(--buncss-light, lab(100% 0 0)) var(--buncss-dark, lab(100% 0 0 / .07)), var(--buncss-light, oklch(97.5% .004 var(--xz-hue))) var(--buncss-dark, oklch(100% 0 0 / .03)));
      box-shadow: var(--xz-shadow-1), inset 0 1px 0 var(--buncss-light, lab(100% 0 0)) var(--buncss-dark, lab(100% 0 0 / .08));
    }
  }

  .xz-button[data-variant="solid"] {
    background: linear-gradient(#ffffff29, #fff0 55%), var(--xz-tone, var(--xz-neutral));
    color: var(--xz-on-tone);
    box-shadow: inset 0 1px 0 #ffffff3d, inset 0 0 0 1px #0000001a, 0 1px 2px oklch(18% .03 var(--xz-hue) / .18), 0 4px 12px -4px color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 55%, transparent);
  }

  @supports (color: color(display-p3 0 0 0)) {
    .xz-button[data-variant="solid"] {
      background: linear-gradient(color(display-p3 1 1 1 / .16), color(display-p3 1 1 1 / 0) 55%), var(--xz-tone, var(--xz-neutral));
      box-shadow: inset 0 1px 0 color(display-p3 1 1 1 / .24), inset 0 0 0 1px color(display-p3 0 0 0 / .1), 0 1px 2px oklch(18% .03 var(--xz-hue) / .18), 0 4px 12px -4px color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 55%, transparent);
    }
  }

  @supports (color: lab(0% 0 0)) {
    .xz-button[data-variant="solid"] {
      background: linear-gradient(lab(100% 0 0 / .16), lab(100% 0 0 / 0) 55%), var(--xz-tone, var(--xz-neutral));
      box-shadow: inset 0 1px 0 lab(100% 0 0 / .24), inset 0 0 0 1px lab(0% 0 0 / .1), 0 1px 2px oklch(18% .03 var(--xz-hue) / .18), 0 4px 12px -4px color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 55%, transparent);
    }
  }

  .xz-button[data-variant="ghost"] {
    --xz-mix: 0%;
  }

  .xz-button[data-variant="glass"] {
    color: var(--xz-text);
  }

  .xz-button[data-size="sm"] {
    border-radius: var(--xz-radius-sm);
    font-size: var(--xz-text-sm);
    min-height: 1.875rem;
    padding-inline-start: .625rem;
    padding-inline-end: .625rem;
  }

  .xz-button[data-size="lg"] {
    border-radius: 11px;
    min-height: 2.75rem;
    padding-inline-start: 1.25rem;
    padding-inline-end: 1.25rem;
    font-size: 1rem;
  }

  .xz-button[data-square] {
    aspect-ratio: 1;
    padding: 0;
  }

  .xz-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
  }

  @media (hover: hover) {
    .xz-button:not(:disabled):hover {
      --xz-mix: 18%;
    }

    .xz-button[data-variant="soft"]:-webkit-any([data-tone="neutral"], :not([data-tone])):not(:disabled):hover {
      border-color: color-mix(in oklch, var(--xz-text) 28%, transparent);
    }

    .xz-button[data-variant="soft"]:-moz-any([data-tone="neutral"], :not([data-tone])):not(:disabled):hover {
      border-color: color-mix(in oklch, var(--xz-text) 28%, transparent);
    }

    .xz-button[data-variant="soft"]:is([data-tone="neutral"], :not([data-tone])):not(:disabled):hover {
      border-color: color-mix(in oklch, var(--xz-text) 28%, transparent);
    }

    .xz-button[data-variant="solid"]:not(:disabled):hover {
      background: linear-gradient(#ffffff38, #ffffff0a 60%), var(--xz-tone, var(--xz-neutral));
    }

    @supports (color: color(display-p3 0 0 0)) {
      .xz-button[data-variant="solid"]:not(:disabled):hover {
        background: linear-gradient(color(display-p3 1 1 1 / .22), color(display-p3 1 1 1 / .04) 60%), var(--xz-tone, var(--xz-neutral));
      }
    }

    @supports (color: lab(0% 0 0)) {
      .xz-button[data-variant="solid"]:not(:disabled):hover {
        background: linear-gradient(lab(100% 0 0 / .22), lab(100% 0 0 / .04) 60%), var(--xz-tone, var(--xz-neutral));
      }
    }
  }

  @media (pointer: coarse) {
    .xz-button, .xz-button[data-size="sm"], .xz-navbar a {
      min-height: 2.75rem;
    }

    .xz-popover[data-kind="menu"] > :-webkit-any(button, a) {
      min-height: 2.75rem;
    }

    .xz-popover[data-kind="menu"] > :-moz-any(button, a) {
      min-height: 2.75rem;
    }

    .xz-popover[data-kind="menu"] > :is(button, a) {
      min-height: 2.75rem;
    }

    .xz-segmented span {
      display: grid;
      align-items:  center;
      min-height: 2.75rem;
    }

    .xz-table th button {
      min-height: 2.75rem;
    }
  }

  .xz-popover {
    padding: var(--xz-space-2);
    border-radius: var(--xz-radius);
    color: var(--xz-text);
    min-width: 12rem;
    max-width: min(24rem, 100vw - 2rem);
  }

  @supports (position-area: block-end) {
    .xz-popover {
      margin: var(--xz-space-2) 0;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
    }
  }

  .xz-popover[data-kind="menu"]:popover-open {
    display: grid;
    padding: var(--xz-space-1);
    gap: 2px;
  }

  .xz-popover[data-kind="menu"] > :-webkit-any(button, a) {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-2) var(--xz-space-3);
    border-radius: var(--xz-radius-sm);
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    min-height: 2.5rem;
  }

  .xz-popover[data-kind="menu"] > :-moz-any(button, a) {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-2) var(--xz-space-3);
    border-radius: var(--xz-radius-sm);
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    min-height: 2.5rem;
  }

  .xz-popover[data-kind="menu"] > :is(button, a) {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-2) var(--xz-space-3);
    border-radius: var(--xz-radius-sm);
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    min-height: 2.5rem;
  }

  .xz-popover[data-kind="menu"] > :-webkit-any(button, a):-webkit-any(:hover, :focus-visible) {
    background: var(--xz-line);
  }

  .xz-popover[data-kind="menu"] > :-moz-any(button, a):-moz-any(:hover, :focus-visible) {
    background: var(--xz-line);
  }

  .xz-popover[data-kind="menu"] > :is(button, a):is(:hover, :focus-visible) {
    background: var(--xz-line);
  }

  .xz-popover[data-kind="menu"] > hr {
    margin: var(--xz-space-1) 0;
    border: 0;
    border-top: 1px solid var(--xz-line);
    width: 100%;
  }

  :-webkit-any(.xz-sheet, .xz-dialog) {
    color: var(--xz-text);
    overflow: hidden;
    max-height: calc(100dvh - 2rem);
    padding: 0;
  }

  :-moz-any(.xz-sheet, .xz-dialog) {
    color: var(--xz-text);
    overflow: hidden;
    max-height: calc(100dvh - 2rem);
    padding: 0;
  }

  :is(.xz-sheet, .xz-dialog) {
    color: var(--xz-text);
    overflow: hidden;
    max-height: calc(100dvh - 2rem);
    padding: 0;
  }

  :-webkit-any(.xz-sheet, .xz-dialog)[open] {
    display: flex;
    flex-direction: column;
  }

  :-moz-any(.xz-sheet, .xz-dialog)[open] {
    display: flex;
    flex-direction: column;
  }

  :is(.xz-sheet, .xz-dialog)[open] {
    display: flex;
    flex-direction: column;
  }

  :-webkit-any(.xz-sheet, .xz-dialog)::backdrop {
    background: oklch(12% .02 var(--xz-hue) / .4);
  }

  :-moz-any(.xz-sheet, .xz-dialog)::backdrop {
    background: oklch(12% .02 var(--xz-hue) / .4);
  }

  :is(.xz-sheet, .xz-dialog)::backdrop {
    background: oklch(12% .02 var(--xz-hue) / .4);
  }

  :-webkit-any(.xz-sheet, .xz-dialog) > header {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-4) var(--xz-space-4) var(--xz-space-2) var(--xz-space-5);
  }

  :-moz-any(.xz-sheet, .xz-dialog) > header {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-4) var(--xz-space-4) var(--xz-space-2) var(--xz-space-5);
  }

  :is(.xz-sheet, .xz-dialog) > header {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-4) var(--xz-space-4) var(--xz-space-2) var(--xz-space-5);
  }

  :-webkit-any(.xz-sheet, .xz-dialog) > header h2 {
    font-size: var(--xz-text-lg);
    flex: 1;
    margin: 0;
  }

  :-moz-any(.xz-sheet, .xz-dialog) > header h2 {
    font-size: var(--xz-text-lg);
    flex: 1;
    margin: 0;
  }

  :is(.xz-sheet, .xz-dialog) > header h2 {
    font-size: var(--xz-text-lg);
    flex: 1;
    margin: 0;
  }

  .xz-sheet-body {
    padding: var(--xz-space-2) var(--xz-space-5) max(var(--xz-space-5), env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    flex: 1;
  }

  :-webkit-any(.xz-sheet, .xz-dialog) > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--xz-space-2);
    padding: var(--xz-space-3) var(--xz-space-5) calc(var(--xz-space-4)  + env(safe-area-inset-bottom));
    border-top: 1px solid var(--xz-line);
    flex-wrap: wrap;
  }

  :-moz-any(.xz-sheet, .xz-dialog) > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--xz-space-2);
    padding: var(--xz-space-3) var(--xz-space-5) calc(var(--xz-space-4)  + env(safe-area-inset-bottom));
    border-top: 1px solid var(--xz-line);
    flex-wrap: wrap;
  }

  :is(.xz-sheet, .xz-dialog) > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--xz-space-2);
    padding: var(--xz-space-3) var(--xz-space-5) calc(var(--xz-space-4)  + env(safe-area-inset-bottom));
    border-top: 1px solid var(--xz-line);
    flex-wrap: wrap;
  }

  .xz-dialog {
    border-radius: var(--xz-radius-xl);
    width: min(30rem, 100vw - 2rem);
  }

  .xz-sheet[data-side="bottom"] {
    border-radius: var(--xz-radius-xl) var(--xz-radius-xl) 0 0;
    border-bottom: 0;
    width: 100%;
    max-width: 40rem;
    max-height: 88dvh;
    margin: auto auto 0;
  }

  .xz-sheet[data-side="bottom"]:before {
    content: "";
    margin-top: var(--xz-space-2);
    background: var(--xz-line);
    border-radius: 3px;
    flex: none;
    align-self:  center;
    width: 2.5rem;
    height: 5px;
  }

  .xz-sheet:-webkit-any([data-side="end"], [data-side="start"]) {
    width: min(28rem, 92vw);
    height: 100dvh;
    max-height: 100dvh;
  }

  .xz-sheet:-moz-any([data-side="end"], [data-side="start"]) {
    width: min(28rem, 92vw);
    height: 100dvh;
    max-height: 100dvh;
  }

  .xz-sheet:is([data-side="end"], [data-side="start"]) {
    width: min(28rem, 92vw);
    height: 100dvh;
    max-height: 100dvh;
  }

  .xz-sheet[data-side="end"] {
    border-radius: var(--xz-radius-xl) 0 0 var(--xz-radius-xl);
    margin: 0 0 0 auto;
  }

  .xz-sheet[data-side="start"] {
    border-radius: 0 var(--xz-radius-xl) var(--xz-radius-xl) 0;
    margin: 0 auto 0 0;
  }

  .xz-field {
    display: grid;
    gap: .375rem;
    min-width: 0;
  }

  .xz-field-label {
    color: var(--xz-text);
    font-size: var(--xz-text-sm);
    font-weight: 560;
  }

  :-webkit-any(.xz-field-hint, .xz-field-error) {
    font-size: var(--xz-text-sm);
  }

  :-moz-any(.xz-field-hint, .xz-field-error) {
    font-size: var(--xz-text-sm);
  }

  :is(.xz-field-hint, .xz-field-error) {
    font-size: var(--xz-text-sm);
  }

  .xz-field-hint {
    color: var(--xz-muted);
  }

  .xz-field-error {
    color: var(--xz-danger);
  }

  :-webkit-any(.xz-field :-webkit-any(input:not(:-webkit-any([type="checkbox"], [type="radio"])), select, textarea), .xz-input) {
    border: 1px solid var(--xz-line-strong);
    border-radius: var(--xz-radius);
    background: var(--xz-surface);
    box-shadow: inset 0 1px 2px oklch(18% .02 var(--xz-hue) / .05);
    width: 100%;
    min-height: 2.25rem;
    padding: .4375rem .75rem;
  }

  :-moz-any(.xz-field :-moz-any(input:not(:-moz-any([type="checkbox"], [type="radio"])), select, textarea), .xz-input) {
    border: 1px solid var(--xz-line-strong);
    border-radius: var(--xz-radius);
    background: var(--xz-surface);
    box-shadow: inset 0 1px 2px oklch(18% .02 var(--xz-hue) / .05);
    width: 100%;
    min-height: 2.25rem;
    padding: .4375rem .75rem;
  }

  :is(.xz-field :is(input:not(:is([type="checkbox"], [type="radio"])), select, textarea), .xz-input) {
    border: 1px solid var(--xz-line-strong);
    border-radius: var(--xz-radius);
    background: var(--xz-surface);
    box-shadow: inset 0 1px 2px oklch(18% .02 var(--xz-hue) / .05);
    width: 100%;
    min-height: 2.25rem;
    padding: .4375rem .75rem;
  }

  :-webkit-any(.xz-field :-webkit-any(input, textarea), .xz-input)::placeholder {
    color: color-mix(in oklch, var(--xz-muted) 75%, transparent);
  }

  :-moz-any(.xz-field :-moz-any(input, textarea), .xz-input)::placeholder {
    color: color-mix(in oklch, var(--xz-muted) 75%, transparent);
  }

  :is(.xz-field :is(input, textarea), .xz-input)::placeholder {
    color: color-mix(in oklch, var(--xz-muted) 75%, transparent);
  }

  :-webkit-any(.xz-field :-webkit-any(input:not(:-webkit-any([type="checkbox"], [type="radio"])), select, textarea), .xz-input):focus-visible {
    border-color: var(--xz-accent);
    outline: 2px solid #0000;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--xz-accent) 22%, transparent);
  }

  :-moz-any(.xz-field :-moz-any(input:not(:-moz-any([type="checkbox"], [type="radio"])), select, textarea), .xz-input):focus-visible {
    border-color: var(--xz-accent);
    outline: 2px solid #0000;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--xz-accent) 22%, transparent);
  }

  :is(.xz-field :is(input:not(:is([type="checkbox"], [type="radio"])), select, textarea), .xz-input):focus-visible {
    border-color: var(--xz-accent);
    outline: 2px solid #0000;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--xz-accent) 22%, transparent);
  }

  .xz-field[data-invalid] :-webkit-any(input, select, textarea) {
    border-color: var(--xz-danger);
  }

  .xz-field[data-invalid] :-moz-any(input, select, textarea) {
    border-color: var(--xz-danger);
  }

  .xz-field[data-invalid] :is(input, select, textarea) {
    border-color: var(--xz-danger);
  }

  .xz-field textarea {
    resize: vertical;
    min-height: 6rem;
  }

  @media (pointer: coarse) {
    :-webkit-any(.xz-field :-webkit-any(input:not(:-webkit-any([type="checkbox"], [type="radio"])), select, textarea), .xz-input) {
      min-height: 2.75rem;
      font-size: max(1rem, 16px);
    }

    :-moz-any(.xz-field :-moz-any(input:not(:-moz-any([type="checkbox"], [type="radio"])), select, textarea), .xz-input) {
      min-height: 2.75rem;
      font-size: max(1rem, 16px);
    }

    :is(.xz-field :is(input:not(:is([type="checkbox"], [type="radio"])), select, textarea), .xz-input) {
      min-height: 2.75rem;
      font-size: max(1rem, 16px);
    }
  }

  input[type="checkbox"][role="switch"] {
    position: relative;
    border-radius: var(--xz-radius-pill);
    background: var(--xz-line-strong);
    box-shadow: inset 0 1px 2px oklch(18% .02 var(--xz-hue) / .12);
    appearance: none;
    cursor: pointer;
    flex: none;
    width: 2.5rem;
    height: 1.5rem;
    margin: 0;
  }

  input[type="checkbox"][role="switch"]:before {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    box-shadow: 0 1px 3px oklch(18% .02 var(--xz-hue) / .3);
    background: #fff;
    background: color(display-p3 1 1 1);
    background: lab(100% 0 0);
    border-radius: 50%;
    inset: 2px auto 2px 2px;
  }

  input[type="checkbox"][role="switch"]:checked {
    background: var(--xz-accent);
  }

  input[type="checkbox"][role="switch"]:checked:before {
    translate: 1rem;
  }

  .xz-segmented {
    display: inline-flex;
    background: var(--xz-sunken);
    box-shadow: inset 0 0 0 1px var(--xz-line), inset 0 1px 2px oklch(18% .02 var(--xz-hue) / .06);
    border-radius: 10px;
    gap: 2px;
    padding: 2px;
  }

  .xz-segmented > label {
    position: relative;
  }

  .xz-segmented input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    inset: 0;
  }

  .xz-segmented span {
    display: block;
    color: var(--xz-muted);
    font-size: var(--xz-text-sm);
    border-radius: 8px;
    padding: .3125rem .75rem;
    font-weight: 540;
    line-height: 1.5;
  }

  .xz-segmented :checked + span {
    color: var(--xz-text);
    box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
    background: var(--buncss-light, #fff) var(--buncss-dark, #ffffff1a);
    background: var(--buncss-light, color(display-p3 1 1 1)) var(--buncss-dark, color(display-p3 1 1 1 / .1));
    background: var(--buncss-light, lab(100% 0 0)) var(--buncss-dark, lab(100% 0 0 / .1));
  }

  .xz-segmented > label:has(:focus-visible) span {
    outline: 2px solid var(--xz-accent);
    outline-offset: 1px;
  }

  .xz-table {
    max-height: var(--xz-table-height, none);
    border-radius: var(--xz-radius-lg);
    overflow: auto;
    overscroll-behavior-x: contain;
  }

  .xz-table[data-depth]:after {
    display: none;
  }

  .xz-table[data-depth]:not([data-depth="0"]) {
    border-color: var(--xz-line);
  }

  .xz-table table {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    width: 100%;
  }

  .xz-table caption {
    padding: var(--xz-space-3) var(--xz-space-4) var(--xz-space-1);
    text-align: start;
    font-weight: 600;
  }

  .xz-table :-webkit-any(th, td) {
    padding: .625rem var(--xz-space-4);
    border-bottom: 1px solid var(--xz-line);
    text-align: start;
    white-space: nowrap;
  }

  .xz-table :-moz-any(th, td) {
    padding: .625rem var(--xz-space-4);
    border-bottom: 1px solid var(--xz-line);
    text-align: start;
    white-space: nowrap;
  }

  .xz-table :is(th, td) {
    padding: .625rem var(--xz-space-4);
    border-bottom: 1px solid var(--xz-line);
    text-align: start;
    white-space: nowrap;
  }

  .xz-table thead th {
    position: sticky;
    z-index: 1;
    background: color-mix(in oklch, var(--xz-sunken) 82%, transparent);
    color: var(--xz-muted);
    font-size: var(--xz-text-xs);
    letter-spacing: .01em;
    padding-block-start: .5rem;
    padding-block-end: .5rem;
    font-weight: 560;
    top: 0;
  }

  .xz-table [data-align="end"] {
    text-align: end;
  }

  .xz-table th button {
    display: inline-flex;
    align-items:  center;
    gap: var(--xz-space-1);
    color: inherit;
    font-weight: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  .xz-table th:not([aria-sort]) .xz-icon {
    opacity: .3;
  }

  .xz-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .xz-table tbody tr[data-clickable] {
    cursor: pointer;
  }

  .xz-table tbody tr:-webkit-any(:hover, :focus-visible) td {
    background: color-mix(in oklch, var(--xz-accent) 5%, transparent);
  }

  .xz-table tbody tr:-moz-any(:hover, :focus-visible) td {
    background: color-mix(in oklch, var(--xz-accent) 5%, transparent);
  }

  .xz-table tbody tr:is(:hover, :focus-visible) td {
    background: color-mix(in oklch, var(--xz-accent) 5%, transparent);
  }

  .xz-table tbody tr:focus-visible {
    outline-offset: -2px;
  }

  .xz-list {
    padding: var(--xz-space-1);
    border-radius: var(--xz-radius-lg);
    list-style: none;
    margin: 0;
  }

  .xz-list > li {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-3);
    padding: var(--xz-space-2) var(--xz-space-3);
    min-height: 3rem;
  }

  .xz-list > li + li {
    border-top: 1px solid var(--xz-line);
  }

  .xz-stat {
    display: grid;
    align-content:  start;
    gap: .375rem;
  }

  .xz-stat-label {
    color: var(--xz-muted);
    font-size: var(--xz-text-sm);
    font-weight: 500;
  }

  .xz-stat strong {
    font-size: var(--xz-text-2xl);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    font-weight: 600;
    font-stretch: 78%;
    line-height: 1;
  }

  .xz-stat strong small {
    color: var(--xz-muted);
    letter-spacing: 0;
    margin-inline-start: .08em;
    font-size: .55em;
    font-weight: 500;
  }

  .xz-stat .xz-badge {
    justify-self: start;
  }

  .xz-badge {
    display: inline-flex;
    align-items:  center;
    gap: var(--xz-space-1);
    border-radius: var(--xz-radius-sm);
    background: color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 18%, transparent);
    color: color-mix(in oklch, var(--xz-tone, var(--xz-neutral)) 65%, var(--xz-text));
    font-size: var(--xz-text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: .0625rem .4375rem;
    font-weight: 580;
    line-height: 1.55;
  }

  .xz-avatar {
    --xz-avatar: 2.5rem;
    display: inline-grid;
    width: var(--xz-avatar);
    height: var(--xz-avatar);
    overflow: hidden;
    background: color-mix(in oklch, var(--xz-accent) 16%, var(--xz-surface));
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--xz-accent) 22%, transparent);
    color: color-mix(in oklch, var(--xz-accent) 80%, var(--xz-text));
    font-size: calc(var(--xz-avatar) * .36);
    letter-spacing: .01em;
    border-radius: 50%;
    flex: none;
    place-items:  center;
    font-weight: 600;
  }

  .xz-avatar[data-size="sm"] {
    --xz-avatar: 2rem;
  }

  .xz-avatar[data-size="lg"] {
    --xz-avatar: 3.5rem;
  }

  .xz-avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .xz-skeleton {
    position: relative;
    display: block;
    width: var(--w, 100%);
    height: var(--h, 1em);
    border-radius: var(--xz-radius-sm);
    background: var(--xz-line);
    overflow: hidden;
  }

  .xz-skeleton[data-round] {
    border-radius: 50%;
  }

  .xz-empty {
    display: grid;
    justify-items: center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-7) var(--xz-space-5);
    color: var(--xz-muted);
    text-align: center;
  }

  .xz-empty > .xz-icon {
    margin-bottom: var(--xz-space-2);
    color: var(--xz-accent);
    width: 2.5rem;
    height: 2.5rem;
  }

  .xz-empty h3 {
    color: var(--xz-text);
    margin: 0;
  }

  .xz-toasts {
    inset: auto 0 calc(var(--xz-toast-offset, var(--xz-space-5))  + env(safe-area-inset-bottom));
    overflow: visible;
    pointer-events: none;
    background: none;
    border: 0;
    width: min(24rem, 100vw - 2rem);
    margin: 0 auto;
    padding: 0;
  }

  .xz-toasts:popover-open {
    display: flex;
    gap: var(--xz-space-2);
    flex-direction: column;
  }

  .xz-toast {
    display: flex;
    align-items:  center;
    gap: var(--xz-space-2);
    padding: var(--xz-space-3) var(--xz-space-4);
    border-radius: var(--xz-radius-lg);
    color: var(--xz-text);
    font-weight: 550;
  }

  .xz-toast:not([data-tone="neutral"]):before {
    content: "";
    background: var(--xz-tone);
    border-radius: 50%;
    flex: none;
    width: .5rem;
    height: .5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }

    .xz-button {
      transition: transform var(--xz-dur-1) var(--xz-ease-out), background-color var(--xz-dur-2) var(--xz-ease-out), color var(--xz-dur-2) var(--xz-ease-out);
    }

    .xz-button:not(:disabled):active {
      transform: scale(.97);
    }

    .xz-navbar a, .xz-tabs > button, .xz-segmented span {
      transition: background-color var(--xz-dur-2) var(--xz-ease-out), color var(--xz-dur-2) var(--xz-ease-out), box-shadow var(--xz-dur-2) var(--xz-ease-out);
    }

    .xz-tabs > button:after {
      transition: scale var(--xz-dur-2) var(--xz-ease-out);
    }

    input[type="checkbox"][role="switch"], input[type="checkbox"][role="switch"]:before {
      transition: background-color var(--xz-dur-2) var(--xz-ease-out), translate var(--xz-dur-2) var(--xz-ease-out);
    }

    :is(.xz-field input, .xz-field select, .xz-field textarea, .xz-input) {
      transition: border-color var(--xz-dur-2) var(--xz-ease-out), box-shadow var(--xz-dur-2) var(--xz-ease-out);
    }

    .xz-popover {
      transform-origin: top left;
      transition: opacity var(--xz-dur-2) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-2) allow-discrete, display var(--xz-dur-2) allow-discrete;
    }

    .xz-popover:not(:popover-open) {
      opacity: 0;
      transition-duration: var(--xz-dur-1);
      scale: .96;
    }

    @starting-style {
      .xz-popover:popover-open {
        opacity: 0;
        scale: .96;
      }
    }

    :-webkit-any(.xz-sheet, .xz-dialog) {
      transition: translate var(--xz-dur-3) var(--xz-ease-drawer), opacity var(--xz-dur-3) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-3) allow-discrete, display var(--xz-dur-3) allow-discrete;
    }

    :-moz-any(.xz-sheet, .xz-dialog) {
      transition: translate var(--xz-dur-3) var(--xz-ease-drawer), opacity var(--xz-dur-3) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-3) allow-discrete, display var(--xz-dur-3) allow-discrete;
    }

    :is(.xz-sheet, .xz-dialog) {
      transition: translate var(--xz-dur-3) var(--xz-ease-drawer), opacity var(--xz-dur-3) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-3) allow-discrete, display var(--xz-dur-3) allow-discrete;
    }

    :-webkit-any(.xz-sheet, .xz-dialog)::backdrop {
      transition: translate var(--xz-dur-3) var(--xz-ease-drawer), opacity var(--xz-dur-3) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-3) allow-discrete, display var(--xz-dur-3) allow-discrete;
    }

    :-moz-any(.xz-sheet, .xz-dialog)::backdrop {
      transition: translate var(--xz-dur-3) var(--xz-ease-drawer), opacity var(--xz-dur-3) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-3) allow-discrete, display var(--xz-dur-3) allow-discrete;
    }

    :is(.xz-sheet, .xz-dialog)::backdrop {
      transition: translate var(--xz-dur-3) var(--xz-ease-drawer), opacity var(--xz-dur-3) var(--xz-ease-out), scale var(--xz-dur-2) var(--xz-ease-out), overlay var(--xz-dur-3) allow-discrete, display var(--xz-dur-3) allow-discrete;
    }

    .xz-sheet[data-side="bottom"]:not([open]) {
      translate: 0 100%;
    }

    .xz-sheet[data-side="end"]:not([open]) {
      translate: 100%;
    }

    .xz-sheet[data-side="start"]:not([open]) {
      translate: -100%;
    }

    .xz-dialog:not([open]) {
      opacity: 0;
      scale: .96;
    }

    :-webkit-any(.xz-sheet, .xz-dialog):not([open])::backdrop {
      opacity: 0;
    }

    :-moz-any(.xz-sheet, .xz-dialog):not([open])::backdrop {
      opacity: 0;
    }

    :is(.xz-sheet, .xz-dialog):not([open])::backdrop {
      opacity: 0;
    }

    :-webkit-any(.xz-sheet, .xz-dialog):not([open]) {
      transition-duration: var(--xz-dur-2);
    }

    :-moz-any(.xz-sheet, .xz-dialog):not([open]) {
      transition-duration: var(--xz-dur-2);
    }

    :is(.xz-sheet, .xz-dialog):not([open]) {
      transition-duration: var(--xz-dur-2);
    }

    :-webkit-any(.xz-sheet, .xz-dialog):not([open])::backdrop {
      transition-duration: var(--xz-dur-2);
    }

    :-moz-any(.xz-sheet, .xz-dialog):not([open])::backdrop {
      transition-duration: var(--xz-dur-2);
    }

    :is(.xz-sheet, .xz-dialog):not([open])::backdrop {
      transition-duration: var(--xz-dur-2);
    }

    @starting-style {
      .xz-sheet[data-side="bottom"][open] {
        translate: 0 100%;
      }

      .xz-sheet[data-side="end"][open] {
        translate: 100%;
      }

      .xz-sheet[data-side="start"][open] {
        translate: -100%;
      }

      .xz-dialog[open] {
        opacity: 0;
        scale: .96;
      }

      :-webkit-any(.xz-sheet, .xz-dialog)[open]::backdrop {
        opacity: 0;
      }

      :-moz-any(.xz-sheet, .xz-dialog)[open]::backdrop {
        opacity: 0;
      }

      :is(.xz-sheet, .xz-dialog)[open]::backdrop {
        opacity: 0;
      }
    }

    .xz-toast {
      transition: opacity var(--xz-dur-2) var(--xz-ease-out), translate var(--xz-dur-2) var(--xz-ease-out);
    }

    @starting-style {
      .xz-toast {
        opacity: 0;
        translate: 0 .75rem;
      }
    }

    .xz-skeleton:after {
      content: "";
      position: absolute;
      animation: xz-shimmer 1.4s var(--xz-ease-in-out) infinite;
      background: linear-gradient(90deg, #0000, #ffffff38, #0000);
      background: linear-gradient(90deg, #0000, color(display-p3 1 1 1 / .22), #0000);
      background: linear-gradient(90deg, #0000, lab(100% 0 0 / .22), #0000);
      inset: 0;
      translate: -100%;
    }

    ::view-transition-old(root) {
      animation-duration: var(--xz-dur-2);
    }

    ::view-transition-new(root) {
      animation-duration: var(--xz-dur-2);
    }
  }

  @keyframes xz-shimmer {
    to {
      translate: 100%;
    }
  }
}

@layer xz.utilities {
  .xz-page {
    width: min(72rem, 100% - 2 * var(--xz-space-4));
    padding-block: var(--xz-space-5);
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .xz-container {
    container-type: inline-size;
  }

  .xz-spacer {
    flex: 1;
  }

  .xz-muted {
    color: var(--xz-muted);
  }

  .xz-visually-hidden {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
  }
}

/* docs/site/site.css */
:root {
  --xz-hue: 236;
  --code-bg: oklch(17.5% .022 var(--xz-hue));
  --code-head: oklch(20.5% .024 var(--xz-hue));
  --code-line: oklch(30% .03 var(--xz-hue));
  --code-text: oklch(92% .01 var(--xz-hue));
  --code-muted: oklch(68% .02 var(--xz-hue));
}

code {
  font-variant-ligatures: none;
}

:not(pre) > code {
  border: 1px solid var(--xz-line);
  background: color-mix(in oklch, var(--xz-surface) 70%, transparent);
  border-radius: 6px;
  padding: .1em .4em;
}

:not(header) > h2 {
  margin-top: var(--xz-space-7);
}

.brand {
  display: flex;
  padding-inline: var(--xz-space-2);
  color: var(--xz-text);
  letter-spacing: -.04em;
  text-decoration: none;
  align-items: baseline;
  font-size: 1.3rem;
  font-weight: 680;
  font-stretch: 80%;
}

.brand .at {
  color: var(--xz-accent);
  margin-inline-end: .04em;
  font-weight: 560;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.links a {
  border-radius: var(--xz-radius);
  color: var(--xz-muted);
  font-size: var(--xz-text-md);
  text-decoration: none;
  padding: .375rem .75rem;
  font-weight: 520;
}

.links a:hover {
  color: var(--xz-text);
}

.links a:-webkit-any(.active, [aria-current="page"]) {
  color: var(--xz-text);
  box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
  background: var(--buncss-light, #ffffffc7) var(--buncss-dark, #ffffff14);
  background: var(--buncss-light, color(display-p3 1 1 1 / .78)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
  background: var(--buncss-light, lab(100% 0 0 / .78)) var(--buncss-dark, lab(100% 0 0 / .08));
}

.links a:-moz-any(.active, [aria-current="page"]) {
  color: var(--xz-text);
  box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
  background: var(--buncss-light, #ffffffc7) var(--buncss-dark, #ffffff14);
  background: var(--buncss-light, color(display-p3 1 1 1 / .78)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
  background: var(--buncss-light, lab(100% 0 0 / .78)) var(--buncss-dark, lab(100% 0 0 / .08));
}

.links a:is(.active, [aria-current="page"]) {
  color: var(--xz-text);
  box-shadow: var(--xz-shadow-1), inset 0 0 0 1px var(--xz-line);
  background: var(--buncss-light, #ffffffc7) var(--buncss-dark, #ffffff14);
  background: var(--buncss-light, color(display-p3 1 1 1 / .78)) var(--buncss-dark, color(display-p3 1 1 1 / .08));
  background: var(--buncss-light, lab(100% 0 0 / .78)) var(--buncss-dark, lab(100% 0 0 / .08));
}

main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 5rem;
}

body > div > footer, #app > footer {
  border-top: 1px solid var(--xz-line);
  color: var(--xz-muted);
  font-size: var(--xz-text-sm);
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items:  center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero h1 {
  font-size: var(--xz-text-3xl);
  letter-spacing: -.045em;
  max-width: 13ch;
  margin: 0 0 1.5rem;
  font-weight: 640;
  font-stretch: 76%;
  line-height: .96;
}

.lead {
  color: var(--xz-muted);
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.55;
}

.hero .lead {
  margin-bottom: 2rem;
}

.actions {
  display: flex;
  gap: var(--xz-space-3);
  flex-wrap: wrap;
}

.hero-demo {
  padding: var(--xz-space-2);
  border-radius: var(--xz-radius-xl);
  margin: 0;
}

.hero-demo .code {
  border-radius: var(--xz-radius-lg);
  margin: 0;
}

.live {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--xz-space-3);
  padding: var(--xz-space-3) var(--xz-space-3) var(--xz-space-2);
  font-size: var(--xz-text-sm);
  flex-wrap: wrap;
}

.live button {
  border-radius: var(--xz-radius);
  background: linear-gradient(#ffffff29, #fff0 55%), var(--xz-accent);
  color: var(--xz-on-tone);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border: 0;
  min-height: 2.25rem;
  padding: 0 .875rem;
  font-weight: 560;
}

@supports (color: color(display-p3 0 0 0)) {
  .live button {
    background: linear-gradient(color(display-p3 1 1 1 / .16), color(display-p3 1 1 1 / 0) 55%), var(--xz-accent);
  }
}

@supports (color: lab(0% 0 0)) {
  .live button {
    background: linear-gradient(lab(100% 0 0 / .16), lab(100% 0 0 / 0) 55%), var(--xz-accent);
  }
}

.live p {
  color: var(--xz-accent);
  margin: 0;
}

.label {
  color: var(--xz-muted);
  font-size: var(--xz-text-sm);
  font-weight: 520;
}

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--xz-space-6) var(--xz-space-5);
  padding-top: var(--xz-space-6);
  border-top: 1px solid var(--xz-line);
}

.points h3 {
  margin: 0 0 var(--xz-space-2);
  font-size: var(--xz-text-md);
  letter-spacing: -.01em;
  font-weight: 600;
  font-stretch: 100%;
}

.points p {
  color: var(--xz-muted);
  margin: 0;
}

.kit-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items:  start;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(4rem, 9vw, 7rem);
}

.kit-intro h2 {
  font-size: var(--xz-text-2xl);
  max-width: 16ch;
  margin-top: 0;
  font-stretch: 80%;
}

.kit-intro .lead {
  margin-bottom: 1.75rem;
}

.showcase {
  border-top: 1px solid var(--xz-line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.showcase li {
  border-bottom: 1px solid var(--xz-line);
}

.showcase a {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--xz-space-4);
  padding: var(--xz-space-5) var(--xz-space-2);
  color: var(--xz-text);
  text-decoration: none;
}

.showcase strong {
  font-size: var(--xz-text-xl);
  letter-spacing: -.03em;
  font-weight: 620;
  font-stretch: 80%;
  line-height: 1;
}

.showcase span {
  color: var(--xz-muted);
}

@media (hover: hover) {
  .showcase a:hover strong {
    color: var(--xz-accent);
  }
}

.page {
  padding-top: 2.5rem;
}

.narrow {
  max-width: 820px;
  margin: 0 auto;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xz-space-4);
}

.checklist li {
  margin: .3rem 0;
}

.learn {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
}

.learn aside {
  position: sticky;
  align-self:  start;
  padding-top: 2.5rem;
  top: 5rem;
}

.learn aside ol {
  padding-left: 1.2rem;
}

.learn aside li {
  color: var(--xz-muted);
  margin: .4rem 0;
}

.learn aside a {
  color: var(--xz-muted);
  text-decoration: none;
}

.learn aside a.active {
  color: var(--xz-accent);
  font-weight: 600;
}

.learn article {
  min-width: 0;
}

.learn h1 {
  margin-top: .3rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--xz-space-4);
  margin-top: 3rem;
}

.pager .primary {
  margin-left: auto;
}

.pieces {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem;
}

.pieces dd {
  color: var(--xz-muted);
  margin: 0;
}

.examples {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.examples > li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--xz-space-4);
  border-top: 1px solid var(--xz-line);
  align-items:  center;
  padding: 1.5rem 0;
}

.examples h2 {
  margin: 0 0 .35rem;
}

.examples p {
  margin: .25rem 0 0;
}

.examples .actions {
  margin: 0;
}

@media (max-width: 640px) {
  .examples > li {
    grid-template-columns: 1fr;
  }
}

.error {
  color: var(--xz-danger);
}

.code {
  border: 1px solid var(--code-line);
  border-radius: var(--xz-radius);
  background: var(--code-bg);
  color: var(--code-text);
  overflow: hidden;
  margin: 1.25rem 0;
}

.code figcaption {
  display: flex;
  border-bottom: 1px solid var(--code-line);
  background: var(--code-head);
  color: var(--code-muted);
  font: .8rem var(--xz-font-mono);
  justify-content: space-between;
  align-items:  center;
  padding: .45rem .9rem;
}

.code .copy {
  border: 1px solid var(--code-line);
  color: var(--code-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border-radius: 6px;
  padding: .1rem .5rem;
}

.code .copy:hover {
  color: var(--code-text);
}

.code pre {
  overflow-x: auto;
  margin: 0;
  padding: 1rem 1.1rem;
  font-size: .82rem;
  line-height: 1.65;
}

.gallery {
  display: grid;
  gap: var(--xz-space-5);
}

.specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--xz-space-5);
  align-items:  start;
}

.specimen > .stage {
  display: grid;
  gap: var(--xz-space-4);
  min-width: 0;
}

.controls {
  display: flex;
  gap: var(--xz-space-2);
  flex-wrap: wrap;
}

.row {
  display: flex;
  align-items:  center;
  gap: var(--xz-space-2);
  flex-wrap: wrap;
}

.toc {
  display: flex;
  gap: var(--xz-space-2);
  margin-bottom: var(--xz-space-5);
  flex-wrap: wrap;
}

.scroller {
  position: relative;
  border-radius: var(--xz-radius-lg);
  overflow: auto;
  background: radial-gradient(60% 80% at 85% 10%, #56d3da, transparent 70%), linear-gradient(170deg, oklch(62% .15 var(--xz-hue)), oklch(42% .12 var(--xz-hue)));
  height: 16rem;
}

@supports (color: color(display-p3 0 0 0)) {
  .scroller {
    background: radial-gradient(60% 80% at 85% 10%, color(display-p3 .475086 .816931 .845625), transparent 70%), linear-gradient(170deg, oklch(62% .15 var(--xz-hue)), oklch(42% .12 var(--xz-hue)));
  }
}

@supports (color: lab(0% 0 0)) {
  .scroller {
    background: radial-gradient(60% 80% at 85% 10%, lab(77.8694% -34.511 -14.2102), transparent 70%), linear-gradient(170deg, oklch(62% .15 var(--xz-hue)), oklch(42% .12 var(--xz-hue)));
  }
}

.scroller .xz-toolbar {
  position: sticky;
  top: var(--xz-space-3);
  margin: var(--xz-space-3);
}

.scroller p {
  margin: var(--xz-space-3) var(--xz-space-4);
  color: oklch(97% .01 var(--xz-hue));
}

.snap {
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: none;
  border: 0;
  width: 100%;
  max-width: 40rem;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: 0;
}

.snap::backdrop {
  background: oklch(12% .02 var(--xz-hue) / .4);
}

.snap-rest {
  scroll-snap-align: start;
  height: 55dvh;
}

.snap-panel {
  padding: var(--xz-space-3) var(--xz-space-5) var(--xz-space-6);
  border-radius: var(--xz-radius-lg) var(--xz-radius-lg) 0 0;
  scroll-snap-align: start;
  min-height: 100dvh;
}

.snap-panel:before {
  content: "";
  display: block;
  margin: 0 auto var(--xz-space-3);
  background: var(--xz-line);
  border-radius: 3px;
  width: 2.5rem;
  height: 5px;
}

.resizable {
  padding: var(--xz-space-3);
  border: 1px dashed var(--xz-line);
  border-radius: var(--xz-radius-lg);
  overflow: hidden;
  resize: horizontal;
  min-width: 14rem;
  max-width: 100%;
}

.kpis {
  display: grid;
  gap: var(--xz-space-3);
}

@container (width > 32rem) {
  .kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container (20rem < width <= 32rem) {
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpis .xz-stat {
  padding: var(--xz-space-3);
  border-radius: var(--xz-radius);
  background: color-mix(in oklch, var(--xz-surface) 60%, transparent);
}

.loaded {
  display: grid;
  gap: var(--xz-space-2);
}

@media (prefers-reduced-motion: no-preference) {
  .loaded > * {
    transition: opacity var(--xz-dur-3) var(--xz-ease-out);
  }

  @starting-style {
    .loaded > * {
      opacity: 0;
    }
  }
}

.media {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items:  center;
  gap: var(--xz-space-3);
}

@media (max-width: 820px) {
  .hero, .kit-intro, .two, .learn, .specimen {
    grid-template-columns: 1fr;
  }

  .showcase a {
    grid-template-columns: 1fr;
    gap: var(--xz-space-1);
  }

  .learn aside {
    position: static;
    padding-top: 1rem;
  }

  .xz-navbar[data-kind="top"] {
    flex-wrap: wrap;
  }

  .links {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    order: 3;
    width: 100%;
  }

  .links a {
    white-space: nowrap;
  }
}

/* docs/site/.xzor/pages/Roadmap.xzor.css */
@scope ([data-xz="xxoz2sm"]) to (:scope [data-xz] > *) {
  :where(:scope, :scope *).roadmap {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
  }

  :where(:scope, :scope *):is(.roadmap > li) {
    position: relative;
    border-left: 1px solid var(--xz-line-strong);
    padding: 0 0 2.25rem 2rem;
  }

  :where(:scope, :scope *):is(.roadmap > li:last-child) {
    border-left-color: #0000;
  }

  :where(:scope, :scope *):is(.roadmap > li):before {
    content: "";
    position: absolute;
    background: var(--xz-bg);
    box-shadow: inset 0 0 0 2px var(--xz-muted);
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
    top: .3rem;
    left: -.4rem;
  }

  :where(:scope, :scope *):is(.roadmap > li[data-tone="success"]):before {
    background: var(--xz-success);
    box-shadow: none;
  }

  :where(:scope, :scope *):is(.roadmap > li[data-tone="accent"]):before {
    box-shadow: inset 0 0 0 2px var(--xz-accent), 0 0 0 4px color-mix(in oklab, var(--xz-accent) 22%, transparent);
  }

  :where(:scope, :scope *):is(.roadmap h2) {
    font-size: inherit;
    margin: 0 0 .9rem;
    line-height: 1;
  }

  :where(:scope, :scope *):is(.roadmap dl) {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: .6rem 1.5rem;
    margin: 0;
  }

  :where(:scope, :scope *):is(.roadmap dt) {
    font-weight: 600;
  }

  :where(:scope, :scope *):is(.roadmap dd) {
    color: var(--xz-muted);
    margin: 0;
  }

  @media (max-width: 640px) {
    :where(:scope, :scope *):is(.roadmap dl) {
      grid-template-columns: 1fr;
      gap: .15rem;
    }

    :where(:scope, :scope *):is(.roadmap dd + dt) {
      margin-top: .6rem;
    }
  }
}