/* Dark by design, light as a faithful counterpart — a reader on a light system
   should not be handed a black page, and a reader on a dark one should get the
   page this was drawn for. */
:root{
--bg:#fff;--panel:#fafafa;--fg:#10121a;--muted:#5d6373;--line:#e4e6ee;
--accent:#005efa;--accent-ink:#fff;--code:#f3f4f8;--ok:#005efa;--dot:rgba(16,18,26,.08)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#0a0c14;--panel:#0e111b;--fg:#eef1f8;--muted:#8b93a7;--line:#1d2231;
--accent:#2b7bff;--accent-ink:#fff;--code:#12161f;--ok:#2b7bff;--dot:rgba(255,255,255,.07)}}
:root[data-theme="dark"]{
--bg:#0a0c14;--panel:#0e111b;--fg:#eef1f8;--muted:#8b93a7;--line:#1d2231;
--accent:#2b7bff;--accent-ink:#fff;--code:#12161f;--ok:#2b7bff;--dot:rgba(255,255,255,.07)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:16px/1.68 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,
Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.layout{display:grid;grid-template-columns:296px minmax(0,1fr) 232px;min-height:100vh}
nav.side{background:var(--panel);border-right:1px solid var(--line);padding:24px 16px;
overflow-y:auto;max-height:100vh;position:sticky;top:0}
nav.side h1{font-size:14px;margin:0 0 20px;letter-spacing:-.01em}
nav.side h1 a{color:var(--fg);text-decoration:none}
nav.side h1 a::before{content:"";display:inline-block;width:9px;height:9px;
background:var(--accent);margin-right:9px;vertical-align:2px}
nav.side details.group{margin:2px 0}
nav.side details.group>summary{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
margin:15px 0 6px;cursor:pointer;list-style:none;line-height:1.5}
nav.side details.group>summary::-webkit-details-marker{display:none}
nav.side details.group>summary::before{content:"\25b8";display:inline-block;width:1em;
font-size:9px;transition:transform .12s}
nav.side details.group[open]>summary::before{transform:rotate(90deg)}
nav.side details.group>summary:hover{color:var(--accent)}
nav.side a.page{display:block;padding:5px 10px;border-radius:7px;color:var(--fg);
text-decoration:none;font-size:13.5px;opacity:.82}
nav.side a.page:hover{background:var(--line);opacity:1}
nav.side a.page[aria-current]{background:var(--line);opacity:1;font-weight:600;
box-shadow:inset 2px 0 0 var(--accent)}
nav.side details.group>a.page{margin-left:1em}
nav.side details.group.d1>summary{text-transform:none;letter-spacing:0;font-family:inherit;
font-size:12.5px;margin:9px 0 4px .7em}
nav.side details.group.d1>a.page{margin-left:1.8em}
nav.side details.group.d2>summary{margin-left:1.4em}
nav.side details.group.d2>a.page{margin-left:2.5em}
main{padding:44px 56px 96px;max-width:868px}
aside.onthispage .onthispage-title{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
aside.onthispage{padding:44px 18px;font-size:13px;position:sticky;top:0;
max-height:100vh;overflow-y:auto}
aside.onthispage a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
aside.onthispage a:hover{color:var(--accent)}
aside.onthispage a.h3{padding-left:12px}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}
h1{font-size:2.1rem;margin:.1em 0 .6em}
h2{margin-top:2.3em;padding-top:.45em;border-top:1px solid var(--line)}
code{background:var(--code);padding:.13em .38em;border-radius:5px;font-size:.89em;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
pre{background:var(--code);padding:15px 17px;border-radius:10px;overflow-x:auto;
border:1px solid var(--line)}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left}
th{background:var(--panel)}
blockquote{margin:1em 0;padding:.5em 1.1em;border-left:3px solid var(--accent);color:var(--muted)}
img{max-width:100%}
/* The quiz: choose, and the reason appears. No script — the same markup runs in
   a notebook, where a script inserted through innerHTML never executes. */
.question{margin:1.3em 0 2em}
.choices{list-style:none;margin:0;padding:0}
.choice{margin:8px 0}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label{display:flex;gap:.75em;align-items:flex-start;cursor:pointer;
padding:11px 14px;border:1px solid var(--line);border-radius:10px;
background:var(--panel);transition:border-color .12s,background .12s}
.choice label:hover{border-color:var(--accent)}
.choice .box{flex:0 0 auto;width:16px;height:16px;margin-top:.2em;border-radius:4px;
border:1.5px solid var(--muted);transition:background .12s,border-color .12s}
.choice input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.choice input:checked+label{border-color:var(--accent)}
.choice input:checked+label .box{background:var(--accent);border-color:var(--accent)}
.choice.right input:checked+label{border-color:var(--ok)}
.choice.right input:checked+label .box{background:var(--ok);border-color:var(--ok)}
.choice .explain{display:none;margin:8px 0 0 2.6em;padding:9px 14px;font-size:14px;
color:var(--muted);border-left:2px solid var(--line)}
.choice input:checked~.explain{display:block}
.choice.right input:checked~.explain{border-left-color:var(--ok);color:var(--fg)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:68px;
padding-top:22px;border-top:1px solid var(--line);font-size:14px}
.pager a{text-decoration:none}
.crumb{font-family:ui-monospace,Menlo,monospace;color:var(--muted);font-size:11px;
letter-spacing:.07em;text-transform:uppercase;margin-bottom:10px}
@media(max-width:1100px){.layout{grid-template-columns:264px minmax(0,1fr)}
aside.onthispage{display:none}}
@media(max-width:760px){.layout{grid-template-columns:1fr}
nav.side{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
main{padding:28px 20px 72px}}