/* FreeBrain homepage.
 * A warm grain canvas, one flat accent (the mark's signal orange: no gradients, glows or coloured
 * shadows), tight Geist headlines with Geist Mono for labels, read-outs and code, soft tiles in a
 * bento grid, and isometric hardware drawn with hairline (lucasmarkes/hairline, MIT). Content keeps
 * a centred 1280px measure with fluid gutters. Light by default; the round button in the hero
 * switches to dark. */

@font-face { font-family:"Geist"; src:url(assets/a369fcf5628ea2aa.woff2) format("woff2"); font-weight:100 900; font-display:swap }
@font-face { font-family:"Geist Mono"; src:url(assets/fba8f577f38a2bbc.woff2) format("woff2"); font-weight:100 900; font-display:swap }

:root {
  --bg:#f2f0eb; --bg-2:#ebe8e1; --tile:#fbfaf7; --tile-2:#f6f4ef; --plate:#fbfaf7;
  --ink:#141312; --ink-2:#3a3835; --muted:#6c6963; --faint:#a29e96;
  --line:rgb(20 18 14 / .1); --line-2:rgb(20 18 14 / .07);
  --accent:#ee5a24; --accent-press:#d64c18; --accent-ink:#c2410c; --led:#4fb52c;
  --glass:rgb(255 255 255 / .6); --glass-edge:rgb(255 255 255 / .8); --glass-line:rgb(20 18 14 / .08);
  --shadow:0 1px 2px rgb(20 18 14 / .04), 0 16px 36px -24px rgb(20 18 14 / .26);
  --code-bg:#151413; --code-fg:#ece9e3; --code-dim:#86827b; --code-line:rgb(255 255 255 / .08);
  --fig-mid:#9a968e; --fig-lo:#d3cfc6;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
  --max:1280px; --gutter:max(clamp(20px, 6vw, 112px), calc((100vw - var(--max)) / 2));
  --radius:20px; --radius-s:12px;
  --ease:cubic-bezier(.23, 1, .32, 1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0f0e0d; --bg-2:#151413; --tile:#1a1918; --tile-2:#1e1d1b; --plate:#1a1918;
  --ink:#f1eee8; --ink-2:#cfcbc3; --muted:#9a958c; --faint:#69655e;
  --line:rgb(255 255 255 / .1); --line-2:rgb(255 255 255 / .07);
  --accent:#ff6a33; --accent-press:#ec5722; --accent-ink:#ff8f61;
  --glass:rgb(30 29 27 / .6); --glass-edge:rgb(255 255 255 / .12); --glass-line:rgb(255 255 255 / .08);
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 20px 40px -26px rgb(0 0 0 / .8);
  --code-bg:#0b0a0a;
  --fig-mid:#77736b; --fig-lo:#3b3936;
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
/* the grain: a fixed film of noise over everything, too fine to read as texture until you look */
body::before { content:""; position:fixed; inset:0; z-index:100; pointer-events:none; background-image:var(--grain); opacity:.06; mix-blend-mode:multiply }
:root[data-theme="dark"] body::before { opacity:.09; mix-blend-mode:screen }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin:0; padding:0 }
ol, ul { list-style:none }
a { color:inherit; text-decoration:none }
button { margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer }
svg { display:block }
::selection { background:var(--accent); color:#fff }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.glass { background:var(--glass); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-edge), var(--shadow); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5) }
.pulse { flex:none; position:relative; width:7px; height:7px; border-radius:50%; background:var(--accent) }
.pulse::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--accent); opacity:0; animation:fb-pulse 2.4s var(--ease) infinite }
@keyframes fb-pulse { 0% { transform:scale(.6); opacity:.7 } 100% { transform:scale(1.6); opacity:0 } }
.led { flex:none; width:7px; height:7px; border-radius:50%; background:var(--led); box-shadow:0 0 0 3px rgb(79 181 44 / .16) }

/* Standalone chrome: a glass bar; the console brings its own when embedded */
.topbar { position:sticky; top:12px; z-index:30; display:flex; align-items:center; height:50px; margin:12px var(--gutter) 0; padding:0 18px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-edge), var(--shadow); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5) }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:620; letter-spacing:-.03em }
/* the FreeBrain F, in the signal orange (brand/logo/) */
.mark { width:auto; height:24px; flex:none }
.mark path { fill:var(--accent) }
.brand-tag { font:400 12px/1 var(--mono); letter-spacing:0; color:var(--faint) }
.skip { position:absolute; left:-9999px; top:10px; padding:8px 12px; border-radius:10px; background:var(--ink); color:var(--bg) }
.skip:focus { left:20px }
.fb-standalone-languages { position:fixed; top:19px; right:calc(var(--gutter) + 7px); z-index:31; display:flex; align-items:center; gap:2px; height:36px; font-size:13px }
.fb-standalone-languages a { padding:6px 12px; border-radius:999px; color:var(--muted); transition:color .15s, background-color .15s }
.fb-standalone-languages a:hover { color:var(--ink) }
.fb-standalone-languages a[aria-current="page"] { color:var(--bg); background:var(--ink) }
.fb-embedded .topbar, .fb-embedded .fb-standalone-languages, .fb-embedded .theme-toggle { display:none }

/* Shared parts */
.section { position:relative; padding:clamp(64px, 8vw, 112px) var(--gutter) }
.sec-head { max-width:820px }
/* a section's own head: title on the left, its lede on the right, bottoms aligned */
.section > .sec-head { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); column-gap:clamp(24px, 5vw, 80px); align-items:end; max-width:none }
.section > .sec-head > .label, .section > .sec-head > .h2 { grid-column:1 }
.section > .sec-head > .lede { grid-column:2; grid-row:1 / span 2; align-self:end; margin:0; padding-bottom:.25em }
.label { display:inline-flex; align-items:center; gap:8px; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.label-n { color:var(--accent) }
.h2 { margin-top:16px; max-width:20ch; font-size:clamp(30px, 3.2vw, 46px); font-weight:620; line-height:1.06; letter-spacing:-.045em; text-wrap:balance }
:lang(zh) .h2 { max-width:18em; font-size:clamp(28px, 3vw, 42px); line-height:1.2; letter-spacing:-.02em }
/* Chinese headings break at punctuation and spaces, not inside a word, unless a run cannot fit */
:lang(zh) .h2, :lang(zh) .hero-title { word-break:keep-all; overflow-wrap:anywhere }
.h2 .hl, .start-title .hl { color:var(--accent) }
.h3 { font-size:18px; font-weight:620; line-height:1.3; letter-spacing:-.025em }
.lede { margin-top:18px; max-width:58ch; font-size:16px; line-height:1.65; color:var(--muted); text-wrap:pretty }
.lede-2 { margin-top:10px }
.link, .link-btn { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; transition:text-decoration-color .15s }
.link:hover, .link-btn:hover { text-decoration-color:var(--accent) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:560; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .2s }
.btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round }
.btn-primary, .btn-solid { color:#fff; background:var(--accent) }
.btn-primary:hover, .btn-solid:hover, .fb-qs-open:not(:disabled):hover { background:var(--accent-press) }
.btn-glass, .btn-line { color:var(--ink); background:var(--glass); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
.btn-line { height:40px; padding:0 18px; font-size:14px }
.btn:active { transform:scale(.97) }
.round-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:50% }
.round-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4 }

/* Hero */
.hero { position:relative; padding:clamp(40px, 6vw, 80px) var(--gutter) clamp(64px, 7vw, 96px); overflow:hidden }
.hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); align-items:center; gap:clamp(24px, 4vw, 64px) }
.hero-copy { position:relative; z-index:2; min-width:0 }
.badge { display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 14px 0 12px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); font-size:13px; color:var(--ink-2) }
.badge-tag { font-weight:650; color:var(--accent-ink) }
.hero-title { margin-top:22px; font-size:clamp(40px, 4.5vw, 72px); font-weight:640; line-height:1; letter-spacing:-.055em; text-wrap:balance }
:lang(zh) .hero-title { font-size:clamp(34px, 4.1vw, 64px); line-height:1.14; letter-spacing:-.03em }
:lang(zh) .hero-title > span:first-child { display:block }
/* The rotating word rolls up into place, in the accent. */
.rotor { display:inline-grid; justify-items:start; overflow:hidden; padding:0 .04em .1em 0; margin-bottom:-.1em; vertical-align:bottom }
.rotor > span { grid-area:1 / 1; color:var(--accent); transform:translateY(105%); opacity:0; transition:transform .7s var(--ease), opacity .5s var(--ease) }
.rotor > span.on, .rotor:not(:has(.on)) > span:first-child { transform:none; opacity:1 }
.hero-sub { max-width:44ch; margin-top:22px; font-size:clamp(16px, 1.25vw, 18px); line-height:1.6; color:var(--muted); text-wrap:pretty }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px }
.term { display:flex; align-items:center; gap:10px; max-width:500px; height:46px; margin-top:18px; padding:0 5px 0 16px; border-radius:var(--radius-s); background:var(--code-bg); color:var(--code-fg); border:1px solid var(--code-line); box-shadow:var(--shadow) }
.term-prompt { flex:none; color:var(--accent); font-family:var(--mono) }
.pill-line { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:400 12.5px/1 var(--mono) }
.icopy { position:relative; flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:9px; color:var(--code-dim); transition:color .15s, background-color .15s }
.icopy:hover { color:#fff; background:rgb(255 255 255 / .08) }
.icopy svg { grid-area:1 / 1; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:opacity .25s var(--ease), transform .25s var(--ease) }
.icopy-b, .icopy[data-copied] .icopy-a { opacity:0; transform:scale(.4) }
.icopy[data-copied] .icopy-b { opacity:1; transform:none; stroke:var(--accent) }

.hero-fig { position:relative; min-width:0 }
.stage-box { position:relative; z-index:1; width:100%; max-width:680px; margin-left:auto }
.leader { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.leader path { fill:none; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:3 3; vector-effect:non-scaling-stroke }
.leader circle { fill:var(--accent) }
/* the read-out grows leftward from the stage's right edge, over the leader's end, so long model ids stay inside */
.callout { position:absolute; right:0; top:11.5%; display:grid; gap:2px; min-width:23.5%; padding:9px 13px; border-radius:12px; pointer-events:none }
.callout-k { display:flex; align-items:center; gap:8px; font:600 clamp(12px, 1vw, 14px)/1.2 var(--mono); letter-spacing:-.02em; color:var(--ink); white-space:nowrap }
.callout-v { padding-left:15px; font-size:11.5px; color:var(--muted) }
.tag { position:absolute; padding:4px 9px; border-radius:999px; font:500 10.5px/1 var(--mono); letter-spacing:.04em; color:var(--ink-2); white-space:nowrap; pointer-events:none }
.tag-c1 { left:14%; top:21% }
.tag-c2 { left:79.5%; top:61.5% }
.tag-c3 { left:2%; top:71% }
.tag-ledger { left:57%; top:81.5% }
.hero-hint { position:relative; z-index:1; display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:4px; font:400 11.5px/1.4 var(--mono); color:var(--faint) }
.hero-hint .fig-read { color:var(--ink-2) }
.theme-toggle { position:absolute; top:calc(clamp(40px, 6vw, 80px) - 4px); right:var(--gutter); z-index:5 }
.theme-toggle svg path { fill:currentColor; stroke:none }
.scroll-btn { position:absolute; left:50%; bottom:18px; z-index:5; translate:-50% 0 }

/* Providers */
.providers { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 32px; padding:22px var(--gutter); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2) }
#providers:not([data-providers-visible]) { display:none }
.providers-label { font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.marquee, .marquee-track { display:contents }
.logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 32px }
.logo { width:auto; height:22px; color:var(--ink) }

/* Numbers: one strip */
.stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:44px; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.stat { min-width:0; padding:22px 24px 24px }
.stat + .stat { border-left:1px solid var(--line-2) }
.stat-v { font-size:clamp(28px, 2.8vw, 40px); font-weight:650; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums }
.stat-k { margin-top:10px; font-size:13.5px; line-height:1.45; color:var(--muted) }

/* Bento */
.bento { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:12px; margin-top:12px }
.tile { grid-column:span 5; display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2);
  transition:transform .3s var(--ease), box-shadow .3s }
.tile-wide { grid-column:span 7 }
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
/* tiles and persona cards share one stage height, so captions line up across a row */
.tile .fig-stage, .persona .fig-stage { aspect-ratio:auto; height:clamp(220px, 21vw, 300px) }
.tile-body { padding:4px 24px 26px }
.tile-text { margin-top:8px; max-width:52ch; font-size:14.5px; line-height:1.6; color:var(--muted); text-wrap:pretty }

/* Figures: hairline stages themed to the page */
.fig { position:relative; min-width:0 }
.fig-stage { position:relative; width:100%; aspect-ratio:5 / 4; --hairline-plate:var(--plate); --hairline-hi:var(--accent); --hairline-edge:var(--ink);
  --hairline-mid:var(--fig-mid); --hairline-lo:var(--fig-lo); --hairline-stroke:1 }
.hero-fig .fig-stage { --hairline-plate:var(--bg) }
/* no gradients: hairline fades a figure's reflection through a gradient mask, so reflections are left out */
.fig-stage .ghost { display:none }
.fig-cap { display:flex; align-items:baseline; gap:12px; padding:6px 24px 12px; font:400 11.5px/1.5 var(--mono); color:var(--faint) }
.fig-n { flex:none; letter-spacing:.04em; text-transform:uppercase }
.fig-text { flex:1; min-width:0; color:var(--muted); text-wrap:pretty }
.fig-read { flex:none; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.fig-read:not(:empty)::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--accent); vertical-align:1px }
.fig-card { overflow:hidden; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.fig-card .fig-stage { aspect-ratio:4 / 3 }
.fig-card .fig-cap { padding:6px 20px 14px }

/* Developers */
.split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 460px); align-items:center; gap:clamp(28px, 5vw, 80px) }
.doc-links { margin-top:24px; font-size:15px }
.guides { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; font-size:14px }
.guides a { color:var(--muted); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; transition:color .15s, text-decoration-color .15s }
.guides a:hover { color:var(--ink); text-decoration-color:var(--accent) }
.code { margin-top:44px; overflow:hidden; border-radius:var(--radius); background:var(--code-bg); color:var(--code-fg); border:1px solid var(--code-line); box-shadow:var(--shadow) }
.code-bar { display:flex; align-items:center; gap:10px; padding:9px 9px 9px 11px; border-bottom:1px solid var(--code-line) }
.code-tabs { position:relative; display:flex; gap:2px; padding:4px; border-radius:999px; background:rgb(255 255 255 / .05); isolation:isolate }
.code-tabs [role="tab"] { position:relative; z-index:1; height:30px; padding:0 14px; border-radius:999px; color:#a39f97; font-size:13px; font-weight:560; transition:color .15s }
.code-tabs [role="tab"]:hover, .code-tabs [role="tab"][aria-selected="true"] { color:#fff }
.code-tabs [role="tab"][aria-selected="true"] { background:rgb(255 255 255 / .12) }
.fb-tabs-ready [role="tab"][aria-selected="true"] { background:none }
.fb-tab-indicator { position:absolute; z-index:0; top:4px; left:0; width:0; height:30px; border-radius:999px; background:rgb(255 255 255 / .12); transition:transform .25s var(--ease), width .25s var(--ease); pointer-events:none }
.code-title { flex:1; text-align:right; font:400 12px/1 var(--mono); color:var(--code-dim) }
.code-copy { flex:none; min-width:74px; height:32px; padding:0 14px; border-radius:999px; background:rgb(255 255 255 / .08); color:#e3dfd8; font-size:13px; font-weight:560; transition:background-color .15s, color .15s }
.code-copy:hover { background:rgb(255 255 255 / .14) }
.code-copy[data-copy-state="copied"] { color:var(--accent) }
.code-body { margin:0; padding:22px 24px; overflow-x:auto; font:400 13px/1.85 var(--mono) }
.code-body code { display:block; min-height:11.1em; counter-reset:line; font:inherit }
.code-body code > span { display:block; white-space:pre }
.code-body code > span::before { counter-increment:line; content:counter(line); display:inline-block; width:2ch; margin-right:20px; text-align:right; color:var(--code-dim); user-select:none }
.code-note { padding:13px 24px 16px; border-top:1px solid var(--code-line); font-size:13px; color:var(--code-dim) }

/* Quick start */
.qs-key { max-width:540px; margin-top:28px }
.qs-key-label { display:block; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.qs-key-row { display:flex; align-items:center; gap:10px; height:50px; margin-top:12px; padding:0 6px 0 16px; border-radius:var(--radius-s); background:var(--code-bg); color:var(--code-fg); border:1px solid var(--code-line); box-shadow:var(--shadow) }
.qs-key-row:focus-within { outline:2px solid var(--accent); outline-offset:2px }
.qs-key-row .term-prompt { font-size:13px }
.qs-key-input { flex:1; min-width:0; height:100%; padding:0; border:0; outline:none; background:transparent; color:inherit; font:400 13.5px/1 var(--mono) }
.qs-key-input::placeholder { color:#78746d }
.qs-key-toggle { flex:none; height:38px; padding:0 14px; border-radius:9px; background:rgb(255 255 255 / .08); color:#e3dfd8; font-size:13px; font-weight:560 }
.qs-key-toggle:hover { background:rgb(255 255 255 / .14) }
.qs-key-status { min-height:1.6em; margin-top:12px; font-size:14px; color:var(--muted) }
.qs-key-status[data-key-state="valid"] { color:var(--ink) }
.qs-key-status[data-key-state="valid"]::before { content:""; display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:var(--led); vertical-align:1px }
.qs-key-status[data-key-state="invalid"] { color:#d23a1c }
.qs-key-create { margin-top:4px; font-size:14px }
.qs-tabs { position:relative; display:flex; gap:2px; width:max-content; max-width:100%; margin-top:52px; padding:4px; overflow-x:auto; border-radius:999px; background:var(--bg-2); border:1px solid var(--line-2); isolation:isolate; scrollbar-width:none }
.qs-tabs::-webkit-scrollbar { display:none }
.qs-tabs [role="tab"] { position:relative; z-index:1; flex:none; height:36px; padding:0 18px; border-radius:999px; color:var(--muted); font-size:14px; font-weight:560; white-space:nowrap; transition:color .15s }
.qs-tabs [role="tab"]:hover, .qs-tabs [role="tab"][aria-selected="true"] { color:var(--ink) }
.qs-tabs [role="tab"][aria-selected="true"] { background:var(--tile); box-shadow:var(--shadow) }
.fb-qs-tabs-ready [role="tab"][aria-selected="true"] { background:none; box-shadow:none }
.fb-qs-indicator { position:absolute; z-index:0; top:4px; left:0; width:0; height:36px; border-radius:999px; background:var(--tile); box-shadow:0 1px 2px rgb(0 0 0 / .06), 0 6px 16px -8px rgb(0 0 0 / .25); transition:transform .25s var(--ease), width .25s var(--ease); pointer-events:none }
.qs-methods { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap:12px; margin-top:18px }
.fb-qs-method { display:flex; flex-direction:column; gap:12px; min-width:0; padding:22px 24px 24px; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.fb-qs-method:has(> .fb-qs-code), .fb-qs-method:last-child:nth-child(odd):not(:first-child), .fb-qs-method:has(+ .fb-qs-method > .fb-qs-code) { grid-column:1 / -1 }
.fb-qs-method-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px }
.fb-qs-step { font:500 12px/1 var(--mono); color:var(--accent) }
.fb-qs-method-title { font-size:16px; font-weight:620; letter-spacing:-.02em }
.fb-qs-file { padding:4px 10px; border-radius:999px; background:var(--bg-2); font:400 12px/1 var(--mono); color:var(--muted) }
.fb-qs-copy { flex:none; min-width:68px; height:32px; margin-left:auto; padding:0 13px; border-radius:999px; background:var(--bg-2); color:var(--ink-2); font-size:13px; font-weight:560; transition:background-color .15s, color .15s }
.fb-qs-copy:hover { background:var(--line) }
.fb-qs-copy[data-copy-state="copied"] { color:var(--accent-ink) }
.fb-qs-method-desc { max-width:80ch; font-size:14.5px; line-height:1.65; color:var(--muted) }
.fb-qs-code { margin:0; padding:15px 17px; overflow-x:auto; border-radius:var(--radius-s); background:var(--code-bg); color:var(--code-fg); font:400 12.5px/1.85 var(--mono); white-space:pre }
.fb-qs-open { align-self:flex-start; height:40px; padding:0 20px; border-radius:999px; color:#fff; background:var(--accent); font-size:14px; font-weight:560; transition:opacity .15s, background-color .2s, transform .18s var(--ease) }
.fb-qs-open:active { transform:scale(.97) }
.fb-qs-open:disabled { opacity:.3; cursor:not-allowed; transform:none }
.fb-qs-hint { font-size:13px; color:var(--faint) }
.qs-note { max-width:96ch; margin-top:16px; font-size:13px; line-height:1.7; color:var(--faint) }

/* Catalog: a model board. The list compares; the inspector holds the model you picked. */
.board { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 340px); align-items:start; gap:12px; margin-top:44px }
.board-list { min-width:0; overflow:hidden; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.board-head, .row { display:grid; grid-template-columns:minmax(0, 2.4fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, .9fr); align-items:center; gap:16px; padding:0 22px }
.board-head { height:42px; border-bottom:1px solid var(--line-2); font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.board-head span:nth-child(n+4) { text-align:right }
.rows li + li { border-top:1px solid var(--line-2) }
.row { width:100%; min-height:72px; text-align:left; transition:background-color .15s, box-shadow .15s }
.row:hover { background:var(--tile-2) }
.row[aria-pressed="true"] { background:var(--bg-2); box-shadow:inset 3px 0 0 var(--accent) }
.row:focus-visible { outline-offset:-2px; border-radius:0 }
.row-model { display:flex; align-items:center; gap:14px; min-width:0 }
.vmark { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bg); border:1px solid var(--line-2); color:var(--ink); font:600 14px/1 var(--sans) }
.vmark svg { width:17px; height:17px }
.row-names { display:grid; gap:5px; min-width:0 }
.row-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15.5px; font-weight:620; letter-spacing:-.02em }
.row-id { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 12px/1.2 var(--mono); color:var(--muted) }
.row-vendor::before { content:"·"; margin:0 7px; color:var(--faint) }
.row-ctx { font:500 12.5px/1 var(--mono); color:var(--ink-2); white-space:nowrap }
/* a model's own saving, as a flat tag */
.row-save, .insp-save { justify-self:start; padding:4px 8px; border-radius:999px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-ink); font:600 12px/1 var(--mono); letter-spacing:-.01em; white-space:nowrap; font-variant-numeric:tabular-nums }
.row-price { display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; font-variant-numeric:tabular-nums }
.price-now { font-size:16px; font-weight:650; letter-spacing:-.02em }
.price-list { font:400 11.5px/1 var(--mono); color:var(--faint); text-decoration:line-through }
.inspector { position:sticky; top:80px; display:grid; gap:18px; min-width:0; padding:22px; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.fb-embedded .inspector { top:20px }
.insp-top { display:flex; align-items:center; gap:12px }
.vmark-l { width:42px; height:42px; border-radius:12px }
.vmark-l svg { width:21px; height:21px }
.insp-kicker { display:grid; gap:6px; min-width:0; font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.insp-vendor { color:var(--ink) }
.insp-top .led { margin-left:auto }
.insp-name { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:26px; font-weight:650; line-height:1.1; letter-spacing:-.04em }
.insp-save { font-size:13px; letter-spacing:0 }
.insp-id { display:flex; align-items:center; gap:8px; height:42px; padding:0 5px 0 14px; border-radius:var(--radius-s); background:var(--code-bg); color:var(--code-fg); border:1px solid var(--code-line) }
.insp-id code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 12.5px/1 var(--mono) }
.insp-copy { flex:none; height:32px; padding:0 12px; border-radius:8px; background:rgb(255 255 255 / .08); color:#e3dfd8; font-size:12.5px; font-weight:560; white-space:nowrap; transition:background-color .15s, color .15s }
.insp-copy:hover { background:rgb(255 255 255 / .14) }
.insp-copy[data-copy-state="copied"] { color:var(--accent) }
.insp-specs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2) }
.insp-specs > div { min-width:0; padding:14px 0 }
.insp-specs > div + div { padding-left:14px; border-left:1px solid var(--line-2) }
.insp-specs dt { font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.insp-specs dd { display:grid; gap:5px; margin-top:8px; font-size:17px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.insp-specs .price-list { font-weight:400 }
.insp-more { font-size:14px }
.board-note { max-width:96ch; margin-top:16px; font-size:12.5px; line-height:1.7; color:var(--faint) }

/* Pricing: the head carries the largest saving; the board below gives every model's own */
.section > .price-head > .lede { grid-column:1; grid-row:auto; align-self:start; margin-top:16px; padding:0 }
.section > .price-head > .fb-discount-lockup { grid-column:2; grid-row:1 / span 3; align-self:end; justify-self:end }
.fb-discount-lockup { display:grid; justify-items:end; gap:10px; text-align:right }
.fb-discount-eyebrow, .fb-discount-caption { font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.fb-discount-figure { display:flex; align-items:flex-end; gap:12px }
.fb-discount-value { font-size:clamp(76px, 9vw, 136px); font-weight:650; line-height:.78; letter-spacing:-.07em; white-space:nowrap; color:var(--accent); font-variant-numeric:tabular-nums }
.fb-discount-detail { display:grid; justify-items:start; gap:8px; padding-bottom:4px; text-align:left }
.fb-discount-unit { font-size:clamp(26px, 2.8vw, 38px); font-weight:650; line-height:1; letter-spacing:-.04em; color:var(--accent) }
.fb-discount-qualifier { max-width:9em; font:500 11.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }

/* For everyone */
.panel { min-width:0; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.personas { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:44px }
.persona { display:flex; flex-direction:column; overflow:hidden }
.persona-body { padding:4px 26px 28px }
.persona-sub { margin-top:6px; font-size:14.5px; color:var(--muted) }
.checks { display:grid; gap:9px; margin-top:18px }
.checks li { position:relative; padding-left:28px; font-size:14.5px; line-height:1.6; color:var(--ink-2); text-wrap:pretty }
.checks li::before { content:""; position:absolute; top:.25em; left:0; width:18px; height:18px; border-radius:50%; background:color-mix(in srgb, var(--accent) 14%, transparent) }
.checks li::after { content:""; position:absolute; top:calc(.25em + 5px); left:6.5px; width:4.5px; height:7.5px; border-right:1.7px solid var(--accent); border-bottom:1.7px solid var(--accent); transform:rotate(45deg) }
.persona-cta { margin-top:22px; font-size:14.5px }
.steps { margin-top:52px }
.howto { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:18px }
.howto li { min-width:0; padding:22px 24px 24px; border-radius:var(--radius); background:var(--tile); border:1px solid var(--line-2) }
.howto-n { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--bg); font:600 12px/1 var(--mono) }
.howto-t { margin-top:18px; font-size:17px; font-weight:620; letter-spacing:-.025em }
.howto-p { margin-top:6px; font-size:14.5px; line-height:1.6; color:var(--muted); text-wrap:pretty }

/* Start: the close, as one panel inside the measure */
.section.start { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); align-items:center; gap:clamp(28px, 5vw, 72px); margin:0 var(--gutter) clamp(64px, 8vw, 112px);
  padding:clamp(28px, 5vw, 64px); overflow:hidden; border-radius:28px; background:var(--tile); border:1px solid var(--line-2) }
.start .fig-card { background:var(--bg) }
.start .fig-card .fig-stage { --hairline-plate:var(--bg) }
.start-title { font-size:clamp(32px, 3.8vw, 56px) }
.start .lede { max-width:46ch }
.start-cta { margin-top:28px }

/* Footer: an oversized wordmark */
.colophon { overflow:hidden; padding:0 var(--gutter) }
.colophon-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:24px 0; border-top:1px solid var(--line) }
.brand-foot { font-size:14px }
.credit { font-size:12.5px; color:var(--faint) }
.bigword { margin:0 0 -.2em; font-size:clamp(64px, 21vw, 320px); font-weight:700; line-height:.9; letter-spacing:-.075em; white-space:nowrap; text-align:center; color:var(--ink); opacity:.06; user-select:none }

/* Reveal: once, as a block enters */
.js [data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:min(var(--reveal-delay, 0ms), 180ms) }
.js [data-reveal].in, .js [data-reveal]:focus-within { opacity:1; transform:none }

@media (max-width:1080px) {
  .hero-grid, .split, .section.start, .board { grid-template-columns:minmax(0, 1fr) }
  .section > .price-head > .fb-discount-lockup { grid-column:1; grid-row:auto; justify-self:start; justify-items:start; margin-top:28px; text-align:left }
  .section > .sec-head { grid-template-columns:minmax(0, 1fr) }
  .section > .sec-head > .lede { grid-column:1; grid-row:auto; margin-top:16px; padding:0 }
  .stage-box { margin:0 auto }
  .tile, .tile-wide { grid-column:span 6 }
  .inspector { position:static }
}
@media (max-width:720px) {
  .stats { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .stat:nth-child(3) { border-left:0 }
  .stat:nth-child(n+3) { border-top:1px solid var(--line-2) }
  .tile, .tile-wide { grid-column:1 / -1 }
  .personas, .howto { grid-template-columns:minmax(0, 1fr) }
  .tag, .callout, .leader { display:none }
  .code-title { display:none }
  .code-tabs [role="tab"] { padding:0 11px }
  .code-copy { min-width:0 }
  .qs-tabs { width:auto }
  .hero-cta .btn { flex:1 1 auto }
  .theme-toggle { top:calc(clamp(40px, 6vw, 80px) - 4px) }
  .board-head { display:none }
  .board-head + .rows li:first-child { border-top:0 }
  .row { grid-template-columns:minmax(0, 1fr) auto; min-height:68px; padding:0 16px }
  .row-ctx, .row-out, .row-save { display:none }
  .section.start { margin-inline:12px; padding:28px 20px }
}
@media (prefers-reduced-motion:reduce) {
  .js [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important }
  .rotor > span { transition:none }
  .pulse::after { animation:none }
  .fb-tab-indicator, .fb-qs-indicator, .icopy svg, .tile, .row { transition:none }
  .btn:active, .fb-qs-open:active { transform:none }
}