/* ============================================================================ Paper Explainer — shared design system Adapted from the tuul.dev AlphaZero / nano-omni decks. Long-form, scrollable article layout. Light + dark themes. ========================================================================== */ :root{ --sans:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Text',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; --serif:'Newsreader','Iowan Old Style',Georgia,serif; --display:'Fraunces',Georgia,serif; --r-card:18px;--r-btn:12px; --measure:720px; } /* LIGHT (default) */ :root, html[data-theme="light"]{ --board:#f5f5f7;--board-2:#ececef;--panel:#ffffff;--frame:rgba(13,15,17,.10); --chalk:#1d1d1f;--chalk-dim:#494d54;--chalk-faint:#86868b; --coral:#c0392b;--blue:#0077b0;--green:#1a7a4d;--violet:#7d4cdb;--amber:#9a6a13; --link:#0077b0;--brand:#0090d4;--glow:#2ccaff;--em:#1d1d1f;--strong:#000000; --note-bg:rgba(0,144,212,.05);--code-bg:rgba(0,144,212,.07); --glass:rgba(255,255,255,.74);--hairline:rgba(13,15,17,.10); --shadow:rgba(18,30,48,.10);--fill:rgba(13,15,17,.04);--fill-hover:rgba(13,15,17,.07); --canvas-bg:#0e1018; } /* DARK (warm graphite) */ html[data-theme="dark"]{ --board:#0b0a09;--board-2:#000000;--panel:#1b1917;--frame:rgba(250,245,235,.16); --chalk:#f6f3ee;--chalk-dim:#b8b2a8;--chalk-faint:#8b857c; --coral:#ec8a72;--blue:#7fc9e8;--green:#9fd6a8;--violet:#cf9fe6;--amber:#e0a86a; --link:#e8b878;--brand:#e0a86a;--glow:#f3c674;--em:#f0e9dd;--strong:#fffaf2; --note-bg:rgba(224,168,106,.10);--code-bg:rgba(224,168,106,.13); --glass:rgba(27,25,23,.66);--hairline:rgba(250,245,235,.12); --shadow:rgba(0,0,0,.5);--fill:rgba(250,245,235,.06);--fill-hover:rgba(250,245,235,.14); --canvas-bg:#0e1018; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--board);color:var(--chalk); font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.72; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; background-image:radial-gradient(ellipse at 50% -14%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 58%), linear-gradient(180deg,var(--board),var(--board-2)); background-attachment:fixed;min-height:100vh; } /* ---- accent (per-paper, set inline on ) ---- */ :root{--accent:var(--blue);--accent-2:var(--violet);} /* ============================ top chrome ============================== */ .topbar{ position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px; padding:10px clamp(16px,4vw,40px); background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--hairline); } .topbar .home{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase; color:var(--chalk-faint);text-decoration:none;padding:5px 10px;border-radius:8px} .topbar .home:hover{background:var(--fill);color:var(--chalk)} .topbar .crumb{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--chalk);flex:1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar .crumb b{color:var(--accent)} /* The page controls (✎ draw · ✐ notes · ☾☀ theme) are styled by the shared deck-chrome.css (.flow-btn / .theme-toggle / .deck-controls). */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60; background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent)} /* ============================== hero ================================= */ .hero{max-width:var(--measure);margin:0 auto;padding:clamp(40px,7vw,86px) clamp(20px,5vw,28px) 8px} .kicker{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);font-weight:600;margin:0 0 18px} .kicker .dot{opacity:.5;margin:0 .5em} h1.title{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,5.6vw,3.4rem); line-height:1.08;letter-spacing:-.012em;margin:0 0 .5em;color:var(--strong)} .byline{font-family:var(--sans);font-size:.96rem;color:var(--chalk-dim);line-height:1.55;margin:0 0 6px} .byline .venue{color:var(--accent);font-weight:600} .tldr{font-family:var(--serif);font-size:1.18rem;line-height:1.6;color:var(--chalk); margin:26px 0 10px;padding:18px 22px;border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:0 14px 14px 0} .tldr b{color:var(--strong)} /* ============================ article =============================== */ article{max-width:var(--measure);margin:0 auto;padding:0 clamp(20px,5vw,28px) 120px} section{padding-top:30px;scroll-margin-top:70px} h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.05rem); letter-spacing:-.01em;line-height:1.18;margin:40px 0 4px;color:var(--strong)} h2 .num{font-family:var(--mono);font-size:.62em;font-weight:500;color:var(--accent);margin-right:.6em; opacity:.8;letter-spacing:0} h3{font-family:var(--sans);font-weight:700;font-size:1.16rem;letter-spacing:-.005em; margin:34px 0 2px;color:var(--strong)} p{margin:16px 0} article a{color:var(--link);text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent)} b,strong{color:var(--strong);font-weight:600} em{font-style:italic;color:var(--em)} .lead{font-size:1.08rem;color:var(--chalk-dim)} code{font-family:var(--mono);font-size:.82em;color:var(--green);background:var(--code-bg);padding:.07em .36em;border-radius:5px} ul,ol{padding-left:1.3em} li{margin:8px 0} hr.div{border:0;height:1px;background:var(--hairline);margin:54px 0} /* section divider eyebrow */ .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--chalk-faint);font-weight:600;margin:0} /* ============================ callouts ============================== */ .box{border-radius:var(--r-card);padding:18px 22px 16px;margin:26px 0;border:1px solid var(--hairline); background:var(--panel);box-shadow:0 6px 22px var(--shadow);position:relative;overflow:hidden} .box .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:8px} .box p:first-of-type{margin-top:4px}.box p:last-child{margin-bottom:4px} .box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px} .box.insight::before{background:var(--accent)} .box.insight .tag{color:var(--accent)} .box.intuition::before{background:var(--violet)} .box.intuition .tag{color:var(--violet)} .box.result::before{background:var(--green)} .box.result .tag{color:var(--green)} .box.limitation::before{background:var(--coral)} .box.limitation .tag{color:var(--coral)} .box.note::before{background:var(--chalk-faint)} .box.note .tag{color:var(--chalk-faint)} /* big stat row */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0} .stat{background:var(--panel);border:1px solid var(--hairline);border-radius:14px;padding:16px 18px; box-shadow:0 4px 16px var(--shadow)} .stat .v{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1;color:var(--accent)} .stat .l{font-family:var(--sans);font-size:.82rem;color:var(--chalk-dim);margin-top:8px;line-height:1.35} /* ============================= figures ============================== */ figure{margin:30px 0;text-align:center} figure img{max-width:100%;border-radius:14px;border:1px solid var(--hairline); background:var(--panel);box-shadow:0 10px 34px var(--shadow)} figure.bleed{max-width:none;width:min(960px,94vw);margin-left:50%;transform:translateX(-50%)} figcaption{font-family:var(--sans);font-size:.86rem;color:var(--chalk-dim);line-height:1.5; margin-top:12px;max-width:var(--measure);margin-left:auto;margin-right:auto;text-align:left} figcaption b{color:var(--chalk)} /* ============================ equations ============================= */ .eq{margin:24px 0;padding:16px 20px;background:var(--panel);border:1px solid var(--hairline); border-radius:14px;box-shadow:0 4px 16px var(--shadow);position:relative;overflow-x:auto} .eq .katex{font-size:1.06em} .eq .eqlbl{position:absolute;right:14px;top:50%;transform:translateY(-50%); font-family:var(--mono);font-size:.7rem;color:var(--chalk-faint)} .eq .gloss{font-family:var(--sans);font-size:.84rem;color:var(--chalk-dim);margin-top:10px; padding-top:10px;border-top:1px dashed var(--hairline);text-align:left} .eq .gloss b{color:var(--accent)} /* ============================ animations ============================ */ .anim{clear:both;margin:30px 0;border:1px solid var(--hairline);border-radius:16px; background:var(--canvas-bg);overflow:hidden;box-shadow:0 12px 40px var(--shadow)} .anim canvas{display:block;width:100%} .anim-head{display:flex;align-items:baseline;gap:10px;padding:13px 18px 0} .anim-head .ttl{font-family:var(--sans);font-weight:700;font-size:.92rem;color:#f3f6fb} .anim-head .sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#7e8aa0} .anim-cap{display:flex;align-items:center;gap:14px;padding:11px 18px 14px;border-top:1px solid rgba(150,170,210,.12)} .anim-txt{flex:1;color:#eaf0f8;font-size:.96rem;line-height:1.5;font-family:var(--serif)} .anim-ctrls{display:flex;gap:8px;flex-shrink:0} .anim-btn{font-family:var(--mono);font-size:.7rem;cursor:pointer;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);color:#cfd6e2;border-radius:8px;padding:6px 11px} .anim-btn:hover{background:rgba(255,255,255,.15);color:#fff} /* interactive control row (sliders / toggles / step buttons) — sits on the dark canvas chrome, so it is theme-independent like the canvas itself. Wired by ANIM.stage(opts.controls). */ .anim-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px; padding:12px 18px 2px;border-top:1px solid rgba(150,170,210,.12)} .ac-item{display:flex;align-items:center;gap:9px} .ac-lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:#9fb0cb;white-space:nowrap} .ac-range{-webkit-appearance:none;appearance:none;height:4px;width:130px;border-radius:3px;margin:0; background:rgba(255,255,255,.16);outline:none;cursor:pointer} .ac-range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%; background:#58c4dd;border:2px solid #0e1018;cursor:pointer;box-shadow:0 0 7px rgba(88,196,221,.65)} .ac-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#58c4dd; border:2px solid #0e1018;cursor:pointer;box-shadow:0 0 7px rgba(88,196,221,.65)} .ac-val{font-family:var(--mono);font-size:.7rem;color:#eaf0f8;min-width:38px} .anim-btn.ac-toggle.on,.anim-btn.on{background:rgba(88,196,221,.22); border-color:rgba(88,196,221,.5);color:#dff3fb} .anim-btn.ac-press:active{transform:translateY(1px)} /* ============================== TOC ================================ */ .toc{position:fixed;right:max(18px,calc(50vw - 560px));top:50%;transform:translateY(-50%);z-index:30; display:flex;flex-direction:column;gap:2px;padding:6px} .toc a{font-family:var(--sans);font-size:.74rem;color:var(--chalk-faint);text-decoration:none; padding:4px 10px;border-radius:7px;border-left:2px solid transparent;line-height:1.3; max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.18s} .toc a:hover{color:var(--chalk);background:var(--fill)} .toc a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600} @media(max-width:1180px){.toc{display:none}} /* ============================ footer =============================== */ footer{max-width:var(--measure);margin:0 auto;padding:40px clamp(20px,5vw,28px) 90px; border-top:1px solid var(--hairline);font-family:var(--sans);font-size:.86rem;color:var(--chalk-dim)} footer a{color:var(--link)} .nav-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .nav-card{display:block;padding:16px 18px;border:1px solid var(--hairline);border-radius:14px; background:var(--panel);text-decoration:none;color:var(--chalk);box-shadow:0 4px 16px var(--shadow)} .nav-card:hover{border-color:var(--accent)} .nav-card .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-faint)} .nav-card .t{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-top:4px;color:var(--strong)} @media(max-width:560px){.nav-cards{grid-template-columns:1fr}} /* ===================== code compare panel ===================== */ .codecompare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0} @media(max-width:620px){.codecompare{grid-template-columns:1fr}} .codecard{border:1px solid var(--hairline);border-radius:14px;background:var(--panel); box-shadow:0 6px 22px var(--shadow);overflow:hidden;display:flex;flex-direction:column} .codecard .chead{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hairline); font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--strong)} .codecard .tier{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase; padding:2px 8px;border-radius:999px;font-weight:600} .tier.verified{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)} .tier.caller{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .codecard pre{margin:0;padding:13px 15px;overflow-x:auto;font-family:var(--mono);font-size:.74rem; line-height:1.62;color:var(--chalk);background:transparent;flex:1} .codecard pre .c{color:var(--chalk-faint)} .codecard pre .k{color:var(--violet);font-weight:600} .codecard pre .s{color:var(--green)} .codecard pre .fn{color:var(--brand);font-weight:600} /* ===================== test-yourself (active recall) ===================== */ .tryit{margin:26px 0;border:1px solid var(--hairline);border-radius:14px;background:var(--panel); box-shadow:0 4px 16px var(--shadow);overflow:hidden} .tryit>summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:var(--sans);font-weight:600; font-size:.95rem;color:var(--accent);display:flex;align-items:center;gap:11px} .tryit>summary::-webkit-details-marker{display:none} .tryit>summary::before{content:"?";font-family:var(--mono);font-size:.78rem;width:22px;height:22px; display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0; background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)} .tryit>summary::after{content:"reveal";margin-left:auto;font-family:var(--mono);font-size:.66rem; letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-faint)} .tryit[open]>summary::after{content:"hide"} .tryit[open]>summary{border-bottom:1px solid var(--hairline)} .tryit .ans{padding:12px 18px 16px;font-family:var(--serif);font-size:1.02rem;color:var(--chalk-dim);line-height:1.56} .tryit .ans b{color:var(--strong)} /* tiny helpers */ .muted{color:var(--chalk-dim)} .center{text-align:center} .pill{display:inline-block;font-family:var(--mono);font-size:.72rem;padding:3px 9px;border-radius:999px; border:1px solid var(--hairline);background:var(--fill);color:var(--chalk-dim);margin:2px 4px 2px 0} .pill.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-color:transparent}