:root{--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;--ink:#1d252e;--ink-soft:#5b6672;--paper:#f3f1ec;--paper-line:#e1ddd4;--accent:#2f6fe0;--accent-soft:#e3ecfc;--good:#3fc27a;--glass:#141a22d1;--glass-line:#ffffff1a;--light:#f3f5f7;--muted:#aab4c0;--star:#f2b630;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:#1b222b;margin:0;position:fixed;inset:0;overflow:hidden}#app{position:absolute;inset:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}button:disabled{cursor:not-allowed}h1,h2,p,ul,ol,dl,dd{margin:0;padding:0}.icon{flex:none;width:22px;height:22px}.stars{gap:2px;display:inline-flex}.star{width:18px;height:18px}.star.on{fill:var(--star)}.star.off{fill:#1d252e24}.stars.big .star{width:40px;height:40px}.stars.inline .star{vertical-align:-3px;width:18px;height:18px}.primary,.secondary{border-radius:14px;min-height:56px;padding:0 28px;font-size:18px;font-weight:600}.primary{background:var(--accent);color:#fff}.primary:disabled{background:#b9c3cf}.secondary{color:var(--ink);background:#e6e9ed}.primary:active:not(:disabled),.secondary:active{transform:scale(.98)}.home{background:var(--paper);grid-template-columns:minmax(380px,40%) 1fr;display:grid;position:absolute;inset:0}.home-list{-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:calc(28px + env(safe-area-inset-top)) 28px 28px calc(32px + env(safe-area-inset-left));border-right:1px solid var(--paper-line);overflow-y:auto}.home-header h1{letter-spacing:-.02em;font-size:34px}.home-header p{color:var(--ink-soft);margin-top:8px;font-size:17px;line-height:1.45}.home-header .home-progress{color:var(--ink);align-items:center;gap:8px;margin-top:14px;font-weight:600;display:flex}.chapter{margin-top:30px}.chapter-head{grid-template-columns:40px 1fr auto;align-items:start;gap:14px;display:grid}.chapter-number{background:var(--ink);color:#fff;border-radius:50%;place-items:center;width:40px;height:40px;font-size:18px;font-weight:700;display:grid}.chapter-text h2{letter-spacing:-.01em;font-size:21px}.chapter-text p{color:var(--ink-soft);margin-top:3px;font-size:15px;line-height:1.4}.chapter-stars{color:var(--ink-soft);font-variant-numeric:tabular-nums;padding-top:4px;font-size:14px}.level-list{border-left:2px solid var(--paper-line);margin:10px 0 0 19px;padding-left:21px;list-style:none}.level-row{text-align:left;border-radius:12px;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 12px;font-size:17px;display:grid}.level-row:hover{background:#1d252e0d}.level-row.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.level-row.locked{color:#8d96a0}.level-row .icon{justify-self:end;width:18px;height:18px}.level-number{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:15px}.home-settings{border-top:1px solid var(--paper-line);margin-top:32px;padding-top:18px}.setting{min-height:48px;color:var(--ink-soft);align-items:center;gap:10px;font-size:16px;display:inline-flex}.home-preview{background:#8ab271;position:relative;overflow:hidden}.preview-canvas{width:100%;height:100%;position:absolute;inset:0}.preview-info{padding:22px 28px calc(24px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--paper-line);justify-content:space-between;align-items:flex-end;gap:24px;display:flex;position:absolute;bottom:0;left:0;right:0}.preview-text h2{letter-spacing:-.01em;font-size:26px}.card-sub{color:var(--ink-soft);margin-top:4px;font-size:15px}.goal{margin-top:10px;font-size:18px;line-height:1.45}.locked-note{color:var(--ink-soft);margin-top:8px}.preview-actions{flex:none;align-items:center;gap:18px;display:flex}.preview-actions .stars.big .star{width:30px;height:30px}.play{color:var(--light);background:#1b222b;position:absolute;inset:0}.scene{position:absolute;inset:0}.hud{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));pointer-events:none;justify-content:space-between;display:flex;position:absolute}.hud>*{pointer-events:auto}.hud-button{background:#ffffff12;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;font-size:15px;font-weight:600;display:inline-flex}.hud>.hud-button{background:var(--glass)}.hud-button.toggle.on{background:#2f6fe0e6}.hud-button:active{transform:scale(.97)}.hint{top:calc(12px + env(safe-area-inset-top));background:var(--glass);text-align:center;pointer-events:none;border-radius:14px;max-width:520px;padding:10px 18px 12px;font-size:16px;font-weight:600;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.hint:has(.hint-text:empty){display:none}.hint-progress{background:var(--good);transform-origin:0;height:4px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.toast{top:calc(70px + env(safe-area-inset-top));max-width:560px;color:var(--ink);text-align:center;opacity:0;pointer-events:none;border-radius:14px;padding:12px 20px;font-size:16px;font-weight:600;transition:opacity .2s,transform .2s;position:absolute;left:50%;transform:translate(-50%,-6px)}.toast.visible{opacity:1;transform:translate(-50%)}.toast.soft{background:#fff1bf}.toast.good{background:#d6f3e2}.panel{top:calc(84px + env(safe-area-inset-top));width:min(268px,24vw);padding:0 8px calc(14px + env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;bottom:0}.panel>*{pointer-events:auto}.steer-panel{left:env(safe-area-inset-left)}.drive-panel{right:env(safe-area-inset-right)}.play.wheel-right .steer-panel{left:auto;right:env(safe-area-inset-right)}.play.wheel-right .drive-panel{right:auto;left:env(safe-area-inset-left)}.legend,.stats{background:var(--glass);border-radius:14px;align-self:stretch;margin-top:8px;padding:12px 14px;font-size:14px}.legend-title{margin-bottom:6px;font-weight:600}.intro-card .legend{color:var(--light);margin-top:12px}.intro-card .legend ul{grid-template-columns:1fr 1fr}.legend ul{color:#d9e1ea;gap:5px;list-style:none;display:grid}.legend li{align-items:center;gap:10px;display:flex}.swatch{border-radius:2px;flex:none;width:26px;height:4px}.swatch.rear{background:#38c8e3}.swatch.front{background:#fff}.swatch.swing{background:repeating-linear-gradient(90deg,#ffd23f 0 7px,#0000 7px 11px)}.swatch.pivot{background:#141c26bf;border:2.5px solid #38c8e3;border-radius:50%;width:14px;height:14px;margin:0 6px}.steer-readout{background:var(--glass);border-radius:14px;grid-template-columns:1fr auto;align-self:stretch;align-items:baseline;row-gap:8px;margin-top:auto;padding:10px 14px 12px;display:grid}.steer-label{color:var(--muted);font-size:14px}.steer-value{font-variant-numeric:tabular-nums;font-size:18px}.steer-gauge{background:linear-gradient(90deg,#ffffff47,#ffffff14 50%,#ffffff47);border-radius:5px;grid-column:1/-1;height:10px;position:relative}.steer-centre{background:#fff9;width:2px;margin-left:-1px;position:absolute;top:-3px;bottom:-3px;left:50%}.steer-marker{background:#38c8e3;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 3px #141c26cc}.wheel{aspect-ratio:1;touch-action:none;cursor:pointer;filter:drop-shadow(0 6px 14px #00000059);border-radius:50%;width:min(236px,21vw);margin-top:14px}.wheel-graphic{pointer-events:none;width:100%;height:100%;display:block}.wheel.held .wheel-graphic circle:first-child{stroke:#1d2228}.stats{text-align:center;grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stats dt{color:var(--muted);font-size:13px}.stats dd{font-variant-numeric:tabular-nums;margin-top:2px;font-size:22px;font-weight:600}.stats .limit{color:var(--muted);font-size:15px}.controls{align-items:flex-end;gap:10px;margin-top:auto;display:flex}.gears{background:var(--glass);border-radius:18px;flex-direction:column;gap:6px;padding:6px;display:flex}.gear{touch-action:none;background:#ffffff12;border-radius:12px;align-content:center;place-items:center;width:64px;height:62px;display:grid}.gear-letter{font-size:26px;font-weight:700;line-height:1}.gear-name{color:var(--muted);margin-top:3px;font-size:11px}.gear.active{background:var(--accent)}.gear.active .gear-name{color:#e6eeff}.pedal{touch-action:none;background:#2a3038;border:2px solid #ffffff1f;border-radius:16px;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12px;transition:transform 50ms,box-shadow 50ms;display:flex;position:relative;box-shadow:0 6px #14181d,0 10px 18px #00000059}.pedal-grip{background:repeating-linear-gradient(0deg,#ffffff1a 0 4px,#0000 4px 11px);border-radius:8px;position:absolute;inset:14px 14px 44px}.pedal-label{font-size:17px;font-weight:700}.pedal.brake{border-color:#e8706899;width:94px;height:128px}.pedal.gas{border-color:#3fc27a99;width:70px;height:176px}.pedal.pressed{transform:translateY(5px);box-shadow:0 1px #14181d,0 4px 8px #00000059}.pedal.brake.pressed{background:#4a2e2e}.pedal.gas.pressed{background:#23432f}.pedal:disabled{opacity:.45}.key-hint{color:#ffffffd9;text-shadow:0 1px 3px #0009;margin-top:10px;font-size:12px;font-weight:600;display:none}@media (hover:hover) and (pointer:fine){.key-hint{display:block}}.overlay{background:#0c101673;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.overlay.hidden{display:none}.card{width:min(540px,100%);color:var(--ink);background:#fbfaf7;border-radius:22px;padding:30px 32px 28px;box-shadow:0 24px 60px #00000059}.card h2{letter-spacing:-.01em;font-size:28px}.tips{color:#34404c;gap:8px;margin-top:16px;padding-left:22px;font-size:17px;line-height:1.45;display:grid}.strict{margin-top:14px;font-weight:600}.card-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.result-card{text-align:center}.result-card .stars{margin-top:12px}.result-card .card-actions{justify-content:center}.result-stats{gap:6px;max-width:360px;margin:18px auto 0;font-size:17px;display:grid}.result-stats div{border-bottom:1px solid #ebe7df;justify-content:space-between;gap:16px;padding:8px 0;display:flex}.result-stats dt{color:var(--ink-soft)}.result-stats dd{font-weight:600}.rotate-note{display:none}@media (orientation:portrait) and (width<=1100px) and (hover:none) and (pointer:coarse){.rotate-note{z-index:10;color:var(--light);text-align:center;background:#1b222b;place-items:center;padding:40px;font-size:24px;font-weight:600;display:grid;position:fixed;inset:0}}.language-picker{flex-wrap:wrap;gap:6px;margin-top:16px;display:flex}.language{min-height:40px;color:var(--ink-soft);background:#1d252e0f;border-radius:10px;padding:0 14px;font-size:15px;font-weight:600}.language.active{background:var(--ink);color:#fff}.with-icon{align-items:center;gap:8px;display:inline-flex}.with-icon .icon{width:20px;height:20px}.secondary:disabled{opacity:.45}.card-actions{flex-wrap:wrap}.lesson-card{width:min(780px,100%);padding:26px 28px 24px}.lesson-stage{background:#3b3e43;border-radius:16px;margin-top:16px;position:relative;overflow:hidden}.lesson-canvas{aspect-ratio:26/14;width:100%;max-height:46vh;display:block}.lesson-stage .legend{color:var(--light);margin:0;padding:6px 12px;font-size:13px;position:absolute;bottom:8px;left:10px}.lesson-stage .legend-title{display:none}.lesson-stage .legend ul{flex-wrap:wrap;gap:4px 16px;display:flex}.lesson-text{min-height:3em;margin-top:16px;font-size:19px;line-height:1.45}.lesson-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px;display:flex}.lesson-counter{color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-right:auto;font-size:15px;font-weight:600}@media (width<=900px){.drive-panel{width:auto}.hint{max-width:calc(100vw - 560px)}}.menu-backdrop,.hud-menu{display:none}.play.menu-open .menu-button{background:#2f6fe0e6}.play.menu-open .menu-backdrop{z-index:5;background:#0c101659;display:block;position:absolute;inset:0}.play.menu-open .hud{z-index:6}.play.menu-open .hud-menu{width:min(340px,100vw - 16px);max-height:calc(100vh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;touch-action:pan-y;border:1px solid var(--glass-line);background:#141a22f5;border-radius:16px;gap:10px;padding:10px;display:grid;position:absolute;top:calc(100% + 6px);right:0;overflow-y:auto;box-shadow:0 16px 40px #0006}.menu-heading{gap:2px;padding:4px 6px 0;display:grid}.menu-heading strong{font-size:17px}.menu-heading span{color:var(--muted);font-size:14px}.hud-toggles{grid-template-columns:1fr 1fr;gap:6px;display:grid}.hud-toggles .hud-button{justify-content:flex-start;min-height:46px}.menu-tips{color:#d9e1ea;padding:4px 6px 0;font-size:14px;line-height:1.4}.menu-title{color:var(--light);margin-bottom:4px;font-weight:600}.menu-tips ul{gap:4px;padding-left:18px;display:grid}.hud-menu .legend{background:#ffffff0d;margin:0}@media (height<=500px){.primary,.secondary{min-height:48px;padding:0 20px;font-size:16px}.home{grid-template-columns:minmax(300px,46%) 1fr}.home-list{padding:calc(16px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}.home-header h1{font-size:24px}.home-header p{margin-top:4px;font-size:14px}.home-header .home-progress{margin-top:8px}.language-picker{margin-top:10px}.language{min-height:36px;padding:0 10px;font-size:14px}.chapter{margin-top:18px}.chapter-head{grid-template-columns:30px 1fr auto;gap:10px}.chapter-number{width:30px;height:30px;font-size:15px}.chapter-text h2{font-size:17px}.chapter-text p{font-size:13px}.level-list{margin:6px 0 0 14px;padding-left:12px}.level-row{grid-template-columns:26px 1fr auto;min-height:44px;padding:4px 10px;font-size:15px}.home-settings{margin-top:18px;padding-top:8px}.preview-info{padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) 16px;flex-wrap:wrap;align-items:center;gap:10px 16px}.preview-text h2{font-size:19px}.card-sub{font-size:13px}.goal{margin-top:6px;font-size:15px;line-height:1.4}.preview-actions{gap:12px;margin-left:auto}.preview-actions .stars.big .star{width:22px;height:22px}.panel{top:calc(56px + env(safe-area-inset-top));width:auto;padding:0 8px calc(8px + env(safe-area-inset-bottom))}.steer-panel{left:calc(4px + env(safe-area-inset-left))}.drive-panel,.play.wheel-right .steer-panel{right:calc(4px + env(safe-area-inset-right))}.play.wheel-right .drive-panel{left:calc(4px + env(safe-area-inset-left))}.steer-readout{border-radius:999px;align-self:center;padding:5px 12px;display:block}.steer-label,.steer-gauge{display:none}.steer-value{font-size:14px}.wheel{width:clamp(140px,19vw,168px);margin-top:8px}.stats{border-radius:999px;gap:4px;margin-top:0;padding:5px 10px}.stats dt{font-size:10px}.stats dd{margin-top:0;font-size:15px}.stats .limit{font-size:12px}.controls{gap:8px}.gears{border-radius:14px;gap:4px;padding:4px}.gear{border-radius:10px;width:54px;height:50px}.gear-letter{font-size:21px}.gear-name{margin-top:2px;font-size:10px}.pedal{padding-bottom:8px}.pedal-grip{inset:10px 10px 34px}.pedal-label{font-size:14px}.pedal.brake{width:78px;height:104px}.pedal.gas{width:60px;height:142px}.key-hint{display:none}.hint{top:calc(10px + env(safe-area-inset-top));max-width:min(440px,100vw - 480px);padding:7px 14px 9px;font-size:14px}.toast{top:calc(58px + env(safe-area-inset-top));max-width:min(460px,100vw - 460px);padding:9px 14px;font-size:14px}.overlay{padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}.card{-webkit-overflow-scrolling:touch;touch-action:pan-y;border-radius:18px;max-height:100%;padding:18px 22px 0;overflow-y:auto}.card h2{font-size:21px}.tips{gap:4px;margin-top:10px;font-size:15px;line-height:1.4}.strict{margin-top:8px}.card-actions,.lesson-actions{background:#fbfaf7;margin-top:12px;padding:10px 0 16px;position:sticky;bottom:0}.stars.big .star{width:30px;height:30px}.result-card .stars{margin-top:6px}.result-stats{gap:0;margin-top:8px;font-size:15px}.result-stats div{padding:5px 0}.lesson-card{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"title title""stage text""actions actions";align-items:start;column-gap:18px;display:grid}.lesson-card h2{grid-area:title}.lesson-stage{grid-area:stage;margin-top:10px}.lesson-canvas{max-height:none}.lesson-stage .legend{padding:4px 8px;font-size:11px;bottom:4px;left:6px}.lesson-text{grid-area:text;margin-top:10px;font-size:16px;line-height:1.4}.lesson-actions{grid-area:actions}}