/* trenchscope site. Black and white, matching the app's mono theme (packages/tui/src/theme.ts):
   the only hues are the app's own up/down and the warning amber. */

/* Self-hosted Spline Sans and Spline Sans Mono (SIL OFL 1.1, latin subset from Google Fonts). The fallback faces
   are system fonts sized to the same metrics (average advance, ascent, descent), so text wraps identically before
   and after the web fonts arrive and nothing shifts. */
@font-face { font-family: 'Spline Sans'; src: url('assets/fonts/spline-sans-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spline Sans Mono'; src: url('assets/fonts/spline-sans-mono-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spline Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 100.16%; ascent-override: 96.2%; descent-override: 23.6%; line-gap-override: 0%; }
@font-face { font-family: 'Spline Sans Mono Fallback'; src: local('Courier New'), local('Menlo'), local('Courier'); size-adjust: 100%; ascent-override: 96.35%; descent-override: 23.65%; line-gap-override: 0%; }

/* Osmo scaling follows the design frames, capped at the browser default to avoid enlarging wide screens. */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --size-font-min: 0.875rem;
}



html { font-size: clamp(var(--size-font-min), var(--size-font), 1rem); }

:root {
  color-scheme: dark;
  /* surface roles (owner brief, 2026-10-19): page, supporting surface, selected control, border, text, one green */
  --bg: #080a09;
  --surface: #101411;
  --raised: #19211c;
  --line: #1a221d;
  --line-strong: #29352e;
  --ink: #edf2ee;
  --ink-2: #a5b0a8;
  --ink-3: #7c887f;
  --ink-4: #4a564e;
  --up: #7cc794;
  --down: #e8847c;
  --warn: #d9b46a;
  --pop-up: #4ade80;
  --pop-down: #f2877e;
  --pop-warn: #f5c451;

  /* Spline Sans for prose, Spline Sans Mono for headlines and anything technical (the family the wordmark and og.png use); the terminal cells keep JetBrains Mono for its box drawing */
  --font-sans: 'Spline Sans', 'Spline Sans Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', 'Spline Sans Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-cells: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: 2.5rem;
  --section: 6rem;
  --bar-h: 3.75rem;

  /* Osmo easing favourites */
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-energy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-punch: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-smooth: cubic-bezier(0.38, 0.005, 0.215, 1);
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1.5rem); scrollbar-color: var(--line-strong) var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 0.9375rem/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; caret-color: var(--ink); }
/* Keep short descriptions from ending in a single stranded word. */
p, dd { text-wrap: pretty; }
::selection { background: var(--pop-up); color: var(--bg); }
:focus-visible { outline: 2px solid var(--pop-up); outline-offset: 4px; border-radius: 4px; }
a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: var(--font-mono); font-variant-ligatures: none; }
code { font-size: 0.875em; color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, summary, .btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 99; padding: 0.5rem 0.875rem; background: var(--ink); color: var(--bg); border-radius: 6px; font-weight: 500; }
.skip:focus { top: 0.75rem; }

.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---- full-bleed ASCII trench behind everything: two ridges rendered by ASCII Magic, panned at
   different speeds so they part like depth, with a band of light crossing the near ridge. */
.ascii-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.ascii-layer { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 58%); mask-image: linear-gradient(to bottom, transparent 30%, #000 58%); }
.ascii-layer i { --th: max(100vh, 56.25vw); position: absolute; left: 0; top: 0; display: block; width: calc(var(--th) * 32 / 9); height: var(--th); background-repeat: repeat-x; background-size: auto 100%; will-change: transform; }
.ascii-far i { background-image: url('assets/trench-far.webp'); opacity: 0.2; top: 9vh; }
.ascii-near i { background-image: url('assets/trench-near.webp'); opacity: 0.26; top: 17vh; }
.ascii-lit i { background-image: url('assets/trench-near.webp'); opacity: 0.85; top: 17vh; }
/* the live trench (fx.js) replaces every plate, so a WebGL2 browser never fetches them; fx.js drops the class if it fails */
.webgl2 .ascii-far i, .webgl2 .ascii-near i, .webgl2 .ascii-lit i { background-image: none; }
/* a sparse field of glyphs over the whole screen that flicker on and off, drawn by main.js */
.ascii-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.ascii-lit { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%); -webkit-mask-size: 26% 100%; mask-size: 26% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -40% 0; mask-position: -40% 0; }
@keyframes pan { to { transform: translateX(-50%); } }
@keyframes sweep { from { -webkit-mask-position: -40% 0; mask-position: -40% 0; } to { -webkit-mask-position: 140% 0; mask-position: 140% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ascii-far i { animation: pan 240s linear infinite; }
  .ascii-near i, .ascii-lit i { animation: pan 130s linear infinite; }
  .ascii-lit { animation: sweep 11s var(--ease-smooth) infinite; }
}
@media (prefers-reduced-motion: reduce) { .ascii-lit { display: none; } }
/* past the first screen the trench steps back behind the content */
@supports (animation-timeline: scroll()) {
  .ascii-bg { animation: recede linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes recede { to { opacity: 0.4; } }
  @media (prefers-reduced-motion: no-preference) {
    .ascii-near { animation: rise-near linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes rise-near { to { transform: translateY(-9vh); } }
  }
}


/* The live renderer owns the entire glyph grid. Raster ridges are fallback-only:
   blending their differently scaled glyphs over the canvas produces doubled characters. */
.ascii-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ascii-bg:not(.gl) .ascii-gl { display: none; }
.ascii-bg.gl .ascii-layer, .ascii-bg.gl .ascii-field { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ascii-gl { animation: rise-near linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}

/* ---- motion (fx.js): every state below is the visible default when scripts do not run */
.h2, .display { width: fit-content; }
.fx-wait { clip-path: inset(0 100% 0 0); }
.fx-type { position: relative; animation: type-in 820ms var(--ease-energy) both; }
@keyframes type-in { from { clip-path: inset(-0.2em 100% -0.2em -0.2em); } to { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); } }
.fx-row { opacity: 0; transform: translateY(0.375rem); clip-path: inset(0 100% 0 0); transition: opacity 420ms var(--ease-smooth), transform 560ms var(--ease-energy), clip-path 640ms var(--ease-energy); transition-delay: var(--d, 0ms); }
.fx-row.fx-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
tbody tr.fx-row { transform: none; clip-path: none; }
.caps kbd { transition: transform 140ms var(--ease-punch), background-color 140ms; }
@media (hover: hover) { .keylist li:hover .caps kbd { background: var(--pop-up); } }
.caps kbd.fx-press { transform: translateY(2px); background: var(--pop-up); }
.sparks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }
.screen::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease-smooth); background: radial-gradient(26rem circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / 0.055), transparent 62%); }
.screen[data-glare]::before { opacity: 1; }

/* ---- big pixel cursors (the API site's 1-bit cursors at 3x, in our ink); native ones stay for touch and forced colours */
@media (hover: hover) and (pointer: fine) and (prefers-contrast: no-preference) and (forced-colors: none) {
  body { cursor: url('assets/cursors/hand.svg') 9 1, auto; }
  :is(a, button, summary, [role='tab'], [role='button']):not(:disabled) { cursor: url('assets/cursors/hand-pop.svg') 9 1, pointer; }
  :is(input, textarea, [contenteditable]) { cursor: text; }
}

/* ---- top bar */
.bar { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 2rem; height: var(--bar-h); }
.bar-in .mark { margin-right: auto; }
.mark { display: inline-flex; align-items: center; gap: 0.125rem; min-height: 2.75rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.nav { display: flex; gap: 1.75rem; margin-left: auto; font-size: 0.875rem; color: var(--ink-2); }
.nav a { position: relative; padding-block: 0.5rem; transition: color 200ms var(--ease-smooth); }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.125rem; height: 1px; background: var(--pop-up); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-osmo); }
@media (hover: hover) { .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: background-color 200ms var(--ease-smooth), transform 300ms var(--ease-punch); }
.btn-ink { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .btn-ink:hover { background: #ffffff; } }
.btn:active { transform: scale(0.97); }



/* X link: the X mark only, ink, a 44px target */
.xlink { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -0.5rem; border-radius: 8px; color: var(--ink-2); transition: color 200ms var(--ease-smooth), background-color 200ms var(--ease-smooth); }
.xlink svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }
@media (hover: hover) { .xlink:hover { color: var(--ink); background: var(--raised); } }
.xlink-sm { width: 2.25rem; height: 2.25rem; margin: -0.75rem -0.5rem -0.75rem 0.75rem; }
.xlink-sm svg { width: 0.875rem; height: 0.875rem; }

.foot-end { display: inline-flex; align-items: center; }
/* GitHub sits beside X in the bar on wide screens; the footer and the install notes carry it on phones */
.xlink-gh + .xlink { margin-left: -1.75rem; }
.xlink-sm + .xlink-sm { margin-left: -0.25rem; }


/* ---- type */
.h1, .h2, .display, .mark { font-family: var(--font-mono); }
.h1 { margin: 0; font-size: 4rem; line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.sub { margin: 1rem 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.key-inline { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 5px; background: var(--ink); color: var(--bg); font-size: 0.8em; font-weight: 700; vertical-align: 0.1em; }
.h2 { margin: 0; max-width: 24ch; font-size: 2.125rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.display { margin: 0; font-size: 3.25rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; max-width: 13ch; text-wrap: balance; }


/* ---- hero: headline, lede and the one supporting line on the left, the installer on the right */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-top: 3.5rem; }
/* the trench fades out under the headline and the installer, so the copy sits on near-black */
.hero::before { content: ''; position: absolute; z-index: -1; inset: -4rem -10vw -3rem; pointer-events: none; background: radial-gradient(60% 75% at 22% 55%, var(--bg) 35%, transparent 75%), radial-gradient(38% 60% at 80% 62%, rgb(8 10 9 / 0.85) 30%, transparent 75%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 33rem; column-gap: 3.5rem; align-items: end; }
.hero-copy { display: flex; flex-direction: column; gap: 1.375rem; padding-bottom: 0.375rem; }
.lede { margin: 0; max-width: 34em; font: 400 1.125rem/1.75rem var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.paper { display: inline-flex; align-items: center; gap: 0.625rem; margin: 0; font: 500 0.8125rem var(--font-mono); color: var(--ink); }
.paper i { width: 6px; height: 6px; border-radius: 50%; background: var(--pop-up); box-shadow: 0 0 8px rgb(74 222 128 / 0.6); }
.explore { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 0.875rem var(--font-mono); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.35em; transition: color 200ms var(--ease-smooth), text-decoration-color 200ms var(--ease-smooth); }
@media (hover: hover) { .explore:hover { color: var(--ink); text-decoration-color: var(--pop-up); } }
/* contract address: "CA tba" until /api/ca proves the coin on chain, then the address and a copy button */
.ca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; min-width: 0; max-width: 100%; font: 500 0.8125rem/1.6 var(--font-mono); font-feature-settings: "liga" 0; }
.ca-label { color: var(--ink-3); }
.ca-value { min-width: 0; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.ca-note { color: var(--ink-3); }
.ca-note:empty { display: none; }
.ca[data-state=live] { padding: 0.25rem 0.25rem 0.25rem 0.875rem; border-radius: 10px; background: #0e1310; box-shadow: inset 0 0 0 1px var(--line-strong); align-self: flex-start; flex-wrap: nowrap; }
.ca[data-state=live] .ca-label { color: var(--pop-up); }
.ca[data-state=live] .ca-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ca-copy { flex: none; display: inline-flex; align-items: center; gap: 0.4375rem; height: 2.375rem; padding: 0 0.75rem; border-radius: 7px; background: transparent; color: var(--ink-2); font: 600 0.8125rem var(--font-sans); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 160ms var(--ease-smooth), color 160ms var(--ease-smooth); }
.ca-copy[hidden] { display: none; }
.ca-copy svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ca-copy .copy-check, .ca-copy[data-done] .copy-outline { display: none; }
.ca-copy[data-done] { color: var(--pop-up); }
.ca-copy[data-done] .copy-check { display: inline; }
@media (hover: hover) { .ca-copy:hover { background: var(--raised); color: var(--ink); } }
.ca-copy:focus-visible { outline: 2px solid var(--pop-up); outline-offset: 2px; }

@media (max-width: 1079px) { .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; } .inst { max-width: 36rem; } }


/* ---- installer: a React Bits Spotlight Card (a green light that follows the pointer and catches the border),
   a Rubber Segment platform switch (the thumb stretches across, then lands), one command bar with copy inside. */
.inst { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.875rem; border-radius: 16px; background: #0e1310; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgb(255 255 255 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.9); }
.inst::after, .agents::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 1px solid var(--line-strong); border-radius: inherit; pointer-events: none; }
.inst-light, .inst-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.inst-light { z-index: -1; }
.inst-edge { z-index: 2; padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.inst-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.125rem; }
.inst-title { margin: 0 0 0 0.125rem; font: 600 0.875rem/1.5 var(--font-sans); letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: none; padding: 3px; border-radius: 10px; background: #0a0d0b; border: 1px solid #222c26; -webkit-tap-highlight-color: transparent; }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 7px; background: var(--raised); box-shadow: inset 0 0 0 1px #3a4c41, inset 0 1px 0 rgb(255 255 255 / 0.06); pointer-events: none; }
html:not(.js) .seg-thumb { display: none; }
.seg-item { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; height: 1.875rem; padding: 0 0.6875rem; border-radius: 7px; font: 500 0.78125rem var(--font-mono); color: var(--ink-3); white-space: nowrap; transition: color 160ms var(--ease-smooth), transform 160ms var(--ease-punch); }
.seg-item svg { width: 0.8125rem; height: 0.8125rem; flex: none; fill: currentColor; }
@media (hover: hover) { .seg-item:hover { color: var(--ink); } }
.seg-item:active { transform: scale(0.96); }
.seg-item[aria-selected='true'], .seg-item[aria-pressed='true'] { color: var(--ink); }
html:not(.js) .seg-item[aria-selected='true'] { background: var(--raised); }
.seg-item:focus-visible { outline-color: var(--pop-up); outline-offset: -3px; border-radius: 7px; }
.cmdbar { position: relative; display: flex; align-items: center; gap: 0.625rem; height: 3.25rem; margin-inline: -0.875rem; padding: 0 0.5rem 0 1.375rem; background: #090c0a; border-block: 1px solid var(--line); }
.cmdbar:focus-visible { outline-offset: -2px; border-radius: 0; }
.cmdbar .ps { flex: none; font: 600 0.8125rem var(--font-mono); color: var(--pop-up); user-select: none; }
.cmd { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font: 400 0.8125rem/1 var(--font-mono); color: var(--ink); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cmd[data-copy-fallback] { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; -webkit-mask-image: none; mask-image: none; }
.cmdbar:has([data-copy-fallback]), .agents-code:has([data-copy-fallback]) { height: auto; padding-block: 0.875rem; align-items: flex-start; }
.caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 1px; vertical-align: -0.18em; background: var(--pop-up); box-shadow: 0 0 10px rgb(74 222 128 / 0.55); }
.caret[data-blink] { animation: dim 1s steps(1) infinite; }
/* copy: the strongest control in the block, the same ink as the Install button; Osmo Button 069 shuffles its letters on hover */
.copy { flex: none; display: inline-flex; align-items: center; gap: 0.4375rem; height: 2.375rem; padding: 0 0.875rem; border-radius: 8px; background: var(--ink); color: var(--bg); font: 600 0.84375rem var(--font-sans); font-kerning: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 8px 24px -10px rgb(237 242 238 / 0.35); transition: background-color 160ms var(--ease-smooth), transform 160ms var(--ease-punch), box-shadow 200ms var(--ease-smooth); }
.copy svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.copy [data-copy-word] { display: inline-block; min-width: 3.4em; }
@media (hover: hover) { .copy:hover { background: #fff; } }
.copy:active { transform: translateY(1px) scale(0.98); }
.copy[data-done] { background: var(--pop-up); color: #04210e; box-shadow: 0 0 0 4px rgb(74 222 128 / 0.18), 0 10px 30px -10px rgb(74 222 128 / 0.7); }
.copy .copy-check, .copy[data-done] .copy-outline { display: none; }
.copy[data-done] .copy-check { display: inline; }
.inst-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0 0.125rem; font: 400 0.78125rem/1.4 var(--font-sans); color: var(--ink-2); }
.inst-meta code { padding: 0.1875rem 0.375rem; border-radius: 5px; background: var(--raised); border: 1px solid #222c26; font: 500 0.75rem var(--font-mono); color: var(--ink); white-space: nowrap; }
.inst-meta .dot { color: var(--ink-4); }
.inst-meta a { display: inline-flex; flex: none; align-items: center; gap: 0.375rem; min-height: 2.25rem; font: 500 0.75rem var(--font-mono); color: var(--ink-2); transition: color 160ms var(--ease-smooth); }
.inst-meta a svg { width: 0.8125rem; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
@media (hover: hover) { .inst-meta a:hover { color: var(--ink); } }

.install-copy { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.75rem; font: 400 0.8125rem var(--font-mono); color: var(--ink-3); transition: color 200ms var(--ease-smooth); }
.install-copy svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
@media (hover: hover) { .install-copy:hover { color: var(--ink); } }
.install-copy[data-done] { color: var(--pop-up); }
.install-copy .copy-check { display: none; }
.install-copy[data-done] .copy-outline { display: none; }
.install-copy[data-done] .copy-check { display: inline; }

/* ---- agent hookup: the installer's language. The agent on an icon switch, one command bar with copy inside;
   config opens the bar into the file to paste. */
.agents { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; padding: 0.875rem; border-radius: 16px; background: #0e1310; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgb(255 255 255 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.9); }
.agents-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-left: 0.125rem; }
.agents-title { margin: 0; font: 600 0.875rem/1.5 var(--font-sans); letter-spacing: 0; color: var(--ink); }
.agents-step { margin: 0.125rem 0 0; font-size: 0.78125rem; line-height: 1.4; color: var(--ink-3); }
.agents-rail { display: grid; width: 100%; }
.agents-rail .seg-item { height: 2.375rem; gap: 0.5rem; }
.agents-rail .seg-item svg { width: 0.9375rem; height: 0.9375rem; }
.agents-mode .seg-item { padding: 0 0.875rem; }
.agents-code { position: relative; display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; margin-inline: -0.875rem; padding: 0 0.5rem 0 1.375rem; background: #090c0a; border-block: 1px solid var(--line); }
.agents-code:focus-visible { outline-offset: -2px; border-radius: 0; }
.agents-code .ps { flex: none; font: 600 0.8125rem var(--font-mono); color: var(--pop-up); user-select: none; }
.agents[data-link] .agents-code .ps, .agents[data-mode='config'] .agents-code .ps { display: none; }
.agents-actions { flex: none; display: flex; gap: 0.375rem; }
.copy-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) { .copy-ghost:hover { background: var(--raised); } }
/* config: the bar opens into the file, held at the longest config (eight lines) so switching agents never moves the page */
.agents[data-mode='config'] .agents-code { align-items: flex-start; padding: 0.875rem 0.5rem 0.875rem 1.375rem; }
.agents[data-mode='config'] .agents-code .cmd { height: calc(8 * 1.6em); white-space: pre; line-height: 1.6; overflow: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; color: var(--ink-2); }
.agents[data-mode='config'] .agents-actions { margin-top: -0.5rem; }
@media (max-width: 559px) { .agents-rail .agent-name { display: none; } }


/* ---- stage (v2, owner handoff 2026-10-19): the app on a flat, lit screen. A pill of chapters above it with a
   sliding indicator, progress as one hairline on the screen, chapters crossfading, a key HUD that rises out of
   a blur. One easing for all of it (--ease-out), except the progress line, which is linear. */
.stage { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); position: relative; isolation: isolate; padding: 3rem 0 0; overflow-x: clip; }
/* a broad, faint green under the device, so the product separates from the trench without the page turning green */
.stage::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 2rem; width: min(140%, 110rem); height: calc(100% + 6rem); transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(46% 40% at 50% 46%, rgb(74 222 128 / 0.07), rgb(74 222 128 / 0.02) 55%, transparent 75%), radial-gradient(34% 14% at 50% 88%, rgb(74 222 128 / 0.12), transparent 75%); }
/* the device spans the content width, and still fits under the top bar with its rail */
.stage-scene { width: min(100%, 76rem, calc((100svh - var(--bar-h) - 9rem) * 1.62 + 1rem)); margin-inline: auto; perspective: 2400px; }

/* tilted back until hover, after Trial's DeviceStage; the pointer lean from main.js sits on top */
.stage-lean { --tilt: 7deg; transform: rotateX(calc(var(--tilt) + var(--rx, 0deg))) rotateY(var(--ry, 0deg)); transform-origin: 50% 100%; transition: transform 280ms var(--ease-energy); }
.stage-scene:hover .stage-lean, .stage-scene:focus-within .stage-lean { --tilt: 0deg; }


.bezel { position: relative; padding: 0.625rem; border-radius: 1.375rem;
  background: linear-gradient(170deg, #2b302d 0%, #161917 24%, #0b0d0c 70%, #222724 100%);
  box-shadow: inset 0 0 0 1px #39403b, inset 0 1px 0 #5a625c, 0 0 0 1px #000, 0 2px 4px rgb(0 0 0 / 0.4), 0 70px 90px -40px rgb(0 0 0 / 0.95); }

/* the rail: chapters, what the current one shows, the sample size and the pause control, in one strip of the bezel */
.rail { display: flex; align-items: center; gap: 0.875rem; min-height: 3.25rem; padding: 0 0.25rem 0.5rem; }
.tabs { position: relative; flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 37rem; padding: 3px; border-radius: 11px; background: #070908; border: 1px solid #1f2722; }
.tabs-pill { --n: 6; --rows: 1; position: absolute; top: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); height: calc((100% - 6px) / var(--rows)); border-radius: 8px; background: #1a231e; box-shadow: inset 0 0 0 1px #34453a, inset 0 1px 0 rgb(255 255 255 / 0.06); transform: translate(calc(var(--col, 0) * 100%), calc(var(--row, 0) * 100%)); transition: transform 220ms var(--ease-energy); }
.tabs-pill::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--pop-up); box-shadow: 0 0 10px rgb(74 222 128 / 0.7); }
html:not(.js) .tabs-pill { display: none; }
.tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 2.25rem; border-radius: 8px; font: 500 0.8125rem var(--font-mono); color: var(--ink-3); white-space: nowrap; transition: color 300ms var(--ease-out); }
@media (hover: hover) { .tab:hover { color: var(--ink); } }
.tab[aria-current='step'] { color: var(--ink); }
.tab kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; font: 600 0.6875rem var(--font-mono); color: var(--ink-2); background: #151b17; border: 1px solid var(--line-strong); transition: color 300ms var(--ease-out), background-color 300ms var(--ease-out), border-color 300ms var(--ease-out); }
.tab[aria-current='step'] kbd { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.tab:focus-visible { outline-color: var(--pop-up); outline-offset: -3px; border-radius: 8px; }
.rail-cap { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 0.84375rem/1.3 var(--font-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-cap b { color: var(--ink); font-weight: 500; margin-inline-end: 0.25em; }
.caption-size { color: var(--ink-3); }
/* the screen is the display inside the bezel, not a box of its own: no ring, the bezel draws the edge */
.screen { position: relative; margin: 0; overflow: hidden; border-radius: 0.75rem; background: var(--bg); }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / 0.05) 0%, transparent 30%, transparent 75%, rgb(255 255 255 / 0.025) 100%); }
/* the live dot: pop green with a glow while the tour plays, faint ink while it is paused */
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--pop-up); box-shadow: 0 0 8px rgb(74 222 128 / 0.6); transition: background-color 400ms, box-shadow 400ms; }
.live[data-paused] { background: var(--ink-4); box-shadow: none; }
html:not(.js) .live { display: none; }
@media (max-width: 1023px) { .rail { flex-wrap: wrap; row-gap: 0.25rem; } .tabs { width: 100%; } }


/* the chapter tabs are built by main.js, so their rows and the two-line caption are reserved up front: the screen never jumps down when they arrive */
html.js .tabs { min-height: calc(2.25rem + 8px); }
@media (pointer: coarse) { html.js .tabs { min-height: calc(2.75rem + 8px); } }

/* a definite width: once main.js sets the exact height, aspect-ratio must not turn it back into a width */
.screen-body { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1344 / 828; }

/* loading, no-script and failure text inside the screen itself */
.screen-msg { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; padding: 0 2rem; text-align: center; font: 400 0.875rem/1.6 var(--font-mono); color: var(--ink-3); text-wrap: balance; }
.screen-msg code { color: var(--ink); }
.screen-wait { animation: dim 1.1s steps(1) infinite; }
html:not(.js) .screen-wait { display: none; }
.crop .screen-msg { position: static; translate: none; padding: 4rem 2rem; }
/* without scripts, or when the tour fails, the controls that would drive it step aside */
html:not(.js) .tabs, html:not(.js) [data-toggle], html:not(.js) .hud, html:not(.js) .screen-progress,
[data-failed] .tabs, [data-failed] [data-toggle], [data-failed] .hud, [data-failed] .screen-progress, [data-failed] .live { display: none; }
.cells { margin: 0; position: absolute; top: 0; left: 0; transform-origin: 0 0; font: 400 14px/18px var(--font-cells); white-space: pre; color: var(--ink); background: var(--bg); }
.cells > div { height: 18px; display: flex; }
.cells span { display: inline-block; flex: none; height: 18px; overflow: hidden; }
.cells i { display: inline-block; width: 1ch; font-style: normal; text-align: center; overflow: hidden; vertical-align: top; }

/* progress through the current chapter: a lit line along the top edge of the screen */
.screen-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: rgb(255 255 255 / 0.03); pointer-events: none; }
.screen-progress i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, rgb(74 222 128 / 0.25), var(--pop-up)); box-shadow: 0 0 10px rgb(74 222 128 / 0.6); transition: transform 120ms linear; }

/* the key a person would press, rising out of a blur as the tour presses it */
.hud { position: absolute; right: 1.125rem; bottom: 1.125rem; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 12px; background: rgb(14 14 14 / 0.72); border: 1px solid rgb(255 255 255 / 0.08); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.05); font-size: 0.78125rem; color: var(--ink-2); pointer-events: none;
  opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(4px); transition: opacity 400ms var(--ease-out), transform 700ms var(--ease-out), filter 400ms var(--ease-out); }
.hud[data-on] { opacity: 1; transform: none; filter: blur(0); }
.hud kbd { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; background: linear-gradient(180deg, #f4f4f4, #d9d9d9); color: var(--bg); font: 600 0.8125rem var(--font-mono); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.5); }


/* the pause control in the rail (hover pauses with a mouse; touch and keys need this) */
.stage-toggle { flex: none; display: inline-flex; align-items: center; gap: 0.4375rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 8px; border: 1px solid var(--line-strong); font: 500 0.75rem var(--font-mono); color: var(--ink-2); transition: color 200ms var(--ease-smooth), border-color 200ms var(--ease-smooth), background-color 200ms var(--ease-smooth); }
.stage-toggle svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.stage-toggle [data-icon-play] { fill: currentColor; stroke: none; }
@media (hover: hover) { .stage-toggle:hover { color: var(--ink); border-color: #3a4a40; background: #111612; } }

.caption { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.25rem 0 0; font: 400 0.75rem var(--font-mono); color: var(--ink-3); text-align: center; }

/* events under the device: what the current chapter shows happening, from the same sample session.
   It changes with the chapter instead of scrolling, so every item stays readable. */
.events { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; min-height: 2.75rem; margin: 1rem 0 0; padding: 0.75rem 0; border-block: 1px solid var(--line); list-style: none; }
.events li { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; font: 400 0.75rem/1.25rem var(--font-mono); color: var(--ink); }
.events .kind { padding: 0 0.375rem; border-radius: 4px; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; background: #151b17; color: var(--ink-2); }
.events .d { color: var(--ink-2); }
.events .tone-up .kind { background: rgb(74 222 128 / 0.12); color: var(--pop-up); }
.events .tone-dn .kind { background: rgb(242 135 126 / 0.12); color: var(--pop-down); }
.events .tone-warn .kind { background: rgb(217 180 106 / 0.12); color: var(--warn); }
@keyframes event-in { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) { .events li[data-in] { animation: event-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } }


/* ---- sections */
.section { padding-top: var(--section); }
.rules { display: grid; margin: 2.5rem 0 0; }
.rules > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.rules > div:last-child { border-bottom: 1px solid var(--line); }
.rules dt { font-weight: 500; font-size: 0.9375rem; color: var(--ink); }
.rules dd { margin: 0; color: var(--ink-2); max-width: 52ch; }
.rules dd code { color: var(--ink); }

/* the analyst's four rules as one card of tiles, on the same surface as the installer and agent panel,
   so the copy never sits on the trench */
.rule-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-radius: 16px; background: #0e1310; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgb(255 255 255 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.9); overflow: hidden; }
.rule-cards > div, .rule-cards > div:last-child { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.125rem 1.25rem 1.25rem; border: 0; }
.rule-cards > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.rule-cards > div:nth-child(even) { border-left: 1px solid var(--line); }
.rule-cards dt { display: flex; align-items: center; gap: 0.625rem; font: 600 0.875rem var(--font-sans); letter-spacing: -0.01em; }
.rule-cards dd { font-size: 0.875rem; line-height: 1.55; }
.rule-ico { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 7px; background: rgb(74 222 128 / 0.1); box-shadow: inset 0 0 0 1px rgb(74 222 128 / 0.22); color: var(--pop-up); }
.rule-ico svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 559px) {
  .rule-cards { grid-template-columns: minmax(0, 1fr); }
  .rule-cards > div:nth-child(n+2) { border-top: 1px solid var(--line); }
  .rule-cards > div:nth-child(even) { border-left: 0; }
}

/* analyst: copy left, the app's own analyst panel on the right, at its real proportions */
.analyst { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 5rem; align-items: center; }
/* the analyst panel in a small device of its own: the stage's bezel, turned toward the copy until hover */
.analyst-stage { position: relative; isolation: isolate; justify-self: end; width: 100%; max-width: 35rem; perspective: 2000px; }
.analyst-stage::before { content: ''; position: absolute; z-index: -1; inset: -12% -18%; pointer-events: none; background: radial-gradient(50% 46% at 50% 55%, rgb(74 222 128 / 0.08), transparent 72%); }
.analyst-frame { margin: 0; padding: 0.5rem; transform: rotateY(-8deg) rotateX(2deg); transform-origin: 100% 50%; transition: transform 280ms var(--ease-energy); }
.analyst-stage:hover .analyst-frame, .analyst-stage:focus-within .analyst-frame { transform: none; }
.device-bar { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.375rem 0.5rem; font: 400 0.75rem var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.device-bar span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); }
.analyst-frame .screen { border-radius: 0.75rem; }
.analyst-frame .crop::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.875rem; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }
.k-none { color: var(--pop-up) !important; }
.pop { color: var(--pop-up); }
@keyframes dim { 50% { opacity: 0.18; } }
.crop { position: relative; overflow: hidden; }




/* every list, table and question set below the stage sits on the card surface the installer uses, never on the trench */
.keylist, .table-wrap, .setup-faq { border-radius: 16px; background: #0e1310; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgb(255 255 255 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.9); }
.keylist { column-gap: 0 !important; overflow: hidden; }
.keylist li { padding: 0.875rem 1.25rem !important; border-top: 1px solid var(--line); border-bottom: 0 !important; }
.keylist li:nth-child(-n+2) { border-top: 0; }
.keylist li:nth-child(even) { border-left: 1px solid var(--line); }
.table-wrap { padding: 0 1.25rem; border-top: 0 !important; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.setup-faq { padding: 0 1.25rem; border-top: 0 !important; }
.setup-faq details:last-child { border-bottom: 0; }
.note.note-warn { max-width: none; padding: 0.875rem 1.125rem; border-radius: 12px; background: rgb(217 180 106 / 0.06); box-shadow: inset 0 0 0 1px rgb(217 180 106 / 0.22); }
@media (max-width: 639px) {
  .keylist li:nth-child(2) { border-top: 1px solid var(--line); }
  .keylist li:nth-child(even) { border-left: 0; }
  .keylist li { padding: 0.75rem 1rem !important; }
  .table-wrap, .setup-faq { padding: 0 1rem; }
}

/* keys: heading left, a ruled list of keys in two columns on the right */
.keys { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 5rem; align-items: start; }
.keylist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; margin: 0; padding: 0; list-style: none; }
.keylist li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 4.25rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.keylist li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.caps { display: flex; gap: 0.375rem; }
.caps kbd { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem; border-radius: 7px; background: var(--ink); color: var(--bg); font-size: 0.9375rem; font-weight: 700; }
.keylist p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.keylist p b { color: var(--ink); font-weight: 500; }
.keylist code { color: var(--ink); white-space: nowrap; }

@media (max-width: 639px) { .keylist { grid-template-columns: minmax(0, 1fr); } .keylist li:nth-last-child(2) { border-bottom: 0; } .keylist li { grid-template-columns: 5rem minmax(0, 1fr); } }

/* safety: the statement big, the rules beside it */
.safety { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 5rem; row-gap: 2rem; align-items: start; }
.safety .rules { margin-top: 0.5rem; }
.note { margin: 1.75rem 0 0; max-width: 56ch; font-size: 0.9375rem; color: var(--ink-2); }
.note b { color: var(--pop-warn); font-weight: 500; }
.proof a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.2em; transition: text-decoration-color 200ms var(--ease-smooth); }
@media (hover: hover) { .proof a:hover { text-decoration-color: var(--ink); } }


/* sources: the heading holds its place while the table scrolls past */
.sources { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 5rem; align-items: start; }
.sources-head { position: sticky; top: calc(var(--bar-h) + 2rem); }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--line-strong); }

.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: 0.9375rem 1rem 0.9375rem 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.table thead th { padding-block: 0.75rem; font: 400 0.8125rem var(--font-mono); color: var(--ink-3); }
.table tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.table td { color: var(--ink-2); }
.table td:last-child { font: 400 0.8125rem var(--font-mono); color: var(--ink-3); white-space: nowrap; text-align: right; padding-right: 0; }
.table thead th:last-child { text-align: right; padding-right: 0; }
@media (max-width: 639px) { .table th, .table td { padding-right: 0.75rem; } .table td:last-child { white-space: normal; } }
.states { display: flex; flex-direction: column; gap: 0.625rem; margin: 2rem 0 0; font-size: 0.875rem; color: var(--ink-3); }
/* the badge holds its column so a wrapped explanation hangs beside it, not under it */
.states > span { display: flex; align-items: baseline; gap: 0.5rem; }
.states code { flex: none; padding: 0.125rem 0.4375rem; border-radius: 4px; background: var(--raised); border: 1px solid var(--line-strong); }

/* close */
.close { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; align-items: start; padding-bottom: var(--section); }
.setup-faq { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.setup-faq details { border-bottom: 1px solid var(--line); }
.setup-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding-block: 0.875rem; cursor: pointer; list-style: none; color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.setup-faq summary::-webkit-details-marker { display: none; }
.setup-faq summary svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.setup-faq details[open] .faq-plus { display: none; }
.setup-faq details[open] summary { color: var(--ink); }
.setup-faq p { margin: 0; padding: 0 2rem 1rem 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.8; }
.setup-faq a { text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .setup-faq summary:hover { color: var(--ink); } }
.setup-faq summary:active { color: var(--ink); }
.setup-faq details[open] summary { padding-bottom: 0.5rem; }


.foot { border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.5rem; font: 400 0.8125rem var(--font-mono); color: var(--ink-3); }
.foot-link { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.2em; transition: color 160ms var(--ease-smooth); }
@media (hover: hover) { .foot-link:hover { color: var(--ink); } }

/* Osmo Basic Navigation Bar: state attributes and the mobile grid reveal. */
.primary-nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav__link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .75rem; border-radius: 8px; color: var(--ink-2); font: 500 .875rem/1.3 var(--font-sans); transition: color 160ms var(--ease-smooth), background-color 160ms var(--ease-smooth); }
.nav__link:active { background: var(--raised); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); background: var(--raised); }
.nav__hamburger { display: none; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: var(--raised); color: var(--ink); } }


/* Hit areas stay usable even when the layout's rem scale contracts. */



@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-0.woff2) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/jetbrains-1.woff2) format('truetype');
}