/* generated by src/tools/palette.py - do not edit by hand */
:root {
  --cyan-50: #EBFAFF; --cyan-100: #B8E9FD; --cyan-200: #90D6F4; --cyan-300: #6BC4EB; --cyan-400: #43B2E3; --cyan-500: #03A3DE; --cyan-600: #0085BD; --cyan-700: #00689C; --cyan-800: #004D7B; --cyan-900: #00335A; --cyan-950: #001C3A;
  --crimson-50: #FFF4F4; --crimson-100: #FFC9CD; --crimson-200: #F5A3A8; --crimson-300: #E58286; --crimson-400: #D36266; --crimson-500: #C34247; --crimson-600: #B51E2A; --crimson-700: #98071C; --crimson-800: #790012; --crimson-900: #5A000A; --crimson-950: #3C0004;
  --gold-50: #FCF7E4; --gold-100: #F5E3A3; --gold-200: #EDCF6B; --gold-300: #E8BE23; --gold-400: #D2A000; --gold-500: #B98300; --gold-600: #9E6900; --gold-700: #835000; --gold-800: #683900; --gold-900: #4C2400; --gold-950: #311100;
  --emerald-50: #E7FEEA; --emerald-100: #B3F5BC; --emerald-200: #88E995; --emerald-300: #5CDC6F; --emerald-400: #22D147; --emerald-500: #00B14B; --emerald-600: #009149; --emerald-700: #007341; --emerald-800: #005635; --emerald-900: #003B26; --emerald-950: #002316;
  --night-50: #F5F6FE; --night-100: #EBECF8; --night-200: #D6D7EA; --night-300: #B9BBD6; --night-400: #999BBD; --night-500: #7A7CA5; --night-600: #5C5E8D; --night-700: #414174; --night-800: #2A275E; --night-900: #1A1446; --night-950: #0E0731; --night-975: #060320;
  --ink: #010101; --sticker: #FDFDFA;
}

/* ==========================================================================
   RoGenie design tokens — "Ink & Lamplight"
   Seeds -> semantic tokens. Every page (and every app theme) sets only the
   eight --seed-* values plus data-scheme; everything else derives from them.
   ========================================================================== */
:root {
  /* ---- theme seeds: the brand "RoGenie Night", sampled from the mascot artwork ----
     These are the pre-JS values for the public pages. They are deliberately the brand
     palette (body #00A0DC, turban #B41E28, trim #F0BE1E, gem #20D040) rather than the app's
     saved theme: a visitor landing on / has no saved preference, and the marketing pages
     must be on-brand. The app applies its own saved theme on boot. */
  --seed-accent: #03A3DE;       /* genie cyan */
  --seed-accent-deep: #00689C;
  --seed-danger: #B51E2A;       /* turban crimson */
  --seed-gold: #E8BE23;         /* wish gold */
  --seed-gold-deep: #B98300;
  --seed-bg-deep: #0E0731;      /* night */
  --seed-bg-royal: #241A6E;     /* royal */
  --seed-bg-panel: #151041;
  --seed-success: #22D147;      /* turban gem (constant across themes) */
  --on-gold: #010101;           /* set per theme by JS (ink or white, whichever passes contrast) */
  --on-danger: #FDFDFA;
  --on-accent: #010101;

  /* ---- scheme helpers ---- */
  --mix-up: #FFFFFF;            /* lighten surfaces toward this */
  --fg: #FDFDFA;
  --ink: #010101;
  --sticker: #FDFDFA;

  /* ---- surfaces ---- */
  --bg: var(--seed-bg-deep);
  --bg-abyss: color-mix(in oklch, var(--seed-bg-deep) 62%, #000);
  --bg-royal: var(--seed-bg-royal);
  --panel: var(--seed-bg-panel);
  --panel-2: color-mix(in oklch, var(--seed-bg-panel), var(--mix-up) 5%);
  --panel-3: color-mix(in oklch, var(--seed-bg-panel), var(--mix-up) 10%);
  --glass: color-mix(in oklch, var(--seed-bg-panel) 76%, transparent);
  --glass-2: color-mix(in oklch, color-mix(in oklch, var(--seed-bg-panel), var(--mix-up) 6%) 82%, transparent);
  --scrim: color-mix(in oklch, var(--seed-bg-deep) 70%, transparent);
  --line: color-mix(in oklch, var(--fg) 13%, transparent);
  --line-2: color-mix(in oklch, var(--fg) 22%, transparent);
  --line-accent: color-mix(in oklch, var(--seed-accent) 45%, transparent);

  /* ---- text ---- */
  --text: var(--fg);
  --text-2: color-mix(in oklch, var(--fg) 84%, var(--seed-bg-panel));
  --text-3: color-mix(in oklch, var(--fg) 66%, var(--seed-bg-panel));
  --text-4: color-mix(in oklch, var(--fg) 46%, var(--seed-bg-panel)); /* decorative only, never body text */

  /* ---- accents (fills) ---- */
  --accent: var(--seed-accent);
  --accent-deep: var(--seed-accent-deep);
  --gold: var(--seed-gold);
  --gold-deep: var(--seed-gold-deep);
  --gold-hi: color-mix(in oklch, var(--seed-gold), #FFFFFF 55%);
  --danger: var(--seed-danger);
  --success: var(--seed-success);
  --warn: #F5C84B;

  /* ---- accents readable as text on the current scheme ---- */
  --accent-text: #6BC4EB;
  --gold-text: #F2CB45;
  --danger-text: #FF7B82;
  --success-text: #5CDC6F;
  --warn-text: #F5C84B;

  /* ---- tints (backgrounds for badges, rows, callouts) ---- */
  --accent-tint: color-mix(in oklch, var(--seed-accent) 16%, transparent);
  --gold-tint: color-mix(in oklch, var(--seed-gold) 16%, transparent);
  --danger-tint: color-mix(in oklch, var(--seed-danger) 22%, transparent);
  --success-tint: color-mix(in oklch, var(--seed-success) 15%, transparent);
  --warn-tint: color-mix(in oklch, #F5C84B 15%, transparent);

  /* ---- code (chat code blocks, diffs, the IDE editor). The theme's own night (its own paper in a
     light theme), and a syntax palette tinted toward the theme: each role keeps its own hue, so
     keywords, calls and strings stay apart in every theme, and leans to the theme's colours ---- */
  --code-bg: color-mix(in oklch, var(--bg-abyss) 88%, #000);
  --code-head: color-mix(in oklch, var(--fg) 4%, transparent);
  --code-fg: color-mix(in oklch, #D6D8F0 88%, var(--seed-accent));
  --code-kw: color-mix(in oklch, #FF8FD0 76%, var(--accent-text));
  --code-fn: color-mix(in oklch, #6BC4EB 50%, var(--accent-text));
  --code-str: color-mix(in oklch, #F5E3A3 64%, var(--gold-text));
  --code-num: color-mix(in oklch, #5CDC6F 80%, var(--accent-text));
  --code-com: color-mix(in oklch, #8C8EB5 80%, var(--accent-text));
  --code-bi: color-mix(in oklch, #B9A2F2 74%, var(--accent-text));
  --code-op: color-mix(in oklch, #C9CBE6 88%, var(--accent-text));
  --code-add: #A8F2B4; --code-add-bg: rgb(34 209 71 / .13);
  --code-del: #FFB9BD; --code-del-bg: rgb(255 123 130 / .13);

  /* ---- light & glow (glow is a material: light sources, not drop shadows) ---- */
  --glow-gold: 0 0 24px color-mix(in oklch, var(--seed-gold) 45%, transparent), 0 0 72px color-mix(in oklch, var(--seed-gold) 20%, transparent);
  --glow-accent: 0 0 22px color-mix(in oklch, var(--seed-accent) 45%, transparent), 0 0 64px color-mix(in oklch, var(--seed-accent) 18%, transparent);
  --glow-success: 0 0 16px color-mix(in oklch, var(--seed-success) 55%, transparent);
  --glow-danger: 0 0 16px color-mix(in oklch, var(--seed-danger) 60%, transparent);
  --rim: inset 0 1px 0 color-mix(in oklch, var(--mix-up) 9%, transparent);

  /* ---- elevation ---- */
  --e1: var(--rim), 0 1px 2px rgb(2 0 16 / .25), 0 8px 24px -14px rgb(2 0 16 / .6);
  --e2: var(--rim), 0 2px 6px rgb(2 0 16 / .25), 0 24px 60px -28px rgb(2 0 16 / .85);
  --e3: var(--rim), 0 4px 12px rgb(2 0 16 / .3), 0 40px 120px -36px rgb(2 0 16 / .95);
  --sticker-shadow: 4px 4px 0 var(--ink);
  --sticker-shadow-sm: 3px 3px 0 var(--ink);
  --sticker-shadow-lg: 6px 6px 0 var(--ink);

  /* ---- grain (kills banding on big gradients) ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- type ---- */
  --font-display: "Shrikhand", "Atkinson Hyperlegible Next", Georgia, serif;
  --font-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-hero: clamp(3.1rem, 1.6rem + 6.4vw, 8.4rem);
  --fs-d1: clamp(2.4rem, 1.5rem + 3.8vw, 5.4rem);
  --fs-d2: clamp(2rem, 1.45rem + 2.4vw, 3.9rem);
  --fs-d3: clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .78125rem;
  --fs-micro: .6875rem;
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.58;
  --track-display: -0.012em;
  --track-eyebrow: .14em;

  /* ---- space (4-based) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px;
  --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(88px, 12vw, 176px);
  --measure: 68ch;

  /* ---- radius ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- motion ---- */
  --dur-instant: 90ms; --dur-quick: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-scene: 700ms; --dur-epic: 1200ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-smoke: cubic-bezier(.4, 0, .2, 1);
  --spring-snappy: linear(0, 0.034, 0.112, 0.215, 0.329, 0.434, 0.542, 0.639, 0.724, 0.791, 0.851, 0.899, 0.936, 0.962, 0.984, 0.998, 1.008, 1.014, 1.017, 1.018, 1.018, 1.017, 1.015, 1.013, 1.011, 1.009, 1.007, 1.006, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1);
  --dur-spring-snappy: 434ms;
  --spring-bouncy: linear(0, 0.077, 0.248, 0.462, 0.678, 0.867, 1.02, 1.117, 1.168, 1.182, 1.168, 1.136, 1.096, 1.057, 1.023, 0.996, 0.979, 0.969, 0.967, 0.97, 0.976, 0.983, 0.99, 0.996, 1.001, 1.004, 1.006, 1.006, 1.005, 1.004, 1.003, 1.002, 1.001, 1, 1);
  --dur-spring-bouncy: 754ms;
  --spring-soft: linear(0, 0.025, 0.085, 0.163, 0.25, 0.339, 0.425, 0.5, 0.574, 0.639, 0.697, 0.747, 0.79, 0.826, 0.856, 0.882, 0.904, 0.922, 0.937, 0.949, 0.959, 0.967, 0.974, 0.979, 0.984, 0.987, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 0.998, 1);
  --dur-spring-soft: 607ms;
  --stagger-list: 40ms; --stagger-card: 70ms; --stagger-letter: 22ms;

  /* ---- layers ---- */
  --z-sky: 0; --z-content: 1; --z-sticky: 20; --z-nav: 40; --z-dock: 50; --z-popover: 70; --z-sheet: 80;
  --z-dialog: 90; --z-toast: 100; --z-dev: 120;

  color-scheme: dark;
}

/* Relative colors keep hue and chroma while guaranteeing readable lightness.
   Browsers without them keep the static values above. */
@supports (color: oklch(from red l c h)) {
  :root {
    --accent-text: oklch(from var(--seed-accent) max(l, 0.76) min(c, 0.14) h);
    --gold-text: oklch(from var(--seed-gold) max(l, 0.82) c h);
    --danger-text: oklch(from var(--seed-danger) max(l, 0.74) max(c, 0.14) h);
    --success-text: oklch(from var(--seed-success) max(l, 0.8) c h);
  }
}

/* ---- light scheme (used by the 7 light themes in the app) ---- */
:root[data-scheme="light"] {
  --mix-up: #000000;
  --fg: #16123A;
  --bg-abyss: color-mix(in oklch, var(--seed-bg-deep) 94%, #000);
  --line: color-mix(in oklch, var(--fg) 12%, transparent);
  --line-2: color-mix(in oklch, var(--fg) 20%, transparent);
  --text-2: color-mix(in oklch, var(--fg) 82%, var(--seed-bg-panel));
  --text-3: color-mix(in oklch, var(--fg) 68%, var(--seed-bg-panel));
  --accent-text: #00689C; --gold-text: #835000; --danger-text: #98071C; --success-text: #007341;
  --warn-text: #835000;
  --glass: color-mix(in oklch, var(--seed-bg-panel) 82%, transparent);
  --rim: inset 0 1px 0 rgb(255 255 255 / .7);
  --e1: 0 1px 2px rgb(20 16 60 / .08), 0 8px 24px -14px rgb(20 16 60 / .25);
  --e2: 0 2px 6px rgb(20 16 60 / .08), 0 24px 60px -28px rgb(20 16 60 / .35);
  --e3: 0 4px 12px rgb(20 16 60 / .12), 0 40px 120px -36px rgb(20 16 60 / .45);
  /* code reads dark on the theme's own paper, never as a dark slab in a light theme */
  --code-bg: color-mix(in oklch, var(--seed-bg-royal) 42%, #FFFFFF);
  --code-head: color-mix(in oklch, var(--fg) 5%, transparent);
  --code-fg: color-mix(in oklch, #16123A 90%, var(--seed-accent));
  --code-kw: color-mix(in oklch, #A3125F 76%, var(--accent-text));
  --code-fn: color-mix(in oklch, #00628F 50%, var(--accent-text));
  --code-str: color-mix(in oklch, #6E4A00 64%, var(--gold-text));
  --code-num: color-mix(in oklch, #00693A 80%, var(--accent-text));
  --code-com: color-mix(in oklch, #5C5980 82%, var(--accent-text));
  --code-bi: color-mix(in oklch, #5233A6 74%, var(--accent-text));
  --code-op: color-mix(in oklch, #34305E 88%, var(--accent-text));
  --code-add: #0B6B2F; --code-add-bg: rgb(34 209 71 / .14);
  --code-del: #A3122A; --code-del-bg: rgb(229 72 77 / .12);
  color-scheme: light;
}
@supports (color: oklch(from red l c h)) {
  :root[data-scheme="light"] {
    --accent-text: oklch(from var(--seed-accent) min(l, 0.5) c h);
    --gold-text: oklch(from var(--seed-gold) min(l, 0.5) c h);
    --danger-text: oklch(from var(--seed-danger) min(l, 0.5) c h);
    --success-text: oklch(from var(--seed-success) min(l, 0.48) c h);
  }
}

/* ==========================================================================
   Base: reset, type, focus, selection, scrollbars, motion safety
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: color-mix(in oklch, var(--seed-accent) 22%, transparent);
  scrollbar-color: color-mix(in oklch, var(--fg) 24%, transparent) transparent;
  scrollbar-width: thin;
  /* (every rule that truncates one line with an ellipsis turns it off: Safari would hang a closing
     bracket or quote outside the box and clip it, as in "Auto (intelligent & cheap") */
  hanging-punctuation: first last;
}
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--gold);
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
textarea { resize: vertical; }
p, h1, h2, h3, h4, h5, h6, li, dd, figcaption, blockquote { overflow-wrap: break-word; }
h1, h2, h3, h4 { line-height: var(--lh-snug); text-wrap: balance; font-weight: 800; }
p, li { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: color-mix(in oklch, var(--seed-gold) 88%, transparent); color: var(--ink); }

a { color: var(--accent-text); text-decoration-thickness: .08em; text-underline-offset: .22em; transition: color var(--dur-quick) var(--ease-out); }
a:hover { color: var(--gold-text); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }

/* ---- focus: a cyan ring that snaps in (drawn, never the browser default) ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--accent-text);
  outline-offset: 3px;
  animation: focus-snap var(--dur-spring-snappy) var(--spring-snappy);
}
@keyframes focus-snap { from { outline-offset: 9px; outline-color: transparent; } }
.btn-wish:focus-visible, .btn-danger:focus-visible { outline-color: var(--sticker); box-shadow: var(--sticker-shadow), 0 0 0 7px color-mix(in oklch, var(--seed-accent) 55%, transparent); }

/* ---- scrollbars (WebKit / Blink fallback; Firefox + modern Chrome use scrollbar-color) ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--fg) 20%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--seed-gold) 70%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- utilities ---- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: var(--z-dev);
  padding: 12px 18px; border-radius: var(--r-md); background: var(--gold); color: var(--on-gold);
  border: 2px solid var(--ink); box-shadow: var(--sticker-shadow); font-weight: 800; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .055; mix-blend-mode: overlay; pointer-events: none; z-index: 1; border-radius: inherit; }

/* ---- type roles ---- */
/* Shrikhand kerns a round letter hard into the d: at 78.72px its `de`/`do`/`ds` pairs pull
   -6.3px (-.08em), five times its next-largest pair, so the d's bowl swallows the e's stem and
   "idea" reads as "ide a" (reported 2026-10-21). Nothing else in the face collides; the pairs
   that do get adjusted otherwise are <= 3.15px, which is invisible at these sizes. Turning
   kerning off for the display face only -- body text keeps it -- is what removes the collision
   without touching the letter fit anywhere else. qa/land-checks.mjs asserts every element that
   computes to Shrikhand has it off, so a new display rule cannot quietly miss this. Every rule
   that sets var(--font-display) carries it directly: a `font:` shorthand resets font-kerning to
   auto, so one shared rule elsewhere in the cascade would be undone by the later shorthand. */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--track-display); line-height: var(--lh-tight); font-kerning: none; }
.sticker-type {
  font-family: var(--font-display); font-weight: 400; color: var(--gold);
  -webkit-text-stroke: .075em var(--ink); paint-order: stroke fill;
  text-shadow: .07em .07em 0 var(--ink);
  font-kerning: none;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--accent-text);
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.muted { color: var(--text-3); }

/* ---- icons ---- */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: var(--ic-stroke, 1.85); stroke-linecap: round; stroke-linejoin: round; vertical-align: -.24em; overflow: visible; }
/* filled parts use presentation attributes: document CSS cannot reach into <use> shadow trees */
.ic-spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- touch: hide keyboard-shortcut hints ---- */
@media (hover: none), (pointer: coarse) {
  [data-kbd-hint], .kbd-hint { display: none !important; }
}

/* ---- motion safety ---- */
/* transitions are switched off outright (0s, so none is created): a 1ms transition on every element
   (transition-property defaults to all) could stick at its start value in WebKit. No script waits
   for transitionend. Animations keep 1ms so their end states still apply. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}
html.motion-paused [data-ambient], html.motion-paused [data-ambient] * { animation-play-state: paused !important; }

/* ---- cross-document view transitions (landing -> login -> app) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }
::view-transition-group(brand), ::view-transition-group(genie) { animation-duration: 520ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Components (shared by all nine pages)
   ========================================================================== */

/* ---------- brand lockup ---------- */
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 1.22rem/1 var(--font-text); letter-spacing: -.01em; }
.vt-brand { view-transition-name: brand; }
.vt-genie { view-transition-name: genie; }
.lockup img { width: 38px; height: 38px; flex-shrink: 0; max-width: none; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); transition: transform var(--dur-spring-bouncy) var(--spring-bouncy); }
.lockup:hover { color: var(--text); }
.lockup:hover img { transform: rotate(-8deg) scale(1.06); }
.lockup .wordmark span { color: var(--gold-text); }
.lockup.compact { gap: 8px; font-size: 1.05rem; }
.lockup.compact img { width: 30px; height: 30px; }

/* ---------- buttons ---------- */
.btn {
  --btn-h: 44px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--btn-h); padding: 0 18px; border-radius: var(--r-md);
  border: 1px solid transparent; font: 700 .9375rem/1.1 var(--font-text); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; user-select: none; color: var(--text);
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out),
              background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick);
}
.btn .ic { width: 1.15em; height: 1.15em; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn-sm { --btn-h: 36px; padding: 0 12px; font-size: .875rem; border-radius: var(--r-sm); }
/* 44px touch target: the ring sits 4px past the border box (it is placed from the padding box,
   so it also clears the 1px border, or the 2px border of the sticker buttons) */
.btn-sm::before { content: ""; position: absolute; inset: -5px; }
.btn-wish.btn-sm::before, .btn-danger.btn-sm::before { inset: -6px; }
.btn-lg { --btn-h: 56px; padding: 0 26px; font-size: 1.0625rem; border-radius: 16px; }
.btn-xl { --btn-h: 64px; padding: 0 30px; font-size: 1.1875rem; border-radius: 18px; }
.btn-block { width: 100%; }
/* an icon button is a fixed square: without flex:none a cramped flex row (the phone topbar)
   shrinks it below its width, and the tap target silently falls under the 24px minimum */
.btn-icon { width: var(--btn-h); min-width: var(--btn-h); padding: 0; flex: none; }

/* The wish button: a gold sticker that presses into its own ink shadow */
.btn-wish {
  color: var(--on-gold); font-weight: 800;
  background: linear-gradient(180deg, color-mix(in oklch, var(--gold), #fff 26%) 0%, var(--gold) 46%, color-mix(in oklch, var(--gold), var(--gold-deep) 40%) 100%);
  border: 2px solid var(--ink); box-shadow: var(--sticker-shadow), inset 0 1px 0 rgb(255 255 255 / .55);
}
/* the shine: a band swept across the button's own box by background-position, so the button needs
   no overflow clip (a clip would also cut .btn-sm's 44px touch ring and make every wish button a
   scroll container). Same band, angle, path and timing as the moving-box version it replaces. */
.btn-wish::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 46.5%, rgb(255 255 255 / .6) 50%, transparent 53.5%) 100% 0 / 360% 100% no-repeat;
}
.btn-wish:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink), inset 0 1px 0 rgb(255 255 255 / .55), var(--glow-gold); color: var(--on-gold); }
.btn-wish:hover::after { background-position: 0 0; transition: background-position 700ms var(--ease-out); }
.btn-wish:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink), inset 0 1px 0 rgb(255 255 255 / .4); transition-duration: 60ms; }

.btn-glass { background: var(--glass-2); border-color: var(--line-2); box-shadow: var(--rim); backdrop-filter: blur(14px) saturate(140%); }
.btn-glass:hover { border-color: var(--line-accent); background: color-mix(in oklch, var(--panel-3) 85%, transparent); color: var(--text); }
.btn-glass:active { transform: translateY(1px) scale(.985); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: color-mix(in oklch, var(--fg) 8%, transparent); color: var(--text); }
.btn-ghost:active { transform: scale(.97); }
.btn-ghost[aria-pressed="true"], .btn-ghost[aria-expanded="true"] { background: color-mix(in oklch, var(--fg) 10%, transparent); color: var(--text); }

.btn-danger { color: var(--on-danger); font-weight: 800; background: var(--danger); border: 2px solid var(--ink); box-shadow: var(--sticker-shadow); }
.btn-danger:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink), var(--glow-danger); color: var(--on-danger); }
.btn-danger:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-danger-quiet { color: var(--danger-text); }
.btn-danger-quiet:hover { background: var(--danger-tint); color: var(--danger-text); }

.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .ic:not(.ic-spin) { display: none; }

/* ---------- fields ---------- */
.field { display: grid; gap: 7px; }
.field > label, .label { font: 700 .875rem/1.2 var(--font-text); color: var(--text-2); }
.hint { font-size: .8125rem; color: var(--text-3); line-height: 1.45; }
.error-text { font-size: .8125rem; color: var(--danger-text); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.input, .textarea, .select {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-md);
  background: color-mix(in oklch, var(--bg-abyss) 55%, transparent); border: 1.5px solid var(--line-2); color: var(--text);
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick), background var(--dur-quick);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: color-mix(in oklch, var(--fg) 34%, transparent); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px color-mix(in oklch, var(--seed-accent) 26%, transparent); animation: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-text); }
.select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9BBD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.select option { background: var(--panel); color: var(--text); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .ic:first-child { position: absolute; left: 13px; color: var(--text-3); pointer-events: none; }
.input-group > .ic:first-child + .input { padding-left: 40px; }
.input-group .input-action { position: absolute; right: 5px; }

/* ---------- switch (button[role=switch]) ---------- */
.switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: 99px; background: color-mix(in oklch, var(--fg) 16%, transparent); border: 1.5px solid var(--line-2); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.switch::before { content: ""; position: absolute; inset: -9px -2px; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--text-2); box-shadow: 0 1px 3px rgb(0 0 0 / .4); transition: transform var(--dur-spring-snappy) var(--spring-snappy), background var(--dur-base); }
.switch[aria-checked="true"] { background: var(--success); border-color: var(--ink); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--sticker); box-shadow: 0 0 0 1.5px var(--ink); }
.switch:disabled { opacity: .45; }
.toggle-row { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; padding: 14px 0; }
.toggle-row + .toggle-row { border-top: 1px solid var(--line); }
.toggle-row .copy { display: grid; gap: 3px; }
.toggle-row .copy b { font-size: .9375rem; }

/* ---------- checkbox ---------- */
.check { appearance: none; width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-2); background: transparent; display: inline-grid; place-items: center; transition: background var(--dur-quick), border-color var(--dur-quick); }
.check::after { content: ""; width: 11px; height: 6px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-spring-snappy) var(--spring-snappy); }
.check:checked { background: var(--success); border-color: var(--ink); }
.check:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-md); background: color-mix(in oklch, var(--bg-abyss) 60%, transparent); border: 1px solid var(--line); }
.seg button { min-height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: .875rem; color: var(--text-3); transition: color var(--dur-quick), background var(--dur-quick); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--panel-3); color: var(--text); box-shadow: var(--e1); }

/* ---------- chips, badges, pills ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line-2); background: color-mix(in oklch, var(--fg) 4%, transparent); color: var(--text-2); font-size: .875rem; font-weight: 600; transition: all var(--dur-quick) var(--ease-out); }
.chip:hover { border-color: var(--line-accent); color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--accent-tint); border-color: var(--line-accent); color: var(--text); }
.chip .count { font: 600 .75rem var(--font-mono); color: var(--text-3); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font: 800 .6875rem/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: color-mix(in oklch, var(--fg) 10%, transparent); color: var(--text-2); }
.badge-gold { background: var(--gold-tint); color: var(--gold-text); }
.badge-accent { background: var(--accent-tint); color: var(--accent-text); }
.badge-success { background: var(--success-tint); color: var(--success-text); }
.badge-danger { background: var(--danger-tint); color: var(--danger-text); }
.badge-warn { background: var(--warn-tint); color: var(--warn-text); }
.badge-sticker { background: var(--gold); color: var(--on-gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); height: 24px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-3); }
.status-dot.ok { background: var(--success); box-shadow: var(--glow-success); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 12px color-mix(in oklch, var(--warn) 60%, transparent); }
.status-dot.bad { background: var(--danger-text); box-shadow: var(--glow-danger); }
.status-dot.busy { background: var(--gold); box-shadow: var(--glow-gold); animation: pulse-dot 1.4s var(--ease-in-out) infinite; }
@keyframes pulse-dot { 50% { transform: scale(.6); opacity: .6; } }

/* quota multiplier pill: cheap / par / costly / unknown */
.mult { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 99px; font: 700 .75rem/1 var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mult.cheap { background: var(--success-tint); color: var(--success-text); }
.mult.par { background: color-mix(in oklch, var(--fg) 11%, transparent); color: var(--text-2); }
.mult.costly { background: var(--gold-tint); color: var(--gold-text); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--seed-gold) 40%, transparent); }
.mult.unknown { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); }

/* verification stamps */
.stamp { width: 24px; height: 24px; flex: none; border-radius: 8px; display: inline-grid; place-items: center; border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.stamp .ic { width: 14px; height: 14px; --ic-stroke: 3; }
.stamp.pass { background: var(--success); box-shadow: 2px 2px 0 var(--ink); }
.stamp.fail { background: var(--danger-text); box-shadow: 2px 2px 0 var(--ink); }
.stamp.run { background: var(--gold); box-shadow: 2px 2px 0 var(--ink); }
.stamp.pending { border-color: var(--line-2); color: var(--text-3); border-style: dashed; }
.stamp.in { animation: stamp-in var(--dur-spring-bouncy) var(--spring-bouncy); }
@keyframes stamp-in { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }

.kbd { display: inline-flex; align-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; font: 600 .6875rem/1 var(--font-mono); color: var(--text-2); justify-content: center; background: color-mix(in oklch, var(--fg) 5%, transparent); }

/* ---------- cards & surfaces ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); }
.card-glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
.card-sticker { background: var(--sticker); color: #0E0731; border: 2.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sticker-shadow-lg); }

/* ---------- tooltip (one floating element, managed by core.js) ---------- */
.tip {
  position: fixed; z-index: var(--z-toast); max-width: min(320px, calc(100vw - 24px)); padding: 8px 11px; border-radius: 10px;
  background: color-mix(in oklch, var(--panel-3) 96%, transparent); color: var(--text); border: 1px solid var(--line-2);
  font-size: .8125rem; line-height: 1.4; box-shadow: var(--e2); pointer-events: none; white-space: pre-line;
  opacity: 0; transform: translateY(4px) scale(.97); transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.tip.show { opacity: 1; transform: none; }

/* ---------- popovers & menus ---------- */
.popover {
  position: fixed; z-index: var(--z-popover); min-width: 220px; max-width: min(420px, calc(100vw - 16px));
  max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain;
  background: color-mix(in oklch, var(--panel-2) 94%, transparent); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--e3); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  padding: 6px; transform-origin: var(--origin, top left);
  animation: pop-in var(--dur-spring-snappy) var(--spring-snappy);
}
.popover.closing { animation: pop-out var(--dur-quick) var(--ease-in) forwards; }
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.96); } }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: .9rem; color: var(--text-2); }
.menu-item:hover, .menu-item:focus-visible, .menu-item[data-active="true"] { background: color-mix(in oklch, var(--fg) 9%, transparent); color: var(--text); outline: none; animation: none; }
.menu-item.danger { color: var(--danger-text); }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: var(--danger-tint); }
.menu-item .ic { color: var(--text-3); }
.menu-item .kbd-hint { margin-left: auto; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-label { padding: 8px 10px 4px; font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* ---------- dialogs (native <dialog> with showModal: inert background + focus containment) ---------- */
dialog.dlg {
  /* margin:auto restores the UA centering that the `* { margin: 0 }` reset removes */
  margin: auto; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--text); box-shadow: var(--e3), 0 0 0 1px rgb(0 0 0 / .2);
  overflow: hidden; transform-origin: var(--origin, 50% 50%);
}
dialog.dlg[open] { display: flex; flex-direction: column; animation: dlg-in var(--dur-spring-soft) var(--spring-soft); }
dialog.dlg.closing { animation: dlg-out var(--dur-quick) var(--ease-in) forwards; }
dialog.dlg::backdrop { background: color-mix(in oklch, var(--seed-bg-deep) 72%, transparent); backdrop-filter: blur(6px); animation: fade-in var(--dur-base) var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 16px)) scale(.9); } }
@keyframes dlg-out { to { opacity: 0; transform: scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
.dlg-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 4px; }
.dlg-head h2 { font-size: 1.25rem; line-height: 1.25; flex: 1; }
/* a long email or id in a title or a text paragraph wraps instead of widening the dialog past a
   phone screen (focus would then scroll the whole dialog sideways); tables keep their columns */
.dlg-head h2, .dlg-body > p { min-width: 0; overflow-wrap: anywhere; }
.dlg-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--accent-tint); color: var(--accent-text); }
.dlg-icon.danger { background: var(--danger-tint); color: var(--danger-text); }
.dlg-icon.gold { background: var(--gold-tint); color: var(--gold-text); }
.dlg-body { padding: 8px 22px 18px; color: var(--text-2); display: grid; gap: 14px; align-content: start; grid-auto-rows: min-content; overflow: auto; }
.dlg-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px 20px; border-top: 1px solid var(--line); background: color-mix(in oklch, var(--bg-abyss) 30%, transparent); flex-wrap: wrap; }
.dlg-close { margin: -6px -8px 0 0; }
dialog.dlg.wide { width: min(880px, calc(100vw - 24px)); }
dialog.dlg.full { width: min(1240px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)); }

/* sheets: bottom on phones, side on desktop */
dialog.sheet { margin: 0; padding: 0; border: 0; max-width: none; max-height: none; color: var(--text); background: var(--panel); box-shadow: var(--e3); }
dialog.sheet::backdrop { background: color-mix(in oklch, var(--seed-bg-deep) 66%, transparent); backdrop-filter: blur(4px); }
dialog.sheet.side { inset: 0 0 0 auto; width: min(480px, 100vw); height: 100dvh; border-left: 1px solid var(--line-2); }
dialog.sheet.side[open] { display: flex; flex-direction: column; animation: sheet-side var(--dur-spring-soft) var(--spring-soft); }
dialog.sheet.bottom { inset: auto 0 0 0; width: 100vw; max-height: 92dvh; border-radius: 24px 24px 0 0; border-top: 1px solid var(--line-2); }
dialog.sheet.bottom[open] { display: flex; flex-direction: column; animation: sheet-up var(--dur-spring-soft) var(--spring-soft); }
@keyframes sheet-side { from { transform: translateX(100%); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-grab { width: 44px; height: 5px; border-radius: 9px; background: var(--line-2); margin: 10px auto 2px; flex: none; }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: var(--z-toast); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column-reverse; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 16px;
  background: color-mix(in oklch, var(--panel-3) 96%, transparent); border: 1px solid var(--line-2); box-shadow: var(--e3);
  backdrop-filter: blur(16px); animation: toast-in var(--dur-spring-bouncy) var(--spring-bouncy); font-size: .9rem; line-height: 1.4;
}
.toast .t-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; border: 2px solid var(--ink); color: var(--ink); }
.toast.success .t-ic { background: var(--success); }
.toast.error .t-ic { background: var(--danger-text); }
.toast.info .t-ic { background: var(--accent); }
.toast .t-msg { flex: 1; padding-top: 3px; color: var(--text); }
.toast .t-act { margin: -2px 0; }
.toast.leaving { animation: toast-out var(--dur-base) var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
@media (max-width: 600px) { .toasts { left: 16px; right: 16px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); } }
/* Toasts float in the top layer (RG.toast makes the host a manual popover), laid out against the page
   and above any open dialog. While a modal dialog is open the host lives inside it (outside it would
   be inert); as a plain position:fixed child it was laid out against the DIALOG while the dialog's
   open animation ran (a transform makes it the containing block), then jumped to the page corner
   when the animation ended (2026-10-24). The popover's own UA box (centred, bordered) is undone here. */
.toasts[popover] { top: auto; left: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
@media (max-width: 600px) { .toasts[popover] { left: 16px; } }
/* the big work surfaces (the IDE, full-size dialogs such as Settings) keep their toasts in their own
   corner, inside the panel the person is looking at, and they stay put there */
.toasts.anchored { position: absolute; right: 16px; bottom: 16px; left: auto; width: min(380px, calc(100% - 32px)); }
@media (max-width: 600px) { .toasts.anchored { left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); } }

/* ---------- skeletons ---------- */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, color-mix(in oklch, var(--fg) 7%, transparent) 0%, color-mix(in oklch, var(--fg) 14%, transparent) 40%, color-mix(in oklch, var(--fg) 7%, transparent) 80%); background-size: 300% 100%; animation: sk 1.6s var(--ease-in-out) infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.sk-line { height: .8em; margin: .35em 0; }
.sk-circle { border-radius: 50%; }

/* ---------- meters ---------- */
.meter { position: relative; height: 8px; border-radius: 99px; background: color-mix(in oklch, var(--fg) 10%, transparent); overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent), #fff 30%)); transition: width var(--dur-slow) var(--ease-out); }
.meter.gold > i { background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi)); }
.meter.success > i { background: linear-gradient(90deg, color-mix(in oklch, var(--success), #000 20%), var(--success)); }
.meter.warn > i { background: linear-gradient(90deg, #d2a000, var(--warn)); }
.meter.danger > i { background: linear-gradient(90deg, var(--danger), var(--danger-text)); }
.ring { --v: 0; --c: var(--accent); width: 28px; height: 28px; border-radius: 50%; flex: none; background: conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in oklch, var(--fg) 14%, transparent) 0); mask: radial-gradient(circle, transparent 52%, #000 54%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); transition: --v var(--dur-slow); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; min-height: 44px; padding: 0 14px; font-weight: 700; font-size: .9rem; color: var(--text-3); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); box-shadow: var(--glow-gold); }

/* ---------- callouts & empty states ---------- */
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-accent); background: var(--accent-tint); color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.callout > .ic { color: var(--accent-text); margin-top: 1px; }
.callout.warn { border-color: color-mix(in oklch, var(--warn) 45%, transparent); background: var(--warn-tint); }
.callout.warn > .ic { color: var(--warn-text); }
.callout.danger { border-color: color-mix(in oklch, var(--seed-danger) 55%, transparent); background: var(--danger-tint); }
.callout.danger > .ic { color: var(--danger-text); }
.callout.success { border-color: color-mix(in oklch, var(--seed-success) 45%, transparent); background: var(--success-tint); }
.callout.success > .ic { color: var(--success-text); }
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 28px 18px; color: var(--text-3); }
.empty img { width: 96px; height: 96px; object-fit: contain; }
.empty b { color: var(--text); font-size: 1rem; }

.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--seed-bg-royal)); color: #fff; font-weight: 800; font-size: .85rem; border: 2px solid var(--ink); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* A real picture brings its own background: the tinted disc showed through every transparent
   pixel as a coloured halo behind the face. It stays for the initial-only fallback. */
.avatar.has-img { background: none; border-color: transparent; }

.btn-wish .spinner, .btn-danger .spinner { border-color: rgb(1 1 1 / .22); border-top-color: var(--ink); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in oklch, var(--fg) 20%, transparent); border-top-color: var(--gold); animation: spin 800ms linear infinite; flex: none; }

/* ---------- tables (admin + comparisons) ---------- */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); max-height: var(--table-max, none); }
.table { width: 100%; font-size: .875rem; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.table thead th { position: sticky; top: 0; z-index: 2; background: color-mix(in oklch, var(--panel-2) 97%, transparent); font: 700 .75rem/1.2 var(--font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); backdrop-filter: blur(10px); }
.table th .sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; min-height: 32px; }
.table th .sort:hover { color: var(--text); }
.table th[aria-sort="ascending"] .sort, .table th[aria-sort="descending"] .sort { color: var(--gold-text); }
.table tbody tr { transition: background var(--dur-quick); }
.table tbody tr:hover { background: color-mix(in oklch, var(--fg) 4%, transparent); }
.table td.num, .table th.num { text-align: right; }

/* ---------- media placeholders (owner drops real files into /assets/media/) ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 30% 20%, color-mix(in oklch, var(--seed-bg-royal) 80%, #fff 4%), var(--bg-abyss)); isolation: isolate; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, var(--gold) 50%, transparent 55%), radial-gradient(1px 1px at 70% 60%, var(--gold-hi) 50%, transparent 55%), radial-gradient(1.2px 1.2px at 45% 80%, var(--accent) 50%, transparent 55%), radial-gradient(1px 1px at 85% 25%, #fff 50%, transparent 55%); background-size: 180px 140px; opacity: .55; animation: ph-drift 14s linear infinite; }
.ph::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in oklch, var(--seed-gold) 12%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: ph-shimmer 5s var(--ease-in-out) infinite; }
@keyframes ph-drift { to { background-position: 180px -140px; } }
@keyframes ph-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ph > img, .ph > video, .ph > picture, .ph > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph-art { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; display: grid; justify-items: center; gap: 10px; color: var(--text-3); text-align: center; pointer-events: none; }
.ph-art .ic { width: 44px; height: 44px; padding: 10px; border-radius: 16px; color: var(--gold-text); background: color-mix(in oklch, var(--seed-gold) 12%, transparent); border: 1px solid color-mix(in oklch, var(--seed-gold) 35%, transparent); box-shadow: 0 0 40px -6px color-mix(in oklch, var(--seed-gold) 45%, transparent); --ic-stroke: 1.6; animation: ph-float 5s var(--ease-in-out) infinite; }
.ph-art span { font: 700 .8125rem/1.3 var(--font-text); max-width: 32ch; }
@keyframes ph-float { 50% { transform: translateY(-5px); } }
.ph.loaded .ph-art, html.clean .ph-art, .ph-bleed .ph-art { display: none; }
.ph .ph-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 9px; background: color-mix(in oklch, var(--bg-abyss) 82%, transparent); border: 1px solid var(--line-2); font: 600 .6875rem/1.35 var(--font-mono); color: var(--text-2); }
.ph .ph-label b { color: var(--gold-text); }
/* The label text lives in data attributes and is drawn here, not in the markup: it is a
   designer note for the placeholder state, and as text nodes it led every crawler's text
   extract ("IMG-LAND-HERO-01 · 2880×1600 ..."). ::before matches the old <b> exactly. */
.ph .ph-label[data-ph-id]::before { content: attr(data-ph-id); color: var(--gold-text); font-weight: bolder; }
.ph .ph-label[data-ph-spec]::after { content: attr(data-ph-spec); }
.ph.loaded::before, .ph.loaded::after, .ph.loaded .ph-label { display: none; }
html.clean .ph-label { display: none; }
.ph-play { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; }

/* ---------- mascot ---------- */
.genie { position: relative; display: block; }
.genie-stage { position: relative; display: block; width: 100%; aspect-ratio: 1; will-change: transform; }
.genie-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 170ms var(--ease-out); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.genie-stage img.on { opacity: 1; }
.rg-spark { position: absolute; width: 14px; height: 14px; background: var(--gold); pointer-events: none; z-index: 3; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 6px var(--gold)); }

/* ---------- dev / QA panel ---------- */
.dev-panel { position: fixed; left: 12px; bottom: 66px; z-index: var(--z-dev); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; max-height: calc(100dvh - 24px); font-family: var(--font-text); }
.dev-fab { display: inline-flex; gap: 6px; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; background: #17151f; color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 800 13px var(--font-text); }
.dev-body { width: min(360px, calc(100vw - 24px)); max-height: 72dvh; overflow: auto; padding: 4px 14px 14px; border-radius: 16px; background: #15131d; border: 1px solid #ffffff24; box-shadow: var(--e3); color: #eee; font-size: 13px; }
.dev-sec h3 { font: 700 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #a6a9c9; margin: 12px 0 6px; }
.dev-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; padding: 3px 0; }
.dev-row .select { min-height: 34px; padding: 4px 30px 4px 8px; width: auto; max-width: 200px; font-size: 13px; }

/* the genie's head by the wordmark follows the theme with the genie (js/genie.js): hidden for the
   moment its art takes to arrive, so it never flashes the official colours first */
html[data-genie-tint="pending"] img[data-genie-builtin="logo"] { visibility: hidden; }

/* ---- theme effects: the perspective grids of Tron Grid, Laser Grid and Synthwave 84 (js/effects.js,
   grid()), laid the way Design Studio's Tron lays its floor: a tiled plane tipped 85° under a CSS
   perspective, so every line keeps its true width and the far tiles blur together. The values are
   set per effect and per size from JS; the defaults are the reference's. */
.fx-grid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; perspective: var(--g-persp, 300px); perspective-origin: var(--g-vx, 50%) var(--g-hy, 50%); animation: fx-grid-in .7s ease-out both; }
@keyframes fx-grid-in { from { opacity: 0; } }
/* the plane hangs --g-drop below the eye (the ceiling as far above it), so the camera rides above the
   floor instead of skimming it and the nearest tiles stay a sensible size */
.fx-grid .pl { position: absolute; left: 0; top: calc(var(--g-hy, 50%) + var(--g-drop, 0px)); width: 100%; height: 100%; transform: rotateX(85deg); transform-origin: 50% 0; transform-style: preserve-3d; }
.fx-grid .pl.ceiling { top: auto; bottom: calc(100% - var(--g-hy, 50%) + var(--g-drop, 0px)); transform: rotateX(-85deg); transform-origin: 50% 100%; }
.fx-grid .fl { position: absolute; top: -100%; left: -100%; width: 300%; height: 300%;
  background-image: linear-gradient(90deg, var(--g-line) var(--g-w, 2px), transparent var(--g-w, 2px)), linear-gradient(0deg, var(--g-line) var(--g-w, 2px), transparent var(--g-w, 2px));
  background-size: var(--g-tile, 60px) var(--g-tile, 60px);
  filter: drop-shadow(0 0 var(--g-blur, 4px) var(--g-glow));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  animation: fx-grid-floor var(--g-dur, 1s) linear infinite; }
.fx-grid .ceiling .fl { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(to top, transparent 0%, #000 30%, #000 100%); animation-name: fx-grid-ceiling; }
@keyframes fx-grid-floor { to { transform: translateY(var(--g-tile, 60px)); } }
@keyframes fx-grid-ceiling { to { transform: translateY(calc(-1 * var(--g-tile, 60px))); } }
.fx-grid.paused .fl { animation-play-state: paused; }
.fx-grid .hz { position: absolute; inset: 0; }

/* ==========================================================================
   Public pages: living sky, nav, footer, sections, reveals, kinetic type
   ========================================================================== */
html { scroll-padding-top: 96px; background: var(--bg-abyss); }
/* LND-19 · zero layout shift on a cold load: until the web fonts arrive (display=swap), text
   is set in local faces resized to the web fonts' advance widths, ascent and descent (measured
   with canvas TextMetrics against the built pages), so the swap moves nothing. Each stack puts
   the matched fallback straight after its web font; the rest of the stack is tokens.css's. */
@font-face { font-family: "Shrikhand Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 400; size-adjust: 103.53%; ascent-override: 99.49%; descent-override: 41.53%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Next Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 97.3%; ascent-override: 100.72%; descent-override: 32.89%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Next Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 97.76%; ascent-override: 100.24%; descent-override: 32.73%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Next Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 98.37%; ascent-override: 99.62%; descent-override: 32.53%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Next Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800 900; size-adjust: 103.9%; ascent-override: 94.32%; descent-override: 30.8%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); font-weight: 400; size-adjust: 105.32%; ascent-override: 93.05%; descent-override: 30.38%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Mono Fallback"; src: local("Courier New Bold"), local("CourierNewPS-BoldMT"); font-weight: 600 900; size-adjust: 105.32%; ascent-override: 93.05%; descent-override: 30.38%; line-gap-override: 0%; }
:root {
  --font-display: "Shrikhand", "Shrikhand Fallback", "Atkinson Hyperlegible Next", Georgia, serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Next Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", "Atkinson Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.public { background: transparent; }

/* ---- the sky: one fixed world whose light evolves as you scroll ---- */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  --sky-top: #070423; --sky-mid: #1B1358; --sky-low: #3B2A86; --sky-glow: rgb(232 190 35 / .2); --mx: 60%; --my: 30%;
  background:
    radial-gradient(70% 55% at 50% 108%, var(--sky-glow), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-low) 100%);
}
.sky::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .05; mix-blend-mode: overlay; }
.sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgb(232 190 35 / .075), transparent 70%); transition: opacity .6s; }
@media (hover: none) { .sky::after { opacity: 0; } }
.dust { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* pause control for ambient motion (GLB-11, LND-18): an icon button docked in the nav bar, so it
   never sits over content at any width. The icon swaps pause/play; its label and tooltip say which. */
.motion-toggle { color: var(--text-2); }
.motion-toggle:hover { color: var(--text); }
/* phones: the compact lockup (GLB-3) leaves the nav room for the control */
@media (max-width: 480px) { .nav-bar > .lockup .wordmark { display: none; } }
@media (max-width: 360px) { .nav .nav-bar { gap: 8px; padding-left: 10px; } .nav .nav-actions { gap: 6px; } }
.nav-bar > .lockup { flex-shrink: 0; } /* the logo never squeezes to make room */
/* paused, looping decoration holds still too. base.css pauses [data-ambient] elements, but a
   pseudo-element's animation is out of that rule's reach, so the placeholder loops are named here */
html.still .ph::before, html.still .ph::after, html.still .ph-art .ic { animation-play-state: paused; }

/* ---- navigation ---- */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); padding: 14px var(--gutter) 0; pointer-events: none; container-type: inline-size; }
.nav-bar { pointer-events: auto; margin-inline: auto; max-width: 1360px; display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 0 10px 0 16px;
  border-radius: 22px; border: 1px solid transparent;
  --dock: max(0px, (min(1360px, 100cqw) - 1180px) / 2); }
/* LND-19 · docking on scroll moves nothing in layout: the bar keeps its wide 64px box, the glass
   fades in on ::before at the docked size (1180px wide, 58px tall), and the two ends slide in
   by transform. --dock is how far each end travels (half of the wide bar less 1180px). */
.nav-bar::before { content: ""; position: absolute; inset: -1px calc(var(--dock) - 1px) 5px; z-index: -1; border-radius: inherit; border: 1px solid var(--line-2);
  background: color-mix(in oklch, var(--bg-abyss) 74%, transparent); box-shadow: var(--e2);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.nav.scrolled .nav-bar::before { opacity: 1; }
.nav-bar > .lockup, .nav-bar > nav, .nav-bar > .nav-actions, .nav-bar > .motion-toggle { transition: transform .5s var(--ease-out); }
.nav.scrolled .nav-bar > nav { transform: translateY(-3px); }
.nav.scrolled .nav-bar > .lockup { transform: translate(var(--dock), -3px); }
.nav.scrolled .nav-bar > .nav-actions, .nav.scrolled .nav-bar > .motion-toggle { transform: translate(calc(-1 * var(--dock)), -3px); }
.nav-bar > nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav .links { display: flex; align-items: center; gap: 2px; position: relative; list-style: none; padding: 0; }
.nav .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-weight: 700; font-size: .9375rem; transition: color var(--dur-quick); }
.nav .links a:hover, .nav .links a[aria-current="true"] { color: var(--text); }
.nav-ink { position: absolute; left: 0; bottom: 4px; height: 3px; width: 0; border-radius: 3px; background: var(--gold); box-shadow: var(--glow-gold); opacity: 0;
  transition: transform .45s var(--spring-snappy), width .45s var(--spring-snappy), opacity .3s; pointer-events: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-progress { position: absolute; left: calc(22px + var(--dock)); right: calc(22px + var(--dock)); bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .4s; }
.nav.scrolled .nav-progress { opacity: 1; }
.nav-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--gold)); }
.nav-bar { position: relative; }
.menu-btn { display: none; }
@media (max-width: 1180px) {
  .nav .links, .nav-actions .hide-sm { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-actions { margin-left: auto; }
}
/* the slim nav (404, policy and auth pages) has no drawer, so its links stay visible all the way
   down; four links and the pause control (GLB-11) share the bar, tightened in steps on phones.
   auth.css restates its own values for the sign-in and invite pages. */
@media (max-width: 1180px) {
  .nav-slim .links { display: flex; }
  .nav-slim .nav-bar { gap: 10px; padding-right: 6px; }
  .nav-slim .links a { padding: 0 9px; font-size: .9rem; }
}
@media (max-width: 540px) { .nav-slim .lockup .wordmark { display: none; } }
@media (max-width: 480px) {
  .nav-slim .links a { padding: 0 6px; font-size: .82rem; }
  .nav-slim .nav-bar { padding-left: 10px; }
}
@media (max-width: 400px) {
  .nav-slim .nav-bar { gap: 6px; }
  .nav-slim .links a { padding: 0 4px; }
}
@media (max-width: 356px) {
  .nav-slim .nav-bar { padding-left: 6px; padding-right: 4px; gap: 4px; }
  .nav-slim .links { gap: 0; }
  .nav-slim .links a { padding: 0 3px; font-size: .75rem; }
}
dialog.menu-sheet { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--text);
  background: radial-gradient(90% 60% at 80% 0%, #2a1f7c 0%, var(--bg) 55%, var(--bg-abyss) 100%); }
dialog.menu-sheet[open] { display: flex; flex-direction: column; animation: menu-in var(--dur-spring-soft) var(--spring-soft); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.menu-sheet .top { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); min-height: 78px; }
.menu-sheet nav { flex: 1; overflow: auto; padding: 8px var(--gutter) 24px; }
.menu-sheet nav ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.menu-sheet nav a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font: 400 clamp(1.7rem, 7vw, 2.4rem)/1 var(--font-display); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); font-kerning: none; }
.menu-sheet nav a .ic { color: var(--gold); width: 22px; height: 22px; }
.menu-sheet .cta { display: grid; gap: 10px; padding: 16px var(--gutter) max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in oklch, var(--bg-abyss) 60%, transparent); }

/* ---- sections ---- */
main { position: relative; z-index: var(--z-content); }
.sec { position: relative; padding-block: var(--section); }
.sec-head { display: grid; gap: 18px; max-width: 880px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-d1); line-height: 1.02; letter-spacing: var(--track-display); font-kerning: none; }
.sec-head h2 .gold { color: var(--gold); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: .06em .06em 0 var(--ink); }
.sec-head h2 .cyan { color: var(--accent-text); }
.sec-head .lead { max-width: 64ch; }
/* an inline link in a sentence is exempt from target-size rules, but a little padding
   makes it comfortable on a phone without touching the line box */
.lead a, .sec-head p a, .sv-sub a, .fine a { padding-block: 4px; }

/* ---- reveals ---- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: translateY(18px) scale(.96); }
.no-js [data-reveal], html.still [data-reveal] { opacity: 1; transform: none; }
/* The word reveal needs a clip box. `overflow: hidden` gives an inline-block its bottom margin
   edge as baseline, so the only way to widen the box is a padding + negative margin pair -- and
   between two inline-blocks that pair is NOT layout-neutral: each side gives back .08em less than
   it takes, so a space loses 2 x .08em. At 78.72px that turned the font's own 14.81px word gap
   into 2.22px and headings read as "fromidea". word-spacing pays the debt back, and because it is
   in em it stays exact at every size. Keep the two numbers in step. */
.split { word-spacing: .16em; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top;
  /* Shrikhand paints well outside its line box: measured on the landing at 78.72px, the ink ran
     15.3px above and 10.2px below it, so `overflow: hidden` (which the word reveal needs) was
     slicing the tops off the capitals and the tails off y, p and g. */
  padding: .26em .08em .25em; margin: -.26em -.08em -.25em; }
/* A letter reveal fades in (opacity 0 -> 1) and never slides, so it needs no clip box -- and the
   clip it was inheriting was slicing the text-stroke and drop shadow on "Make a wish." Neither
   does it need the padding above, so it also gives back the word-spacing that padding costs. */
.split .w:has(> .ch) { overflow: visible; padding: 0; margin: 0; }
.split:has(> .w > .ch) { word-spacing: normal; }
.split .wi { display: inline-block;
  /* 105% clears the word's own height but not the clip padding, which left the tops of the
     capitals showing before the reveal; the .52em covers .26em + .25em of it. */
  transform: translateY(calc(105% + .52em)) rotate(4deg);
  transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 45ms + var(--d, 0) * 1ms); }
.split .ch { display: inline-block; transform: translateY(.5em) scale(.4) rotate(-12deg); opacity: 0; transition: transform var(--dur-spring-bouncy) var(--spring-bouncy), opacity .2s; transition-delay: calc(var(--i) * var(--stagger-letter) + var(--d, 0) * 1ms); }
[data-kinetic].in .split .wi, [data-kinetic].in .split .ch { transform: none; opacity: 1; }
html.still [data-kinetic] .split .wi, html.still [data-kinetic] .split .ch { transform: none; opacity: 1; transition: none; }

/* ---- footer (GLB-5) ---- */
.site-footer { position: relative; z-index: 1; padding: 56px 0 calc(84px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--bg-abyss) 80%, transparent)); }
.site-footer .wrap { display: grid; gap: 28px; grid-template-columns: 1fr auto; align-items: start; }
.site-footer .tag { color: var(--text-3); font-size: .9375rem; margin-top: 12px; max-width: 42ch; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; }
.site-footer ul a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-weight: 700; }
.site-footer ul a:hover { color: var(--text); background: color-mix(in oklch, var(--fg) 7%, transparent); }
.site-footer .legal { grid-column: 1 / -1; color: var(--text-3); font-size: .875rem; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } .site-footer ul { justify-content: flex-start; } }

/* ---- shared public bits ---- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.proof { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-weight: 600; font-size: .9375rem; }
.proof .ic { color: var(--success-text); }
.sticker-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; background: var(--gold); color: var(--on-gold); border: 2px solid var(--ink); box-shadow: var(--sticker-shadow-sm); font: 800 .8125rem/1 var(--font-text); }
.glass-panel { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e2); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }

/* ==========================================================================
   Documentation (/docs): a three-column reading layout -- section nav with search, the article,
   and the page's own index -- in the public pages' design system. Dark by default; the light
   scheme re-seeds the same tokens (tokens.css :root[data-scheme="light"]) instead of a second
   stylesheet, so every component keeps working in both.
   ========================================================================== */

/* ---- light scheme: the brand on paper. Seeds only; tokens.css derives the rest ---- */
:root[data-scheme="light"] {
  --seed-bg-deep: #F7F5FF;
  --seed-bg-royal: #E6E0FF;
  --seed-bg-panel: #FFFFFF;
  --seed-accent: #0393C9;
  --seed-accent-deep: #00689C;
  --seed-gold: #E8BE23;
  --seed-gold-deep: #9A6C00;
  --seed-danger: #B51E2A;
  --on-gold: #010101;
  --on-accent: #010101;
  --warn-tint: color-mix(in oklch, #F5C84B 22%, transparent);
}
:root[data-scheme="light"] .sky {
  background:
    radial-gradient(70% 55% at 50% 108%, rgb(232 190 35 / .16), transparent 70%),
    radial-gradient(60% 40% at 85% -5%, rgb(3 163 222 / .10), transparent 70%),
    linear-gradient(180deg, #FCFBFF 0%, #F4F1FF 60%, #ECE7FF 100%);
}
:root[data-scheme="light"] .sky::after { opacity: .5; }
:root[data-scheme="light"] .site-footer { background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--seed-bg-royal) 60%, transparent)); }

body.docs { background: var(--bg); }

/* ---- the nav: a "Docs" tag beside the lockup, and the scheme switch ---- */
.docs-nav .nav-bar { gap: 12px; }
.docs-badge { flex-shrink: 0; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--ink);
  background: var(--gold); color: var(--on-gold); font: 800 .78rem/1 var(--font-text); letter-spacing: .04em; text-decoration: none; box-shadow: var(--sticker-shadow-sm); }
.docs-badge:hover { transform: translateY(-1px); }
.docs-nav .nav-bar > nav { justify-content: flex-end; }
.docs-nav .nav-actions { margin-left: 0; }
.scheme-toggle .ic-sun { display: none; }
:root[data-scheme="light"] .scheme-toggle .ic-sun { display: block; }
:root[data-scheme="light"] .scheme-toggle .ic-moon { display: none; }
.scheme-toggle, .motion-toggle { color: var(--text-2); }
@media (max-width: 760px) { .docs-nav .hide-xs { display: none; } }
@media (max-width: 560px) {
  .docs-nav .nav-cta { display: none; }
  .docs-nav .links a { padding: 0 7px; }
}
@media (max-width: 400px) { .docs-nav .nav-bar > .lockup .wordmark { display: none; } }

/* ---- three columns ---- */
.docs-shell { width: min(100% - 2 * var(--gutter), 1460px); margin-inline: auto; padding: 112px 0 72px;
  display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
.docs-main { min-width: 0; }
.docs-shell[data-layout="article"] .docs-main { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: clamp(24px, 3vw, 52px); align-items: start; }
.docs-main > .docs-article, .docs-main > .docs-home { min-width: 0; }

/* ---- left: search + section nav ---- */
.docs-side { position: sticky; top: 96px; max-height: calc(100dvh - 112px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; }
.side-head { display: none; }
.dnav { overflow: auto; overscroll-behavior: contain; padding: 4px 6px 24px 2px; margin-right: -6px; scrollbar-width: thin; }
.dnav-home { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 10px; border-radius: 10px; color: var(--text-2); font-weight: 700; font-size: .9rem; text-decoration: none; }
.dnav-home .ic { width: 16px; height: 16px; color: var(--gold-text); }
.dnav-home:hover { background: color-mix(in oklch, var(--fg) 6%, transparent); color: var(--text); }
.docs-shell[data-layout="home"] .dnav-home { color: var(--gold-text); background: var(--gold-tint); }
.dnav-sec { margin-top: 14px; }
.dnav-h { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font: 700 .6875rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.dnav-h .ic { width: 14px; height: 14px; color: var(--accent-text); }
.dnav ul { list-style: none; padding: 0; display: grid; gap: 1px; }
.dnav ul a { display: block; padding: 6px 10px 6px 12px; border-radius: 9px; border-left: 2px solid transparent; color: var(--text-3); font-size: .875rem; line-height: 1.35;
  text-decoration: none; transition: color var(--dur-quick), background var(--dur-quick), border-color var(--dur-quick); }
.dnav ul a:hover { color: var(--text); background: color-mix(in oklch, var(--fg) 5%, transparent); }
.dnav ul a[aria-current="page"] { color: var(--gold-text); background: var(--gold-tint); border-left-color: var(--gold); font-weight: 700; }

/* ---- search ---- */
.dsearch { position: relative; }
.dsearch .input { padding-right: 38px; height: 42px; background: color-mix(in oklch, var(--panel) 75%, transparent); }
.dsearch .input::-webkit-search-cancel-button { display: none; }
.dsearch .search-kbd { position: absolute; right: 9px; pointer-events: none; }
.dsearch .input:focus ~ .search-kbd, .dsearch .input:not(:placeholder-shown) ~ .search-kbd { display: none; }
.dsearch.big .input { height: 56px; font-size: 1.0625rem; padding-left: 46px; border-radius: 16px; }
.dsearch.big .input-group > .ic:first-child { left: 16px; width: 20px; height: 20px; }
.dsearch-pop { position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); left: 0; width: max(100%, min(30rem, 92vw)); max-height: min(70vh, 30rem); overflow: auto;
  padding: 6px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: color-mix(in oklch, var(--panel) 96%, transparent);
  box-shadow: var(--e3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dsearch.big .dsearch-pop { width: 100%; }
.dsearch-pop .res { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; color: var(--text-2); text-decoration: none; cursor: pointer; }
.dsearch-pop .res + .res { margin-top: 2px; }
.dsearch-pop .res[aria-selected="true"], .dsearch-pop .res:hover { background: color-mix(in oklch, var(--seed-accent) 14%, transparent); }
.dsearch-pop .res .rt { color: var(--text); font-weight: 800; font-size: .95rem; line-height: 1.3; }
.dsearch-pop .res .rh { color: var(--accent-text); font-weight: 700; }
.dsearch-pop .res .rc { font: 700 .66rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.dsearch-pop .res .rs { font-size: .84rem; line-height: 1.45; color: var(--text-3); }
.dsearch-pop mark { background: color-mix(in oklch, var(--seed-gold) 32%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.dsearch-pop .none { padding: 14px 12px; color: var(--text-3); font-size: .9rem; }
.dsearch-pop .none b { color: var(--text); }

/* ---- article ---- */
.docs-article { max-width: 78ch; outline: none; }
.doc-top { display: grid; gap: 12px; margin-bottom: 26px; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 700 .75rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-4); }
.crumbs a { color: var(--accent-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.doc-top h1, .dhome-hero h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--track-display); line-height: 1.06; font-kerning: none;
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.2rem); color: var(--text); overflow-wrap: anywhere; }
.dhome-hero h1 .lamp { color: var(--gold); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--ink); }
.doc-lede { font-size: 1.15rem; line-height: 1.6; color: var(--text-2); max-width: 66ch; }
.doc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.doc-tools .btn { color: var(--text-3); }
.doc-tools .btn:hover { color: var(--text); }
.doc-eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: color-mix(in oklch, var(--fg) 4%, transparent); font: 700 .75rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.doc-eyebrow .ic { width: 15px; height: 15px; color: var(--gold-text); }

/* the page index inline, for widths without the right column */
.toc-inline { display: none; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in oklch, var(--panel) 55%, transparent); }
.toc-inline summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; cursor: pointer; font-weight: 800; color: var(--text-2); list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary .ic { width: 16px; height: 16px; color: var(--accent-text); }
.toc-inline nav { padding: 0 10px 12px; }

/* ---- prose ---- */
.prose { font-size: 1.0625rem; line-height: 1.75; color: var(--text-2); overflow-wrap: break-word; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; scroll-margin-top: 104px; font-size: clamp(1.3rem, 1.1rem + .55vw, 1.6rem); line-height: 1.25; color: var(--text); display: flex; align-items: baseline; gap: 12px; }
.prose h2::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--gold); box-shadow: var(--glow-gold); translate: 0 -2px; }
.prose h3 { margin-top: 1.8em; scroll-margin-top: 104px; font-size: 1.17rem; line-height: 1.3; color: var(--text); }
.prose h4 { margin-top: 1.5em; scroll-margin-top: 104px; font-size: 1rem; color: var(--text); text-transform: none; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose .anchor { margin-left: 4px; opacity: 0; color: var(--text-3); text-decoration: none; font-weight: 700; padding: 0 4px; border-radius: 6px; transition: opacity var(--dur-quick); }
.prose :is(h2, h3, h4):hover .anchor, .prose .anchor:focus-visible { opacity: 1; }
.prose .anchor:hover { color: var(--accent-text); }
@media (hover: none) { .prose .anchor { display: none; } }
.prose a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--text); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: 8px; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: 24px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: color-mix(in oklch, var(--seed-accent) 75%, transparent); }
.prose ol { list-style: none; counter-reset: step; }
.prose ol > li { position: relative; padding-left: 38px; counter-increment: step; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: .15em; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 800 .8rem/1 var(--font-text); }
.prose li > ul, .prose li > ol { margin-top: 8px; }
.prose li > p + * { margin-top: .6em; }
.prose code { font: 600 .9em var(--font-mono); padding: .1em .38em; border-radius: 6px; background: color-mix(in oklch, var(--fg) 9%, transparent); color: var(--text); overflow-wrap: anywhere; }
.prose kbd.kbd { height: 24px; font-size: .78rem; vertical-align: 1px; color: var(--text); }
.prose hr { border: 0; height: 1px; background: var(--line-2); margin-block: 2em; }
.prose blockquote { padding: 4px 0 4px 18px; border-left: 3px solid var(--line-2); color: var(--text-3); }
.doc-code { position: relative; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--code-bg, color-mix(in oklch, var(--bg-abyss) 80%, transparent)); }
.doc-code pre { margin: 0; padding: 16px 18px; overflow: auto; font: 500 .9rem/1.6 var(--font-mono); color: var(--code-fg, var(--text)); tab-size: 4; }
.doc-code pre code { background: none; padding: 0; font: inherit; color: inherit; overflow-wrap: normal; }
.doc-code .code-lang { position: absolute; top: 8px; right: 52px; font: 700 .65rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.doc-code .copy-code { position: absolute; top: 6px; right: 6px; }
.doc-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in oklch, var(--panel) 65%, transparent); }
.doc-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.doc-table th, .doc-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc-table th { font: 700 .72rem/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); background: color-mix(in oklch, var(--fg) 4%, transparent); vertical-align: bottom; }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table td strong { white-space: nowrap; }
.doc-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 18px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line-accent); background: var(--accent-tint); color: var(--text-2); font-size: 1rem; line-height: 1.6; }
.doc-callout > .ic { width: 20px; height: 20px; color: var(--accent-text); margin-top: 3px; }
.doc-callout .k { display: block; font: 700 .68rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 2px; }
.doc-callout > div > * + * { margin-top: .6em; }
.doc-callout.tip { border-color: color-mix(in oklch, var(--seed-gold) 50%, transparent); background: var(--gold-tint); }
.doc-callout.tip > .ic, .doc-callout.tip .k { color: var(--gold-text); }
.doc-callout.warning, .doc-callout.important { border-color: color-mix(in oklch, var(--seed-danger) 50%, transparent); background: color-mix(in oklch, var(--seed-danger) 12%, transparent); }
.doc-callout.warning > .ic, .doc-callout.warning .k, .doc-callout.important > .ic, .doc-callout.important .k { color: var(--danger-text); }
/* the Bridge installer's SHA-256 ("::: bridge-sha256"): docs.js fills it from /api/bridge/latest */
.doc-hash { padding: 12px 16px; border-radius: var(--r-lg); border: 1.5px solid var(--line-accent); background: var(--accent-tint); color: var(--text-2); min-width: 0; }
.doc-hash-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; min-width: 0; }
.doc-hash .k { font: 700 .75rem/1.2 var(--font-mono); letter-spacing: .08em; color: var(--accent-text); }
.doc-hash-v { font-family: var(--font-mono); overflow-wrap: anywhere; word-break: break-all; min-width: 0; user-select: all; }
.doc-hash-ver { color: var(--text-3); }
.doc-hash-copy { flex: none; }

/* ---- article footer: help line + previous / next ---- */
.doc-foot { margin-top: 56px; display: grid; gap: 22px; }
.doc-help { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); color: var(--text-3); font-size: .95rem; line-height: 1.55; }
.doc-help .ic { width: 18px; height: 18px; color: var(--gold-text); flex: 0 0 auto; margin-top: 2px; }
.doc-help a { color: var(--accent-text); }
.doc-help.home { margin-top: 40px; }
.doc-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-pn .pn { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border-radius: var(--r-lg); border: 1.5px solid var(--line-2);
  background: color-mix(in oklch, var(--panel) 65%, transparent); color: var(--text-2); text-decoration: none; transition: border-color var(--dur-quick), transform var(--dur-quick), background var(--dur-quick); }
.doc-pn .pn:hover { border-color: var(--line-accent); transform: translateY(-2px); background: color-mix(in oklch, var(--panel) 85%, transparent); }
.doc-pn .pn > span { display: grid; gap: 2px; min-width: 0; }
.doc-pn .pn .k { font: 700 .68rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.doc-pn .pn b { color: var(--text); font-size: 1rem; line-height: 1.3; }
.doc-pn .pn .ic { width: 18px; height: 18px; color: var(--accent-text); flex: 0 0 auto; }
.doc-pn .next { justify-content: flex-end; text-align: right; grid-column: 2; }

/* ---- right: on this page ---- */
.docs-toc { position: sticky; top: 104px; max-height: calc(100dvh - 124px); overflow: auto; padding-left: 14px; border-left: 1px solid var(--line); scrollbar-width: thin; }
.docs-toc h2 { font: 700 .6875rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.docs-toc ol, .toc-inline ol { list-style: none; padding: 0; display: grid; gap: 1px; }
.docs-toc ol ol, .toc-inline ol ol { margin: 1px 0 4px 10px; }
.docs-toc a, .toc-inline a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--text-3); font-size: .84rem; line-height: 1.35; text-decoration: none; }
.docs-toc li.sub a, .toc-inline li.sub a { font-size: .8rem; }
.docs-toc a:hover, .toc-inline a:hover { color: var(--text); background: color-mix(in oklch, var(--fg) 5%, transparent); }
.docs-toc a[aria-current="true"] { color: var(--gold-text); font-weight: 700; background: var(--gold-tint); }

/* ---- the docs home ---- */
.docs-home { outline: none; }
.dhome-hero { display: grid; gap: 16px; padding: 8px 0 34px; max-width: 760px; }
.qlinks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qlink { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2);
  background: color-mix(in oklch, var(--panel) 60%, transparent); color: var(--text-2); font-weight: 700; font-size: .9rem; text-decoration: none;
  transition: color var(--dur-quick), border-color var(--dur-quick), transform var(--dur-quick); }
.qlink .ic { width: 16px; height: 16px; color: var(--gold-text); }
.qlink:hover { color: var(--text); border-color: var(--line-accent); transform: translateY(-1px); }
.dsecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.dsec { padding: 20px 18px 12px; border-radius: var(--r-xl); border: 1px solid var(--line); background: color-mix(in oklch, var(--panel) 62%, transparent); box-shadow: var(--e1); }
.dsec h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; color: var(--text); }
.dsec h2 .ic { width: 20px; height: 20px; color: var(--gold-text); }
.dsec-blurb { margin: 6px 0 10px; color: var(--text-3); font-size: .92rem; line-height: 1.5; }
.dsec ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.dsec a { display: grid; gap: 2px; padding: 9px 10px; border-radius: 12px; text-decoration: none; }
.dsec a b { color: var(--text); font-size: .95rem; }
.dsec a span { color: var(--text-3); font-size: .84rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dsec a:hover { background: color-mix(in oklch, var(--seed-accent) 11%, transparent); }
.dsec a:hover b { color: var(--accent-text); }

/* ---- back to top ---- */
.to-top { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: var(--z-nav); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--gold); color: var(--ink); font-weight: 800; text-decoration: none;
  box-shadow: var(--sticker-shadow); opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
.to-top.on { opacity: 1; translate: 0; pointer-events: auto; }
.to-top .ic { width: 16px; height: 16px; }

/* ---- the phone bar and the nav drawer ---- */
.docs-mbar { display: none; }
.docs-scrim { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: color-mix(in oklch, var(--seed-bg-deep) 55%, transparent); backdrop-filter: blur(3px); }
.docs-scrim[hidden] { display: none; }

@media (max-width: 1240px) {
  .docs-shell { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .docs-shell[data-layout="article"] .docs-main { display: block; }
  .docs-toc { display: none; }
  .toc-inline { display: block; }
}
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  .docs-mbar { display: flex; gap: 8px; position: sticky; top: 84px; z-index: var(--z-sticky); width: min(100% - 2 * var(--gutter), 1460px); margin: 96px auto 0;
    padding: 8px; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in oklch, var(--bg-abyss) 82%, transparent);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: var(--e1); }
  .docs-mbar .btn { flex: 1; justify-content: center; }
  :root[data-scheme="light"] .docs-mbar { background: color-mix(in oklch, var(--panel) 86%, transparent); }
  .docs-side { position: fixed; z-index: var(--z-sheet); top: 0; bottom: 0; left: 0; width: min(88vw, 360px); max-height: none; padding: 14px 14px 0;
    background: var(--panel); border-right: 1px solid var(--line-2); box-shadow: var(--e3);
    transform: translateX(-104%); visibility: hidden; transition: transform .32s var(--ease-out), visibility 0s linear .32s; }
  .docs-side.open { transform: none; visibility: visible; transition: transform .32s var(--ease-out), visibility 0s; }
  .side-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
  .side-title { font: 700 .75rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-left: 4px; }
  .dsearch-pop { width: 100%; }
  .docs-article { max-width: none; }
  .prose { font-size: 1rem; }
  .doc-pn { grid-template-columns: 1fr; }
  .doc-pn .next { grid-column: auto; }
  .doc-pn .pn-gap { display: none; }
  .dhome-hero { padding-top: 4px; }
}
@media (max-width: 520px) {
  .doc-table table { font-size: .86rem; }
  .doc-table th, .doc-table td { padding: 8px 10px; }
  .doc-code pre { font-size: .82rem; padding: 14px; }
  .prose ol > li { padding-left: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-side, .docs-side.open { transition: none; }
}

/* ---- print ---- */
@media print {
  .sky, .nav, .docs-side, .docs-toc, .toc-inline, .to-top, .site-footer, .docs-mbar, .doc-tools, .doc-pn, .doc-help, .skip-link { display: none !important; }
  body.docs { background: #fff; color: #111; }
  .docs-shell { display: block; width: auto; padding: 0; }
  .prose, .prose *, .doc-top h1, .doc-lede, .crumbs ol { color: #111 !important; }
  .doc-callout, .doc-table, .doc-code { border: 1pt solid #999; background: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}