@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');
:root{--ink:#171321;--muted:#756d80;--purple:#55438a;--purple-dark:#241b38;--orange:#fc6d26;--line:#e6e1eb;--paper:#fff;--sidebar:#171321;--mono:'JetBrains Mono',monospace;--sans:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:#f5f3f7;color:var(--ink);font:15px/1.6 var(--sans)}button{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:258px;flex:0 0 258px;background:var(--sidebar);color:#d8d2e1;display:flex;flex-direction:column;padding:25px 18px;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:13px;letter-spacing:.12em}.brand-mark{width:32px;height:32px;border:2px solid var(--orange);border-radius:50%;display:grid;place-items:center;color:var(--orange);font-size:16px}.brand b,.brand small{display:block}.brand b{font-size:13px}.brand small{font-size:9px;color:#aaa1b5;letter-spacing:.2em;margin-top:2px}.sidebar-meta{margin:48px 8px 13px;display:flex;justify-content:space-between;color:#9e94ae;font:10px var(--mono);letter-spacing:.08em}.nav-group{margin:23px 8px 7px;color:#8e819e;font:10px var(--mono);letter-spacing:.09em}.sidebar nav button{width:100%;border:0;background:none;text-align:left;color:#a8a0b4;padding:6px 8px;border-left:2px solid transparent;cursor:pointer;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar nav button i{font:10px var(--mono);color:#72677e;margin-right:9px}.sidebar nav button:hover,.sidebar nav button.active{background:#2d2440;color:#fff;border-left-color:var(--orange)}.sidebar nav button.active i{color:var(--orange)}.sidebar-help{margin-top:auto;color:#71667c;font:10px/2 var(--mono);padding:8px}.stage{margin-left:258px;min-height:100vh;flex:1;display:flex;flex-direction:column;background:radial-gradient(circle at 76% 18%,#fff 0,#f5f3f7 45%)}.stage-bar{height:64px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:#857b90;font:10px var(--mono);letter-spacing:.1em}.stage-bar #section-label{color:var(--purple);font-weight:600}.stage-bar #counter{color:var(--orange)}#deck{flex:1;position:relative}.slide{display:none;min-height:calc(100vh - 125px);padding:clamp(35px,7vh,100px) clamp(6vw,10vw,170px) 60px;position:relative}.slide.active{display:block}.slide-inner{max-width:1100px;min-height:calc(100vh - 240px);display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,.92fr);gap:clamp(35px,7vw,120px);align-items:center}.slide-copy{max-width:640px}.kicker{color:var(--orange);font:600 11px var(--mono);letter-spacing:.08em;margin-bottom:25px}.slide h1{font-size:clamp(2.4rem,5.1vw,5.6rem);line-height:1.02;letter-spacing:-.065em;margin:0 0 27px;font-weight:800}.slide h1 em{font-style:normal;color:var(--purple)}.slide p{color:#5e5668;max-width:580px;font-size:clamp(1rem,1.5vw,1.23rem);line-height:1.7}.slide .lead{font-size:clamp(1.15rem,1.8vw,1.5rem);color:#4f475b}.slide ul{padding:0;list-style:none;margin:28px 0;color:#5e5668;font-size:1.05rem}.slide li{margin:13px 0;padding-left:26px}.slide li:before{content:'→';color:var(--orange);margin-left:-26px;margin-right:12px;font-weight:700}.photo{margin:0;filter:drop-shadow(0 18px 22px #241b3822)}.photo img{max-width:100%;max-height:63vh;object-fit:cover;border-radius:4px}.photo figcaption{color:#81788c;font:11px/1.5 var(--mono);margin-top:14px}.slide-number{position:absolute;bottom:28px;right:6vw;font:11px var(--mono);color:#a69cac}.hero{background:linear-gradient(135deg,#191226,#312452 65%,#55438a);color:#fff}.hero .slide-inner{grid-template-columns:1fr}.hero .slide-copy{max-width:900px}.hero .kicker,.dark .kicker{color:#ff9b6c}.hero h1,.dark h1{font-size:clamp(3.2rem,7.6vw,8rem)}.hero p,.dark p{color:#d7cfdf}.hero .slide-number,.dark .slide-number{color:#998ba9}.dark{background:var(--purple-dark);color:#fff}.quote{font-size:clamp(1.7rem,3.3vw,3.4rem);line-height:1.1;color:#fff;margin:20px 0;border-left:4px solid var(--orange);padding-left:25px}.slide blockquote{font-size:clamp(1.8rem,3.6vw,3.8rem);line-height:1.12;font-weight:700;letter-spacing:-.04em;margin:35px 0;border-left:4px solid var(--orange);padding-left:25px}.chips,.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.chips span,.badge{border:1px solid #d5cfdd;border-radius:20px;padding:7px 13px;color:var(--purple);font:11px var(--mono)}.links{display:grid}.links a{color:var(--purple);font:13px var(--mono);text-decoration:none}.links a:before{content:'↗ ';color:var(--orange)}.visual,.diagram,.inject{align-self:center}.stack{border:1px solid #d4ccdf;background:#fff;padding:27px;display:grid;gap:13px;border-radius:4px;box-shadow:12px 12px 0 #ebe7f0}.stack b{font-size:1.3rem}.stack span{color:var(--purple);font:12px var(--mono)}.stack strong{background:var(--purple);color:#fff;padding:16px}.stack small{color:var(--muted);font:11px var(--mono)}.port-grid{display:grid;grid-template-columns:1fr 50px 1fr;gap:0;align-items:center;text-align:center}.port-grid b{padding:32px 12px;background:var(--purple);color:#fff}.port-grid i{font:10px var(--mono);color:var(--orange);font-style:normal}.search-card{background:#1e1730;color:#fff;padding:32px;font:18px var(--mono);box-shadow:14px 14px 0 #e8e1ef}.search-card span{color:var(--orange)}.search-card small,.search-card em{font-size:11px;color:#aea1bc}.search-card hr{border:0;border-top:1px solid #544568;margin:20px 0}.status-grid,.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.status-grid b,.modules b{padding:28px 18px;background:#e9f8ee;color:#168044;border-left:4px solid #22a060}.status-grid .bad{background:#fff0ed;color:#c3422c;border-color:var(--orange)}.hid{display:grid;gap:13px;font:14px var(--mono);color:var(--purple);position:relative}.hid span{background:#eeeaf3;padding:14px}.hid strong{position:absolute;right:-20px;top:50%;background:var(--orange);color:#fff;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px}.diagram{display:grid;gap:10px;justify-items:center}.diagram b{width:min(100%,320px);padding:17px;background:var(--purple);color:#fff;text-align:center;border-radius:3px;font-size:13px}.diagram b small{display:block;color:#d6c9e8;font:10px var(--mono);margin-top:3px}.diagram i{font:20px var(--mono);font-style:normal;color:var(--orange)}.inject{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.inject span{padding:18px 13px;background:#eeeaf3;font:11px var(--mono);color:var(--purple)}.inject b{color:var(--orange);font-size:22px}.pulse{display:flex;gap:12px;align-items:center;height:180px}.pulse i{width:18px;height:110px;background:var(--orange);animation:pulse 1.1s infinite alternate}.pulse i:nth-child(2){height:70px;background:var(--purple);animation-delay:.2s}.pulse i:nth-child(3){height:145px;background:#8f75c3;animation-delay:.4s}.pulse i:nth-child(4){height:90px;background:var(--orange);animation-delay:.6s}.pulse span{font:10px var(--mono);color:var(--muted);margin-left:13px}@keyframes pulse{to{opacity:.35;transform:scaleY(.65)}}.steps{font-size:clamp(1.8rem,4vw,4rem);letter-spacing:.22em;color:var(--purple);word-break:break-all;border-top:2px solid var(--orange);border-bottom:2px solid var(--orange);padding:22px 0}.modules b{background:#fff;border:1px solid #d9d1e2;color:var(--purple);text-align:center;padding:35px 10px}.ownership{display:grid;gap:15px;text-align:center;border:1px solid #d8d0e1;padding:35px}.ownership strong{color:var(--orange);font:12px var(--mono)}.ownership span{font-size:25px;color:var(--purple)}.ownership b{font-size:25px}.ownership small{font:10px var(--mono);color:var(--muted)}.spark{height:190px;display:flex;align-items:end;gap:9px}.spark i{display:block;flex:1;background:var(--purple);height:30%;border-radius:3px 3px 0 0}.spark i:nth-child(2n){background:var(--orange);height:72%}.spark i:nth-child(3n){height:48%}.lesson-lines{display:grid;gap:19px}.lesson-lines span{padding:17px 20px;border-left:4px solid var(--orange);background:#fff;box-shadow:8px 8px 0 #e9e3ef;font:13px var(--mono)}.lesson-lines span:nth-child(2){border-color:var(--purple);margin-left:35px}.lesson-lines span:nth-child(3){border-color:#8d73be;margin-left:70px}.open-mark{font-size:14rem;color:var(--orange);line-height:1}.badge{display:inline-block;background:var(--orange);color:#fff;border:0;font-weight:600;margin-top:25px}.code-line{display:block;background:#20182e;color:#f8bb9e;padding:18px;font:12px var(--mono);max-width:500px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.column{border-top:4px solid #22a060;background:#eefaf2;padding:20px;display:grid;gap:11px;color:#167342}.column.bad{border-color:var(--orange);background:#fff1ed;color:#bf432f}.column b{font:11px var(--mono)}.column span{font-size:1.2rem}.progress{height:3px;background:#e5dfeb}.progress i{display:block;height:100%;background:var(--orange);transition:width .2s}.controls{position:fixed;bottom:18px;left:calc(258px + 6vw);display:flex;gap:5px}.controls button{background:#fff;border:1px solid var(--line);color:var(--purple);width:34px;height:30px;cursor:pointer}.controls button:hover{color:var(--orange);border-color:var(--orange)}body.overview #deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px;padding:25px}.overview .slide{display:block!important;min-height:170px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:3px;cursor:pointer}.overview .slide-inner{display:block;min-height:0}.overview .slide-copy{max-width:none}.overview .slide h1{font-size:1.2rem;letter-spacing:-.04em;margin:7px 0}.overview .slide p,.overview .slide ul,.overview .slide .visual,.overview .slide .photo,.overview .slide .diagram,.overview .slide .inject,.overview .slide .chips,.overview .slide .links,.overview .slide blockquote{display:none}.overview .slide-number{bottom:12px;right:15px}.overview .stage-bar,.overview .progress,.overview .controls{display:none}
@media(max-width:850px){.sidebar{width:70px;flex-basis:70px;padding:16px 9px}.brand{justify-content:center}.brand>span:last-child,.sidebar-meta,.nav-group,.sidebar-help{display:none}.sidebar nav button{padding:8px 0;text-align:center}.sidebar nav button i{margin:0;font-size:11px}.sidebar nav button:not(.active){color:#8d829d}.sidebar nav button{font-size:0}.sidebar nav button i{font-size:10px}.stage{margin-left:70px}.slide{padding:45px 7vw 70px}.slide-inner{grid-template-columns:1fr;gap:35px;min-height:auto}.slide h1{font-size:clamp(2.5rem,10vw,5rem)}.photo img{max-height:42vh}.controls{left:7vw}.stage-bar{padding:0 7vw}.hero .slide-inner{min-height:calc(100vh - 220px)}body.overview #deck{padding:12px}.overview .slide{min-height:130px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Interactive generator panels */
.interactive-box{background:#20182e;color:#e9e2f2;padding:18px;border-radius:4px;box-shadow:12px 12px 0 #e8e1ef;font-family:var(--mono);max-width:520px}.interactive-head{display:flex;align-items:center;justify-content:space-between;color:#f6a57e;font-size:11px;letter-spacing:.08em;margin-bottom:15px}.run-button{border:1px solid #8d73be;background:transparent;color:#e9e2f2;border-radius:2px;padding:5px 9px;font:10px var(--mono);cursor:pointer}.run-button:hover,.run-button.active{background:var(--orange);border-color:var(--orange);color:#fff}.mini-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.mini-pad{aspect-ratio:1;border:1px solid #5b4a73;background:#302443;color:#85789b;font:10px var(--mono);cursor:pointer;border-radius:2px}.mini-pad:hover{border-color:#f6a57e;color:#fff}.mini-pad.on{background:var(--orange);border-color:#ffb08b;color:#fff;box-shadow:0 0 12px #fc6d2677}.mini-pad.playhead{outline:2px solid #efe8f6;outline-offset:2px}.turing-grid .mini-pad.on{background:var(--purple);border-color:#b9a5df}.pitch-row{height:48px;display:flex;align-items:end;gap:6px;margin:13px 0 8px;border-bottom:1px solid #5a4a70}.pitch-row i{display:block;flex:1;background:#8d73be;min-height:5px;border-radius:2px 2px 0 0;transition:height .2s}.interactive-readout{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:7px;align-items:center;margin-top:14px;color:#bcb0c9;font-size:10px}.interactive-readout b{color:#fff;font-weight:400}.interactive-readout input{width:100%;accent-color:var(--orange)}.interactive-box small{display:block;color:#8e819e;font-size:9px;margin-top:12px}
/* Scrollable, collapsible slide menu */
.sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#55436f #171321}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#171321}.sidebar::-webkit-scrollbar-thumb{background:#55436f;border-radius:8px}.nav-group{position:relative}.nav-group>button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;color:#8e819e;padding:0 8px;font:10px var(--mono);letter-spacing:.09em;cursor:pointer;text-align:left}.nav-group>button:hover{color:#fff}.nav-group>button b{color:var(--orange);font-size:14px;font-weight:400;line-height:1;transition:transform .15s}.nav-group>button[aria-expanded="false"] b{transform:rotate(-90deg)}
/* Global navigation collapse */
.menu-toggle{width:calc(100% - 16px);margin:24px 8px 0;border:1px solid #4a3b60;background:#241b38;color:#bfb3cc;padding:8px 10px;text-align:left;cursor:pointer;font:10px var(--mono);letter-spacing:.08em}.menu-toggle:hover{border-color:var(--orange);color:#fff}.menu-toggle span{float:right;color:var(--orange)}body.menu-collapsed .sidebar{width:70px;flex-basis:70px;padding-left:9px;padding-right:9px}body.menu-collapsed .stage{margin-left:70px}body.menu-collapsed .brand{justify-content:center}body.menu-collapsed .brand>span:last-child,body.menu-collapsed .sidebar-meta,body.menu-collapsed #slide-nav,body.menu-collapsed .sidebar-help{display:none}body.menu-collapsed .menu-toggle{width:52px;margin-left:0;margin-right:0;text-align:center;padding-left:0;padding-right:0}body.menu-collapsed .menu-toggle span{display:none}
/* Multiple visual elements can share one slide art column */
.slide-art{display:grid;gap:20px;align-content:center;min-width:0}.slide-art .photo{max-width:520px}.slide-art .photo img{max-height:42vh;width:100%}.slide-art .photo figcaption a{color:var(--purple)}
.slide-art .secondary-photo img{max-height:20vh}.slide-art .secondary-photo{margin-top:-10px}
.slide-art .diagram{max-width:100%;max-height:32vh}.slide[data-index="5"] .slide-art{gap:10px}.slide[data-index="5"] .slide-art .photo img{max-height:30vh}.slide[data-index="5"] .slide-art .diagram{gap:4px;transform:scale(.78);transform-origin:center top;margin-bottom:-34px}
.generator-box{max-width:620px}.lane-row{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;margin:10px 0}.lane-row>b{color:#f6a57e;font-size:10px;letter-spacing:.06em}.lane-row>b small{display:block;color:#8e819e;font-size:8px;margin-top:3px}.lane-row .mini-grid{gap:4px}.lane-row .mini-pad{font-size:8px;min-width:0}.lane-row[data-lane="snare"] .mini-pad.on{background:#d97c42;border-color:#ffb08b}.lane-row[data-lane="bass"] .mini-pad.on{background:var(--purple);border-color:#b9a5df}

.lane-row{align-items:start}.lane-row>b{padding-top:4px}.lane-body{min-width:0}.lane-row .mini-pad{aspect-ratio:2/1}.lane-sliders{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:6px;align-items:center;margin-top:7px;color:#bcb0c9;font-size:9px}.lane-sliders b{color:#fff;font-weight:400}.lane-sliders input{width:100%;min-width:0;accent-color:var(--orange)}.lane-row .pitch-row{height:26px;margin:7px 0 0;gap:4px}.mute-button{border:1px solid #8d73be;background:transparent;color:#e9e2f2;border-radius:2px;padding:4px 7px;font:9px var(--mono);cursor:pointer}.mute-button:hover{border-color:#f6a57e}.mute-button.active{background:#5b4a73;color:#f6a57e;border-color:#f6a57e}.lane-row.muted .mini-grid,.lane-row.muted .pitch-row{opacity:.3}