/* ============================================================================
Nux — thenux.app
Dark by default; light is an explicit, persisted choice (see /js/theme.js).
The accent means DEVIATION and nothing else: healthy values render in ink.
========================================================================= */
@font-face{font-family:"PlexC";src:url(/fonts/plexcond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"PlexC";src:url(/fonts/plexcond-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plexsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plexsans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Mono";src:url(/fonts/mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mono";src:url(/fonts/mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--accent);color:var(--bg)}
:where(a,button,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.u-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.75rem)}
/* theme toggle, shared shape across all three designs */
.tt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);
background:transparent;color:var(--soft);cursor:pointer;padding:6px 10px;
font-family:"Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
border-radius:var(--tr,0)}
.tt:hover{color:var(--ink);border-color:var(--ink)}
.tt__d{width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;
background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
/* D4 · MIX — D1's hairline grid + D3's accent blocks and heavy outer rules + D2's generous lede */
:root{
--bg:#0A0B0D; --panel:#101216; --panel2:#15181D;
--ink:#EDEEF0; --soft:#9BA1AB; --faint:#7B818C;
--line:#212429; --line-2:#2E323A;
--accent:#FF6B2C; --good:#35C98A;
--tr:0;
}
html[data-theme="light"]{
--bg:#FFFFFF; --panel:#FAFAFA; --panel2:#F2F3F5;
--ink:#0C0E11; --soft:#4E545E; --faint:#5F656D;
--line:#E4E6EA; --line-2:#CFD3D9;
--accent:#B83C08; --good:#0E7A55;
}
body{font-family:"Plex",system-ui,sans-serif}
.bar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.bar__in{display:flex;align-items:stretch;height:56px}
.bar__brand{display:flex;align-items:center;gap:10px;padding-right:26px;border-right:1px solid var(--line)}
.wm{font-family:"PlexC";font-weight:700;font-size:20px;letter-spacing:-.015em}
.bar__nav{display:flex;align-items:stretch}
.bar__nav a{display:flex;align-items:center;padding:0 20px;border-right:1px solid var(--line);
font-family:"Mono";font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.bar__nav a:hover{color:var(--ink);background:var(--panel)}
/* inset shadow, not a border: a border would resize the cell and shift the row */
.bar__nav a[aria-current]{color:var(--ink);background:var(--panel);
box-shadow:inset 0 -2px 0 var(--accent)}
.bar__sp{flex:1;border-right:1px solid var(--line)}
.bar__end{display:flex;align-items:center;gap:12px;padding-left:20px}
.cta{font-family:"PlexC";font-weight:600;font-size:14.5px;letter-spacing:.005em;
background:var(--accent);color:var(--bg);padding:8px 16px;border:1px solid var(--accent)}
.cta:hover{background:transparent;color:var(--accent)}
.cta--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.cta--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
/* hero on a visible grid */
.hero{border-bottom:1px solid var(--line)}
.hero__in{display:grid;grid-template-columns:1fr 1.02fr}
.hero__l{padding:56px 44px 48px 0;border-right:1px solid var(--line)}
.hero__r{padding:56px 0 48px 44px}
.kicker{font-family:"Mono";font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
h1{font-family:"PlexC";font-weight:700;font-size:clamp(2.7rem,1.5rem + 4vw,4.7rem);
line-height:.97;letter-spacing:-.03em;margin-top:18px;text-wrap:balance}
.lede{margin-top:22px;color:var(--soft);font-size:1.12rem;line-height:1.62;max-width:42ch;text-wrap:pretty}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;align-items:center}
.tlink{font-family:"Mono";font-size:12px;letter-spacing:.06em;color:var(--soft);
border-bottom:1px solid var(--line-2);padding-bottom:2px;margin-left:6px}
.tlink:hover{color:var(--accent);border-color:var(--accent)}
.trust{margin-top:22px;font-family:"Mono";font-size:11px;color:var(--faint);letter-spacing:.03em}
/* readout panel — hairlines, never a floating card */
.readout{border:2px solid var(--ink);background:var(--panel)}
.readout__h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--panel2);
font-family:"Mono";font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.dot{width:6px;height:6px;background:var(--good)}
.readout__q{padding:12px 14px;border-bottom:1px solid var(--line);font-family:"Mono";
font-size:12.5px;color:var(--ink);background:var(--panel2)}
.readout__q::before{content:"> ";color:var(--faint)}
.rrow{display:flex;justify-content:space-between;gap:16px;padding:9px 14px;border-bottom:1px solid var(--line)}
.rrow__k{font-size:13.5px;color:var(--soft)}
.rrow__v{font-family:"Mono";font-size:13px;font-weight:500}
.up{color:var(--good)} .bad{color:var(--accent)}
.readout__f{padding:10px 14px;font-family:"Mono";font-size:11px;color:var(--faint)}
/* sections as labelled bands */
.band{border-bottom:1px solid var(--line)}
.band__in{display:grid;grid-template-columns:190px 1fr;gap:0}
.band__lab{padding:38px 24px 38px 0;border-right:1px solid var(--line)}
.tagblock{display:inline-block;background:var(--accent);color:var(--bg);
font-family:"PlexC";font-weight:700;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;padding:4px 9px}
.band__body{padding:38px 0 38px 44px}
h2{font-family:"PlexC";font-weight:700;font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);
letter-spacing:-.02em;line-height:1.08}
.band__lede{margin-top:16px;color:var(--soft);max-width:56ch;font-size:1.06rem;line-height:1.62}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border:2px solid var(--ink)}
.two>div{padding:20px}
.two>div+div{border-left:1px solid var(--line)}
.note{border:2px solid var(--accent);background:var(--panel);padding:17px}
.note__h{display:flex;gap:8px;align-items:center;font-family:"Mono";font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.note__t{font-family:"PlexC";font-weight:600;font-size:1.08rem}
.note__b{font-family:"Mono";font-size:12.5px;color:var(--soft);margin-top:7px;line-height:1.55}
.spec{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line)}
.spec:last-child{border-bottom:0}
.spec dt{font-size:13.5px;color:var(--soft)}
.spec dd{font-family:"Mono";font-size:12.5px}
.cmds{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);margin-top:26px}
.cmd{padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cmd:nth-child(3n){border-right:0}
.cmd:nth-last-child(-n+3){border-bottom:0}
.cmd__n{font-family:"Mono";font-size:12.5px;font-weight:500;color:var(--accent)}
.cmd__d{font-size:13.2px;color:var(--soft);margin-top:6px;line-height:1.5}
.foot{padding:34px 0 46px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;
font-family:"Mono";font-size:11.5px;color:var(--faint)}
.foot a{color:var(--soft)} .foot a:hover{color:var(--ink)}
.foot a.foot__brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.foot__sp{flex:1}
@media (max-width:900px){
.hero__in,.band__in,.two,.cmds{grid-template-columns:1fr}
.hero__l{border-right:0;padding:36px 0 26px}
.hero__r{padding:0 0 40px}
.band__lab{border-right:0;border-bottom:1px solid var(--line);padding:22px 0 12px}
.band__body{padding:22px 0 34px}
.two>div+div{border-left:0;border-top:1px solid var(--line)}
.cmd{border-right:0}
/* the nav does NOT disappear on a phone: the header becomes two rows, so the
same four destinations are reachable at every width. */
.bar__in{flex-wrap:wrap;height:auto}
.bar__brand{height:52px;padding-right:16px}
.bar__brand .wm{font-size:17px}
.bar__sp{height:52px}
.bar__end{height:52px;padding-left:14px}
.bar__end .cta{font-size:13.5px;padding:7px 12px}
.bar__nav{order:3;flex:0 0 100%;height:38px;border-top:1px solid var(--line)}
.bar__nav a{flex:1;justify-content:center;padding:0 6px;font-size:10px;letter-spacing:.06em}
.bar__nav a:last-child{border-right:0}
}
@media (max-width:400px){
/* at 320px the brand + toggle + CTA overflow and the first row wraps to a
143px header. The toggle's word is the cheapest thing to drop: the dot and
its aria-label carry the control, and the CTA stays reachable. */
.tt__l{display:none}
.tt{padding:6px 8px}
}
.rsp{flex:1}
.wm--sm{font-size:16px}
/* ── F1 additions: E1's ledger rows as the data language throughout ───────── */
.ledger{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
padding:9px 0;border-bottom:1px solid var(--line)}
.lrow__k{font-size:13.5px;color:var(--soft)}
.lrow__v{font-family:"Mono";font-size:12.5px;font-weight:500;text-align:right;white-space:nowrap}
.lrow--cmd{grid-template-columns:190px 1fr;gap:22px}
.lrow--cmd .lrow__k{font-family:"Mono";font-size:12.5px;color:var(--accent)}
.lrow--cmd .lrow__v{font-family:var(--body,"Plex");font-weight:400;font-size:13.5px;
color:var(--soft);text-align:left;white-space:normal;line-height:1.5}
.up{color:var(--good)} .bad{color:var(--accent)}
/* the hero readout, in the same ledger language but framed */
.rdt{border:2px solid var(--ink);background:var(--panel)}
.rdt__h{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel2);
border-bottom:2px solid var(--ink);font-family:"Mono";font-size:10.5px;
letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.rdt__q{padding:11px 14px;font-family:"Mono";font-size:12.5px;color:var(--accent);
border-bottom:1px solid var(--line)}
.rdt .lrow{padding:8px 14px;border-bottom:1px solid var(--line)}
.rdt .lrow:last-of-type{border-bottom:0}
.rdt__f{padding:9px 14px;border-top:1px solid var(--line);font-family:"Mono";
font-size:10.5px;color:var(--faint)}
.dot{width:6px;height:6px;background:var(--good)}
.rsp{flex:1}
.close{padding-block:52px;border-top:1px solid var(--ink);text-align:left}
.close h2{max-width:18ch}
.close .acts{margin-top:24px}
/* ══ F2 media ══════════════════════════════════════════════════════════════ */
/* hero plot grid — a technical ground, not decoration. Costs no bytes. */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
linear-gradient(to bottom,var(--line) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(120% 90% at 78% 34%,#000 0%,transparent 72%);
mask-image:radial-gradient(120% 90% at 78% 34%,#000 0%,transparent 72%);
opacity:.85}
.hero__in{position:relative;z-index:1}
/* ── the device ─────────────────────────────────────────────────────────── */
.dev{--w:300px;width:var(--w);margin-inline:auto;position:relative}
.dev::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:38px;
background:radial-gradient(60% 100% at 50% 0%,rgba(255,107,44,.20),transparent 70%);
filter:blur(10px);pointer-events:none}
.dev__body{position:relative;border:2px solid var(--ink);border-radius:42px;
background:var(--panel2);padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.dev__island{position:absolute;top:20px;left:50%;transform:translateX(-50%);
width:84px;height:24px;border-radius:13px;background:var(--ink);z-index:3}
.dev__screen{border-radius:32px;overflow:hidden;background:var(--tg-bg);
height:598px;display:flex;flex-direction:column}
/* a stylised chat client, not a pixel copy of one */
:root{--tg-bg:#0E1319;--tg-bar:#161D26;--tg-in:#1B242F;--tg-out:#2A4257;--tg-ink:#E8ECF1;--tg-soft:#8D9AA8}
html[data-theme="light"]{--tg-bg:#EEF2F6;--tg-bar:#FFFFFF;--tg-in:#FFFFFF;--tg-out:#D6E7F7;--tg-ink:#12171D;--tg-soft:#5E6873}
.tg__bar{display:flex;align-items:center;gap:9px;padding:26px 13px 10px;background:var(--tg-bar);
border-bottom:1px solid rgba(255,255,255,.06);flex:none}
.tg__av{width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.tg__nm{font-size:13px;font-weight:600;color:var(--tg-ink);line-height:1.15}
.tg__st{font-size:10.5px;color:var(--accent);font-family:"Mono"}
.tg__thread{flex:1;overflow:hidden;padding:12px 11px;display:flex;flex-direction:column;gap:8px}
.tg{max-width:88%;padding:8px 11px;border-radius:13px;font-size:12px;line-height:1.45;color:var(--tg-ink)}
.tg--out{align-self:flex-end;background:var(--tg-out);border-bottom-right-radius:4px;
font-family:"Mono";font-size:11.5px}
.tg--in{align-self:flex-start;background:var(--tg-in);border-bottom-left-radius:4px}
.tg__t{font-weight:600;font-size:12.5px}
.tg__sub{font-family:"Mono";font-size:10px;color:var(--tg-soft);margin-top:2px}
.tg__kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:7px;
font-family:"Mono";font-size:10.5px}
.tg__kv span:nth-child(odd){color:var(--tg-soft)}
.tg__kv span:nth-child(even){text-align:right}
.tg--alert{border-left:2px solid var(--accent)}
.tg__time{font-family:"Mono";font-size:9px;color:var(--tg-soft);text-align:right;margin-top:5px}
.tg__comp{flex:none;padding:9px 12px 14px;background:var(--tg-bar);display:flex;align-items:center;gap:9px}
.tg__field{flex:1;height:28px;border-radius:14px;background:var(--tg-in);display:flex;align-items:center;
padding:0 12px;font-size:11.5px;color:var(--tg-soft)}
.tg__send{width:26px;height:26px;border-radius:50%;background:var(--accent);flex:none}
/* ── the deviation chart: real numbers, drawn ───────────────────────────── */
.chart{width:100%;height:150px;display:block;margin-top:10px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--soft);stroke-width:1.25;stroke-dasharray:3 3}
.chart .ser{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .hit{fill:var(--accent)}
.chart .lbl{fill:var(--faint);font-family:"Mono";font-size:8px;letter-spacing:.06em}
.chart .lbl--hot{fill:var(--accent)}
.chartcell{padding:18px 20px 12px}
.ledger--wide{margin-top:22px;border-top:1px solid var(--line)}
.ledger--wide .lrow{padding:9px 0}
.chartwrap__h{display:flex;justify-content:space-between;font-family:"Mono";font-size:10px;
letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
/* entrance: opacity and transform only, and reduced-motion keeps the meaning */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.23,1,.32,1),
transform .6s cubic-bezier(.23,1,.32,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
.dev::after{display:none}}
@media (max-width:900px){
.dev{--w:270px}
.dev__screen{height:490px}
.hero::before{background-size:48px 48px}
}
/* ══ F3 ══ two devices, an animated thread, a response preview ═══════════ */
.devs{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;
min-height:670px;padding-top:8px;padding-right:98px;perspective:1400px}
.dev{position:relative}
.dev--tg{z-index:2}
.dev--ln{position:absolute;top:44px;left:57%;z-index:1;--w:238px;
transform:rotate(5deg);transform-origin:bottom left;opacity:.96}
.dev--ln .dev__screen{height:472px;border-radius:26px}
.dev--ln .dev__body{border-radius:34px;padding:8px}
.dev--ln .dev__island{width:66px;height:19px;top:16px}
.dev--ln::after{display:none}
/* LINE-flavoured surface: light ground, green send */
.ln{--l-bg:#8FA9C4;--l-bar:#F4F6F8;--l-in:#FFFFFF;--l-out:#8DE05A;--l-ink:#1A1D21;--l-soft:#575F6C}
html[data-theme="light"] .ln{--l-bg:#A9C0D8}
.ln .dev__screen{background:var(--l-bg)}
.ln .tg__bar{background:var(--l-bar);border-bottom:1px solid rgba(0,0,0,.07)}
.ln .tg__nm{color:var(--l-ink)} .ln .tg__st{color:#0B6B2E}
.ln .tg__av{background:#06C755}
.ln .tg{color:var(--l-ink)}
.ln .tg--in{background:var(--l-in)}
.ln .tg--out{background:var(--l-out);font-family:inherit;font-size:12px}
.ln .tg__sub,.ln .tg__time{color:var(--l-soft)}
.ln .tg__kv span:nth-child(odd){color:var(--l-soft)}
.ln .tg__comp{background:var(--l-bar)}
.ln .tg__field{background:#E7EBEF;color:var(--l-soft)}
.ln .tg__send{background:#06C755}
.ln .tg--alert{border-left-color:#E5484D}
/* the thread plays in, message by message */
.tg.step{opacity:0;transform:translateY(9px) scale(.985);
transition:opacity .34s cubic-bezier(.23,1,.32,1),transform .34s cubic-bezier(.23,1,.32,1)}
.tg.step.on{opacity:1;transform:none}
.typing{align-self:flex-start;display:inline-flex;gap:4px;padding:10px 12px;border-radius:13px;
background:var(--tg-in);border-bottom-left-radius:4px;opacity:0;transition:opacity .2s}
.ln .typing{background:var(--l-in)}
.typing.on{opacity:1}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--tg-soft);display:block;
animation:bob 1.1s ease-in-out infinite}
.ln .typing i{background:var(--l-soft)}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
/* response preview in the Commands section */
.prev{border:2px solid var(--ink);background:var(--panel);display:flex;flex-direction:column}
.prev__h{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--panel2);
border-bottom:2px solid var(--ink);font-family:"Mono";font-size:10.5px;
letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.prev__q{padding:11px 13px;font-family:"Mono";font-size:12.5px;border-bottom:1px solid var(--line);
color:var(--accent);display:flex;align-items:center;gap:6px}
.prev__q b{font-weight:400;color:var(--faint)}
.caret{width:7px;height:14px;background:var(--accent);display:inline-block;
animation:blink 1.05s steps(2,start) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.prev .lrow{padding:8px 13px}
.prev__f{padding:9px 13px;border-top:1px solid var(--line);font-family:"Mono";
font-size:10.5px;color:var(--faint)}
.cmdgrid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start;margin-top:22px}
@media (prefers-reduced-motion:reduce){
.tg.step{opacity:1;transform:none} .typing{display:none} .caret{animation:none}
}
@media (max-width:1100px){ .dev--ln{display:none} .devs{min-height:auto} }
@media (max-width:900px){ .cmdgrid{grid-template-columns:1fr} }
.devcap{margin-top:32px;padding-left:14px;font-family:"Mono";font-size:11px;
letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
/* the close carries a drawn oversized mark, no photograph */
.close{position:relative;overflow:hidden;padding-block:104px 100px;border-top:1px solid var(--ink)}
.close__mark{position:absolute;right:2%;top:50%;transform:translateY(-50%);
width:min(34vw,400px);opacity:.13;color:var(--ink);pointer-events:none;z-index:0}
.close__mark .acc{fill:var(--accent);opacity:.95}
.close .wrap{position:relative;z-index:1}
.close h2{max-width:15ch}
/* devices answer the pointer, and drift gently at rest */
.dev{will-change:transform;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.devs.tilt .dev--tg{transform:rotateY(calc(var(--mx,0) * -7deg)) rotateX(calc(var(--my,0) * 5deg))}
.devs.tilt .dev--ln{transform:rotate(5deg) rotateY(calc(var(--mx,0) * -11deg)) rotateX(calc(var(--my,0) * 7deg))}
.dev--tg{animation:float1 7s ease-in-out infinite}
.dev--ln{animation:float2 9s ease-in-out infinite}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 -11px}}
.devs.tilt .dev--tg,.devs.tilt .dev--ln{animation:none}
@media (hover:none){
.devs.tilt .dev--tg{transform:none}
.devs.tilt .dev--ln{transform:rotate(5deg)}
}
/* the chart draws itself on entry */
.chart .ser{stroke-dasharray:var(--len,700);stroke-dashoffset:var(--len,700);
transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.chart.drawn .ser{stroke-dashoffset:0}
.chart .hit{opacity:0;transition:opacity .4s ease-out .95s}
.chart.drawn .hit{opacity:1}
.chart .lbl--hot{opacity:0;transition:opacity .4s ease-out 1.15s}
.chart.drawn .lbl--hot{opacity:1}
@media (max-width:900px){
.close{padding-block:56px 60px}
.close__mark{right:-26%;width:80vw;opacity:.09}
}
@media (prefers-reduced-motion:reduce){
.dev--tg,.dev--ln{animation:none}
.devs.tilt .dev--tg{transform:none}
.devs.tilt .dev--ln{transform:rotate(5deg)}
.chart .ser{stroke-dashoffset:0;transition:none}
.chart .hit,.chart .lbl--hot{opacity:1;transition:none}
}
.foot__note{width:100%;font-family:"Mono";font-size:10.5px;line-height:1.7;color:var(--faint);
margin-top:6px;max-width:80ch}
/* ====================================================== documents ======== */
.doc{padding-block:56px 0}
/* three areas, so the rail can sit BESIDE the title on a wide screen and
AFTER it on a phone. Ordering the whole aside would put the contents at
the foot of the document, where a jump list is no use. */
.doc__grid{display:grid;grid-template-columns:190px 1fr;gap:0;
grid-template-areas:"side head" "side body"}
.doc__side{grid-area:side}
.doc__head{grid-area:head;padding:0 0 0 44px;max-width:76ch}
.doc__head .doc__kicker{margin-bottom:18px}
.doc__side{padding:0 24px 0 0;border-right:1px solid var(--line);position:sticky;top:78px;align-self:start}
/* min-width:0 overrides the grid item's automatic min-content minimum (same
bug class as gotcha #67c): without it, .data-table-wrap's 600px table
forced this whole grid track — and with it the page — to stay >=600px
wide instead of letting the wrapper's own overflow-x:auto scroll it. */
.doc__body{grid-area:body;padding:22px 0 0 44px;max-width:76ch;min-width:0}
.doc__kicker{display:inline-block;background:var(--accent);color:var(--bg);
font-family:"PlexC";font-weight:700;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;padding:4px 9px}
.doc h1{font-family:"PlexC";font-weight:700;font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);
line-height:1.0;letter-spacing:-.03em;text-wrap:balance}
.doc__lede{margin-top:18px;color:var(--soft);font-size:1.1rem;line-height:1.62;max-width:56ch}
.doc__meta{margin-top:16px;font-family:"Mono";font-size:11px;color:var(--faint)}
.doc h2{font-family:"PlexC";font-weight:700;font-size:1.15rem;letter-spacing:-.015em;
margin-top:var(--s7,3rem);margin-bottom:12px}
.doc h2:first-of-type{margin-top:2.4rem}
.doc p{color:var(--soft);line-height:1.65;max-width:64ch}
.doc p + p{margin-top:12px}
.doc ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:12px}
.doc li{color:var(--soft);line-height:1.6;max-width:64ch;padding-left:20px;position:relative}
.doc li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--accent)}
.doc strong{color:var(--ink);font-weight:600}
.doc code,.doc__code{font-family:"Mono";font-size:.87em;background:var(--panel2);
border:1px solid var(--line);padding:1px 5px;color:var(--ink)}
/* prose links only. Scoped to the prose containers, not `.doc`: at `.doc a` this
outranked `.doc__nav a` and drew an underline under every contents item. */
.doc__head a:not(.cta),.doc__body a:not(.cta){color:var(--ink);border-bottom:1px solid var(--line-2)}
.doc__head a:not(.cta):hover,.doc__body a:not(.cta):hover{border-color:var(--accent);color:var(--accent)}
.doc__rule{height:1px;background:var(--line);margin-block:2.6rem}
.doc__onthis{margin-top:5px;font-family:"Mono";font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--faint)}
.doc__nav{display:flex;flex-direction:column;gap:1px;margin-top:10px}
.doc__nav a{padding:6px 9px;font-size:14px;color:var(--soft);border-left:2px solid transparent}
.doc__nav a:hover{background:var(--panel);color:var(--ink)}
.doc__nav a[aria-current]{color:var(--ink);border-left-color:var(--accent);background:var(--panel)}
/* pricing plate, in the ledger language */
.plate{border:2px solid var(--ink);background:var(--panel);margin-top:30px}
.plate__h{padding:20px;border-bottom:2px solid var(--ink);background:var(--panel2)}
.plate__tier{font-family:"Mono";font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.plate__fig{display:flex;align-items:baseline;gap:9px;margin-top:10px}
.plate__amt{font-family:"PlexC";font-weight:700;font-size:3.1rem;letter-spacing:-.04em;line-height:1}
.plate__per{font-family:"Mono";font-size:13px;color:var(--soft)}
.plate .lrow{padding:11px 20px}
.plate .lrow__v{white-space:normal;text-align:left;font-family:"Plex";font-weight:400;
font-size:13.5px;color:var(--soft);max-width:46ch}
.plate__f{padding:14px 20px;border-top:1px solid var(--line);font-family:"Mono";
font-size:11px;line-height:1.7;color:var(--faint)}
@media (max-width:900px){
.doc__grid{grid-template-columns:1fr;grid-template-areas:"head" "side" "body"}
.doc__head{padding:0}
.doc__side{border-right:0;border-block:1px solid var(--line);padding:16px 0;margin-top:26px}
.doc__body{padding:22px 0 0}
.doc__side{position:static}
.doc__onthis{margin-top:16px}
.doc__nav{flex-direction:row;flex-wrap:wrap;margin-top:8px}
.doc__nav a{border-left:0;border-bottom:2px solid transparent;padding:5px 8px}
.doc__nav a[aria-current]{border-left:0;border-bottom-color:var(--accent)}
}
/* ── anchor targets clear the sticky bar ────────────────────────────────── */
/* the bar is 56px; targets need that plus air, or the heading lands under it.
:where([id]) rather than a tag list: the doc rails point at , which a
section/div selector silently misses and puts straight back under the bar. */
:where([id]){scroll-margin-top:78px}
@media (max-width:900px){:where([id]){scroll-margin-top:112px}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ── replay control for the hero sequence ───────────────────────────────── */
.devcap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.replay{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
background:transparent;color:var(--soft);cursor:pointer;padding:5px 10px;
font-family:"Mono";font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
transition:color 140ms var(--ease,cubic-bezier(.23,1,.32,1)),border-color 140ms ease}
.replay:hover{color:var(--ink);border-color:var(--ink)}
.replay:active{transform:translateY(1px)}
.replay svg{width:11px;height:11px;flex:none}
.replay[aria-disabled="true"]{color:var(--faint);border-color:var(--line);pointer-events:none}
/* ── no scripting: reveal everything ────────────────────────────────────── */
/* .rv, .tg.step and .typing all start at opacity:0 and are revealed by JS, so a
visitor with scripting blocked saw a homepage with only a header and a footer.
Additive and last in the file, so the reduced-motion rules above are untouched. */
html:not(.js) .rv,
html:not(.js) .tg.step{opacity:1;transform:none;transition:none}
html:not(.js) .typing{display:none}
/* A doc page with no contents rail — /404 has nothing to list on itself.
Collapses the two-column doc grid to one centred column and drops the
44px inset the rail's border would otherwise be sitting against. */
.doc__grid--solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body"}
.doc__grid--solo .doc__head,
.doc__grid--solo .doc__body{padding-left:0}
/* Destination rows on /404: the geometry of .lrow--cmd, but the key is a page
name rather than a command, so it keeps the body face instead of mono accent.
Plain .lrow is for a right-aligned mono FIGURE — a sentence in that slot
right-aligns and goes ragged, which is what the first draft did. Stacks below
640px, where a 190px key column leaves the description too narrow to read. */
.lrow--dest{grid-template-columns:190px 1fr;gap:22px}
.lrow--dest .lrow__k{font-size:13.5px;font-weight:600;color:var(--ink)}
.lrow--dest .lrow__v{font-family:"Plex";font-weight:400;font-size:13.5px;
color:var(--soft);text-align:left;white-space:normal;line-height:1.55}
@media (max-width:640px){
.lrow--dest{grid-template-columns:minmax(0,1fr);gap:4px}
}
/* ── /data's endpoint→scope table ───────────────────────────────────────────
A real
, not the .ledger key/value language — three columns of prose
(endpoint, scope, why) don't fit a two-column row grid. Wrapped in a
scrolling container rather than left to overflow .doc__body's 76ch cap
silently (see gotcha #62): the fade cue is two background layers, one that
scrolls with the content and one that doesn't, so it disappears once the
scroll reaches the end and is never mistaken for decoration. */
.data-table-wrap{margin-top:18px;border:1px solid var(--line);overflow-x:auto;
background-color:var(--bg);
background-image:linear-gradient(to left,var(--bg),transparent),
linear-gradient(to left,var(--line-2),transparent);
background-position:right center,right center;
background-size:24px 100%,24px 100%;
background-repeat:no-repeat,no-repeat;
background-attachment:local,scroll}
.data-table{width:100%;min-width:600px;border-collapse:collapse;font-size:13.5px}
.data-table th,.data-table td{padding:9px 14px;text-align:left;white-space:nowrap;
border-bottom:1px solid var(--line)}
.data-table th{font-family:"Mono";font-size:10.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--faint);font-weight:600;background:var(--panel2)}
.data-table td:last-child,.data-table th:last-child{white-space:normal}
.data-table tbody tr:last-child td{border-bottom:0}