/* The code viewer (/code/, web-server-guide § The code viewer) — its only stylesheet. The story deck's type and palette, so the two same-origin pages of the bookmarks menu read as one family: Newsreader for the headline a file opens with, Atkinson Hyperlegible for everything around it, JetBrains Mono for the code. Light is the deck's paper and navy ink; dark is its developer section. One accent, the deck's orange, marks the line a link points at — nothing else on the page is coloured but the code. *//* The deck's bundled fonts (docs/presentation/fonts/, SIL OFL), from the deck's own route: the CSP's default-src 'self' refuses a font CDN, and one copy beats two. */@font-face{font-family:"Newsreader";font-style:normal;font-weight:400500;font-display:swap;src:url("/story/fonts/newsreader.woff2")format("woff2");}@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/story/fonts/atkinson-hyperlegible-400.woff2")format("woff2");}@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/story/fonts/atkinson-hyperlegible-700.woff2")format("woff2");}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400600;font-display:swap;src:url("/story/fonts/jetbrains-mono.woff2")format("woff2");}:root{--paper:#F2F4F6;--panel:#E9EDF1;--well:#FFFFFF;--rule:#E3E7EC;--edge:#D3D9E0;--ink:#16233B;--ink-soft:#4A5870;--ln:#6B778A;--accent:#E8701A;--target:#FDF1E6;--selected-bg:#16233B;--selected-fg:#F2F4F6;--mark:#FBD38D;--scrim:rgba(22,35,59,0.45);/* the code */--t-keyword:#2B3F96;--t-string:#8A4510;--t-doc:#4A5870;--t-comment:#5E6B80;--t-name:#16233B;--t-number:#7A2E59;--t-decorator:#3D6B4A;--t-variable:#6A3D9A;--serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono","Cascadia Code",Consolas,monospace;color-scheme:light;}/* Dark: the system's choice unless the toggle said light; or the toggle's. */@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#18181B;--panel:#202024;--well:#1F1F23;--rule:#3F3F46;--edge:#52525B;--ink:#E5E7EB;--ink-soft:#A1A1AA;--ln:#8B929D;--accent:#F97316;--target:#3A2A12;--selected-bg:#E5E7EB;--selected-fg:#18181B;--mark:#FBBF24;--scrim:rgba(0,0,0,0.55);--t-keyword:#7DB3F7;--t-string:#FBBF24;--t-doc:#A1A1AA;--t-comment:#A1A1AA;--t-name:#F4F4F5;--t-number:#F9A8D4;--t-decorator:#86EFAC;--t-variable:#C4B5FD;color-scheme:dark;}}:root[data-theme="dark"]{--paper:#18181B;--panel:#202024;--well:#1F1F23;--rule:#3F3F46;--edge:#52525B;--ink:#E5E7EB;--ink-soft:#A1A1AA;--ln:#8B929D;--accent:#F97316;--target:#3A2A12;--selected-bg:#E5E7EB;--selected-fg:#18181B;--mark:#FBBF24;--scrim:rgba(0,0,0,0.55);--t-keyword:#7DB3F7;--t-string:#FBBF24;--t-doc:#A1A1AA;--t-comment:#A1A1AA;--t-name:#F4F4F5;--t-number:#F9A8D4;--t-decorator:#86EFAC;--t-variable:#C4B5FD;color-scheme:dark;}*{box-sizing:border-box;}html,body{margin:0;}body{background:var(--paper);color:var(--ink);font:4001rem/1.5var(--sans);display:flex;flex-direction:column;height:100vh;height:100dvh;}a{color:var(--ink);}a:hover{color:var(--ink-soft);}:focus-visible{outline:2pxsolidvar(--accent);outline-offset:2px;}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}.grow{flex-grow:1;}[hidden]{display:none!important;}/* ── the bar ─────────────────────────────────────────────────────────────────────── */.bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px28px;border-bottom:1pxsolidvar(--rule);}.brand{font:5001.5rem/1.2var(--serif);text-decoration:none;letter-spacing:-0.01em;}.tagline{color:var(--ink-soft);font-size:0.95rem;}.github{display:inline-flex;align-items:center;gap:6px;font-size:0.95rem;}button{font:inherit;color:inherit;cursor:pointer;}.icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1pxsolidvar(--rule);background:var(--well);border-radius:8px;}.theme-toggle.sun{display:none;}:root[data-theme="dark"].theme-toggle.sun{display:block;}:root[data-theme="dark"].theme-toggle.moon{display:none;}html:not(.js).theme-toggle,html:not(.js).files-toggle,html:not(.js).files-close{display:none;}.files-toggle{display:none;align-items:center;gap:8px;height:44px;padding:014px;border:1pxsolidvar(--selected-bg);background:var(--selected-bg);color:var(--selected-fg);border-radius:8px;font-weight:700;}/* ── the two columns ─────────────────────────────────────────────────────────────── */.body{flex:1;min-height:0;display:flex;}main{flex:1;min-width:0;overflow:auto;padding:32px40px48px;}.files{width:340px;flex:none;overflow:auto;background:var(--panel);border-left:1pxsolidvar(--rule);padding:20px12px20px16px;display:flex;flex-direction:column;gap:12px;}.files>*{flex-shrink:0;}/* a scrolling column: its rows keep their height *//* ── the file ────────────────────────────────────────────────────────────────────── */.crumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--ink-soft);font-size:0.95rem;}.crumbsa{color:var(--ink-soft);}.crumbs[aria-current]{color:var(--ink);font-weight:700;}h1{font:4002.25rem/1.2var(--serif);letter-spacing:-0.01em;max-width:26em;margin:16px018px;text-wrap:pretty;}h1code{font:0.8emvar(--mono);}.meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0020px;color:var(--ink-soft);}.button{height:36px;padding:014px;display:inline-flex;align-items:center;border:1pxsolidvar(--edge);background:var(--well);border-radius:6px;color:var(--ink);text-decoration:none;font-size:0.95rem;}.button:hover{border-color:var(--ink-soft);color:var(--ink);}.notice{background:var(--panel);border-radius:6px;padding:10px14px;color:var(--ink-soft);max-width:72ch;}pre.code{margin:0;padding:16px0;overflow-x:auto;background:var(--well);border:1pxsolidvar(--rule);border-radius:8px;font:4000.84rem/1.65var(--mono);tab-size:4;}pre.codecode{display:inline-block;min-width:100%;font:inherit;}.line{display:block;padding-right:24px;scroll-margin-block:30vh;}.ln{display:inline-block;min-width:6ch;padding:02ch01ch;text-align:right;color:var(--ln);text-decoration:none;user-select:none;}.ln::before{content:attr(data-n);}.ln:hover{color:var(--ink);}.line:target{background:var(--target);box-shadow:inset3px00var(--accent);}.line:target.ln{color:var(--ink);font-weight:600;}/* Pygments' short token classes (HtmlFormatter), on the palette above. */.k,.kc,.kd,.kn,.kp,.kr,.ow,.nt{color:var(--t-keyword);font-weight:600;}.kt,.nb,.bp,.fm{color:var(--t-keyword);}.s,.sa,.sb,.sc,.dl,.s1,.s2,.se,.sh,.si,.sx,.sr,.ss{color:var(--t-string);}.sd{color:var(--t-doc);font-style:italic;}.c,.ch,.cm,.c1,.cs,.cpf{color:var(--t-comment);font-style:italic;}.nf,.nc,.ne{color:var(--t-name);font-weight:600;}.m,.mb,.mf,.mh,.mi,.il,.mo,.cp,.no{color:var(--t-number);}.nd,.na{color:var(--t-decorator);}.nv,.vc,.vg,.vi,.vm{color:var(--t-variable);}.gh,.gu,.gs{font-weight:600;}.ge{font-style:italic;}/* ── a folder ────────────────────────────────────────────────────────────────────── */.contents{list-style:none;margin:0;padding:0;max-width:76ch;border-top:1pxsolidvar(--rule);}.contentsli{padding:12px0;border-bottom:1pxsolidvar(--rule);}.contentsa{font-weight:700;font-size:1.05rem;}.contentsp{margin:4px00;color:var(--ink-soft);}/* ── the tree ────────────────────────────────────────────────────────────────────── */.files-head{display:flex;align-items:center;justify-content:space-between;padding:04px;}.files-headlabel{font-weight:700;}.files-close{display:none;}#filter{height:40px;border:1pxsolidvar(--edge);border-radius:6px;padding:012px;font:inherit;font-size:0.95rem;background:var(--well);color:var(--ink);}.filter-count{margin:0;padding:04px;color:var(--ink-soft);font-size:0.875rem;}.tree{font-size:0.94rem;line-height:1.35;}.treeul{list-style:none;margin:0;padding:0;}.treeulul{padding-left:18px;}.treesummary,.treea{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px10px;border-radius:4px;white-space:nowrap;text-decoration:none;cursor:pointer;}.treesummary{color:var(--ink-soft);list-style:none;}.treesummary::-webkit-details-marker{display:none;}.treesummary::before{content:'';width:6px;height:6px;flex:none;margin:04px02px;border-right:2pxsolidcurrentColor;border-bottom:2pxsolidcurrentColor;transform:rotate(-45deg);transition:transform120msease;}.treedetails[open]>summary::before{transform:rotate(45deg);}.treea{padding-left:28px;}.treesummary:hover,.treea:hover{background:var(--rule);color:var(--ink);}.treea[aria-current="page"]{background:var(--selected-bg);color:var(--selected-fg);font-weight:700;}.treemark{background:var(--mark);color:#18181B;border-radius:2px;}.files-foot{margin:auto00;padding:12px4px0;border-top:1pxsolidvar(--edge);color:var(--ink-soft);font-size:0.875rem;}.scrim{display:none;}/* ── a phone: the tree becomes a drawer from the right ───────────────────────────── */@media(max-width:820px){body{height:auto;}.bar{padding:10px16px;gap:12px;}.tagline,.github{display:none;}.icon{width:44px;height:44px;}.files-toggle{display:inline-flex;}.body{display:block;}main{overflow:visible;padding:20px16px32px;}h1{font-size:1.7rem;margin:12px014px;}.button{height:44px;}pre.code{font-size:0.78rem;}.files{width:auto;border-left:0;border-top:1pxsolidvar(--rule);}.treesummary,.treea{min-height:44px;}html.js.files{position:fixed;top:0;right:0;bottom:0;z-index:2;width:min(340px,88vw);border-top:0;box-shadow:-12px032pxrgba(0,0,0,0.25);transform:translateX(100%);visibility:hidden;transition:transform180msease,visibility0slinear180ms;}html.jsbody.files-open.files{transform:none;visibility:visible;transition:transform180msease;}html.js.files-close{display:inline-flex;}html.jsbody.files-open.scrim{display:block;position:fixed;inset:0;z-index:1;background:var(--scrim);}html.jsbody.files-open{overflow:hidden;}}@media(prefers-reduced-motion:reduce){*{transition:none!important;}}