.controller-3d{display:none;position:relative;width:100%;isolation:isolate}
body.practice-open .controller-3d,body.course-console .controller-3d{display:block}
body.practice-open.has-controller-3d #mixer,body.practice-open.has-controller-3d .practice-pads,body.course-console.has-controller-3d #mixer{display:none!important}
body.practice-open.has-controller-3d .practice-display,body.practice-open.has-controller-3d #freeMix{display:none!important}
body.practice-open.has-controller-3d main::before{content:'横屏获得最佳体验 · 旋钮双击归零';display:block;text-align:center;color:#615b66;font-size:12px;padding:10px 0}
.controller-3d .model-canvas-3d{display:block;width:100%;height:auto;touch-action:none}
.controller-3d .model-label,.controller-3d .model-button,.controller-3d .model-slider,.controller-3d .model-knob,.controller-3d .model-jog{position:absolute;transform:translate(-50%,-50%);margin:0}
.model-label{color:rgba(55,51,57,.74);font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei UI",sans-serif;font-weight:650;letter-spacing:.055em;white-space:nowrap;pointer-events:none;line-height:1;transform:translate(-50%,-50%) scaleY(.9)!important;mix-blend-mode:multiply;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.controller-3d .model-button{width:calc(78px * var(--model-scale));height:calc(35px * var(--model-scale));padding:0;border:0;border-radius:3px;background:transparent;color:#37343b;font-size:clamp(8px,1vw,13px);font-weight:600;box-shadow:none;min-height:0}
.controller-3d .model-button:hover{background:#b4a4d855}.controller-3d .model-button:active{background:#a6bc7377;translate:0 2px}
.controller-3d [data-source].is-next{opacity:1!important;outline:3px solid #b5e83e;outline-offset:3px;filter:drop-shadow(0 0 8px #b5e83e)}
.model-jog{width:27%;height:36%;border-radius:50%;cursor:grab;touch-action:none}.model-jog:active{cursor:grabbing}
.controller-3d .model-slider{width:calc(162px * var(--model-scale));height:calc(42px * var(--model-scale));opacity:0;cursor:ew-resize;touch-action:none}
.controller-3d .model-slider.vertical{writing-mode:vertical-lr;direction:rtl;width:calc(44px * var(--model-scale));height:calc(99px * var(--model-scale));cursor:ns-resize}
.controller-3d .model-knob{opacity:0;width:calc(52px * var(--model-scale));height:calc(45px * var(--model-scale));cursor:ew-resize}
.controller-3d .model-slider:focus-visible,.controller-3d .model-knob:focus-visible{opacity:.7;outline:3px solid #7861b3}.model-button:focus-visible{outline:3px solid #7861b3}
.model-help{position:absolute;bottom:0;width:100%;text-align:center;font-size:12px;color:#615b66}
.model-deck-tools{position:relative;z-index:5;width:min(760px,calc(100% - 28px));margin:-2px auto 34px;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(55,48,66,.1);backdrop-filter:blur(18px)}
.model-deck-tool{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"title space load cue" "bpm bpm filter filter";align-items:center;gap:7px;min-width:0;padding:2px}
.model-deck-tool strong{grid-area:title;font-size:11px;color:#3f3948;white-space:nowrap}.model-deck-tool button,.model-restore{min-height:34px;padding:0 11px;border:0;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;background:#292334;color:#fff;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;cursor:pointer}.model-deck-tool button:nth-of-type(1){grid-area:load}.model-deck-tool button:nth-of-type(2){grid-area:cue}.model-deck-tool label:nth-of-type(1){grid-area:bpm}.model-deck-tool label:nth-of-type(2){grid-area:filter}
.model-deck-tool label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px;min-width:0;color:#61596a;font-size:10px;font-weight:800}.model-deck-tools input{position:static!important;transform:none!important;margin:0!important;min-width:0}.model-deck-tools input[type=number]{width:62px;height:34px;padding:0 6px;border:1px solid #d5cfda;border-radius:8px;background:#fff;color:#292334;font-weight:700}.model-deck-tools input[type=range]{width:100%;height:30px;opacity:1;cursor:ew-resize}.model-restore{grid-column:1/-1;width:100%;background:#ece8f2;color:#4b3b63}
.model-zone-spotlight{appearance:none;display:none;position:absolute;z-index:4;padding:0;pointer-events:auto;border:3px solid #b6ef49;border-radius:18px;background:transparent;box-shadow:0 0 0 9999px rgba(27,23,34,.6),0 0 28px rgba(182,239,73,.72);animation:zone-breathe 1.25s ease-in-out infinite alternate;cursor:pointer}
.model-zone-spotlight::after{content:attr(data-label);position:absolute;left:12px;top:10px;padding:5px 8px;border-radius:8px;background:#b6ef49;color:#1f2818;font-size:11px;font-weight:900;line-height:1}
body[data-learning-zone="deck-a"] .zone-deck-a{display:block;left:6%;top:29%;width:31%;height:40%}
body[data-learning-zone="transport-a"] .zone-transport-a{display:block;left:8%;top:68%;width:28%;height:12%}
body[data-learning-zone="mixer"] .zone-mixer{display:block;left:39%;top:29%;width:22%;height:47%}
body[data-learning-zone="crossfader"] .zone-crossfader{display:block;left:41%;top:68%;width:18%;height:12%}
body[data-learning-zone="deck-b"] .zone-deck-b{display:block;right:6%;top:29%;width:31%;height:40%}
body[data-learning-zone="play-a"] .zone-play-a,body[data-learning-zone="pause-a"] .zone-pause-a,body[data-learning-zone="replay-a"] .zone-replay-a{display:block;left:10%;top:69%;width:12%;height:10%}
body[data-learning-zone="set-cue-a"] .zone-set-cue-a,body[data-learning-zone="cue-a"] .zone-cue-a{display:block;left:23%;top:69%;width:12%;height:10%}
body[data-learning-zone="play-b"] .zone-play-b{display:block;right:23%;top:69%;width:12%;height:10%}
body[data-learning-zone="sync-b"] .zone-sync-b{display:block;right:10%;top:69%;width:12%;height:10%}
body[data-learning-zone="low-swap"] .zone-low-swap{display:block;left:39%;top:46%;width:22%;height:18%}
body[data-learning-zone="cross-to-b"] .zone-cross-to-b{display:block;left:41%;top:68%;width:18%;height:12%}
body[data-learning-zone="finish-b"] .zone-finish-b{display:block;right:6%;top:29%;width:31%;height:40%}
@keyframes zone-breathe{to{border-color:#d8ff8c;box-shadow:0 0 0 9999px rgba(27,23,34,.54),0 0 42px rgba(182,239,73,.9)}}
body.practice-open .practice-display{max-width:1050px;margin:0 auto;background:#20252a;box-shadow:0 8px 20px #27232b26;border-color:#d7d4cd}
body.practice-open main{max-width:1300px!important}
body.course-console main{width:min(1180px,calc(100% - 32px));height:auto!important;max-height:none!important;overflow:visible!important;margin:0 auto;padding-bottom:110px}
body.course-console .course-widget,body.course-console .orientation-guide,body.course-console .console-mode-bar{display:none!important}
body.course-console .workspace-bar{width:min(1050px,100%);margin:12px auto 8px}
body.course-console .count-sheet{width:min(1050px,100%);margin:0 auto 8px;min-height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.58);box-shadow:none;backdrop-filter:blur(16px)}
body.course-console .lesson{width:min(1050px,100%);min-height:0!important;height:auto!important;margin:0 auto 8px!important;padding:14px 18px;display:grid!important;grid-template-columns:1fr auto;gap:8px 18px;align-items:center;align-content:normal!important;border:0;border-radius:14px;background:rgba(255,255,255,.74);color:#292334;box-shadow:0 8px 24px rgba(63,52,83,.1);backdrop-filter:blur(20px)}
body.course-console .lesson-progress{grid-column:1/-1;display:flex;gap:4px;overflow:hidden}
body.course-console .lesson-progress span{flex:1;min-width:0;padding:4px 2px;border-top-width:2px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#635b69}
body.course-console .lesson-copy h2{font-size:clamp(18px,2vw,26px);color:#211d25}
body.course-console .lesson-copy>p:last-child{margin-top:3px;color:#5d5662;font-size:13px}
body.course-console .lesson-visual,body.course-console .lesson-primary-action,body.course-console .lesson-utility-actions,body.course-console .lesson-why{display:none!important}
body.course-console .lesson-actions{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:360px}
body.course-console #hintButton{min-height:32px;padding:4px 10px;border:0;border-radius:9px;background:#eee8f7;color:#4c3b65;font-size:12px;text-align:center}
body.course-console .coach-message{max-width:42ch;margin:0;padding:0;border:0;background:transparent;color:#4c3b65;font-size:12px;text-align:right}
body.course-console .phrase-lesson,body.course-console .module-lesson{width:min(1050px,100%);min-height:0;height:auto!important;margin:0 auto 8px;padding:14px 18px;border:0;border-radius:14px;background:rgba(255,255,255,.76);color:#292334;box-shadow:0 8px 24px rgba(63,52,83,.1);backdrop-filter:blur(20px)}
body.course-console .phrase-lesson[hidden],body.course-console .module-lesson[hidden],body.course-console .lesson[hidden]{display:none!important}
body.course-console .phrase-lesson{display:grid!important;grid-template-columns:minmax(180px,.38fr) minmax(420px,1fr);gap:18px}
body.course-console .phrase-copy h2,body.course-console .module-copy h2{margin:0 0 4px;font-size:20px;color:#211d25}
body.course-console .phrase-copy p,body.course-console .module-copy p{margin:0;color:#5d5662;font-size:12px;line-height:1.45}
body.course-console .phrase-bars span{min-height:28px}
body.course-console .phrase-actions{margin-top:6px;display:flex;gap:6px}
body.course-console .phrase-actions button{min-height:34px;padding:6px 10px;font-size:12px}
body.course-console .character-feedback{min-height:0}.course-console .character-feedback>.pose-avatar{display:none}
body.course-console .module-lesson{display:grid!important;grid-template-columns:220px 1fr auto;gap:10px 18px;align-items:center}
body.course-console .module-progress{grid-column:1/-1}.course-console .module-stage{grid-column:2}.course-console .module-actions{grid-column:3;display:flex;gap:6px}.course-console .module-finish{grid-column:1/-1}
body.course-console .module-mini-widget{display:none!important}
body.course-console .module-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body.course-console .module-choice legend{display:none}
body.course-console .module-choice button{min-height:38px;padding:6px 8px;border-radius:9px;font-size:12px}
body.course-console .module-feedback{font-size:12px;line-height:1.35}
body.course-console .module-actions button{min-height:34px;padding:6px 10px;font-size:12px}
.character-reaction{bottom:92px!important;gap:8px!important;pointer-events:none}
.reaction-face{width:86px!important;height:86px!important;object-fit:cover;object-position:50% 15%;background:none!important;border:0!important;border-radius:0!important;filter:drop-shadow(0 8px 10px rgba(49,40,68,.18))}
.reaction-copy{padding:8px 11px;border-radius:10px;background:rgba(250,247,252,.9);box-shadow:0 6px 18px rgba(44,36,58,.12);white-space:nowrap}
.pose-avatar{background-image:url('./assets/characters/dj-feedback-avatar-v1.png')!important;background-size:contain!important;background-position:center!important;background-color:transparent!important;border-radius:0!important;box-shadow:none!important}
@media(max-width:700px){body.course-console main{width:calc(100% - 16px)}body.course-console .workspace-bar{margin-top:6px}body.course-console .count-sheet{display:none!important}body.course-console .lesson{grid-template-columns:1fr;padding:12px}body.course-console .lesson-copy{grid-row:2}body.course-console .lesson-actions{grid-column:1;grid-row:3;align-items:flex-start}body.course-console .coach-message{text-align:left}body.course-console .phrase-lesson,body.course-console .module-lesson{grid-template-columns:1fr;padding:10px 12px;gap:7px}body.course-console .module-stage,body.course-console .module-actions{grid-column:1}body.course-console .module-copy{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline}body.course-console .module-copy .module-label{grid-column:1}body.course-console .module-copy h2{grid-column:2;font-size:17px}body.course-console .module-copy p{grid-column:1/-1}body.course-console .module-progress{height:4px}body.course-console .module-choice{gap:4px}body.course-console .module-choice button{min-height:34px;padding:5px 4px;font-size:10px}body.course-console .module-choice button span{display:none}body.course-console .module-actions{justify-content:flex-end}body.course-console .character-feedback{display:none}.reaction-copy{white-space:normal;max-width:230px}.reaction-face{width:70px!important;height:70px!important}}
@media(max-width:700px){.model-deck-tools{grid-template-columns:1fr;width:calc(100% - 20px);margin-top:2px}.model-deck-tool{grid-template-columns:auto 1fr auto auto}.model-restore{width:100%}.model-zone-spotlight::after{font-size:10px}}
@media(orientation:landscape) and (max-height:650px){body.practice-open main{padding-top:8px}.practice-display canvas{height:55px!important}.controller-3d{max-width:800px;margin:auto}}
body.course-console .module-progress{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.course-console .module-knowledge{min-height:42px}
@media(max-width:700px){body.course-console .module-progress{height:auto;gap:5px}}

/* Course 00 owns a dedicated game layout; keep legacy console rules out of it. */
body.course-console.app-course-phrase main{width:min(860px,100%)!important;min-height:100dvh!important;margin:0 auto!important;padding:0 20px 92px!important;display:grid!important;align-content:start!important}
body.course-console.app-course-phrase .workspace-bar{position:sticky!important;z-index:40!important;top:0!important;width:100%!important;min-height:76px!important;margin:0!important;padding:14px 2px 10px!important;display:grid!important;grid-template-columns:48px 1fr!important;align-items:center!important;gap:14px!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(247,246,240,.94),rgba(247,246,240,.68) 72%,transparent)!important;box-shadow:none!important;backdrop-filter:blur(20px) saturate(130%)!important}
body.course-console.app-course-phrase .workspace-bar::after{content:"";grid-column:2;grid-row:1;height:10px;border-radius:999px;background:linear-gradient(90deg,#7452b8 var(--lesson-progress,0%),rgba(47,40,54,.1) var(--lesson-progress,0%));box-shadow:inset 0 1px 2px rgba(43,34,54,.12)}
body.course-console.app-course-phrase .workspace-bar>span,body.course-console.app-course-phrase .workspace-bar>strong{display:none!important}
body.course-console.app-course-phrase .workspace-bar>div,body.course-console.app-course-phrase .workspace-mode{display:none!important}
body.course-console.app-course-phrase .workspace-back{grid-column:1;grid-row:1;width:48px!important;min-width:48px!important;height:48px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 8px 22px rgba(52,42,66,.09)!important;color:#372d41!important;font-size:0!important}
body.course-console.app-course-phrase .workspace-back span{font-size:25px!important;line-height:1!important}
body.course-console.app-course-phrase>.controller-3d,body.course-console.app-course-phrase main>.controller-3d{display:none!important}
body.course-console.app-course-phrase .count-sheet,body.course-console.app-course-phrase .course-widget,body.course-console.app-course-phrase .orientation-guide,body.course-console.app-course-phrase .console-mode-bar,body.course-console.app-course-phrase .lesson,body.course-console.app-course-phrase .phrase-lesson,body.course-console.app-course-phrase #mixer,body.course-console.app-course-phrase .practice-pads{display:none!important}
body.course-console.app-course-phrase .module-lesson{width:100%!important;min-height:calc(100dvh - 168px)!important;height:auto!important;margin:0!important;padding:22px 0 0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
body.course-console.app-course-phrase .module-progress{order:0!important;height:16px!important;min-height:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important}
body.course-console.app-course-phrase .module-knowledge{width:9px!important;min-width:9px!important;height:9px!important;min-height:9px!important;padding:0!important;display:block!important;border-radius:50%!important;background:rgba(51,43,57,.15)!important;font-size:0!important;box-shadow:none!important}
body.course-console.app-course-phrase .module-knowledge i,body.course-console.app-course-phrase .module-knowledge span{display:none!important}
body.course-console.app-course-phrase .module-knowledge.is-current{width:30px!important;border-radius:999px!important;background:#7452b8!important}
body.course-console.app-course-phrase .module-knowledge.is-done{background:#89d54e!important}
body.course-console.app-course-phrase .module-copy{order:1!important;display:block!important;text-align:center!important}
body.course-console.app-course-phrase .module-label{display:inline-block!important;margin-bottom:7px!important;color:#7555b5!important;font-size:12px!important;font-weight:900!important;letter-spacing:.14em!important}
body.course-console.app-course-phrase .module-copy h2{margin:0!important;font-size:clamp(26px,6vw,42px)!important;line-height:1.08!important;letter-spacing:-.04em!important;color:#29232f!important}
body.course-console.app-course-phrase .module-copy p{max-width:34em!important;margin:9px auto 0!important;color:#665e6c!important;font-size:14px!important;line-height:1.5!important}
body.course-console.app-course-phrase .module-stage{order:2!important;grid-column:auto!important;width:100%!important;min-height:250px!important;margin:0 auto!important;display:grid!important;place-items:center!important}
body.course-console.app-course-phrase .module-stage>.controller-3d{display:block!important;width:min(760px,100%)!important;margin:-4px auto 0!important;overflow:hidden!important;border-radius:26px!important;background:rgba(255,255,255,.26)!important;box-shadow:0 20px 52px rgba(59,47,75,.1)!important}
body.course-console.app-course-phrase .module-stage>.controller-3d .model-deck-tools,body.course-console.app-course-phrase .module-stage>.controller-3d .model-help{display:none!important}
body.course-console.app-course-phrase .controller-concept button{pointer-events:none!important;cursor:default!important}
body.course-console.app-course-phrase[data-learning-zone="cross-to-b"] .zone-cross-to-b{pointer-events:none!important}
body.course-console.app-course-phrase[data-learning-zone="cross-to-b"] .model-slider[data-source="crossfader"]{z-index:6!important;opacity:.12!important;outline:3px solid #b6ef49!important;outline-offset:5px!important;border-radius:999px!important;filter:drop-shadow(0 0 12px rgba(182,239,73,.82))!important}
body.course-console.app-course-phrase .character-feedback{order:3!important;min-height:52px!important;max-width:620px!important;margin:0 auto!important;display:grid!important;place-items:center!important}
body.course-console.app-course-phrase .character-feedback>.pose-avatar{display:none!important}
body.course-console.app-course-phrase .module-feedback{margin:0!important;padding:11px 16px!important;border-radius:16px!important;background:rgba(255,255,255,.6)!important;color:#4f4657!important;font-size:13px!important;line-height:1.5!important;text-align:center!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.82)!important;backdrop-filter:blur(18px)!important}
body.course-console.app-course-phrase .module-feedback:empty{display:none!important}
body.course-console.app-course-phrase .module-actions{order:4!important;grid-column:auto!important;position:sticky!important;z-index:30!important;bottom:12px!important;width:min(520px,100%)!important;margin:auto!important;padding:10px!important;display:flex!important;justify-content:center!important;gap:8px!important;border-radius:22px!important;background:rgba(249,248,244,.78)!important;box-shadow:0 14px 34px rgba(54,44,66,.12),inset 0 0 0 1px rgba(255,255,255,.9)!important;backdrop-filter:blur(24px) saturate(145%)!important}
body.course-console.app-course-phrase .module-actions button{min-height:48px!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:15px!important;text-align:center!important;line-height:1.1!important;overflow:hidden!important}
body.course-console.app-course-phrase .module-actions button[hidden]{display:none!important}
body.course-console.app-course-phrase #moduleRestart{width:48px!important;min-width:48px!important;padding:0!important;font-size:0!important}
body.course-console.app-course-phrase #moduleRestart::before{content:"↻";font-size:23px;line-height:1}
body.course-console.app-course-phrase #moduleAdvance{flex:1!important;background:#7452b8!important;color:#fff!important;box-shadow:none!important}
body.course-console.app-course-phrase #moduleRestart{display:none!important}
body.course-console.app-course-phrase .module-actions:has(#moduleAdvance[hidden]){display:none!important}
body.course-console.app-course-phrase .app-tabbar{display:none!important}

@media(max-width:700px){body.course-console.app-course-phrase main{padding:0 14px 30px!important}body.course-console.app-course-phrase .workspace-bar{grid-template-columns:44px 1fr!important;min-height:68px!important;gap:12px!important}body.course-console.app-course-phrase .workspace-back{width:44px!important;min-width:44px!important;height:44px!important}body.course-console.app-course-phrase .module-lesson{min-height:calc(100dvh - 80px)!important;padding-top:12px!important;gap:12px!important}body.course-console.app-course-phrase .module-copy h2{font-size:28px!important}body.course-console.app-course-phrase .module-stage{min-height:220px!important}body.course-console.app-course-phrase .module-stage>.controller-3d{width:calc(100% + 8px)!important;border-radius:20px!important}}

/* Completion is a bottom sheet, not a full-screen result composition. */
body>.module-finish{display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0 8px 8px!important;border-radius:0!important;background:rgba(32,27,38,.14)!important;backdrop-filter:blur(3px)!important}
body.lesson-finished{overflow:hidden!important}
body>.module-finish[hidden]{display:none!important}
body>.module-finish::before{display:none!important}
body>.module-finish .module-finish-character{z-index:3!important;left:50%!important;top:auto!important;bottom:148px!important;width:190px!important;height:190px!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;transform:translateX(-50%)!important;filter:drop-shadow(0 14px 20px rgba(47,38,61,.18))!important;animation:sheet-character-in .46s cubic-bezier(.16,1,.3,1) both!important}
body>.module-finish .module-finish-panel{z-index:4!important;position:relative!important;grid-column:auto!important;grid-row:auto!important;align-self:auto!important;justify-self:auto!important;width:min(620px,100%)!important;min-height:198px!important;margin:0!important;padding:58px 22px calc(18px + env(safe-area-inset-bottom))!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:28px!important;background:rgba(247,244,240,.88)!important;box-shadow:0 -12px 42px rgba(54,44,66,.14),inset 0 1px rgba(255,255,255,.86)!important;backdrop-filter:blur(28px) saturate(145%)!important}
body>.module-finish .module-finish-panel .primary-button{width:min(320px,100%)!important;min-height:50px!important;border-radius:14px!important;background:#7253b7!important;color:#fff!important}
@media(max-width:700px){body>.module-finish{padding-inline:8px!important}body>.module-finish .module-finish-character{bottom:140px!important;width:172px!important;height:172px!important}body>.module-finish .module-finish-panel{min-height:186px!important;padding:52px 18px calc(16px + env(safe-area-inset-bottom))!important;border-radius:26px!important}body>.module-finish .module-finish-panel strong{font-size:1.3rem!important}}
@keyframes sheet-character-in{from{opacity:0;transform:translate(-50%,24px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(prefers-reduced-motion:reduce){body>.module-finish .module-finish-character{animation:none!important}}

/* The mixer is an instrument surface, not a document: it always fits one viewport. */
html:has(body.practice-open){height:100%;overflow:hidden!important}
body.practice-open{height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
body.practice-open main{height:100dvh!important;max-height:100dvh!important;margin:0 auto!important;padding-bottom:82px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
body.practice-open .controller-3d{flex:1 1 auto;min-height:0;overflow:hidden}
body.practice-open .controller-3d .model-canvas-3d{max-height:calc(100dvh - 300px);object-fit:contain}
body.practice-open .model-deck-tools{flex:0 0 auto;margin-bottom:8px}
@media(max-width:700px){body.practice-open main{padding-top:124px!important;padding-bottom:76px!important}.practice-open .controller-3d .model-canvas-3d{max-height:calc(100dvh - 430px)}.practice-open .model-deck-tools{grid-template-columns:1fr 1fr;width:calc(100% - 12px);gap:6px;padding:7px}.practice-open .model-deck-tool{grid-template-columns:auto 1fr auto auto;gap:4px}.practice-open .model-deck-tool label:nth-of-type(2){display:none}.practice-open .model-restore{grid-column:1/-1;min-height:30px}}

/* Course 00 is one fixed game board: compact steps, precise controls, no inner-page scroll. */
html:has(body.course-console.app-course-phrase),body.course-console.app-course-phrase{height:100%;overflow:hidden!important}
body.course-console.app-course-phrase main{height:100dvh!important;min-height:0!important;max-height:100dvh!important;padding:0 16px 8px!important;overflow:hidden!important}
body.course-console.app-course-phrase .workspace-bar{position:relative!important;min-height:58px!important;padding:7px 2px 4px!important}
body.course-console.app-course-phrase .workspace-back{width:42px!important;min-width:42px!important;height:42px!important}
body.course-console.app-course-phrase .module-lesson{height:calc(100dvh - 58px)!important;min-height:0!important;padding:4px 0 6px!important;gap:7px!important;overflow:hidden!important}
body.course-console.app-course-phrase .module-progress{height:10px!important;min-height:10px!important}
body.course-console.app-course-phrase .module-copy h2{font-size:clamp(22px,5vw,31px)!important}
body.course-console.app-course-phrase .module-copy p{margin-top:5px!important;font-size:12px!important;line-height:1.35!important}
body.course-console.app-course-phrase .module-label{margin-bottom:3px!important;font-size:10px!important}
body.course-console.app-course-phrase .module-stage{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;gap:6px!important}
body.course-console.app-course-phrase .controller-cue-steps{flex:0 0 46px!important;width:min(680px,100%)!important;height:46px!important;min-height:46px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;margin:0 auto!important}
body.course-console.app-course-phrase .controller-cue-steps button{height:46px!important;min-height:46px!important;padding:5px 4px!important;border-radius:11px!important}
body.course-console.app-course-phrase .controller-cue-steps b{font-size:11px!important}
body.course-console.app-course-phrase .controller-cue-steps small{margin-top:1px!important;font-size:9px!important;line-height:1.2!important}
body.course-console.app-course-phrase .module-stage>.controller-3d{flex:1 1 auto!important;min-height:0!important;max-width:700px!important;margin:0 auto!important}
body.course-console.app-course-phrase .module-stage>.controller-3d .model-canvas-3d{height:100%!important;max-height:100%!important;object-fit:contain!important}
body.course-console.app-course-phrase .character-feedback{min-height:58px!important}
body.course-console.app-course-phrase .module-feedback{width:min(680px,100%)!important;min-height:52px!important;padding:12px 16px!important;display:grid!important;place-items:center!important;border:1px solid rgba(116,82,184,.2)!important;background:rgba(255,255,255,.78)!important;color:#3f3548!important;font-size:14px!important;font-weight:650!important;line-height:1.45!important}
body.course-console.app-course-phrase .character-reaction{display:none!important}
@media(max-width:700px){body.course-console.app-course-phrase main{padding:0 10px 6px!important}body.course-console.app-course-phrase .workspace-bar{grid-template-columns:40px 1fr!important;min-height:52px!important;gap:9px!important}body.course-console.app-course-phrase .workspace-back{width:40px!important;min-width:40px!important;height:40px!important}body.course-console.app-course-phrase .module-lesson{height:calc(100dvh - 52px)!important;padding-top:2px!important;gap:6px!important}body.course-console.app-course-phrase .module-copy h2{font-size:24px!important}body.course-console.app-course-phrase .module-stage{min-height:0!important}body.course-console.app-course-phrase .controller-cue-steps{flex-basis:40px!important;height:40px!important;min-height:40px!important}body.course-console.app-course-phrase .controller-cue-steps button{height:40px!important;min-height:40px!important}body.course-console.app-course-phrase .controller-cue-steps small{display:none!important}}

/* Practice deck: substantial hardware body, upright display, and optional coaching layer. */
body.practice-open.has-controller-3d main::before{content:none!important;display:none!important}
body.practice-open .controller-3d{overflow:hidden}
body.practice-open .controller-3d .model-canvas-3d{filter:drop-shadow(0 22px 24px rgba(43,35,52,.18))}
body.practice-open .model-help{display:none!important}
.model-coach{display:none}
body.practice-open.practice-coach-on .model-coach{
  position:relative;
  z-index:7;
  display:grid;
  width:min(620px,calc(100% - 28px));
  min-height:50px;
  margin:-2px auto 8px;
  padding:8px 8px 8px 12px;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border-radius:14px;
  background:#292334;
  color:#fff;
  box-shadow:0 12px 28px rgba(43,35,52,.16);
}
.model-coach>span{padding:5px 8px;border-radius:8px;background:#baff2e;color:#1d1922;font-size:10px;font-weight:800;white-space:nowrap}
.model-coach>strong{font-size:12px;line-height:1.4}
.model-coach>button{min-width:48px;min-height:36px;padding:0 9px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:700}
.model-utility-strip{
  width:min(560px,calc(100% - 28px));
  margin:0 auto 8px;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  padding:8px;
  border:0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 28px rgba(55,48,66,.1);
  backdrop-filter:none;
}
.model-utility-strip .model-deck-tool{display:flex;align-items:center;gap:8px;padding:0 4px}
.model-utility-strip .model-deck-tool>strong{font-size:11px}
.model-utility-strip .model-deck-tool label{display:flex;align-items:center;gap:6px;font-size:10px}
.model-utility-strip input[type=number]{width:66px;height:40px}
.model-utility-strip .model-restore{grid-column:auto;width:auto;min-height:40px;padding-inline:12px}
body.practice-open .mix-recorder .coach-toggle{background:#eee7fa;color:#523c83}
body.practice-open .mix-recorder .coach-toggle[aria-pressed="true"]{background:#7952cf;color:#fff}
body.practice-open .mix-recorder{grid-template-columns:auto minmax(0,1fr) auto auto auto}
@media(max-width:700px){
  body.practice-open main{padding-top:132px!important}
  body.practice-open .controller-3d .model-canvas-3d{max-height:calc(100dvh - 420px)}
  body.practice-open .mix-recorder{grid-template-columns:auto minmax(0,1fr) auto auto;gap:7px}
  body.practice-open .mix-recorder button{min-height:40px;padding-inline:10px;font-size:11px}
  body.practice-open .mix-recorder .coach-toggle{padding-inline:9px}
  body.practice-open.practice-coach-on .model-coach{width:calc(100% - 20px);margin-top:-4px}
  .model-coach>strong{font-size:11px}
  .model-utility-strip{width:calc(100% - 20px);grid-template-columns:1fr 1fr;padding:7px}
  .model-utility-strip .model-deck-tool{justify-content:center}
  .model-utility-strip input[type=number]{flex:0 0 64px}
  .model-utility-strip .model-restore{grid-column:1/-1;width:100%;min-height:38px}
}

/* Practice-only orientation entry: standalone from recorder and global navigation. */
.practice-landscape-button{display:none!important}
body.practice-open .practice-landscape-button{
  position:fixed;
  z-index:82;
  top:18px;
  right:18px;
  min-width:76px;
  min-height:44px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:14px;
  background:#fff;
  color:#332b3d;
  box-shadow:0 10px 26px rgba(55,43,68,.12);
  font-size:12px;
  font-weight:750;
}
body.practice-open .practice-landscape-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The status display is deliberately 2D and stays independent from model perspective. */
.model-display-flat{
  position:relative;
  z-index:8;
  width:min(720px,calc(100% - 28px));
  margin:0 auto 6px;
  padding:7px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
  background:#272431;
  box-shadow:0 12px 26px rgba(39,31,49,.16),inset 0 1px rgba(255,255,255,.1);
}
.model-display-flat::before{content:none}
.controller-3d .model-display-canvas{display:block;width:100%;height:auto;max-height:86px;border-radius:8px;background:#10151b;filter:none!important}

/* Printed faceplate labels: low contrast, compact, and visually part of the hardware. */
body.practice-open .controller-3d .model-label{color:rgba(45,42,49,.68)!important;font-weight:650!important;letter-spacing:.055em!important;text-shadow:0 1px rgba(255,255,255,.3)}
body.practice-open .controller-3d .model-button{color:rgba(43,40,47,.82);font-size:clamp(7px,.8vw,10px);letter-spacing:.025em}

.model-ai-score{display:none}
body.practice-open.practice-coach-on .model-ai-score{
  position:relative;
  z-index:7;
  width:min(620px,calc(100% - 28px));
  min-height:84px;
  margin:0 auto 8px;
  display:grid;
  grid-template-columns:138px minmax(0,1fr);
  gap:7px 14px;
  padding:10px 12px;
  border:1px solid rgba(121,82,207,.16);
  border-radius:14px;
  background:#fff;
  color:#292334;
  box-shadow:0 12px 26px rgba(55,43,68,.09);
}
.model-ai-score header{grid-row:1/3;display:flex;flex-direction:column;justify-content:center;gap:4px;border-right:1px solid rgba(48,40,57,.1)}
.model-ai-score header>span{color:#6f5a91;font-size:10px;font-weight:800;letter-spacing:.05em}
.model-ai-score header strong{display:flex;align-items:baseline;gap:2px}.model-ai-score header b{font:800 30px/1 Inter,"Noto Sans SC",sans-serif}.model-ai-score header small{color:#807786;font-size:10px}
.ai-score-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-score-metrics>span{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;align-items:center}
.ai-score-metrics i{grid-column:1/-1;height:5px;overflow:hidden;border-radius:999px;background:rgba(48,40,57,.1)}
.ai-score-metrics i::after{content:"";display:block;width:calc(var(--score,0)*1%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#7952cf,#baff2e);transition:width .25s ease}
.ai-score-metrics b{overflow:hidden;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.ai-score-metrics em{color:#675c70;font:700 10px/1 Inter,sans-serif;font-style:normal}
.model-ai-score p{margin:0;color:#675f6d;font-size:10px;line-height:1.35}

.model-utility-strip{grid-template-columns:1fr 1fr minmax(150px,1.2fr) auto}
.model-view-control{min-width:0;display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:7px;padding:0 4px;color:#61596a;font-size:10px;font-weight:800}
.model-view-control input[type=range]{position:static!important;width:100%;height:32px;margin:0!important;opacity:1!important;transform:none!important;cursor:ew-resize}
.model-view-control output{min-width:30px;color:#4a4052;font:700 10px/1 Inter,sans-serif;text-align:right}

body.course-console .model-display-flat,body.course-console .model-ai-score,body.course-console .model-view-control{display:none!important}

@media(max-width:700px){
  body.practice-open .practice-landscape-button{top:16px;right:14px;min-width:70px;min-height:42px;padding-inline:10px}
  .model-display-flat{width:calc(100% - 20px);margin-bottom:4px;padding:5px}
  .controller-3d .model-display-canvas{max-height:72px}
  body.practice-open.practice-coach-on .model-ai-score{width:calc(100% - 20px);min-height:76px;grid-template-columns:94px minmax(0,1fr);padding:8px 10px}
  .model-ai-score header b{font-size:25px}.model-ai-score p{font-size:9px}
  .model-utility-strip{grid-template-columns:1fr 1fr!important}
  .model-view-control{grid-column:1/-1}
}

@media(orientation:landscape) and (max-height:650px){
  body.practice-open main{padding:64px 18px 66px!important;overflow:hidden!important}
  body.practice-open .mix-recorder{top:8px;left:150px;width:min(600px,calc(100% - 270px));min-height:48px;grid-template-columns:auto minmax(0,1fr) auto auto auto;transform:none}
  body.practice-open .practice-landscape-button{top:8px;right:12px;min-height:48px}
  body.practice-open .controller-3d{width:min(920px,100%);max-width:920px;margin:0 auto;overflow:visible}
  body.practice-open .model-display-flat{width:var(--model-width,68%);margin:0 auto 2px 0;padding:4px}
  body.practice-open .controller-3d .model-display-canvas{max-height:58px}
  body.practice-open .controller-3d .model-canvas-3d{margin-left:0;max-height:calc(100dvh - 132px)}
  body.practice-open.practice-coach-on .model-coach,body.practice-open.practice-coach-on .model-ai-score,body.practice-open .model-utility-strip{position:absolute;right:0;width:28%;margin:0}
  body.practice-open.practice-coach-on .model-coach{top:0;grid-template-columns:1fr auto;padding:8px}.model-coach>span{justify-self:start}.model-coach>strong{grid-column:1/-1}.model-coach>button{position:absolute;right:6px;top:6px}
  body.practice-open.practice-coach-on .model-ai-score{top:96px;min-height:114px;grid-template-columns:1fr;padding:8px}.model-ai-score header{grid-row:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid rgba(48,40,57,.1);padding-bottom:5px}.model-ai-score header b{font-size:22px}.model-ai-score p{font-size:9px}
  body.practice-open .model-utility-strip{top:220px;grid-template-columns:1fr 1fr!important;padding:6px}.model-utility-strip .model-deck-tool{padding:0}.model-utility-strip .model-restore,.model-view-control{grid-column:1/-1}
}

/* The display uses native-size type; only the waveform is drawn on canvas. */
body.practice-open .model-display-flat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:calc(100% - 16px);max-width:800px;padding:12px 0;margin-bottom:8px;background:#151a22;border:0;box-shadow:0 8px 20px rgba(39,31,49,.12)}
.display-deck{min-width:0;padding:0 14px;color:#bde883;font-family:Inter,"Noto Sans SC",sans-serif}
.display-deck.display-deck-b{color:#cbb0ff;border-left:1px solid #46505a}
.display-deck header{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;line-height:1.4}
.display-deck header strong{font-weight:700;letter-spacing:.03em}
.display-state{color:#c0c8d1;font-size:12px}
.display-deck.is-playing .display-state{color:inherit}
.display-track{margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e2e6eb;font-size:12px;line-height:1.5}
.display-numbers{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:4px;font-variant-numeric:tabular-nums}
.display-numbers>div{display:flex;align-items:baseline;gap:5px}
.display-numbers b{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.025em}
.display-numbers small{font-size:12px;color:#c0c8d1}
.display-numbers time{font-size:14px;color:#f4f5f7}
body.practice-open .display-deck .model-display-canvas{width:100%;height:48px;max-height:none;margin-top:8px;border-radius:0;background:transparent}
.display-footer{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:#c0c8d1;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums}
body.practice-open .controller-3d .model-canvas-3d{max-height:none;max-width:100%;filter:none;object-fit:fill}
.controller-3d .hardware-hit{color:transparent!important;font-size:0!important;min-height:24px;min-width:24px;touch-action:manipulation;z-index:3;border-radius:50%;background:transparent!important}
.controller-3d .hardware-pad{border-radius:4px}
.controller-3d .model-pad-label{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);color:#fff;font:800 clamp(8px,calc(var(--model-scale)*17px),13px)/1 Inter,"Noto Sans SC",sans-serif;text-shadow:0 1px 2px #222;pointer-events:none;white-space:nowrap}
.controller-3d .model-pad-label[hidden]{display:none}
.controller-3d .hardware-hit:focus-visible{outline:2px solid #7952cf;outline-offset:2px;background:rgba(186,255,46,.16)!important}
.controller-3d .hardware-hit:hover{outline:1px solid #7952cf;outline-offset:1px}
.controller-3d .hardware-hit:active{translate:none}
.controller-3d .model-knob,.controller-3d .model-slider{z-index:4;min-width:24px;min-height:24px}
body.practice-open .mix-recorder{backdrop-filter:none;filter:none;transform:none;left:20px;right:20px;width:auto;max-width:none}
body.practice-open .mix-recorder button,body.practice-open .mix-recorder small{font-size:12px}
body.practice-open.practice-coach-on .model-coach{box-shadow:none;margin:4px auto 8px;min-height:54px}
body.practice-open .model-coach>span,body.practice-open .model-coach>strong,body.practice-open .model-coach>button{font-size:12px}
body.practice-open.practice-coach-on .model-ai-score{min-height:82px;box-shadow:none}
body.practice-open .model-ai-score header>span,body.practice-open .model-ai-score p,body.practice-open .ai-score-metrics b,body.practice-open .ai-score-metrics em{font-size:12px}
body.practice-open .model-ai-score header small{font-size:12px}
body.practice-open .model-utility-strip{box-shadow:none;backdrop-filter:none}
body.practice-open .model-utility-strip .model-deck-tool>strong,body.practice-open .model-utility-strip .model-deck-tool label,body.practice-open .model-view-control,body.practice-open .model-view-control output{font-size:12px}
body.practice-open .model-utility-strip .model-restore{font-size:12px}
@media(max-width:700px){
  body.practice-open main{padding-top:140px!important}
  body.practice-open .model-display-flat{width:calc(100% - 12px);padding:10px 0}
  .display-deck{padding-inline:10px}.display-numbers b{font-size:26px}.display-numbers time{font-size:12px}
  body.practice-open.practice-coach-on .model-ai-score{grid-template-columns:96px minmax(0,1fr)}
  body.practice-open .model-ai-score header>span{font-size:12px}
}
@media(max-width:370px){.display-numbers{flex-wrap:wrap;row-gap:0}.display-numbers time{margin-left:auto}.display-numbers b{font-size:24px}.display-deck header{font-size:12px}}
@media(orientation:landscape) and (max-height:650px){
  body.practice-open main{padding:64px 18px 12px!important}
  body.practice-open .mix-recorder{left:150px;right:102px;width:auto;top:8px;min-height:44px}
  body.practice-open .controller-3d{height:100%;min-height:0}
  body.practice-open .model-display-flat{width:69%;margin-left:0;margin-bottom:4px;padding:7px 0}
  body.practice-open .display-deck .model-display-canvas{height:30px;margin-top:4px}
  .display-track{display:none}.display-numbers{margin-top:2px}.display-numbers b{font-size:24px}.display-footer{margin-top:2px}
  body.practice-open.practice-coach-on .model-coach{top:0;margin:0;min-height:70px;gap:4px;padding:6px 8px}
  body.practice-open.practice-coach-on .model-ai-score{top:80px;min-height:92px;gap:5px;margin:0;padding:6px 8px}
  body.practice-open .model-ai-score p{display:none}
  body.practice-open .model-utility-strip{top:182px;gap:2px;padding:6px;width:28%;margin:0}
  body.practice-open .model-utility-strip .model-deck-tool{flex-wrap:wrap;gap:2px;justify-content:space-between}
  body.practice-open .model-utility-strip .model-deck-tool label>span{display:none}
  body.practice-open .model-utility-strip input[type=number]{height:30px;width:55px;flex-basis:55px}
  body.practice-open .model-view-control{gap:4px;padding:0;grid-template-columns:auto minmax(36px,1fr) auto}
  body.practice-open .model-utility-strip .model-restore{min-height:28px;padding:0}
  body.practice-open .app-tabbar{left:auto!important;right:34px!important;width:242px!important;transform:none!important;bottom:10px!important;min-height:60px;padding:3px 8px!important}
  body.practice-open .app-tab{min-height:48px}
}
@media(orientation:portrait) and (max-height:820px){body.practice-open .controller-3d{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}body.practice-open .controller-3d::-webkit-scrollbar{display:none}}

/* Free mixing is scrollable; lesson-only viewport locks do not apply here. */
html:has(body.practice-open){height:auto;overflow-x:hidden!important;overflow-y:auto!important}
body.practice-open{height:auto!important;min-height:100dvh;max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important;background-attachment:fixed!important}
body.practice-open main{height:auto!important;min-height:100dvh;max-height:none!important;display:block!important;overflow:visible!important;padding-bottom:110px!important}
body.practice-open .controller-3d{height:auto;overflow:visible!important;max-width:960px;margin-inline:auto}
body.practice-open .model-utility-strip{margin-bottom:20px}
body.practice-open #successSheet,body.practice-open #moduleFinish,body.practice-open #phraseSuccess{display:none!important}
@media(orientation:landscape) and (max-height:650px){
  body.practice-open .controller-3d{min-height:400px}
  body.practice-open main{padding-bottom:24px!important}
  body.practice-open .model-utility-strip{top:174px;margin-bottom:0}
}

.track-library{position:fixed;inset:auto 0 0;width:min(620px,100%);max-width:100%;max-height:min(78dvh,740px);margin:0 auto;padding:0;border:0;border-radius:24px 24px 0 0;background:#f8f7fa;color:#1d1922;box-shadow:0 -12px 48px rgba(40,30,54,.16);overflow:hidden;font-family:Inter,"Noto Sans SC",sans-serif}
.track-library[open]{display:flex;flex-direction:column}
.track-library::backdrop{background:rgba(29,25,34,.38)}
.track-library-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #e2dce9}
.track-library h2{margin:0;font-size:20px;font-weight:700;line-height:1.3}
.track-library button{cursor:pointer;font:600 14px/1.3 Inter,"Noto Sans SC",sans-serif;min-height:44px;border:0;box-shadow:none}
.track-library button:focus-visible{outline:3px solid #7952cf;outline-offset:2px}
.track-library button:disabled{cursor:wait;opacity:.5}
.track-library button[data-close]{display:grid;place-items:center;width:44px;flex:0 0 44px;padding:0;border-radius:50%;background:#ece7f3;color:#493d5c}
.track-library svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.track-library-body{padding:16px 20px max(24px,env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;scrollbar-color:#b5a2d5 transparent;scrollbar-width:thin}
.track-local{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border-radius:13px;background:#eee7fa;color:#503883}
.track-library h3{font-size:16px;font-weight:700;line-height:1.4;margin:24px 0 4px}
.track-library-status{color:#625a67;font-size:13px;line-height:1.5;margin:0 0 12px}
.track-library-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 56px;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid #e2dce9;background:transparent}
.track-library-info{min-width:0;display:grid;gap:5px}
.track-library-info strong{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.track-library-info span{font-size:12px;color:#625a67;line-height:1.5}
.track-library .track-preview{display:grid;place-items:center;width:44px;padding:0;border-radius:50%;background:transparent;color:#625079}
.track-library .track-preview[aria-pressed="true"]{background:#eee7fa;color:#503883}
.track-library .track-load{padding:0 10px;border-radius:12px;background:#292334;color:#fff}
.track-library .track-load:hover{background:#62419a}
@media(min-width:900px){.track-library{inset:0;margin:auto;border-radius:24px;height:620px;max-height:85dvh}}

/* Match the learning page's fixed viewport; scrolling stays inside the app. */
html:has(body.practice-open),body.practice-open{height:100%!important;max-height:100%!important;overflow:hidden!important}
body.practice-open main{width:100%!important;max-width:none!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;padding:140px 12px 110px!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:none;overscroll-behavior:contain;transform:none!important;filter:none!important;animation:none!important;will-change:auto!important}
body.practice-open main::-webkit-scrollbar{display:none}
body.practice-open,body.practice-open .practice-brand,body.practice-open .mix-recorder,body.practice-open .controller-3d,body.practice-open .app-tabbar{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:none!important;will-change:auto!important}
body.practice-open .controller-3d{max-width:1120px;isolation:auto}
body.practice-open .model-display-flat{width:100%;max-width:none}
body.practice-open .mix-recorder{top:72px;left:20px;right:20px;background:#fafbfc}
body.practice-open .model-parameters{position:relative;z-index:5;margin:12px 0 20px;padding:20px;border:0;border-radius:24px;background:#fafbfc;color:#1d1922}
.parameters-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.parameters-header h2{margin:0;font:700 20px/1.25 Inter,"Noto Sans SC",sans-serif}
.parameters-header .practice-reset{min-width:64px;min-height:44px;padding:0 14px;border:0;border-radius:13px;background:#eee7fa;color:#523781;font:600 14px/1.3 Inter,"Noto Sans SC",sans-serif;cursor:pointer}
.parameter-channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.parameter-channel{min-width:0}.parameter-channel h3{margin:0 0 12px;font-size:14px;font-weight:700;line-height:1.4}
.parameter-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:13px;line-height:1.4;color:#51485a}
.parameter-value{display:flex;align-items:center;gap:4px;min-width:0;border:1px solid #d9d1e3;border-radius:10px;background:#fff;padding-right:8px}
.parameter-value input[type=number]{position:static!important;width:64px;min-width:0;min-height:44px;margin:0!important;padding:8px;border:0;border-radius:10px;background:transparent;color:#292334;transform:none!important;font:600 16px/1.4 Inter,"Noto Sans SC",sans-serif;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.parameter-value input::-webkit-inner-spin-button{appearance:none}
.parameter-value small{font-size:12px;min-width:14px;color:#625a67}
.parameter-cue{display:flex;justify-content:space-between;gap:8px;margin:12px 0 0;font-size:12px;color:#625a67}.parameter-cue output{font-variant-numeric:tabular-nums}
.parameter-cross{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid #e4deeb;font-size:14px;color:#51485a}
.parameter-cross output{font-size:13px;font-variant-numeric:tabular-nums}
.model-parameters .parameter-cross input[type=range]{position:static!important;grid-column:1/-1;width:100%;height:44px;margin:0!important;transform:none!important;opacity:1!important;accent-color:#7952cf;touch-action:pan-y}
.model-parameters .model-view-control{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;padding:0;margin-top:4px;gap:12px;font-size:14px;font-weight:500}
.model-parameters .model-view-control input[type=range]{height:44px;accent-color:#7952cf}.model-parameters .model-view-control output{font-size:13px}
.parameter-status{margin:12px 0 0;color:#625a67;font-size:12px;line-height:1.5}
.model-parameters input:focus-visible,.practice-reset:focus-visible{outline:3px solid #7952cf;outline-offset:2px}
body.course-console .model-parameters{display:none}
body.practice-open.practice-coach-on .model-coach,body.practice-open.practice-coach-on .model-ai-score{position:relative;top:auto;right:auto;width:100%;max-width:none;margin:0 0 16px}
@media(max-width:380px){body.practice-open .model-parameters{padding:16px}.parameter-channels{gap:14px}.parameter-value input[type=number]{width:54px}.parameter-value{padding-right:4px;gap:0}.parameter-field{gap:4px}}
@media(min-width:900px){
  body.practice-open main{padding:84px 24px 110px!important}
  body.practice-open .mix-recorder{top:16px;left:180px;right:120px}
  body.practice-open .controller-3d{display:grid!important;grid-template-columns:minmax(0,62fr) minmax(0,38fr);grid-template-areas:"display parameters" "hardware parameters" "coach score";grid-template-rows:auto auto auto;gap:16px 20px;align-items:start;min-height:0}
  body.practice-open .model-display-flat{grid-area:display;margin:0;padding:12px 0}
  body.practice-open .controller-3d .model-canvas-3d{grid-area:hardware;margin:0}
  body.practice-open .model-parameters{grid-area:parameters;margin:0}
  body.practice-open.practice-coach-on .model-coach{grid-area:coach}
  body.practice-open.practice-coach-on .model-ai-score{grid-area:score}
  body.practice-open .display-deck .model-display-canvas{height:48px}
  body.practice-open .display-track{display:block}
  body.practice-open .app-tabbar{left:50%!important;right:auto!important;width:420px!important;transform:translateX(-50%)!important;bottom:12px!important}
}
body.practice-open main{scroll-padding-top:148px;scroll-padding-bottom:100px}
body.practice-open::before{content:none!important;display:none!important}
body.practice-open .app-tab{border:0!important;box-shadow:none!important}
body.practice-open .app-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:900px){body.practice-open::before{height:84px}body.practice-open main{scroll-padding-top:92px}}

/* Compact performance layout: each value has one editable home. */
body.practice-open::before{width:100%;max-width:none;border-radius:0;transform:none!important}
body.practice-open main{isolation:auto!important}
body.practice-open .controller-3d{display:block!important;max-width:1240px}
body.practice-open .model-display-flat{width:100%;margin:0 0 8px;padding:10px 0;border-radius:16px}
.display-numbers>label{display:flex;align-items:center;gap:4px;min-width:0}
.display-numbers input[data-bpm]{position:static!important;transform:none!important;margin:0!important;width:92px;min-width:0;min-height:44px;padding:0 3px;border:0;border-bottom:1px solid #647182;border-radius:0;background:transparent;color:inherit;font:600 27px/1.2 Inter,sans-serif;font-variant-numeric:tabular-nums;appearance:textfield}
.display-numbers input::-webkit-inner-spin-button{appearance:none}
.display-numbers input:focus-visible,.display-adjust input:focus-visible,.display-adjust summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.display-adjust{margin-top:4px;color:#dce2eb}
.display-adjust summary{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px;cursor:pointer;font:600 12px/1.3 Inter,sans-serif;list-style:none}
.display-adjust summary::after{content:'+';font-size:18px}.display-adjust[open] summary::after{content:'−'}
.display-adjust summary span{margin-left:auto;color:#bec9d5}
.display-adjust summary::-webkit-details-marker{display:none}
.display-adjust-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding-top:4px}
.display-adjust .parameter-field{display:grid;gap:2px;margin:0;color:#bec9d5;font-size:11px}
.display-adjust .parameter-value{padding:0 5px;border:1px solid #526071;border-radius:7px;background:#242d38;gap:0}
.display-adjust .parameter-value input[type=number]{width:100%;min-height:40px;padding:4px 0;color:#f4f6f8;font-size:15px}
.display-adjust .parameter-value input[type=number],.display-numbers input[data-bpm]{cursor:ew-resize;touch-action:pan-y}
.display-adjust .parameter-value small{color:#bec9d5;font-size:10px}
.display-adjust .parameter-cue{grid-column:1/-1;color:#bec9d5;margin:4px 0;font-size:11px}
body.practice-open .model-parameters{display:flex;align-items:center;gap:12px;margin:4px 0 12px;padding:6px 10px;border-radius:12px;min-height:56px}
.model-parameters .mix-balance{font:600 12px/1.4 Inter,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;color:#51485a}
.model-parameters .model-view-control{flex:1;min-width:0;grid-template-columns:auto minmax(28px,1fr) auto;gap:6px;margin:0;font-size:12px}
.model-parameters .model-view-control input[type=range]{width:100%;min-width:0;height:40px;position:static!important;transform:none!important;margin:0!important}
.model-parameters .practice-reset{flex:0 0 auto;min-width:48px;min-height:44px;padding:0 8px;border:0;border-radius:8px;background:#eee7fa;color:#523781;font:600 13px/1.3 Inter,"Noto Sans SC",sans-serif;cursor:pointer}
.controller-3d .model-knob{cursor:ns-resize;touch-action:none}
body.practice-open .model-help{display:none}
body.practice-open .controller-3d .model-canvas-3d{max-height:none!important;object-fit:fill}
body.practice-open.practice-wide main{padding:76px 20px 100px!important;scroll-padding-top:80px}
body.practice-open.practice-wide::before{height:76px}
body.practice-open.practice-wide .mix-recorder{top:10px;left:176px;right:134px;width:auto!important;transform:none!important;min-height:52px}
body.practice-open.practice-wide .practice-landscape-button{top:10px;right:16px;min-width:104px;min-height:48px}
body.practice-open.practice-wide .controller-3d{display:grid!important;grid-template-columns:minmax(0,64fr) minmax(0,36fr);grid-template-areas:"hardware display" "parameters display" "coach score";grid-template-rows:auto auto auto;gap:8px 20px;align-items:start}
body.practice-open.practice-wide .model-display-flat{grid-area:display;grid-template-columns:1fr;align-self:start;margin:0;padding:8px 12px}
body.practice-open.practice-wide .display-deck{padding:8px 0}
body.practice-open.practice-wide .display-deck-b{border-left:0;border-top:1px solid #46505a}
body.practice-open.practice-wide .display-deck .model-display-canvas{height:28px;margin-top:4px}
body.practice-open.practice-wide .display-numbers{margin-top:0}
body.practice-open.practice-wide .display-numbers input[data-bpm]{min-height:36px}
body.practice-open.practice-wide .display-adjust summary{min-height:28px}
body.practice-open.practice-wide .display-track{display:block;margin-top:2px}
body.practice-open.practice-wide .controller-3d .model-canvas-3d{grid-area:hardware;margin:0;align-self:center}
body.practice-open.practice-wide .model-parameters{grid-area:parameters;margin:0}
body.practice-open.practice-wide.practice-coach-on .model-coach{grid-area:coach;margin:0;min-height:56px}
body.practice-open.practice-wide.practice-coach-on .model-ai-score{grid-area:score;margin:0}
.practice-stage{position:fixed;z-index:90;inset:0;width:100%;height:100%;overflow:hidden;background:linear-gradient(145deg,#c1e1df,#dcd4e9)}
body.practice-open.practice-landscape::before{display:none!important}
.practice-stage::before{content:none;display:none}
body.practice-open.practice-landscape main{height:calc(var(--practice-height) - env(safe-area-inset-bottom))!important;max-height:calc(var(--practice-height) - env(safe-area-inset-bottom))!important;padding-bottom:0!important}
body.practice-open.practice-landscape .app-tabbar{display:none!important}
@media(max-width:380px){.display-numbers input[data-bpm]{width:78px;font-size:24px}.display-numbers small{font-size:10px}.model-parameters .mix-balance{font-size:11px}.model-parameters .model-view-control>span{font-size:0}.model-parameters .model-view-control>span::after{content:'倾角';font-size:12px}}
@media(min-width:900px) and (max-height:650px){body.practice-open:not(.practice-landscape) .app-tabbar{left:20px!important;right:auto!important;width:300px!important;transform:none!important;bottom:8px!important}}

/* Portrait practice view shares the same 16px rail as the other app pages. */
@media (orientation: portrait) and (max-width: 700px) {
  body.practice-open main {
    padding-left: var(--fm-page-gutter, 16px) !important;
    padding-right: var(--fm-page-gutter, 16px) !important;
  }

  body.practice-open .practice-brand {
    left: calc(var(--fm-page-gutter, 16px) + 4px) !important;
    padding-inline: 0 !important;
  }

  body.practice-open .practice-landscape-button {
    right: var(--fm-page-gutter, 16px) !important;
  }

  body.practice-open .mix-recorder {
    left: var(--fm-page-gutter, 16px) !important;
    right: var(--fm-page-gutter, 16px) !important;
    width: auto !important;
  }

  body.practice-open .controller-3d,
  body.practice-open .model-display-flat,
  body.practice-open .model-parameters,
  body.practice-open.practice-coach-on .model-coach,
  body.practice-open.practice-coach-on .model-ai-score {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.practice-open .app-tabbar {
    left: var(--fm-page-gutter, 16px) !important;
    right: var(--fm-page-gutter, 16px) !important;
    width: auto !important;
    transform: none !important;
  }
}

/* Landscape is an instrument view: hardware leads, telemetry supports. */
body.practice-open.practice-landscape main{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important}
body.practice-open.practice-landscape .practice-brand{left:env(safe-area-inset-left)}
body.practice-open.practice-landscape .practice-landscape-button{right:max(16px,env(safe-area-inset-right))}
body.practice-open.practice-landscape .controller-3d{
  width:100%;max-width:none!important;
  grid-template-columns:minmax(0,76fr) minmax(260px,24fr)!important;
  grid-template-areas:"hardware display" "hardware coach" "parameters score"!important;
  grid-template-rows:auto 1fr auto!important;
  column-gap:16px!important;row-gap:8px!important;
}
body.practice-open.practice-landscape .controller-3d .model-canvas-3d{grid-area:hardware;width:auto;max-width:100%;justify-self:center;align-self:center}
body.practice-open.practice-landscape .model-display-flat{grid-area:display;width:100%;align-self:start}
body.practice-open.practice-landscape .model-parameters{grid-area:parameters;width:100%;align-self:end}
body.practice-open.practice-landscape.practice-coach-on .model-coach{grid-area:coach;align-self:start;width:100%;margin:0}
body.practice-open.practice-landscape.practice-coach-on .model-ai-score{grid-area:score;align-self:end;width:100%;margin:0}
body.practice-open.practice-landscape .model-display-flat{box-shadow:0 12px 32px rgba(31,30,43,.15)}

/* Persistent, compact onboarding for the instrument view. */
.practice-guide-button,.practice-guide{display:none}
body.practice-open .practice-guide-button{
  position:fixed;z-index:82;top:18px;right:102px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;border:1px solid rgba(255,255,255,.9);border-radius:14px;background:rgba(255,255,255,.94);color:#332b3d;box-shadow:0 10px 26px rgba(55,43,68,.12);font-size:12px;font-weight:750;line-height:1;white-space:nowrap
}
body.practice-open .practice-guide-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.practice-open .practice-guide{
  position:fixed;z-index:110;left:max(16px,calc((100vw - 350px)/2));right:max(16px,calc((100vw - 350px)/2));bottom:calc(92px + env(safe-area-inset-bottom));width:auto;display:block;padding:14px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:#211d28;color:#fff;box-shadow:0 22px 56px rgba(31,25,39,.28);transform:none!important;filter:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision
}
body.practice-open .practice-guide[hidden]{display:none}
.practice-guide header,.practice-guide footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.practice-guide header>span{color:#baff2e;font-size:10px;font-weight:850;letter-spacing:.08em}
.practice-guide header button{width:30px;height:30px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1}
.practice-guide h2{margin:8px 0 5px;font-size:16px;line-height:1.2}
.practice-guide p{margin:0 0 12px;color:#d9d3df;font-size:11px;line-height:1.55}
.practice-guide footer{justify-content:flex-end}
.practice-guide footer button{min-height:34px;padding:0 13px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:800}
.practice-guide footer button:disabled{opacity:.34}
.practice-guide footer #practiceGuideNext{background:#baff2e;color:#211b29}
.practice-guide-spotlight[hidden]{display:none}
.practice-guide-spotlight{position:fixed;z-index:104;border:3px solid #baff2e;border-radius:18px;box-shadow:0 0 0 9999px rgba(20,17,26,.48),0 0 0 7px rgba(186,255,46,.18);pointer-events:none;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}
.is-practice-guide-target{z-index:106!important;outline:3px solid #baff2e!important;outline-offset:4px!important;box-shadow:0 0 0 8px rgba(186,255,46,.18),0 20px 46px rgba(34,26,43,.24)!important}
.model-canvas-3d.is-practice-guide-target{border-radius:22px;filter:none!important}
body.practice-guide-open .model-display-flat,body.practice-guide-open .model-coach,body.practice-guide-open .model-ai-score,body.practice-guide-open .model-canvas-3d{transition:outline-color .18s ease,box-shadow .18s ease}
@media(max-width:700px){body.practice-open .practice-guide-button{top:16px;right:92px;min-height:42px;padding-inline:9px}.practice-guide-button span{font-size:inherit}}
@media(orientation:portrait) and (max-width:700px){body.practice-open .practice-guide-button{right:calc(var(--fm-page-gutter,16px) + 78px)}}
@media(orientation:landscape) and (max-height:650px){body.practice-open .practice-guide-button{top:8px;right:90px;min-height:48px}body.practice-open .practice-guide{left:max(14px,env(safe-area-inset-left));right:auto;bottom:14px;width:min(300px,34vw);transform:none}}
body.practice-open.practice-wide .practice-guide-button{top:10px;right:128px;min-height:48px}
body.practice-open.practice-landscape .practice-guide-button{right:max(92px,calc(env(safe-area-inset-right) + 92px))}
@media(prefers-reduced-motion:reduce){body.practice-guide-open .model-display-flat,body.practice-guide-open .model-coach,body.practice-guide-open .model-ai-score,body.practice-guide-open .model-canvas-3d,.practice-guide-spotlight{transition:none}}
@media(max-height:560px){
  body.practice-open.practice-landscape .mix-recorder{min-height:46px}
  body.practice-open.practice-landscape .controller-3d{grid-template-columns:minmax(0,74fr) minmax(236px,26fr)!important}
  body.practice-open.practice-landscape .model-display-flat{padding:4px 8px}
  body.practice-open.practice-landscape .display-deck{padding:2px 0}
  body.practice-open.practice-landscape .display-track{display:none}
  body.practice-open.practice-landscape .display-deck .model-display-canvas{height:20px;margin-top:2px}
  body.practice-open.practice-landscape .display-footer{margin-top:1px}
  body.practice-open.practice-landscape .display-adjust summary{min-height:24px}
  body.practice-open.practice-landscape.practice-coach-on .model-coach,
  body.practice-open.practice-landscape.practice-coach-on .model-ai-score{display:none!important}
}
@media(orientation:landscape) and (max-height:430px){
  body.practice-open.practice-landscape main{padding-top:70px!important}
  body.practice-open.practice-landscape .controller-3d{min-height:0!important}
  body.practice-open.practice-landscape .display-adjust{display:none}
  body.practice-open.practice-landscape .model-display-flat{padding-block:3px}
}
@media(orientation:portrait) and (max-width:700px){
  body.practice-open.practice-landscape main{padding:140px 12px max(28px,env(safe-area-inset-bottom))!important;overflow-y:auto!important}
  body.practice-open.practice-landscape .controller-3d{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"hardware" "parameters" "display" "coach" "score"!important;
    grid-template-rows:auto!important;gap:10px!important;
  }
  body.practice-open.practice-landscape .controller-3d .model-canvas-3d{width:100%;height:auto}
  body.practice-open.practice-landscape .model-display-flat{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2px}
  body.practice-open.practice-landscape .display-deck-b{border-top:0;border-left:1px solid #46505a}
  body.practice-open.practice-landscape.practice-coach-on .model-coach,
  body.practice-open.practice-landscape.practice-coach-on .model-ai-score{display:flex!important}
}