*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:#06080f;color:#e8e8f0;-webkit-font-smoothing:antialiased}#root{min-height:100vh}.chapter-nav{position:fixed;right:0;top:0;bottom:0;width:56px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;z-index:100;padding:1.5rem 0;border-left:1px solid #0f1622;background:#06080f;overflow-y:auto;scrollbar-width:none}.chapter-nav::-webkit-scrollbar{display:none}.chapter-group{display:flex;flex-direction:column;align-items:stretch}.chapter-section-item{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:5px 8px 2px;outline:none;width:100%}.chapter-section-item:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}.chapter-section-num{font-size:.62rem;font-family:JetBrains Mono,monospace;font-weight:700;letter-spacing:.04em;color:#1e293b;transition:color .2s;line-height:1;min-width:10px}.chapter-section-line{flex:1;height:1px;background:#1a2233;transition:background .25s,height .2s}.chapter-section-item.is-past .chapter-section-num{color:#334155}.chapter-section-item.is-past .chapter-section-line{background:#334155}.chapter-section-item.is-active .chapter-section-num{color:inherit}.chapter-section-item.is-active .chapter-section-line{height:2px}.chapter-section-item:hover .chapter-section-num{color:#64748b}.chapter-sub-item{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:2px 8px 2px 14px;outline:none;width:100%}.chapter-sub-item:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}.chapter-sub-num{font-size:.52rem;font-family:JetBrains Mono,monospace;letter-spacing:.02em;color:#1a2233;transition:color .2s;line-height:1;min-width:22px}.chapter-sub-num.is-past{color:#2d3f55}.chapter-sub-num.is-active{color:#94a3b8;font-weight:600}.chapter-sub-tick{flex:1;height:1px;background:#131c2b;transition:background .2s,height .2s}.chapter-sub-tick.is-past{background:#1e3050}.chapter-sub-tick.is-active{height:2px}.chapter-sub-item:hover .chapter-sub-num{color:#475569}.chapter-section-item.is-active .signal-blue{color:#60a5fa}.chapter-section-item.is-active .signal-purple{color:#a78bfa}.chapter-section-item.is-active .signal-pink{color:#f472b6}.chapter-section-item.is-active .signal-orange{color:#fb923c}.chapter-section-item.is-active .signal-green{color:#34d399}.chapter-section-item.is-active .signal-teal{color:#2dd4bf}.chapter-section-item.is-active .signal-indigo{color:#818cf8}.chapter-section-item.is-active .signal-red{color:#f87171}.chapter-section-item.is-active .signal-blue.chapter-section-line{background:#60a5fa}.chapter-section-item.is-active .signal-purple.chapter-section-line{background:#a78bfa}.chapter-section-item.is-active .signal-pink.chapter-section-line{background:#f472b6}.chapter-section-item.is-active .signal-orange.chapter-section-line{background:#fb923c}.chapter-section-item.is-active .signal-green.chapter-section-line{background:#34d399}.chapter-section-item.is-active .signal-teal.chapter-section-line{background:#2dd4bf}.chapter-section-item.is-active .signal-indigo.chapter-section-line{background:#818cf8}.chapter-section-item.is-active .signal-red.chapter-section-line{background:#f87171}.chapter-sub-tick.is-active.signal-blue{background:#60a5fa}.chapter-sub-tick.is-active.signal-purple{background:#a78bfa}.chapter-sub-tick.is-active.signal-pink{background:#f472b6}.chapter-sub-tick.is-active.signal-orange{background:#fb923c}.chapter-sub-tick.is-active.signal-green{background:#34d399}.chapter-sub-tick.is-active.signal-teal{background:#2dd4bf}.chapter-sub-tick.is-active.signal-indigo{background:#818cf8}.chapter-sub-tick.is-active.signal-red{background:#f87171}@media(max-width:900px){.chapter-nav{display:none}}.mobile-nav{display:none}@media(max-width:900px){.mobile-nav{display:flex;align-items:center;justify-content:space-between;position:fixed;bottom:0;left:0;right:0;height:52px;background:#06080feb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.06);padding:0 .75rem;z-index:100}.mobile-nav-btn{background:none;border:none;color:#475569;font-size:.8rem;font-family:JetBrains Mono,monospace;letter-spacing:.03em;padding:0 .75rem;min-width:44px;min-height:44px;cursor:pointer;transition:color .2s}.mobile-nav-btn:not(:disabled):hover{color:#94a3b8}.mobile-nav-btn:disabled{opacity:.25;pointer-events:none}.mobile-nav-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;flex:1}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#adbac7;background:#22272e}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#f47067}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#dcbdfb}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#6cb6ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#96d0ff}.hljs-built_in,.hljs-symbol{color:#f69d50}.hljs-comment,.hljs-code,.hljs-formula{color:#768390}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#8ddb8c}.hljs-subst{color:#adbac7}.hljs-section{color:#316dca;font-weight:700}.hljs-bullet{color:#eac55f}.hljs-emphasis{color:#adbac7;font-style:italic}.hljs-strong{color:#adbac7;font-weight:700}.hljs-addition{color:#b4f1b4;background-color:#1b4721}.hljs-deletion{color:#ffd8d3;background-color:#78191b}.top-bar{position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6);transform-origin:left center;z-index:200;transition:transform .1s linear}.experience-shell{display:grid;grid-template-columns:1fr 1fr;align-items:start;max-width:1340px;margin:0 auto;padding:0 2rem;padding-right:calc(56px + 2rem);gap:0}.story-column{min-width:0;padding-bottom:50vh;padding-right:3rem}.story-hero{min-height:75vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:5rem}.story-hero-title{font-size:clamp(2.4rem,4.5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.04em;color:#f1f5f9;margin:0 0 1rem}.story-hero-sub{font-size:1.05rem;color:#475569;max-width:44ch;line-height:1.7;margin:0;opacity:0;transition:opacity .7s ease}.story-hero-sub.is-visible{opacity:1}.typewriter-line{display:block}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:0}}@keyframes cursorFadeOut{to{opacity:0}}.typewriter-cursor:after{content:"|";font-weight:300;color:#60a5fa;animation:cursorBlink .65s step-end infinite}.typewriter-cursor.is-done:after{animation:cursorBlink .65s step-end 3,cursorFadeOut .4s ease 1.95s forwards}.hero-scroll-hint{display:flex;align-items:center;gap:.75rem;margin-top:2rem}.scroll-hint-line{display:block;width:24px;height:1px;background:#1e293b}.scroll-hint-text{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#1e293b}.story-step{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:3rem 0;border-top:1px solid #0f1622;opacity:.3;transition:opacity .5s ease}.story-step.is-active{opacity:1}.section-header{margin-bottom:1.25rem}.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.5rem}.panel-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;color:#f1f5f9;margin:0;line-height:1.2;letter-spacing:-.025em}.step-caption{font-size:1.05rem;color:#94a3b8;line-height:1.8;max-width:48ch;margin:0 0 1.5rem}.panel-stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}.stat-chip{background:#0a0e17;border:1px solid #1e293b;border-radius:8px;padding:.45rem .85rem;display:flex;flex-direction:column;gap:.08rem}.stat-value{font-size:.95rem;font-weight:700;font-family:JetBrains Mono,monospace;color:#e2e8f0}.stat-label{font-size:.62rem;color:#334155;text-transform:uppercase;letter-spacing:.09em}.panel-callout{border-left:2px solid #1e293b;padding:.5rem .9rem;margin:0;font-size:.875rem;color:#475569;font-style:italic;line-height:1.65;max-width:44ch}.story-end{min-height:40vh;display:flex;flex-direction:column;justify-content:center;padding:3rem 0;font-size:1.05rem;color:#334155}.story-end p{margin:0 0 .4rem}.story-end-sub{font-size:.82rem;color:#1e293b}.step-code{margin-top:1.25rem;background:#090d14;border:1px solid #1e293b;border-radius:10px;overflow:hidden}.step-code-header{display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem;background:#060a10;border-bottom:1px solid #0f1622}.window-chrome{display:flex;gap:5px}.dot{width:9px;height:9px;border-radius:50%}.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}.step-code-title{flex:1;font-size:.7rem;color:#334155;font-family:JetBrains Mono,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expand-btn{background:none;border:1px solid #1e293b;color:#475569;border-radius:4px;width:19px;height:19px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s;flex-shrink:0}.expand-btn:hover{color:#94a3b8;border-color:#334155}.step-code-body{overflow-y:auto;overflow-x:auto;max-height:200px;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.step-code-body.is-expanded{max-height:520px}.diagram-column{min-width:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:2rem 1rem 2rem 2rem}.diagram-frame{flex:1;min-height:0;background:#0d1117;border:1px solid #1e293b;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.diagram-label{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;border-bottom:1px solid #0f1622;background:#090d14;flex-shrink:0}.diagram-section-badge{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .6rem;border-radius:3px;background:#ffffff0a}.diagram-step-pips{display:flex;gap:6px;align-items:center}.step-pip{display:block;width:6px;height:6px;border-radius:50%;background:#1e293b;border:1px solid #334155;transition:background .3s,border-color .3s,transform .3s}.step-pip.is-filled{background:#60a5fa;border-color:#60a5fa;transform:scale(1.2)}.diagram-canvas{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:1.5rem}@keyframes diagramFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes diagramFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}.diagram-canvas-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:diagramFadeIn .4s cubic-bezier(.4,0,.2,1)}.diagram-canvas-inner.is-exiting{position:absolute;inset:0;pointer-events:none;animation:diagramFadeOut .35s cubic-bezier(.4,0,.2,1) forwards}.signal-blue{color:#60a5fa}.signal-purple{color:#a78bfa}.signal-pink{color:#f472b6}.signal-orange{color:#fb923c}.signal-green{color:#34d399}.signal-teal{color:#2dd4bf}.signal-indigo{color:#818cf8}.signal-red{color:#f87171}@media(max-width:900px){.experience-shell{grid-template-columns:1fr}.diagram-column{position:sticky;top:0;z-index:10;height:42vw;min-height:240px;max-height:340px;padding:.75rem;background:#06080f;border-bottom:1px solid #0f1622;order:-1}.diagram-frame{border-radius:10px}.diagram-canvas{padding:.75rem}.story-column{padding-right:1.25rem;padding-left:1.25rem;padding-bottom:calc(30vh + 52px)}.story-hero{min-height:50vh;padding-bottom:3rem}.story-hero-title{font-size:clamp(1.9rem,7vw,2.8rem)}.story-step{min-height:70vh;padding:2rem 0}.step-caption{font-size:1rem;max-width:100%}.step-code-body{max-height:180px}.expand-btn{min-width:44px;min-height:44px}.panel-stats{gap:.4rem}}@media(max-width:480px){.diagram-column{height:52vw;min-height:200px}.story-column{padding-right:1rem;padding-left:1rem}.story-hero-title{font-size:clamp(1.6rem,8vw,2.2rem)}.panel-title{font-size:1.35rem}.step-caption{font-size:.95rem;line-height:1.7}.stat-chip{padding:.35rem .65rem}.step-code-body{max-height:160px}}