:root{--bg: #fafafa;--surface: #ffffff;--surface-2: #f4f4f5;--text: #18181b;--text-soft: #3f3f46;--muted: #71717a;--border: #e4e4e7;--border-strong: #d4d4d8;--accent: #4f46e5;--accent-soft: #eef2ff;--accent-contrast: #ffffff;--good: #059669;--warn: #d97706;--bad: #dc2626;--shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--radius: 10px;--radius-sm: 6px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;color-scheme:light}:root[data-theme=dark]{--bg: #0e1013;--surface: #16181d;--surface-2: #1d2026;--text: #e7e7ea;--text-soft: #c2c3c9;--muted: #8b8d96;--border: #262930;--border-strong: #33363f;--accent: #818cf8;--accent-soft: #23253a;--accent-contrast: #0e1013;--good: #34d399;--warn: #fbbf24;--bad: #f87171;--shadow: 0 1px 3px rgba(0, 0, 0, .4);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{line-height:1.25;font-weight:650;margin:0 0 .5em;letter-spacing:-.01em}p{margin:0 0 1em;color:var(--text-soft)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}canvas{display:block;image-rendering:pixelated}button{font-family:inherit}code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:0 4px}.app{display:flex;min-height:100vh}.topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:50}.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);letter-spacing:-.01em}.topbar .brand:hover{text-decoration:none}.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center;font-size:13px;font-weight:800}.topbar .spacer{flex:1}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-soft);cursor:pointer;font-size:13px;transition:background .15s,border-color .15s}.icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}.sidebar{position:fixed;top:56px;bottom:0;left:0;width:264px;overflow-y:auto;padding:16px 12px 32px;border-right:1px solid var(--border);background:var(--surface);z-index:40}.main{flex:1;margin-left:264px;margin-top:56px;padding:28px 32px 80px;min-width:0}.chapter-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 8px 6px}.chapter-label:first-child{margin-top:4px}.nav-item{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);color:var(--text-soft);font-size:13.5px;cursor:pointer}.nav-item:hover{background:var(--surface-2);text-decoration:none}.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.nav-item .year{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}.menu-btn{display:none}@media (max-width: 900px){.menu-btn{display:inline-flex}.sidebar{transform:translate(-100%);transition:transform .2s ease;box-shadow:none}.sidebar.open{transform:translate(0);box-shadow:0 10px 40px #0003}.main{margin-left:0;padding:20px 16px 80px}}.page{max-width:1060px;margin:0 auto}.algo-header{margin-bottom:20px}.algo-header .meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text-soft)}.badge.accent{background:var(--accent-soft);border-color:transparent;color:var(--accent)}.badge.whole{color:var(--good)}.badge.patch{color:var(--warn)}.algo-summary{font-size:16px;color:var(--text-soft);max-width:760px}.viz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:24px;overflow-x:auto}.viz-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}.viz-col{display:flex;flex-direction:column;gap:8px;min-width:0}.canvas-frame{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);width:fit-content;position:relative}.canvas-caption{font-size:12px;color:var(--muted);text-align:center}.explain{max-width:760px}.explain h2{font-size:19px;margin-top:28px}.explain ul,.explain ol{color:var(--text-soft);padding-left:22px}.explain li{margin-bottom:6px}.note{font-size:13px;color:var(--muted);border-left:3px solid var(--border-strong);padding:2px 0 2px 12px;margin:12px 0}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0 4px}.ctl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:32px;padding:0 12px;font-size:13px;font-weight:600;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-soft);cursor:pointer}.ctl-btn:hover{background:var(--surface-2)}.ctl-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.ctl-btn.primary:hover{opacity:.9}.ctl-group{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.ctl-group label{white-space:nowrap}.ctl-group input[type=range]{accent-color:var(--accent);width:130px}.ctl-group select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);padding:0 8px;font-size:13px}.ctl-value{font-family:var(--mono);font-size:12px;color:var(--text-soft);min-width:34px;text-align:right}.progress-wrap{flex:1 1 160px;display:flex;align-items:center;gap:8px}.progress-wrap input[type=range]{width:100%}.segmented{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}.segmented button{border:none;background:transparent;padding:6px 12px;font-size:13px;color:var(--muted);cursor:pointer;border-right:1px solid var(--border)}.segmented button:last-child{border-right:none}.segmented button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}.matrix{display:grid;gap:2px;font-family:var(--mono);font-size:11px}.matrix .cell{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;min-width:38px;padding:4px 2px;text-align:center;color:var(--text-soft)}.matrix .cell.hl{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.math-op{font-size:20px;color:var(--muted);align-self:center;padding:0 4px}.hero{padding:40px 0 24px;max-width:780px}.hero h1{font-size:clamp(28px,4.5vw,42px);letter-spacing:-.02em}.hero .lede{font-size:17px;color:var(--text-soft)}.timeline-chapter{margin:36px 0 8px}.timeline-chapter .era{font-family:var(--mono);font-size:12px;color:var(--accent)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:12px}.algo-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;color:var(--text);transition:border-color .15s,transform .15s,box-shadow .15s}.algo-card:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}.algo-card h3{font-size:15px;margin-bottom:4px}.algo-card .desc{font-size:13px;color:var(--muted);margin:0}.algo-card .year{font-family:var(--mono);font-size:11px;color:var(--muted)}.pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;border-top:1px solid var(--border);padding-top:20px}.pager a{max-width:46%;color:var(--text)}.pager a:hover{text-decoration:none;color:var(--accent)}.pager .dir{font-size:12px;color:var(--muted)}.pager .title{font-weight:600}.analogy{display:flex;gap:12px;align-items:flex-start;max-width:720px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:var(--radius);padding:12px 16px;margin:4px 0 12px;font-size:14.5px;color:var(--text-soft)}.analogy-icon{font-size:18px;line-height:1.3}.analogy-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin-bottom:2px}.tips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}.tips-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.tip-chip{font-size:12.5px;color:var(--text-soft);background:var(--surface);border:1px dashed var(--border-strong);border-radius:99px;padding:3px 12px}.side-progress{padding:4px 8px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}.side-progress-text{font-size:11.5px;color:var(--muted);margin-bottom:6px}.side-progress-bar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden}.side-progress-bar div{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}.nav-item .check{font-size:10px;color:transparent;width:12px;flex-shrink:0}.nav-item .check.on{color:var(--good)}.pager .teaser{font-size:12px;color:var(--muted);max-width:320px}.stat{font-family:var(--mono);font-size:12.5px;color:var(--text-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);align-items:center}.legend .swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}