@import"https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #faf9f7;--color-bg-warm: #f5f0eb;--color-bg-code: #1e1e2e;--color-text: #2c2c2c;--color-text-muted: #6b6b6b;--color-text-light: #999;--color-accent: #e8590c;--color-accent-light: #fff3ed;--color-link: #c2410c;--color-border: #e5e2dd;--color-interactive-bg: #f0ede8;--color-interactive-border: #d4cfc7;--color-token-1: #4c6ef5;--color-token-2: #7950f2;--color-token-3: #e64980;--color-token-4: #12b886;--color-token-5: #fab005;--color-token-6: #fd7e14;--color-token-7: #20c997;--color-token-8: #339af0;--color-highlight: #fef3c7;--color-success: #10b981;--color-danger: #ef4444;--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "Fira Code", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--content-width: 680px;--wide-width: 900px;--max-width: 1100px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}html{font-size:18px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:var(--font-serif);color:var(--color-text);background:var(--color-bg);line-height:1.7;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:700;line-height:1.25;letter-spacing:-.02em}h1{font-size:2.8rem;letter-spacing:-.03em}h2{font-size:1.8rem;margin-top:var(--space-4xl);margin-bottom:var(--space-lg)}h3{font-size:1.3rem;margin-top:var(--space-2xl);margin-bottom:var(--space-md)}p{margin-bottom:var(--space-lg)}a{color:var(--color-link);text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--transition-fast)}a:hover{color:var(--color-accent)}strong{font-weight:600}code{font-family:var(--font-mono);font-size:.85em;background:var(--color-interactive-bg);padding:.15em .35em;border-radius:4px}.reactive-value{color:var(--color-accent);font-weight:600;border-bottom:2px solid var(--color-accent);cursor:ew-resize;user-select:none;padding:0 2px;transition:background var(--transition-fast)}.reactive-value:hover{background:var(--color-accent-light)}.explorable{background:var(--color-bg-warm);border:1px solid var(--color-interactive-border);border-radius:12px;padding:var(--space-xl);margin:var(--space-2xl) 0;position:relative}.explorable:before{content:"explore this";position:absolute;top:-10px;left:20px;background:var(--color-accent);color:#fff;font-family:var(--font-sans);font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:2px 10px;border-radius:10px}.hint{font-family:var(--font-sans);font-size:.78rem;color:var(--color-text-muted);font-style:italic;margin-top:var(--space-sm)}.margin-note{font-family:var(--font-sans);font-size:.78rem;color:var(--color-text-muted);line-height:1.5}.callout{background:var(--color-highlight);border-left:4px solid var(--color-token-5);padding:var(--space-md) var(--space-lg);border-radius:0 8px 8px 0;margin:var(--space-xl) 0;font-size:.92rem}.callout.key-idea{background:#eff6ff;border-left-color:var(--color-token-1)}.callout.try-it{background:#ecfdf5;border-left-color:var(--color-success)}.token{display:inline-block;padding:2px 6px;margin:2px;border-radius:4px;font-family:var(--font-mono);font-size:.82rem;font-weight:500;line-height:1.6;transition:transform var(--transition-fast),box-shadow var(--transition-fast);cursor:default;position:relative}.token:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.token-id{font-size:.6rem;opacity:0;position:absolute;bottom:-14px;left:50%;transform:translate(-50%);transition:opacity var(--transition-fast);color:var(--color-text-muted);font-family:var(--font-mono);white-space:nowrap}.token:hover .token-id{opacity:1}.slider-container{display:flex;align-items:center;gap:var(--space-md);font-family:var(--font-sans);font-size:.85rem;margin:var(--space-md) 0}.slider-container label{font-weight:500;min-width:120px;color:var(--color-text-muted)}.slider-container input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--color-interactive-border);border-radius:3px;outline:none}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-accent);cursor:pointer;box-shadow:0 2px 6px #e8590c4d;transition:transform var(--transition-fast)}.slider-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-value{font-family:var(--font-mono);font-weight:600;color:var(--color-accent);min-width:50px;text-align:right}.viz-container{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:var(--space-lg);margin:var(--space-lg) 0;overflow:hidden}.viz-label{font-family:var(--font-sans);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:var(--space-sm)}.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--color-accent);z-index:1000;transition:width .1s linear}.chapter-nav{display:flex;justify-content:space-between;margin-top:var(--space-4xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border);font-family:var(--font-sans)}.chapter-nav a{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;font-weight:500;font-size:.9rem;padding:var(--space-sm) var(--space-md);border-radius:8px;transition:background var(--transition-fast)}.chapter-nav a:hover{background:var(--color-interactive-bg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.fade-in-up{animation:fadeInUp .6s ease forwards}.lede{font-size:1.15rem;line-height:1.8;color:var(--color-text);margin-bottom:var(--space-2xl)}.lede em{font-style:italic;color:var(--color-accent)}ul,ol{margin-bottom:var(--space-lg);padding-left:var(--space-xl)}li{margin-bottom:var(--space-sm)}li strong{color:var(--color-text)}.sketch{display:flex;flex-direction:column;align-items:center;margin:var(--space-2xl) 0;user-select:none;width:100%;max-width:var(--content-width)}.sketch svg{max-width:100%;height:auto}.sketch-inline{margin:var(--space-lg) 0}@media(min-width:840px){.sketch{width:calc(var(--content-width) + 120px);max-width:calc(var(--content-width) + 120px);margin-left:-60px;margin-right:-60px}.sketch-wide{width:calc(var(--content-width) + 200px);max-width:calc(var(--content-width) + 200px);margin-left:-100px;margin-right:-100px;margin-top:var(--space-3xl);margin-bottom:var(--space-3xl)}}@media(max-width:839px){.sketch{max-width:100%}}.sketch-stroke{fill:none;stroke:#6b5c4d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sketch-stroke-thin{fill:none;stroke:#6b5c4d;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.sketch-stroke-accent{fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sketch-fill{fill:#6b5c4d;stroke:none}.sketch-fill-accent{fill:var(--color-accent);stroke:none}.sketch-fill-light{fill:#6b5c4d;opacity:.08;stroke:none}.sketch-text{font-family:var(--font-mono);font-size:13px;fill:#6b5c4d}.sketch-text-accent{font-family:var(--font-mono);font-size:13px;fill:var(--color-accent);font-weight:600}.sketch-text-label{font-family:var(--font-sans);font-size:11px;fill:#7a6d60;letter-spacing:.04em}.sketch-caption{text-align:center;font-family:var(--font-sans);font-size:.75rem;color:var(--color-text-light);margin-top:var(--space-sm);font-style:italic}@media(max-width:768px){html{font-size:16px}h1{font-size:2rem}h2{font-size:1.5rem}.explorable{padding:var(--space-md)}}