:root{--bg:#0d1014;--panel:#0e1116bd;--panel-solid:#14181e;--line:#ffffff1f;--text:#eef1f4;--muted:#a3adb8;--accent:#f2a93b;--good:#62d07e;--bad:#ff6b5b;--blue:#6fb2ff;--r:14px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--font:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;--display:"Barlow Condensed", "Barlow", system-ui, sans-serif;--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;margin:0;font-size:16px;line-height:1.45;overflow:hidden}#scene{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}a{color:var(--blue)}kbd{font-family:var(--font);border:1px solid var(--line);white-space:nowrap;background:#ffffff0f;border-bottom-width:2px;border-radius:5px;margin:0 1px;padding:1px 6px;font-size:.8em;font-weight:600}svg.lucide{stroke-width:2px;flex:none;width:20px;height:20px}.panel{background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.2);border:1px solid var(--line);border-radius:var(--r)}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0;font-size:12px;font-weight:600}.row{gap:var(--s3);flex-wrap:wrap;align-items:center;display:flex}.small{color:var(--muted);font-size:14px}.btn{justify-content:center;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid var(--line);color:var(--text);font:600 15px var(--font);cursor:pointer;background:#ffffff12;border-radius:10px;transition:background .15s,transform .1s;display:inline-flex}.btn:hover{background:#ffffff1f}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#1b1406;border-color:#0000}.btn.primary:hover{background:#f7b955}.btn.big{min-height:52px;padding:0 var(--s5);font-size:17px}.btn:disabled{opacity:.6;cursor:progress}.icon-btn{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(10px);width:44px;height:44px;color:var(--text);cursor:pointer;border-radius:12px;place-items:center;display:inline-grid}.icon-btn:hover{background:#282e38e6}.link-btn{min-height:36px;padding:0 var(--s2);color:var(--muted);font:600 13px var(--font);cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:6px;margin:-6px -8px -6px 0;display:inline-flex}.link-btn:hover{color:var(--text);background:#ffffff0f}.link-btn svg.lucide{width:16px;height:16px}:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.overlay{padding:calc(var(--s4) + var(--safe-t)) calc(var(--s4) + var(--safe-r)) calc(var(--s4) + var(--safe-b)) calc(var(--s4) + var(--safe-l));z-index:20;background:linear-gradient(#080a0d59,#080a0dbf);place-items:center;display:grid;position:fixed;inset:0;overflow-y:auto}.intro-card{width:min(620px,100%);padding:var(--s6);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);background:#0e1116db;border-radius:20px;box-shadow:0 30px 80px #00000073}.intro-card.wide{width:min(720px,100%)}.intro-card h1{font-family:var(--display);margin:var(--s2) 0 var(--s4);letter-spacing:-.01em;font-size:clamp(40px,7vw,64px);line-height:.95}.intro-card h2{font-family:var(--display);margin:var(--s2) 0 var(--s4);font-size:34px;line-height:1.05}.intro-card h3{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:var(--s5) 0 var(--s3);font-size:15px}.lede{color:#d3d9df;margin:0 0 var(--s5);font-size:18px}#li-body p{color:#d3d9df;margin:0 0 var(--s4);font-size:17px}#li-body b,.lede b{color:var(--text)}.facts{margin:var(--s5) 0 var(--s4);gap:var(--s3);padding:0;list-style:none;display:grid}.facts li{gap:var(--s3);color:var(--muted);align-items:flex-start;font-size:15px;display:flex}.facts svg.lucide{color:var(--accent);margin-top:2px}.menu-head{justify-content:space-between;align-items:center;display:flex}.menu-head h2{margin:0}#lesson-list{margin:var(--s4) 0 0;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding:0;list-style:none;display:grid}#lesson-list button{align-items:center;gap:var(--s3);width:100%;min-height:52px;padding:var(--s2) var(--s3);border:1px solid var(--line);color:var(--text);font:500 15px var(--font);text-align:left;cursor:pointer;background:#ffffff0a;border-radius:10px;display:flex}#lesson-list button:hover{background:#ffffff17}#lesson-list .n{background:#ffffff14;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-size:13px;font-weight:700;display:grid}#lesson-list .done .n{background:var(--good);color:#0b1a0f}.settings{gap:var(--s2);display:grid}.toggle{gap:var(--s3);cursor:pointer;color:#d3d9df;align-items:center;min-height:44px;display:flex}.toggle input{width:20px;height:20px;accent-color:var(--accent);flex:none}#hud{pointer-events:none;z-index:10;position:fixed;inset:0}#hud>*{pointer-events:auto}#lesson{top:calc(var(--s4) + var(--safe-t));left:calc(var(--s4) + var(--safe-l));width:min(380px,100% - 220px);padding:var(--s4);position:absolute}.lesson-head{justify-content:space-between;align-items:center;gap:var(--s2);display:flex}#lesson h2{font-family:var(--display);margin:var(--s1) 0 var(--s2);font-size:24px;line-height:1.1}#lesson-step{color:#dce2e8;margin:0;font-size:16px}#lesson-step b{color:var(--accent);font-weight:600}#lesson-dots{margin-top:var(--s3);gap:6px;display:flex}#lesson-dots i{background:#ffffff26;border-radius:2px;flex:1;height:4px}#lesson-dots i.on{background:var(--good)}#lesson-dots i.cur{background:var(--accent)}#lesson-done p{margin:var(--s3) 0;color:#dce2e8}#lesson.flash{animation:.6s flash}@keyframes flash{0%{box-shadow:0 0 #62d07eb3}to{box-shadow:0 0 0 14px #62d07e00}}#top-right{top:calc(var(--s4) + var(--safe-t));right:calc(var(--s4) + var(--safe-r));gap:var(--s2);display:flex;position:absolute}#toast{top:calc(var(--s4) + var(--safe-t) + 60px);pointer-events:none;width:min(460px,100% - 32px);position:absolute;left:50%;transform:translate(-50%)}.toast{margin-bottom:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--line);border-left:4px solid var(--accent);background:#14171deb;border-radius:12px;font-size:15px;animation:.25s tin;box-shadow:0 10px 30px #00000059}.toast.bad{border-left-color:var(--bad)}.toast.good{border-left-color:var(--good)}.toast strong{margin-bottom:2px;font-size:16px;display:block}.toast.out{opacity:0;transition:opacity .4s}@keyframes tin{0%{opacity:0;transform:translateY(-6px)}}#diagram-wrap{left:50%;bottom:calc(var(--s4) + var(--safe-b));width:min(400px,100vw - 720px);padding:6px 10px;position:absolute;transform:translate(-62%)}#diagram{width:100%;height:auto;display:block}#controls{left:calc(var(--s4) + var(--safe-l));right:calc(var(--s4) + var(--safe-r));bottom:calc(var(--s4) + var(--safe-b));justify-content:space-between;align-items:flex-end;gap:var(--s4);pointer-events:none;display:flex;position:absolute}#controls>*{pointer-events:auto}.pedal-group{gap:var(--s3);display:flex}.mid-group{align-items:flex-end;gap:var(--s3);margin-left:auto;display:flex}.pedal{touch-action:none;-webkit-user-select:none;user-select:none;cursor:ns-resize;flex-direction:column;align-items:center;gap:6px;display:flex}.track{background:linear-gradient(180deg, #ffffff0d, #ffffff05), var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);border-radius:16px;width:76px;height:172px;position:relative;overflow:hidden}.track .fill{background:linear-gradient(#6fb2ff0d,#6fb2ff47);height:0;position:absolute;top:0;left:0;right:0}#pedal-brake .fill{background:linear-gradient(#ff6b5b0d,#ff6b5b4d)}#pedal-gas .fill{background:linear-gradient(#62d07e0d,#62d07e4d)}.track .pad{background:repeating-linear-gradient(0deg,#3b424b 0 3px,#2b3138 3px 6px);border:1px solid #ffffff2e;border-radius:9px;height:30px;position:absolute;top:6px;left:9px;right:9px;box-shadow:0 4px 10px #0006}#pedal-gas .track .pad{height:44px}.track .bite{background:#f2a93b29;border-top:1px dashed #f2a93bb3;border-bottom:1px dashed #f2a93bb3;position:absolute;left:0;right:0}.track .bite span{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:10px;font-weight:700;position:absolute;top:2px;right:4px}.pedal.engaging .bite{background:#f2a93b52}.plabel{color:var(--muted);align-items:center;gap:4px;font-size:13px;font-weight:600;display:flex}.plabel kbd{font-size:11px}#shifter{aspect-ratio:4/2.6;touch-action:none;cursor:grab;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);width:184px}#shifter svg{width:100%;height:100%;display:block}#shifter .gate path{stroke:#ffffff38;stroke-width:.16px}#shifter .labels text{fill:var(--muted);font:700 .3px var(--font);text-anchor:middle;dominant-baseline:middle}#knob{fill:#2d343d;stroke:var(--accent);stroke-width:.06px}#knob-label{fill:var(--text);font:700 .3px var(--font);text-anchor:middle;pointer-events:none}#shifter.grind #knob{stroke:var(--bad)}.btn-col{gap:var(--s2);flex-direction:column;display:flex}.round-btn{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(10px);width:76px;min-height:56px;color:var(--text);font:600 11px var(--font);cursor:pointer;border-radius:14px;place-items:center;gap:2px;padding:6px 4px;display:grid}.round-btn:hover{background:#282e38e6}.round-btn.on{border-color:var(--bad);color:#ffd2cc}#btn-key.on{border-color:var(--good);color:#d4f5dc}#btn-key.cranking svg{animation:.15s infinite alternate wig}@keyframes wig{to{transform:rotate(18deg)}}.touch-only{display:none}body.touch .touch-only{display:flex}body.touch .desk-only,body.touch .kb{display:none}@media (max-width:900px),(max-height:560px){#lesson{width:min(330px,100% - 200px);padding:var(--s3)}#lesson h2{font-size:19px}#lesson-step{font-size:14px}.track{width:64px;height:136px}#shifter{width:150px}.round-btn{width:64px;min-height:48px}#diagram-wrap{top:calc(var(--s3) + var(--safe-t));bottom:auto;left:auto;right:calc(var(--s3) + var(--safe-r) + 200px);width:min(300px,32vw);padding:4px 8px;transform:none}}@media (max-height:460px){#lesson{top:calc(var(--s2) + var(--safe-t));left:calc(var(--s2) + var(--safe-l))}#top-right{top:calc(var(--s2) + var(--safe-t));right:calc(var(--s2) + var(--safe-r))}#controls{bottom:calc(var(--s2) + var(--safe-b));left:calc(var(--s2) + var(--safe-l));right:calc(var(--s2) + var(--safe-r))}.track{width:60px;height:118px}.plabel{display:none}#diagram-wrap{top:calc(var(--s2) + var(--safe-t));right:calc(var(--s2) + var(--safe-r) + 200px);width:min(250px,30vw);padding:2px 6px}#toast{top:calc(var(--s2) + var(--safe-t) + 70px)}}@media (max-width:600px){#lesson{width:calc(100% - 76px);left:12px;top:calc(12px + var(--safe-t))}#top-right{top:calc(12px + var(--safe-t));flex-direction:column;right:12px}#controls{left:12px;right:12px;bottom:calc(12px + var(--safe-b));flex-wrap:wrap;gap:8px}.mid-group{order:-1;justify-content:center;width:100%;margin:0}.track{width:70px;height:140px}#diagram-wrap{width:calc(100% - 24px);top:auto;left:12px;right:auto;bottom:calc(12px + var(--safe-b) + 350px)}.intro-card{padding:var(--s5)}}