
/* Layout: a demo banner, then a sticky module rail on the left and one section per module, documents beside study notes, check questions under each. Lagrange Studios design system: radius 0, hairlines, no shadows. */
:root{
  --bg:#F7F4EC; --surface:#FBFAF6; --quiet:#EDE8DB; --ink:#12253D; --muted:#4E5D71; --secondary:#2E4560;
  --line:rgba(18,37,61,.16); --line-strong:rgba(18,37,61,.42); --accent:#8F5A10; --cta:#CBA75F; --cta-ink:#12253D; --link:#3F63E8;
  --band:#161816; --band-ink:#F7F4EC; --band-muted:#9BC7EA;
  --sans:Arial,"Helvetica Neue",sans-serif; --serif:Arial,Helvetica,sans-serif; --mono:ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#061A2B;--surface:#09243A;--quiet:#09243A;--ink:#F7F4EC;--muted:#9BC7EA;--secondary:#C9D9E8;--line:rgba(247,244,236,.18);--line-strong:rgba(247,244,236,.34);--accent:#F2BC4B;--cta:#CBA75F;--cta-ink:#12253D;--link:#9BC7EA;--band:#09243A;--band-ink:#F7F4EC;--band-muted:#9BC7EA;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#061A2B;--surface:#09243A;--quiet:#09243A;--ink:#F7F4EC;--muted:#9BC7EA;--secondary:#C9D9E8;--line:rgba(247,244,236,.18);--line-strong:rgba(247,244,236,.34);--accent:#F2BC4B;--cta:#CBA75F;--cta-ink:#12253D;--link:#9BC7EA;--band:#09243A;--band-ink:#F7F4EC;--band-muted:#9BC7EA;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.mono{font:400 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,56px);padding-block:0 96px}

.demo{background:var(--band);color:var(--band-ink)}
.demo .wrap{padding-block:14px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.demo .mono{color:var(--band-muted)}
.demo p{margin:0;font-size:14px;max-width:80ch}

.top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;padding-block:48px 24px;border-bottom:1.5px solid var(--line-strong)}
.top h1{font:400 clamp(36px,5vw,64px)/1 var(--sans);letter-spacing:-.045em;margin:12px 0 0;text-wrap:balance}
.top p{margin:16px 0 0;color:var(--secondary);max-width:62ch;font-size:clamp(16px,1.4vw,19px);line-height:1.45}
.stats{display:flex;flex-wrap:wrap;gap:24px}
.stats span{display:flex;flex-direction:column;gap:4px}
.stats b{font:400 32px/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
@media (max-width:760px){.top{grid-template-columns:minmax(0,1fr)}}

.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;margin-top:32px}
nav.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);align-self:start;display:flex;flex-direction:column;border-top:1px solid var(--line)}
nav.rail a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:9px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.3}
nav.rail a .mono{padding-top:2px}
nav.rail a:hover,nav.rail a:focus-visible{background:var(--quiet)}

section.mod{padding-block:8px 48px;margin-bottom:40px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.mhead{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:24px}
.mhead h2{font:400 clamp(28px,3.2vw,42px)/1.05 var(--sans);letter-spacing:-.04em;margin:0;text-wrap:balance}
.mhead .can{margin:0;color:var(--secondary);max-width:68ch}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px}
@media (max-width:1080px){.grid{grid-template-columns:minmax(0,1fr)}}
.sub{margin:0 0 12px}

.doclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doclist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.dt{font-weight:500}
.dd{grid-column:1;color:var(--muted);font-size:14px;line-height:1.5}
.tag{grid-column:2;grid-row:1/3;align-self:center;font:400 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:5px 7px}
button.open{grid-column:2;grid-row:1/3;align-self:center;font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;background:var(--cta);color:var(--cta-ink);border:0;padding:9px 12px;cursor:pointer}
button.open:hover{filter:brightness(1.05)}
.reports{margin:16px 0 0;padding:0;list-style:none}
.reports li{font:400 13px/1.5 var(--mono);padding:4px 0;color:var(--secondary)}

.notes{max-width:68ch}
.notes h3{font:500 17px/1.3 var(--sans);margin:0 0 8px;letter-spacing:-.01em}
.notes p{margin:8px 0}
.notes ul,.notes ol{margin:6px 0 14px;padding-left:20px}
.notes li{margin:4px 0}
.notes code{font:400 13px/1.4 var(--mono);background:var(--quiet);padding:1px 5px;overflow-wrap:anywhere}
.notes .rule{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:14px 0;color:var(--secondary)}

.quiz{margin-top:24px;padding:18px 20px;background:var(--surface);border:1px solid var(--line)}
.quiz p.note{margin:4px 0 12px;font-size:14px;color:var(--muted)}
.quiz ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.quiz label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.quiz input{margin-top:5px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.quiz input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent)}

aside.end{padding-block:32px;border-top:1.5px solid var(--line-strong);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
aside.end p{margin:0;max-width:70ch;color:var(--secondary);font-size:14px}

dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);border-radius:0}
dialog::backdrop{background:rgba(6,26,43,.6)}
.dbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;background:var(--band);color:var(--band-ink)}
.dbar .mono{color:var(--band-muted)}
.dbar button{font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;background:transparent;color:var(--band-ink);border:1px solid var(--band-muted);padding:8px 12px;cursor:pointer}
.doc{padding:32px clamp(20px,4vw,48px) 48px;max-width:72ch}
.doc h2{font:400 clamp(26px,3vw,36px)/1.08 var(--sans);letter-spacing:-.04em;margin:8px 0 12px}
.doc h3{font:500 17px/1.3 var(--sans);margin:28px 0 8px}
.doc p{margin:8px 0}
.doc ol,.doc ul{padding-left:20px}
.doc li{margin:4px 0}
.doc .lede{color:var(--secondary);font-size:17px;line-height:1.5}
.tbl{overflow-x:auto;margin:12px 0}
.tbl table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:400 10.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--line-strong)}
.tbl td code{font:400 12.5px/1.4 var(--mono)}
.stamp{margin-top:32px;padding-top:12px;border-top:1px solid var(--line)}

@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr);gap:16px}
  nav.rail{flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1px solid var(--line);background:var(--bg);top:env(safe-area-inset-top,0px);z-index:2;padding-block:4px}
  nav.rail a{flex:none;border-bottom:0;grid-template-columns:auto auto;padding:8px 10px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}#reset-checks{font:12px/1.5 Arial,sans-serif;border:0;padding:8px 0;background:transparent;color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}button.open,.dbar button{min-height:44px;min-width:44px}.doc code{overflow-wrap:anywhere}.rail a:target{background:var(--quiet)}@media(max-width:600px){.stats{gap:18px}.stats b{font-size:28px}.doclist li{gap:8px}.tag{font-size:9px;padding:5px}.top{padding-top:30px}nav.rail{position:relative;top:auto}.doclist .dd{overflow-wrap:anywhere}}/* The library is an intentional paper reading surface inside the global dark shell. */
:root{--bg:#f4f3ed;--surface:#fbfaf6;--quiet:#edece5;--ink:#161816;--muted:#555c50;--secondary:#343b30;--line:#16181629;--line-strong:#16181666;--accent:#765925;--cta:#cba75f;--cta-ink:#161816;--link:#70511c;--band:#161816;--band-ink:#f4f3ed;--band-muted:#afb3a8;--sans:Arial,Helvetica,sans-serif}
body.page-library{background:#161816;color:#f4f3ed}.library-content{background:var(--bg);color:var(--ink)}.library-content .wrap{width:min(1240px,calc(100% - 80px));padding-inline:0}.library-content .demo .wrap{padding-block:18px}.library-content .top h1{font-family:Arial,Helvetica,sans-serif}.library-content .layout{min-width:0}.library-content .layout>*{min-width:0}dialog::backdrop{background:#161816b3}.library-content button.open{border-radius:40px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:0;text-transform:none}.library-content .doc code{word-break:break-word}.library-content :focus-visible{outline:3px solid #765925;outline-offset:4px}.library-content .dbar button:focus-visible{outline-color:#cba75f}
@media(max-width:700px){.library-content .wrap{width:calc(100% - 40px)}.library-content .quiz{padding:18px 15px}.library-content .top h1{font-size:38px}.library-content .doclist{min-width:0}}
