@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:light;--paper:#f2eee3;--paper-2:#e9e3d3;--grid:#d8d2c0;--grid-major:#c9c1aa;--ink:#1d2530;--ink-2:#4a4f55;--muted:#7a7566;--conc:#b4432a;--conc-wash:#f0d9cc;--dif:#2b5597;--dif-wash:#d8e1ee;--mix:#6b3f86;--mix-wash:#ece3f0;--sans:'Archivo',system-ui,sans-serif;--serif:'Spectral',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
:root[data-theme="dark"]{color-scheme:dark;--paper:#14171d;--paper-2:#1e2229;--grid:#1a1e25;--grid-major:#252a32;--ink:#e5e3da;--ink-2:#a3a6a6;--muted:#868a8e;--conc:#dd8b6b;--conc-wash:#372824;--dif:#7fb0dd;--dif-wash:#1e2c3b;--mix:#b99ad0;--mix-wash:#2b2635}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}body{margin:0;min-width:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--serif);background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid) .5px,transparent .5px),linear-gradient(90deg,var(--grid) .5px,transparent .5px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-attachment:fixed}a{color:inherit;text-underline-offset:3px}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--dif);outline-offset:3px}.topbar{display:flex;align-items:center;gap:16px;padding:18px clamp(16px,4vw,48px);font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}.topbar>a{text-decoration:none}.topbar>span{margin-left:auto}.theme-toggle{display:inline-flex;align-items:center;gap:8px;padding:4px 2px;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}.tt-track{position:relative;width:30px;height:16px;border:1.5px solid currentColor;border-radius:9px}.tt-knob{position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--conc);transition:transform .25s}.theme-toggle[aria-pressed="true"] .tt-knob{transform:translateX(14px);background:var(--dif)}
.page{width:min(100% - 32px,900px);margin:32px auto 72px}.page-head{padding:0 0 24px;border-bottom:1.5px solid var(--ink)}.eyebrow,.group-kicker{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--conc);margin:0}.page h1{font:800 clamp(42px,8vw,76px)/.98 var(--sans);letter-spacing:-.04em;margin:16px 0 10px}.intro{font-size:20px;color:var(--ink-2);margin:0;max-width:42ch}.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.tools button,.file-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 13px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:600 13px var(--sans);cursor:pointer;text-decoration:none}.tools button:hover,.file-button:hover{background:var(--paper-2)}.file-button input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.status{min-height:1.4em;margin:12px 0 0;color:var(--ink-2);font:12px/1.4 var(--mono)}.notebook{padding-top:25px}.empty{margin:0;padding:24px 0;color:var(--ink-2);font-size:20px}.course-group{margin:0 0 36px}.course-group>h2{font:750 26px/1.15 var(--sans);margin:0;padding:0 0 10px;border-bottom:1.5px solid var(--ink)}.lesson-group{margin:20px 0 0}.lesson-group>h3{font:600 15px/1.35 var(--sans);margin:0 0 7px;color:var(--ink-2)}.entry-list{list-style:none;padding:0;margin:0;border-top:1px dotted var(--grid-major)}.entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;padding:13px 0;border-bottom:1px dotted var(--grid-major);min-width:0}.entry-main{min-width:0}.entry a{font:600 15px/1.4 var(--sans);text-decoration-thickness:1px;overflow-wrap:anywhere}.entry a:hover{color:var(--conc)}.entry-kind{display:block;margin:0 0 4px;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.entry blockquote{margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid var(--dif);font:italic 16px/1.45 var(--serif);overflow-wrap:anywhere}.delete{border:0;background:transparent;color:var(--muted);padding:5px 2px;font:500 11px var(--mono);cursor:pointer;text-decoration:underline;text-underline-offset:3px}.delete:hover{color:var(--conc)}.foot{display:flex;justify-content:space-between;gap:14px;border-top:1.5px solid var(--ink);padding:18px clamp(16px,4vw,48px);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}@media(max-width:540px) and (orientation:portrait){.topbar{gap:8px;padding:14px 16px;font-size:10px}.topbar>span{display:none}.theme-toggle{margin-left:auto}.page{width:calc(100% - 32px);margin:24px auto 54px}.page h1{font-size:48px}.intro{font-size:18px}.entry{gap:8px}.delete{font-size:10px}.course-group>h2{font-size:23px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Paper: pinned on desktop and landscape (the page slides over the drafting table); in portrait it scrolls with the text (written on the paper). Chairman 07/10. iOS ignores fixed backgrounds, which is how this started. */
@media (orientation:portrait) and (max-width:1099px){body{background-attachment:scroll}}