@import url('fonts/fonts.css');
/* ===== Shared theme =====================================
Two layers:
1. SEMANTIC TOKENS — what a colour means (surface, text,
border, accent, status). Defined once per theme.
2. LEGACY ALIASES — the original names (--panel, --txt,
--line, --okbg …) mapped onto the semantic layer, so
all 64 existing pages inherit light mode untouched.
Light is the base :root. Dark is applied twice: by
preference (unless the user forced light) and by an
explicit [data-theme="dark"], so the toggle wins in both
directions. Never define a colour ONLY inside a dark block.
========================================================= */
:root{
color-scheme:light;
/* surfaces, lightest to deepest */
--bg:#f5f7fa;
--surface:#ffffff;
--surface-2:#eef1f6;
--surface-3:#e7ebf2; /* code / log wells */
/* text */
--text:#0f1620;
--text-muted:#4f5a68;
--on-accent:#ffffff;
/* lines */
--border:#dde3ec;
--border-strong:#c6cfdc;
/* accents */
--accent:#1857c2;
--accent-hover:#12489f;
--accent-border:#a9c8f5;
--accent-bg:#e8f0fe;
--accent-2:#6d3fe0;
--accent-2-border:#c5b1f5;
--accent-2-bg:#f0eafe;
/* status: base / tinted background / border */
--ok:#0a7a41; --ok-bg:#e4f6ec; --ok-border:#a8dcc0; --on-ok:#ffffff;
--on-bad:#ffffff;
--bad:#c22f2a; --bad-bg:#fdecea; --bad-border:#f3b7b4;
--warn:#8a5808; --warn-bg:#fdf3e2; --warn-border:#ecd0a0; --on-warn:#ffffff;
--info-bg:#e8f0fe; --info-border:#a9c8f5;
--gold:#8a6510; --gold-bg:#fbf1dc; --gold-border:#e0c07a;
/* rgb triplets for rgba() glows — keep in sync with the hexes above */
--accent-rgb:24,87,194; --accent2-rgb:109,63,224;
--ok-rgb:10,122,65; --bad-rgb:194,47,42; --warn-rgb:138,88,8;
/* ---- type ----------------------------------------------
Two self-hosted variable faces (see fonts/README.md).
One 8-step scale replaces the old 13 ad-hoc sizes, which
ran 10,11,12,12.5,13,13.5,14,14.5,15,15.5,18,22,24 — the
half-pixel steps were nudges, not a scale. */
--font-sans:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* JetBrains Mono ships code ligatures: <= renders as ≤, >= as ≥,
=== as one long bar. This site teaches readers to spot one-line
operator deviations (algorithms.html, code-review.html), so the
glyphs must stay literal. Disabled globally for mono contexts. */
--fs-1:11px; /* badges, counters */
--fs-2:12px; /* captions, table body */
--fs-3:13px; /* meta, secondary UI */
--fs-4:15px; /* body */
--fs-5:17px; /* lead paragraph, h3 */
--fs-6:21px; /* section heading */
--fs-7:27px; /* page title */
--fs-8:34px; /* hub title */
/* ---- shape ---------------------------------------------
Three radii replace the previous eight (4,6,8,9,10,12,14,
20px), assigned by role rather than by eye. */
--r-sm:7px; /* inline code, tags, chips */
--r-md:10px; /* buttons, inputs, insets */
--r-lg:14px; /* cards, folds, panels */
--r-pill:999px;
/* ---- spacing -------------------------------------------- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:20px; --sp-6:28px; --sp-7:40px;
/* ---- elevation ------------------------------------------
Light leans on soft shadow; dark leans on border contrast,
since shadow is nearly invisible on a dark ground. */
--shadow-sm:0 1px 2px rgba(16,24,40,.05);
--shadow-md:0 2px 6px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
--shadow-lg:0 12px 28px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);
}
/* --- dark: by preference, unless the user explicitly chose light --- */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#0f1419; --surface:#1a212b; --surface-2:#222b38; --surface-3:#0b0f14;
--text:#e6edf3; --text-muted:#9aa6b5; --on-accent:#08111f;
--border:#2d3744; --border-strong:#3d4a5c;
--accent:#4f9cf9; --accent-hover:#6fb0ff; --accent-border:#2c4a6e; --accent-bg:#15233a;
--accent-2:#a78bff; --accent-2-border:#4a3a6e; --accent-2-bg:#1c1730;
--ok:#2ecc71; --ok-bg:#11331f; --ok-border:#1d5236; --on-ok:#06210f;
--bad:#ff5c5c; --bad-bg:#3a1518; --bad-border:#5a2528; --on-bad:#2b0f10; --on-bad:#2b0f10;
--warn:#ffb84d; --warn-bg:#3a2e15; --warn-border:#5a4520; --on-warn:#1a1205;
--info-bg:#15233a; --info-border:#2c4a6e;
--gold:#ffd24d; --gold-bg:#2c2410; --gold-border:#6b5410;
--shadow-sm:0 1px 2px rgba(0,0,0,.30);
--shadow-md:0 2px 8px rgba(0,0,0,.35);
--shadow-lg:0 14px 34px rgba(0,0,0,.50);
--accent-rgb:79,156,249; --accent2-rgb:167,139,255;
--ok-rgb:46,204,113; --bad-rgb:255,92,92; --warn-rgb:255,184,77;
}
}
/* --- dark: forced by the toggle --- */
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#0f1419; --surface:#1a212b; --surface-2:#222b38; --surface-3:#0b0f14;
--text:#e6edf3; --text-muted:#9aa6b5; --on-accent:#08111f;
--border:#2d3744; --border-strong:#3d4a5c;
--accent:#4f9cf9; --accent-hover:#6fb0ff; --accent-border:#2c4a6e; --accent-bg:#15233a;
--accent-2:#a78bff; --accent-2-border:#4a3a6e; --accent-2-bg:#1c1730;
--ok:#2ecc71; --ok-bg:#11331f; --ok-border:#1d5236; --on-ok:#06210f;
--bad:#ff5c5c; --bad-bg:#3a1518; --bad-border:#5a2528; --on-bad:#2b0f10;
--warn:#ffb84d; --warn-bg:#3a2e15; --warn-border:#5a4520; --on-warn:#1a1205;
--info-bg:#15233a; --info-border:#2c4a6e;
--gold:#ffd24d; --gold-bg:#2c2410; --gold-border:#6b5410;
--shadow-sm:0 1px 2px rgba(0,0,0,.30);
--shadow-md:0 2px 8px rgba(0,0,0,.35);
--shadow-lg:0 14px 34px rgba(0,0,0,.50);
--accent-rgb:79,156,249; --accent2-rgb:167,139,255;
--ok-rgb:46,204,113; --bad-rgb:255,92,92; --warn-rgb:255,184,77;
}
/* --- legacy aliases: the original variable names, so every
existing page picks up both themes with no edits --- */
:root{
--panel:var(--surface);
--panel2:var(--surface-2);
--line:var(--border);
--txt:var(--text);
--muted:var(--text-muted);
--accent2:var(--accent-2);
--chip:var(--surface-2);
--okbg:var(--ok-bg);
--badbg:var(--bad-bg);
--warnbg:var(--warn-bg);
}
*{box-sizing:border-box}
code,pre,kbd,samp,.kv,.log,.cmd-tbl td:first-child,table.cx code,.ctable code,
[style*="--font-mono"],[class*="mono"]{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);
line-height:1.6;font-size:var(--fs-4);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1080px;margin:0 auto;padding:22px 18px 90px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:var(--fs-7);line-height:1.2;letter-spacing:-.021em;font-weight:800;margin:0 0 6px}
h2{font-size:var(--fs-6);line-height:1.28;letter-spacing:-.014em;font-weight:700;margin:30px 0 12px}
h3{font-size:var(--fs-4);margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sub{color:var(--muted);font-size:var(--fs-4);margin-bottom:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.back{font-size:var(--fs-3);color:var(--muted)}
/* theme toggle — mounted by site.js into .topbar / .toprow */
.theme-toggle{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;padding:0;border-radius:var(--r-md);cursor:pointer;
background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);
transition:color .15s,border-color .15s,background .15s}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* language switcher (i18n.js) — mounted by site.js next to the theme toggle on translated pages */
.langsw{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.langsw button{background:var(--surface-2);border:0;border-right:1px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:600;letter-spacing:.04em;padding:0 10px;height:32px;cursor:pointer}
.langsw button:last-child{border-right:0}
.langsw button:hover{color:var(--accent)}
.langsw button.on{background:var(--accent);color:#fff}
.langsw-host{flex:0 0 auto;margin-left:auto;display:inline-flex}
.langsw-host + .theme-toggle{margin-left:0}
.has-float-toggle{position:relative}
.theme-toggle--float{position:absolute;top:0;right:0;z-index:20}
/* build id — mounted by site.js at the end of ; deliberately faint */
.build-id{text-align:center;font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
color:var(--text-muted);opacity:.35;padding:8px 0 14px;user-select:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.muted{color:var(--muted)}
.small{font-size:var(--fs-3)}
.tag{font-size:var(--fs-1);padding:3px 9px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.tag.accent{color:var(--accent);border-color:var(--accent-border)}
.pill{display:inline-block;font-size:var(--fs-1);padding:2px 8px;border-radius:var(--r-md);background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
/* buttons */
.btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--r-md);padding:9px 15px;font-size:var(--fs-3);
font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent-hover)}
.btn.sec{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.warn{background:var(--warn);color:var(--on-warn)}
.btn.bad{background:var(--bad);color:var(--on-bad)}
.btn:disabled{opacity:.4;cursor:not-allowed}
input[type=text],input[type=number],select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
border-radius:var(--r-md);padding:8px 10px;font-size:var(--fs-4);font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--accent)}
label.fld{font-size:var(--fs-3);color:var(--muted);display:flex;flex-direction:column;gap:4px}
/* stage = visualization area */
.stage{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
min-height:220px;position:relative;overflow:hidden}
.nodes{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
/* a node box (server/partition/shard/etc.) */
.node{background:var(--panel);border:2px solid var(--line);border-radius:var(--r-lg);padding:12px;min-width:150px;
transition:.25s;position:relative}
.node .title{font-weight:700;font-size:var(--fs-3);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.node .badge{font-size:var(--fs-1);padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted)}
.node.primary{border-color:var(--accent)}
.node.primary .badge{color:var(--accent);border-color:var(--accent)}
.node.replica{border-color:var(--accent2)}
.node.replica .badge{color:var(--accent2);border-color:var(--accent2)}
.node.dead{opacity:.35;border-color:var(--bad)!important;filter:grayscale(.6)}
.node.active{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35);border-color:var(--accent)}
.node.flash-ok{box-shadow:0 0 0 3px rgba(var(--ok-rgb),.5)}
.node.flash-bad{box-shadow:0 0 0 3px rgba(var(--bad-rgb),.5)}
/* key-value / row entries inside a node */
.kv{font-family:var(--font-mono);font-size:var(--fs-2);background:var(--panel2);
border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 8px;margin:4px 0;display:flex;justify-content:space-between;gap:8px}
.kv.new{animation:pop .5s ease}
.kv.stale{border-color:var(--warn);color:var(--warn)}
.kv .k{color:var(--accent)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* animated packet flying between nodes */
.packet{position:absolute;background:var(--accent);color:var(--on-accent);font-size:var(--fs-1);font-weight:700;
padding:3px 8px;border-radius:var(--r-lg);white-space:nowrap;z-index:5;pointer-events:none;
box-shadow:0 2px 8px rgba(0,0,0,.4);transition:left .7s ease,top .7s ease,opacity .3s}
.packet.repl{background:var(--accent2)}
.packet.read{background:var(--ok)}
.packet.bad{background:var(--bad)}
/* console / log */
.log{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;font-family:var(--font-mono);
font-size:var(--fs-2);height:200px;max-height:45vh;overflow-y:auto;white-space:pre-wrap}
.log .l{margin:2px 0}
.log .t{color:var(--muted)}
.log .ok{color:var(--ok)}
.log .err{color:var(--bad)}
.log .warn{color:var(--warn)}
.log .info{color:var(--accent)}
.log .cmd{color:var(--text);font-weight:600}
/* explain box (what just happened / why) */
.explain{background:var(--panel);border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;
padding:10px 14px;font-size:var(--fs-3);margin-top:12px;min-height:42px}
.explain b{color:var(--accent)}
/* concept callouts in the description */
.note{border-radius:var(--r-md);padding:10px 14px;font-size:var(--fs-3);margin:10px 0}
.note.info{background:var(--info-bg);border:1px solid var(--info-border)}
.note.warn{background:var(--warn-bg);border:1px solid var(--warn-border)}
.note.gotcha{background:var(--bad-bg);border:1px solid var(--bad-border)}
/* steps list */
.steps{counter-reset:s;padding:0;margin:0;list-style:none}
.steps li{position:relative;padding:6px 0 6px 30px;font-size:var(--fs-3);color:var(--muted)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:6px;width:20px;height:20px;
border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:var(--fs-1);display:flex;
align-items:center;justify-content:center;color:var(--muted)}
.steps li.done{color:var(--txt)}
.steps li.done::before{background:var(--ok);border-color:var(--ok);color:var(--on-ok);content:"✓"}
.steps li.current{color:var(--accent)}
.steps li.current::before{border-color:var(--accent);color:var(--accent)}
/* grid helpers */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.hub-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;transition:.15s}
.hub-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
/* icons — filled by site.js from [data-icon]; see its ICONS map */
.ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0}
.ic-svg{width:22px;height:22px;display:block}
.hub-card .ic{width:40px;height:40px;border-radius:var(--r-md);
background:var(--accent-bg);color:var(--accent);margin-bottom:var(--sp-3);
transition:background .18s,color .18s}
.hub-card:hover .ic{background:var(--accent);color:var(--on-accent)}
h1 .ic{width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent-bg);
color:var(--accent);margin-right:var(--sp-2);vertical-align:-6px}
h1 .ic .ic-svg{width:19px;height:19px}
.hub-card .nm{font-weight:700;margin:8px 0 4px;color:var(--txt)}
.hub-card .ds{font-size:var(--fs-2);color:var(--muted)}
/* complexity / comparison table — shared by DS pages (.cx and legacy .ctable alias) */
table.cx,.ctable{border-collapse:collapse;font-size:var(--fs-2);margin-top:10px;width:100%}
table.cx td,table.cx th,.ctable td,.ctable th{border:1px solid var(--line);padding:5px 9px;text-align:left}
table.cx th,.ctable th{color:var(--muted);font-weight:600;background:var(--panel2)}
table.cx code,.ctable code{color:var(--accent)}
/* collapsible section — ONE cohesive panel; the summary is its header.
Structure: …
…
, no JS needed */
details.qa{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);margin:10px 0}
details.qa>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:600;font-size:var(--fs-3);user-select:none}
details.qa>summary::-webkit-details-marker{display:none}
details.qa>summary::before{content:"❓";margin-right:8px}
details.qa[open]>summary{border-bottom:1px dashed var(--line)}
details.qa[open]>summary::before{content:"💡"}
details.qa>.a{padding:10px 14px;font-size:var(--fs-3)}
details.qa>.a p{margin:6px 0;line-height:1.6}
/* ===== Learning scaffolds (see AGENTS.md §11) =====================
Shared primitives for the retrieve-first protocol: a targeted
pre-test, "write before you reveal" recall cards, predict-then-
run controls, and the relearn schedule. Reuse; don't restyle. */
.learn-how{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-2);color:var(--muted)}
.learn-how .st{padding:3px 9px;border-radius:var(--r-pill);background:var(--panel2);border:1px solid var(--line)}
.learn-how .st b{color:var(--txt)}
.pt-q{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2);padding:12px 14px;margin:10px 0}
.pt-q .qt{font-weight:600;font-size:var(--fs-3);margin-bottom:8px}
.pt-q .qt .n{color:var(--accent);font-family:var(--font-mono);margin-right:6px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{text-align:left;font:inherit;font-size:var(--fs-3);padding:8px 11px;border-radius:var(--r-md);cursor:pointer;
background:var(--panel);color:var(--txt);border:1px solid var(--line);transition:.15s}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.25)}
.opt.ok{border-color:var(--ok);background:var(--ok-bg)}
.opt.bad{border-color:var(--bad);background:var(--bad-bg)}
.opt:disabled{cursor:default;opacity:.85}
.conf{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:var(--fs-2);color:var(--muted)}
.conf button{font:inherit;font-size:var(--fs-1);padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line);
background:var(--panel);color:var(--muted);cursor:pointer}
.conf button.on{color:var(--accent);border-color:var(--accent)}
.pt-fb{margin-top:8px;font-size:var(--fs-2);color:var(--muted)}
.pt-fb.hit{color:var(--ok)}
.pt-fb.miss{color:var(--bad)}
.pt-fb.warn{color:var(--warn)}
.toc a.hit{color:var(--ok);border-color:var(--ok-border)}
.toc a.miss{color:var(--bad);border-color:var(--bad-border)}
textarea.recall{width:100%;box-sizing:border-box;min-height:74px;resize:vertical;font:inherit;font-size:var(--fs-3);
line-height:1.5;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px}
textarea.recall:focus{outline:none;border-color:var(--accent)}
.recall-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.grade{display:none;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-2);color:var(--muted);margin-top:8px}
details.qa[open] .grade{display:flex}
details.qa.hit>summary::before{content:"✅"}
details.qa.miss>summary::before{content:"🔁"}
details.qa .a .model{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.predict{display:none;gap:8px;align-items:center;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--warn-border);
border-radius:var(--r-md);padding:8px 12px;margin:8px 0;font-size:var(--fs-3)}
.predict.show{display:flex}
.sched{width:100%;border-collapse:collapse;font-size:var(--fs-3);margin:6px 0}
.sched td{border:1px solid var(--line);padding:6px 9px;vertical-align:top}
.sched td:first-child{white-space:nowrap;font-weight:600;color:var(--accent)}
.sched tr.done td{color:var(--muted)}
.sched tr.due td{background:var(--warn-bg)}
.sched tr.due td:first-child{color:var(--warn)}
/* ============================================================
Responsive layer. Added as one block so it is easy to review
and easy to revert. Breakpoints: 1024 / 768 / 480.
Note on tables: .cx/.ctable/.cmd-tbl carry monospace content
and (for .cmd-tbl) a nowrap first column, so they cannot
reflow. Below 768px they become their own scroll container
instead — the table scrolls, the page does not.
Do NOT add width:max-content + min-width:100% to that rule: on
a display:block table that pair ratchets the parent .card wider
rather than clamping it (measured: ds-tries.html 390 -> 833px).
============================================================ */
/* --- tablet --- */
@media(max-width:1024px){
.wrap{padding:20px 16px 72px}
.nodes{gap:18px}
}
/* --- narrow: tables become self-scrolling --- */
@media(max-width:768px){
table.cx,.ctable,.cmd-tbl{
display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cmd-tbl tr td:first-child{width:auto}
/* step the scale down once; every consumer follows */
:root{--fs-8:27px;--fs-7:23px;--fs-6:19px;--fs-5:16px}
.wrap{padding:16px 14px 64px}
h2{margin:22px 0 9px}
.card{padding:14px;border-radius:var(--r-lg)}
.stage{padding:14px}
.nodes{gap:14px}
.node{min-width:0;flex:1 1 150px}
details.fold>summary{padding:12px 14px}
details.fold>.fold-body{padding:14px 14px 2px}
.art p{font-size:var(--fs-4);line-height:1.7}
}
/* --- phone --- */
@media(max-width:480px){
:root{--fs-8:24px;--fs-7:21px;--fs-6:18px;--fs-5:16px}
.wrap{padding:14px 12px 56px}
.hub-grid{grid-template-columns:1fr;gap:12px}
.cmd-tbl td:first-child,
.card.scale .cmd-tbl td:first-child{white-space:normal}
.log{font-size:var(--fs-2);height:170px}
.toc a{font-size:var(--fs-2);padding:4px 8px}
.btn{padding:8px 13px}
}
/* respect reduced-motion for the packet/pop animations */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ============================================================
Site shell — header, section sidebar (site.js) and the hub /
section / about pages. Structure lives in sitemap.js.
============================================================ */
:root{--hdr-h:57px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;padding:8px 14px;border-radius:var(--r-md);
background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--fs-3)}
.skip-link:focus{top:10px;text-decoration:none}
.site-hdr{position:sticky;top:0;z-index:50;height:var(--hdr-h);background:var(--surface);
border-bottom:1px solid var(--border)}
.hdr-in{max-width:1360px;height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px}
.hdr-brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-weight:800;font-size:var(--fs-5);
letter-spacing:-.02em}
.hdr-brand:hover{text-decoration:none;color:var(--text)}
.hdr-mark{width:28px;height:28px;flex:0 0 auto}
.hdr-nav{display:flex;align-items:stretch;gap:4px;height:100%}
.hdr-nav a{display:flex;align-items:center;padding:0 10px;color:var(--text-muted);font-weight:600;font-size:var(--fs-3);
border-bottom:2px solid transparent;margin-bottom:-1px}
.hdr-nav a:hover{color:var(--text);text-decoration:none}
.hdr-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.hdr-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
/* every header control: 36px tall, same radius, border and surface */
.site-hdr .theme-toggle{width:36px;height:36px;margin:0;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2)}
.site-hdr .langsw{height:36px;margin:0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.site-hdr .langsw button{height:34px;padding:0 11px;background:transparent;font-size:var(--fs-2)}
.hdr-lang{display:flex;align-items:center}
.site-hdr .langsw button{position:relative}
.site-hdr .langsw button.on{background:var(--surface);color:var(--text)}
/* underline inset from the edges so the rounded corner of the group never clips it */
.site-hdr .langsw button.on::after{content:"";position:absolute;left:7px;right:7px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
.site-hdr .hdr-acct .sdq-sync-badge{position:static;height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;
border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--text);
font:600 var(--fs-3)/1 var(--font-sans);cursor:pointer}
.site-hdr .hdr-acct .sdq-sync-badge:hover{border-color:var(--accent);color:var(--accent)}
.site-hdr .hdr-acct .sdq-sync-badge .sb-ic{flex:0 0 auto;color:var(--text-muted)}
.site-hdr .hdr-acct .sdq-sync-badge.ok .sb-ic{color:var(--ok)}
.site-hdr .hdr-acct .sdq-sync-badge.warn .sb-ic{color:var(--warn)}
.site-hdr .hdr-acct .sdq-sync-badge.err .sb-ic{color:var(--bad)}
.hdr-acct:empty{display:none}
.site-hdr a:focus-visible,.site-hdr button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* section sidebar: a page listed in sitemap.js, minus the apps with their own */
.shell{max-width:1360px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;
align-items:start}
.shell-main{min-width:0}
.shell-main>.wrap{max-width:1040px;margin:0;padding-left:0;padding-right:0}
.sidenav{position:sticky;top:calc(var(--hdr-h) + 18px);max-height:calc(100vh - var(--hdr-h) - 36px);overflow-y:auto;
padding:22px 0 24px;scrollbar-width:thin}
.sn-back{display:inline-block;font-size:var(--fs-3);color:var(--text-muted);margin-bottom:14px}
.sn-title{font-weight:700;font-size:var(--fs-4);margin:0 0 10px;padding:0 10px}
.sn-title a{color:var(--text)}
.sn-list{display:flex;flex-direction:column;gap:2px}
.sn-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-md);color:var(--text-muted);
font-size:var(--fs-3);line-height:1.35}
.sn-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.sn-link.cur{background:var(--accent-bg);color:var(--accent);font-weight:600}
.sn-link .ic{width:24px;height:24px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-muted)}
.sn-link .ic .ic-svg{width:14px;height:14px}
.sn-link.cur .ic{background:var(--accent);color:var(--on-accent)}
.sn-cnt{margin-left:auto;font-size:var(--fs-1);color:var(--text-muted)}
.sn-toggle{display:none}
.sn-link:focus-visible,.sn-back:focus-visible,.sn-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:1024px){
.shell{grid-template-columns:1fr;gap:0}
.sidenav{position:static;max-height:none;overflow:visible;padding:14px 0 0}
.sn-title{display:none}
.sn-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text);
font:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer;text-align:left}
.sn-list{display:none;margin-top:6px;padding:6px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.sidenav.open .sn-list{display:flex}
.shell-main>.wrap{padding-top:16px}
}
@media(max-width:600px){
.hdr-in{padding:0 12px;gap:10px}
.hdr-brand span{display:none}
.hdr-nav a{padding:0 7px}
.site-hdr .langsw button{padding:0 8px}
.shell{padding:0 12px}
@media(max-width:480px){
.hdr-in{padding:0 10px;gap:6px}
.hdr-nav{gap:0}
.hdr-nav a{padding:0 6px;font-size:var(--fs-2)}
.hdr-tools{gap:5px}
.site-hdr .langsw button{padding:0 6px;font-size:11px}
.site-hdr .theme-toggle{width:34px;height:34px}
/* account: icon only — the text stays in the DOM as the accessible name */
/* account: icon only — the label stays as aria-label */
.site-hdr .hdr-acct .sdq-sync-badge{width:34px;height:34px;padding:0;justify-content:center}
.site-hdr .hdr-acct .sdq-sync-badge .sb-txt{display:none}
.site-hdr .langsw{height:34px}
.site-hdr .langsw button{height:32px}
}
}
/* hub (index.html): hero + one entry card per section */
.hub .wrap{max-width:1120px}
.hub-hero{padding:36px 0 26px}
.hub-hero h1{font-size:var(--fs-8);letter-spacing:-.025em;margin:0 0 10px;max-width:28ch}
.hub-hero p{color:var(--text-muted);font-size:var(--fs-5);line-height:1.5;margin:0;max-width:62ch}
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 12px;padding:0;list-style:none}
.sec-grid>li{display:flex}
.sec-card{flex:1;display:grid;grid-template-columns:minmax(150px,40%) 1fr;min-height:176px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;color:var(--text);
transition:border-color .15s,box-shadow .15s}
.sec-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);text-decoration:none}
.sec-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sec-art{display:flex;align-items:center;justify-content:center;padding:18px;
background:linear-gradient(160deg,var(--accent-bg),var(--surface-2));border-right:1px solid var(--border)}
.sec-card:hover .sec-art{background:linear-gradient(160deg,var(--accent-bg),var(--accent-2-bg))}
.sec-body{padding:20px 22px 18px;display:flex;flex-direction:column;gap:8px}
.sec-nm{font-weight:800;font-size:var(--fs-6);line-height:1.2;letter-spacing:-.015em;margin:0;text-transform:none;color:var(--text)}
.sec-ds{font-size:var(--fs-3);color:var(--text-muted);line-height:1.5;margin:0}
.sec-cnt{margin-top:auto;font-size:var(--fs-3);font-weight:600;color:var(--accent)}
@media(max-width:860px){
.sec-grid{grid-template-columns:1fr;gap:14px}
}
@media(max-width:480px){
.hub-hero{padding:22px 0 18px}
.hub-hero h1{font-size:var(--fs-7)}
.hub-hero p{font-size:var(--fs-4)}
.sec-card{grid-template-columns:1fr;min-height:0}
.sec-art{border-right:0;border-bottom:1px solid var(--border);padding:10px 16px 6px}
.sec-art .il{max-height:96px;width:auto}
.sec-body{padding:14px 16px 16px}
.sec-nm{font-size:var(--fs-5)}
}
/* section page (section.html) */
.sec-head{padding:22px 0 18px}
.sec-head h1{font-size:var(--fs-7);margin:0 0 8px}
.sec-head p{color:var(--text-muted);margin:0;max-width:72ch}
/* about page */
.about{max-width:760px}
.about h1{font-size:var(--fs-7);margin:28px 0 14px}
.about p{max-width:68ch}
.about h2{font-size:var(--fs-6)}
.about-steps{padding-left:22px}
.about-steps li{margin-bottom:10px;max-width:66ch}
.about-steps b{display:block}
.about-secs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;padding:0;list-style:none}
.about-secs a{font-weight:600}
@media(max-width:600px){.about-secs{grid-template-columns:1fr}}
/* illustrations: strokes/fills by role, colours from the theme */
.il{width:100%;height:auto;display:block;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.il .s{stroke:var(--text-muted)}
.il .a{stroke:var(--accent)}
.il .a2{stroke:var(--accent-2)}
.il .ok{stroke:var(--ok)}
.il .fs{fill:var(--surface)}
.il .fab{fill:var(--accent-bg)}
.il .fa{fill:var(--accent)}
.il .fa2{fill:var(--accent-2)}
.il .fok{fill:var(--ok)}
.il .thin{stroke-width:1.2}
.il .dash{stroke-dasharray:4 4}
.il text{font-family:var(--font-sans);font-weight:800;fill:var(--accent);stroke:none}
.hub-card.main{border-color:var(--accent-2)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}