/* Traste Cero · atril digital. Shared shell → musical surfaces → reflow. */
:root{--night:#101b30;--gold:#ffcf70;--teal:#168062;--paper-warm:#fff;--soft:#48566b;--nav-height:72px}
[hidden]{display:none!important}
html{scroll-padding-top:140px}body{background:#f2f5fb}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #5677ff;outline-offset:3px}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button{transition:background .15s,color .15s}button:disabled{cursor:not-allowed}
input,select,textarea{accent-color:var(--blue)}input[type=range]{min-height:44px;touch-action:pan-y}
.topbar{height:68px;position:relative;gap:20px;box-shadow:none;padding-inline:clamp(16px,3vw,48px)}
.brand-mark{border-radius:6px;border-color:#7085a8;background:transparent}.brand strong{font-size:19px;letter-spacing:-.05em}.brand small{font-size:10px;letter-spacing:.1em}
.app-descriptor{margin-left:16px;color:#b9c8e2;font-size:10px;font-weight:700;letter-spacing:.18em}
.save-status{margin-left:auto;font-size:11px}.icon-button{width:44px;height:44px;flex:none;border-radius:8px}
.mode-nav{display:flex;justify-content:center;gap:8px;position:sticky;top:0;z-index:30;min-height:64px;padding:8px 16px;background:#fff;border-bottom:1px solid #d8dfec}
.mode-nav button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;min-width:140px;padding:0 20px;border:0;border-radius:8px;color:#48566b;background:transparent;font-size:13px;font-weight:750}
.mode-nav button.active{background:#eaf0ff;color:#2347d9;box-shadow:inset 0 -3px #2347d9}.mode-nav button svg{width:21px;height:21px}
.app-shell{max-width:1600px;padding:24px clamp(12px,3vw,48px) 48px}.mode-panel{min-width:0}.feature-panel{min-height:0}
.eyebrow{margin:0;color:#2347d9;font-size:10px;font-weight:800;letter-spacing:.15em;line-height:1.6}
.feature-hero{display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;padding:30px 0;color:#142036}
.feature-hero>div:first-child{min-width:0;max-width:800px}
.feature-hero h1,.score-heading h1{margin:8px 0 12px;font-size:clamp(30px,3.4vw,52px);letter-spacing:-.055em;line-height:1.08;font-weight:800}
.feature-hero p:not(.eyebrow){max-width:64ch;margin:0;color:#48566b;font-size:14px;line-height:1.6}
.score-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:10px 0 24px}.score-heading h1{font-size:clamp(26px,2.5vw,38px);margin-bottom:0}
.project-fields{flex:0 1 480px;gap:20px;min-width:0}.project-fields label{min-width:0}.project-fields span{color:#48566b;font-size:10px;font-weight:750;letter-spacing:.04em}.project-fields input{width:100%;min-height:44px;font-size:16px;color:#142036;border-color:#7b8ca7;padding:5px 0}
.transport{flex-wrap:wrap;gap:12px;box-shadow:none;border-radius:12px 12px 0 0}.transport button{min-height:44px}
.number-control,.compact-control{font-size:10px;letter-spacing:.03em;font-weight:700}
.number-control input,.number-control select,.compact-control input,.compact-control select{height:44px;font-size:14px;border-color:#9daac0}
.transport-scrubber{flex:1 1 220px;min-width:150px}.transport-scrubber span{font-size:11px}.transport-scrubber input,.game-scrubber input{height:32px;min-height:32px}
.workspace{box-shadow:none;min-height:450px}.track-rail{background:#edf1f8;padding:16px 12px}.track-card{box-shadow:none}.track-main input{font-size:13px;min-height:36px}.track-main select{font-size:13px;min-height:40px}.track-controls button{min-width:44px;min-height:44px}.rail-action{min-height:44px;font-size:12px}
.tool-row{gap:8px;flex-wrap:wrap;overflow:visible;padding:12px;border-bottom:1px solid #d8dfec}.tool-group{max-width:100%;overflow-x:auto}.tool-group button,.tool-toggle{min-height:44px;font-size:12px}.tool-toggle{width:auto;padding:0 12px}.tool-toggle .trill-glyph,.tool-toggle b{margin-right:5px}
.secondary-button,.danger-button{width:auto;min-height:44px;padding:0 12px;font-size:12px}.secondary-button:before,.danger-button:before{content:none}
.editor-note{gap:16px;padding:12px 16px;font-size:11px;line-height:1.6}.editor-note b{color:#48566b;font-size:11px}
.score-area{background:#fff;min-width:0}.tab-viewport{background:#fff;min-height:340px;overscroll-behavior-x:contain}.tab-canvas{min-height:340px}
.tab-canvas.layout-wrapped{display:grid;gap:24px;padding:16px;touch-action:pan-y}.layout-wrapped .tab-system{position:relative;overflow-x:auto;border:1px solid #d8dfec;border-radius:8px;background:#fff}.layout-horizontal .system-number{display:none}.system-number{padding:12px 14px 0;color:#48566b;font-size:10px;font-weight:800;letter-spacing:.1em}.layout-wrapped .tab-grid{margin-top:4px}
.grid-cell{border-right-color:transparent}.grid-cell.beat{border-left:1px dashed #dde3ed}.grid-cell.measure-start{border-left:2px solid #33435d}.grid-cell.string-cell{background:linear-gradient(to bottom,transparent 28px,#738198 28px,#738198 29px,transparent 29px)}.grid-cell.lyric-cell{background:#f8faff;border-bottom:1px solid #e2e8f2}.measure-cell{background:#edf2fa;border-color:#ccd6e5;color:#33435d;font-size:10px}.corner-cell,.lyric-label,.string-label{background:#f2f5fb;border-color:#ccd6e5}.string-label{color:#24324a}
.event-chip{border-radius:50%;background:#142036;border:3px solid #fff;box-shadow:0 2px 0 #081426}.event-chip .duration-tail{height:2px;background:#6e87b3}.event-chip.is-playing{background:#2347d9;box-shadow:0 0 0 7px #2347d925}
.trill-glyph{display:inline-grid!important;gap:2px!important}.trill-glyph i,.event-chip .trill-lines i{width:13px!important;height:2px!important;background:currentColor!important;transform:none!important;border-radius:2px}.event-chip .trill-lines{display:grid;gap:2px;top:-15px;color:#2347d9}.rest-mark{font-family:Georgia,serif;font-size:24px}
.guide-text{position:relative;z-index:9;align-self:center;transform:translateY(var(--guide-y));max-width:calc(var(--cell)*4);padding:4px 8px;border-radius:4px;background:#fff0bf;color:#453400;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.guide-text.selected{outline:3px solid #5677ff}.follow-control{display:flex;align-items:center;gap:6px;min-height:44px;font-size:12px;font-weight:700;color:#48566b}.playhead{background:#db4562;box-shadow:none}
.selection-inspector{flex-wrap:wrap;overflow:visible;gap:10px}.selection-inspector select,.selection-inspector input{min-height:44px;font-size:14px}.selection-inspector input[type=range]{width:110px;padding:0}
.mini-tab-editor{display:grid;gap:12px;padding:12px;border-radius:8px;background:#edf2fa}.mini-tab-editor>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:16px}.mini-tab-editor label{display:grid;gap:6px;font-size:12px;font-weight:700}.mini-tab-editor input{width:90px!important}.mini-tab-grid{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));overflow-x:auto}.mini-tab-grid button{height:44px;border:0;border-right:1px dashed #b9c8e2;background:linear-gradient(transparent 21px,#7b8ca7 21px,#7b8ca7 22px,transparent 22px);font-size:13px;font-weight:800}.mini-tab-grid button:not(:empty){color:#2347d9}
.lower-deck{gap:16px}.rehearsal-card,.library-card{box-shadow:none;border-radius:12px}.card-heading p,.privacy-note,.audio-credit{font-size:12px;line-height:1.6}.card-heading button{min-height:44px;font-size:13px}.action-grid span{font-size:14px}.action-grid small{font-size:11px}.tuner-note small,.tuner-meter p,.signal-quality b{font-size:12px}.meter-scale,.signal-quality>span{font-size:10px}
/* Shared repertoires and focus controls. */
.responsive-disclosure{min-width:0;background:#fff}.responsive-disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:14px 18px;border-bottom:1px solid #d8dfec;color:#142036;cursor:pointer;list-style:none;font-size:14px;font-weight:800}.responsive-disclosure summary::-webkit-details-marker{display:none}.responsive-disclosure summary small{display:block;margin-top:4px;color:#48566b;font-size:11px;font-weight:500}.responsive-disclosure[open]>summary svg{transform:rotate(180deg)}
.focus-button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;flex:none;border:1px solid #a6b4cb;border-radius:8px;background:transparent;color:inherit;font-size:12px;font-weight:750;white-space:nowrap}.focus-button svg{width:18px;height:18px}
.feature-primary{min-height:48px;padding:0 18px;border:0;border-radius:8px;background:#2347d9;color:#fff;font-size:13px;font-weight:800}.feature-primary:hover{background:#1735ad}.feature-primary:disabled{opacity:.55}
/* Course: exercise in front, syllabus alongside. */
.course-score{display:grid;align-content:center;justify-items:end;gap:4px;min-width:100px;padding:12px 0 12px 24px;border-left:1px solid #c3cfe1}.course-score b{font-size:40px;letter-spacing:-.06em;color:#2347d9;line-height:1}.course-score span{font-size:11px;font-weight:800}.course-score small{color:#48566b;font-size:12px}
.course-layout{display:grid;grid-template-columns:270px minmax(0,1fr);border:1px solid #d8dfec;background:#fff;border-radius:12px;overflow:hidden}.course-syllabus{border-right:1px solid #d8dfec;background:#edf2fa}.course-route{max-height:850px;overflow-y:auto;padding:10px;scrollbar-width:thin}
.course-phase{margin:14px 8px 12px;padding-bottom:10px;border-bottom:1px solid #ccd6e5}.course-phase b{display:block;font-size:12px}.course-phase small{display:block;margin-top:4px;font-size:11px;color:#48566b}
.course-route button{position:relative;width:100%;display:grid;grid-template-columns:32px 1fr;gap:4px 10px;margin-bottom:5px;padding:12px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;color:#142036;overflow:hidden}.course-route button.active{border-color:#2347d9;background:#fff}.course-route button>span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#dce5f5;color:#2347d9;font-size:12px;font-weight:800}.course-route button b{font-size:12px;line-height:1.4}.course-route button small{font-size:10px;color:#48566b}.course-route button i{position:absolute;left:0;bottom:0;width:var(--progress);height:3px;background:#168062}.course-route button.passed>span{background:#168062;color:#fff}.course-route button.locked{opacity:.6}
.trainer-stage{position:relative;min-width:0;padding:24px}.trainer-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.trainer-head>div{min-width:0}.trainer-head span:not(.focus-button span){font-size:10px;letter-spacing:.08em;color:#2347d9;font-weight:800}.trainer-head h2{font-size:clamp(22px,2.3vw,30px);line-height:1.2;letter-spacing:-.04em;margin:8px 0 0}
.trainer-stats{display:flex;gap:24px;padding:16px 0;margin:12px 0 0;border-block:1px solid #d8dfec}.trainer-stats span{display:flex;gap:10px;align-items:baseline;font-size:12px;color:#48566b}.trainer-stats b{font-size:20px;color:#142036;font-variant-numeric:tabular-nums}
.technique-board{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:10px 0;background:#d8dfec;border:1px solid #d8dfec;border-radius:8px;overflow:hidden}.technique-board>div{display:grid;gap:4px;padding:10px 12px;background:#f8faff}.technique-board span{font-size:8px;font-weight:850;letter-spacing:.08em;color:#66758b}.technique-board b{font-size:15px;color:#142036;font-variant-numeric:tabular-nums}.technique-board b[data-low=true]{color:#b52d49}
.lesson-contract{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;padding:18px 0}.lesson-contract span{color:#48566b;font-size:10px;font-weight:800;letter-spacing:.08em}.lesson-contract p{margin:6px 0 0;font-size:12px;line-height:1.55}
.lesson-sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid #d8dfec;background:#f8faff}.lesson-sequence>div{min-width:0;padding:13px 14px;border-right:1px solid #d8dfec}.lesson-sequence>div:last-child{border:0}.lesson-sequence span{display:block;color:#2347d9;font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.lesson-sequence p{margin:6px 0 0;color:#48566b;font-size:10px;line-height:1.5}.lesson-sequence>div.active{background:#e9efff;box-shadow:inset 0 -3px #2347d9}.lesson-sequence>div.done span{color:#168062}
.session-meter{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:8px 0}.session-meter>div{height:6px;border-radius:4px;background:#e3e9f3;overflow:hidden}.session-meter i{display:block;width:0;height:100%;background:#2347d9;transition:width .2s}.session-meter span,.session-meter b{font-size:12px;font-variant-numeric:tabular-nums}
.challenge-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 24px;padding:18px;border-left:3px solid #2347d9;background:#edf2ff;border-radius:0 8px 8px 0}.challenge-card p{margin:0;font-size:16px;line-height:1.6}.challenge-card small{font-size:12px}.challenge-card button{flex:none;width:44px;height:44px;border:1px solid #bdcbe5;border-radius:50%;background:#fff;color:#2347d9;font-size:16px}
.fretboard-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.fretboard-toolbar>span{font-size:10px;font-weight:800;letter-spacing:.06em}.fretboard-toolbar small{display:block;margin-top:3px;color:#48566b;font-size:10px;font-weight:500;letter-spacing:0}.fret-zones{display:flex;gap:4px}.fret-zones button{min-width:44px;min-height:44px;padding:0 9px;border:1px solid #c3cfe1;border-radius:6px;background:#fff;font-size:12px;color:#2347d9;font-weight:750}
.course-fretboard{display:grid;grid-template-columns:48px repeat(25,48px);overflow-x:auto;overscroll-behavior-x:contain;padding:12px 0;border:1px solid #c3cfe1;border-radius:8px;background:#f4f7fc;scrollbar-width:thin}.course-fretboard>span{display:grid;place-items:center;min-height:26px;font-size:11px;font-weight:750;color:#48566b}.course-fretboard .fret-string{position:sticky;left:0;z-index:3;background:#142036;color:#fff;font-size:11px;box-shadow:3px 0 0 #fff}.course-fretboard button{position:relative;height:48px;border:0;border-right:1px solid #bec9d9;background:linear-gradient(transparent 23px,#8494ab 23px,#8494ab 25px,transparent 25px)}.course-fretboard button span{display:none}
.course-fretboard button:is(.correct,.wrong,.answer,.hint):before{content:"";position:absolute;left:50%;top:50%;width:25px;height:25px;border-radius:50%;transform:translate(-50%,-50%);background:#2347d9;box-shadow:0 0 0 5px #2347d922}.course-fretboard button.correct:before{background:#168062}.course-fretboard button.wrong:before{background:#b52d49}.course-fretboard button.hint:before{background:#ffcf70;border:2px solid #75500b;box-shadow:0 0 0 5px #ffcf7040}
.trainer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.trainer-actions button{min-height:48px;padding:0 15px;border:1px solid #a6b4cb;border-radius:8px;background:#fff;color:#142036;font-size:13px;font-weight:750}.trainer-actions .feature-primary{background:#2347d9;color:#fff;border-color:#2347d9}.trainer-actions button:disabled{color:#6a7890;background:#edf1f7;border-color:#d8dfec}
.adaptive-rule{display:flex;gap:16px;margin-top:20px;padding:14px 0;border-top:1px solid #d8dfec;color:#48566b;font-size:11px;line-height:1.6}.adaptive-rule b{min-width:100px;font-size:10px;letter-spacing:.04em}
.why-panel{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:12px;margin-top:10px;padding:16px;border-radius:8px;background:#f2f5fb}.why-panel>div{display:grid;text-align:center;color:#48566b;font-size:10px}.why-panel b{font-size:30px;color:#2347d9}.why-panel canvas{width:100%;height:100px}.why-panel p{grid-column:1/-1;font-size:12px;color:#48566b;margin:0;line-height:1.6}
.course-resources{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:24px 0}.course-resources a{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid #b5c3da;border-radius:8px;text-decoration:none;color:#2347d9;font-size:12px;font-weight:800}.course-resources p{flex:1 1 240px;margin:0;font-size:12px;line-height:1.6;color:#48566b}.course-methodology{flex:1 0 100%;border-top:1px solid #d8dfec}.course-methodology summary{padding:14px 0;color:#142036;font-size:12px;font-weight:800;cursor:pointer}.course-methodology p{max-width:100ch}.course-methodology p a{display:inline;min-height:0;padding:0;border:0}
.course-upgrade{align-items:center;justify-content:space-between;gap:24px;margin:18px 0 0;padding:20px 22px;border-left:4px solid #2347d9;background:#e9efff}.course-upgrade>div{display:grid;gap:5px}.course-upgrade span{color:#2347d9;font-size:8px;font-weight:900;letter-spacing:.13em}.course-upgrade b{font-size:16px}.course-upgrade p{margin:0;color:#48566b;font-size:11px;line-height:1.55}.course-upgrade button,.game-note .request-full{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:7px;background:#2347d9;color:#fff;font-size:11px;font-weight:800}.game-note .request-full{display:inline-flex!important;align-items:center;margin-left:8px}.game-note #listeningProfileStatus{color:#dce9ff;font-weight:750}
.course-recovery{position:absolute;z-index:8;inset:0;display:grid;place-content:center;justify-items:center;padding:24px;background:#101b30f5;color:#fff;text-align:center}.course-recovery span{font-size:12px;letter-spacing:.1em}.course-recovery b{font-size:100px;line-height:1.2;color:#ffcf70}.course-recovery p{max-width:40ch;font-size:14px;line-height:1.6}
/* Game: notes above a shared string horizon. */
.melody-signature{position:relative;flex:0 0 210px;height:112px;background:repeating-linear-gradient(transparent 0 23px,#c3cfe1 23px 24px)}.melody-signature i{position:absolute;height:7px;border-radius:3px;background:#2347d9;width:35px}.melody-signature i:nth-child(1){left:4px;top:68px}.melody-signature i:nth-child(2){left:47px;top:44px}.melody-signature i:nth-child(3){left:90px;top:20px;width:60px}.melody-signature i:nth-child(4){left:158px;top:44px}.melody-signature i:nth-child(5){left:201px;top:68px;width:8px}.melody-signature b{position:absolute;left:94px;top:8px;width:17px;height:17px;border-radius:50%;background:#142036;box-shadow:0 0 0 6px #2347d91a}
.game-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);border:1px solid #ccd6e5;border-radius:12px;overflow:hidden}.song-browser{border-right:1px solid #ccd6e5;background:#edf2fa}.song-browser-head{display:grid;gap:8px;padding:16px}.song-browser-head>span{display:none}.song-browser-head>b{font-size:12px;font-weight:700;color:#48566b}.song-browser-head input{width:100%;height:48px;padding:0 12px;border:1px solid #9aaac2;border-radius:8px;background:#fff;color:#142036;font:inherit;font-size:14px}
.song-filters{display:flex;gap:4px;padding:0 12px 12px;overflow-x:auto}.song-filters button{flex:none;min-height:44px;padding:0 9px;border:0;border-bottom:2px solid transparent;background:transparent;color:#48566b;font-size:11px;font-weight:800}.song-filters button.active{color:#2347d9;border-color:#2347d9}
.song-library{height:660px;padding:0 8px 12px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}.song-item{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) 6px;align-items:center;gap:10px;margin-bottom:4px;padding:13px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:#142036;text-align:left}.song-item:hover{background:#fff}.song-item.active{background:#fff;border-color:#2347d9}.song-item>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #b9c8e2;border-radius:6px;color:#48566b;font-size:11px;font-weight:800}.song-item.active>span{background:#2347d9;color:#fff;border-color:#2347d9}.song-item>div{min-width:0}.song-item b{display:block;font-size:13px;line-height:1.4}.song-item small{display:block;margin-top:4px;color:#48566b;font-size:10px;line-height:1.5}.song-item i{width:5px;height:5px;border-radius:50%;background:#7b8ca7}.song-item.active i{background:#2347d9}.song-empty{padding:24px 12px;font-size:13px;color:#48566b}
.game-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:#101b30;color:#f5f8ff}.game-songbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 14px}.game-songbar>div{min-width:0}.game-songbar span:not(.focus-button span){font-size:10px;font-weight:750;letter-spacing:.06em;color:#b9c8e2}.game-songbar h2{margin:6px 0;font-size:clamp(23px,2.4vw,32px);line-height:1.15;letter-spacing:-.04em}.game-songbar p{margin:0;color:#b9c8e2;font-size:11px;line-height:1.6}.game-songbar .focus-button{border-color:#60769a}
.game-sessionbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:10px 22px;border-block:1px solid #30415e}.game-hud{display:flex;gap:28px}.game-hud span{display:grid;gap:3px;color:#b9c8e2;font-size:10px}.game-hud b{color:#fff;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:.03em}.game-hud span:nth-child(2) b{color:#ffcf70}
.game-legend{display:flex;gap:12px;flex-wrap:wrap}.game-legend span{display:flex;align-items:center;gap:6px;font-size:10px;color:#b9c8e2}.game-legend i{width:14px;height:4px;border-radius:2px;background:#84b5ff}.game-legend .legend-hold{width:23px;background:#63e1bc}.game-legend .legend-rest{background:repeating-linear-gradient(90deg,#b9c8e2 0 3px,transparent 3px 6px)}.game-legend .legend-trill{height:9px;background:repeating-linear-gradient(#ffcf70 0 1px,transparent 1px 3px)}
.game-setup{display:grid;grid-template-columns:minmax(145px,.7fr) minmax(240px,1.18fr) minmax(285px,1.32fr) minmax(210px,.95fr);align-items:end;gap:10px 14px;padding:12px 22px;border-bottom:1px solid #30415e;background:#101d33}.game-setup label{display:grid;gap:5px;min-width:0}.game-setup label>span,.game-speed-control>span{font-size:9px;font-weight:800;letter-spacing:.08em;color:#91a5c5}.game-setup select{width:100%;height:42px;min-width:0;padding:0 10px;border:1px solid #526887;border-radius:7px;background:#172a46;color:#fff;font-size:13px}.game-speed-control{display:grid;gap:4px;min-width:0}.game-speed-control>span{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px}.game-speed-control output{color:#ffcf70;font-size:11px}.game-speed-control>span b{grid-column:2;color:#fff;font-size:9px}.game-tempo-row{display:grid;grid-template-columns:40px minmax(80px,1fr) 40px;align-items:center;gap:6px}.game-tempo-row button{min-width:40px;height:38px;padding:0;border:1px solid #526887;border-radius:7px;background:#172a46;color:#fff;font:800 11px Manrope}.game-speed-control input{width:100%;margin:0;accent-color:#ffcf70}.game-speed-control>small{color:#9eb2d1;font-size:8px;line-height:1.35}.game-speed-control.locked{opacity:.78}.game-speed-control.locked>small{color:#ffcf70}.game-setup p{margin:0;color:#b9c8e2;font-size:10px;line-height:1.5}
.game-mode-choice,.game-view-choice,.game-voice-choice{display:grid;align-self:stretch;gap:5px;min-width:0}.game-mode-choice>span,.game-view-choice>span,.game-voice-choice>span{font-size:9px;font-weight:800;letter-spacing:.08em;color:#91a5c5}.game-mode-choice>div,.game-view-choice>div,.game-voice-choice>div{display:grid;padding:3px;border:1px solid #465c7d;border-radius:8px;background:#0b182c}.game-mode-choice>div{grid-template-columns:repeat(3,1fr)}.game-view-choice>div{grid-template-columns:1fr 1fr}.game-voice-choice>div{grid-template-columns:repeat(3,1fr)}.game-mode-choice button,.game-view-choice button,.game-voice-choice button{min-height:38px;border:0;border-radius:5px;background:transparent;color:#b9c8e2;font:750 11px/1.2 Manrope}.game-mode-choice button,.game-voice-choice button{display:grid;align-content:center;gap:1px;text-align:left;padding:5px 8px}.game-mode-choice button small,.game-voice-choice button small{font-size:8px;font-weight:550}.game-mode-choice button.active,.game-view-choice button.active,.game-voice-choice button.active{background:#e7eeff;color:#142036;box-shadow:0 1px 5px #050b16aa}.game-mode-choice button.active b,.game-voice-choice button.active b{color:#2347d9}.game-voice-choice button:disabled{opacity:.38;cursor:not-allowed}.game-mode-status{padding-left:10px!important;border-left:2px solid #ffcf70;color:#f5f8ff!important}
.game-options{grid-column:1/-1;border-top:1px solid #2a3d5b}.game-options>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding:4px 2px;color:#9eb2d1;cursor:pointer;list-style:none}.game-options>summary::-webkit-details-marker{display:none}.game-options>summary span{font-size:9px;font-weight:800;letter-spacing:.09em}.game-options>summary b{font-size:10px;color:#e5efff;font-weight:700}.game-options>summary:after{content:'+';display:grid;place-items:center;width:24px;height:24px;border:1px solid #526887;border-radius:50%;font-size:15px}.game-options[open]>summary:after{content:'−'}.game-options-grid{display:grid;grid-template-columns:minmax(150px,.72fr) auto;align-items:end;gap:10px 14px;padding:4px 0 8px}.game-options-grid p{grid-column:1/-1}.game-editor-link{min-height:42px;padding:0 12px;border:1px solid #526887;border-radius:7px;background:transparent;color:#dce9ff;font:750 11px Manrope}
.game-arena{position:relative;min-width:0;overflow:hidden;background:#0b182c}.game-arena canvas{display:block;width:100%;height:clamp(260px,35vw,390px);touch-action:pan-y}.game-countdown{position:absolute;top:14px;left:50%;transform:translateX(-50%);padding:7px 14px;max-width:90%;border:1px solid #526b92;border-radius:6px;background:#101b30e6;color:#fff;font-size:12px;font-weight:800;text-align:center;pointer-events:none}.game-countdown.recovering{top:50%;transform:translate(-50%,-50%);font-size:54px;min-width:100px;padding:16px;color:#ffcf70;border-color:#ffcf70}
.game-controls{display:grid;grid-template-columns:minmax(180px,1.7fr) repeat(2,minmax(100px,.65fr));align-items:center;gap:8px;padding:10px 18px;border-block:1px solid #30415e;background:#14243d}.game-controls button{min-height:46px;padding:0 14px;border:1px solid #526887;border-radius:7px;background:#192c48;color:#fff;font-size:12px;font-weight:750}.game-controls .feature-primary{background:#e7eeff;color:#142036;border-color:#e7eeff}.game-controls button:disabled{opacity:.5}
.game-tab-assist{display:grid;min-width:0;border-bottom:1px solid #30415e;background:#061221;box-shadow:inset 0 1px #6d91c51f,inset 0 -24px 60px #02071366}.game-tab-assist>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 14px;border-bottom:1px solid #29415f;background:linear-gradient(90deg,#0a1729,#101f37)}.game-tab-assist>header>div:first-child{display:grid;gap:2px}.game-tab-assist span{font-size:8px;text-transform:uppercase;letter-spacing:.11em;color:#9bb0d0}.game-tab-assist b{font-size:11px;color:#fff;letter-spacing:.03em}.game-tab-assist .game-view-choice{display:flex;align-items:center;gap:9px}.game-tab-assist .game-view-choice>div{width:190px}.game-tab-assist canvas{display:block;width:100%;height:112px;touch-action:pan-y;contain:paint}
.game-songbar{order:1}.game-sessionbar{order:2}.game-setup{order:3}.game-arena{order:4}.game-tab-assist{order:5}.game-controls{order:6}.game-scrubber{order:7}.game-readout{order:8}.game-stage[data-primary-view=tab] .game-tab-assist{order:4;background:#061425;box-shadow:inset 0 1px #78a1df24,inset 0 -40px 110px #030817b8}.game-stage[data-primary-view=tab] .game-arena{order:5}.game-stage[data-primary-view=tab] .game-tab-assist canvas{height:clamp(280px,36vw,410px)}.game-stage[data-primary-view=tab] .game-arena canvas{height:118px}.game-stage[data-primary-view=tab] .game-arena .game-forecast,.game-stage[data-primary-view=tab] .game-arena .game-change-hint{display:none}
.game-scrubber{display:grid;gap:2px;padding:10px 20px 4px;background:#101b30}.game-scrubber>span{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#b9c8e2}.game-scrubber b{font-weight:700;letter-spacing:.06em}.game-scrubber output{color:#fff;font-variant-numeric:tabular-nums}.game-scrubber input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#84b5ff 0 var(--timeline-progress,0%),#405476 var(--timeline-progress,0%) 100%)}.game-scrubber input::-webkit-slider-thumb{border-color:#101b30;background:#ffcf70;box-shadow:none}
.game-readout{display:grid;grid-template-columns:90px minmax(0,1fr) 130px 110px;gap:16px;padding:12px 20px 16px}.game-readout>div{display:grid;align-content:start;gap:6px;min-width:0}.game-readout span{color:#b9c8e2;font-size:9px;letter-spacing:.08em}.game-readout b{color:#fff;font-size:12px;line-height:1.5}.hold-readout>div{height:6px;border-radius:4px;background:#405476;overflow:hidden;margin-top:4px}.hold-readout i{display:block;width:0;height:100%;background:#63e1bc;transition:width 80ms linear}
.game-note{margin:0;padding:18px 0;color:#48566b;font-size:12px;line-height:1.7}.game-note a{color:#2347d9;font-weight:700;overflow-wrap:anywhere}
/* Transcription and overlays. */
.transcribe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid #ccd6e5;border-radius:12px;overflow:hidden}.feature-card{min-width:0;padding:24px;border-right:1px solid #d8dfec}.feature-card:last-child{border:0}.feature-card h2{margin:16px 0 8px;font-size:23px;letter-spacing:-.04em}.feature-card p{font-size:14px;line-height:1.65;color:#48566b}.step-number{font-size:13px;color:#2347d9;font-weight:800}.feature-card>small{display:block;font-size:12px;margin-top:12px;color:#48566b;line-height:1.5}
.feature-card label{display:grid;gap:8px;margin:12px 0;color:#48566b;font-size:12px;font-weight:750}.feature-card input,.feature-card select{height:48px;width:100%;min-width:0;padding:0 12px;border:1px solid #9aaac2;border-radius:8px;background:#f8faff;color:#142036;font-size:16px}.audio-drop{position:relative;min-height:140px;place-content:center;padding:12px;text-align:center;border:1px dashed #7b8ca7;border-radius:8px;background:#f2f5fb;cursor:pointer}.audio-drop.dragging{background:#e4ebff;border-color:#2347d9}.audio-drop input{position:absolute;width:1px;height:1px;opacity:0}.audio-drop:focus-within{outline:3px solid #5677ff;outline-offset:3px}.audio-drop b{font-size:16px;color:#2347d9}.audio-drop span{font-size:12px;font-weight:500}
.analysis-strip{padding:20px 0}.analysis-strip>div{height:5px;background:#d8dfec;border-radius:4px;overflow:hidden}.analysis-strip span{display:block;width:0;height:100%;background:#2347d9}.analysis-strip p{color:#48566b;font-size:13px;line-height:1.6}.recording{background:#b52d49!important}
.wave-orbit{width:170px;height:90px;flex:none;background:repeating-linear-gradient(90deg,transparent 0 10px,#2347d9 10px 13px,transparent 13px 18px);clip-path:polygon(0 40%,10% 35%,20% 15%,30% 36%,40% 0,50% 28%,60% 8%,70% 30%,80% 18%,90% 42%,100% 40%,100% 60%,90% 58%,80% 82%,70% 70%,60% 92%,50% 72%,40% 100%,30% 64%,20% 85%,10% 65%,0 60%)}
.quick-tuner-button{position:static;display:flex;gap:8px;align-items:center;min-height:44px;padding:0 12px;margin:0;border:1px solid #60769a;border-radius:8px;background:transparent;color:#fff;font-size:12px;box-shadow:none}.quick-tuner-button svg{width:20px;height:20px}.quick-tuner-button.is-listening{color:#63e1bc;border-color:#63e1bc}
.quick-tuner{z-index:110;top:76px;bottom:auto;right:max(12px,env(safe-area-inset-right));width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 100px);overflow-y:auto;padding:20px;border-radius:12px;background:#101b30;box-shadow:0 18px 60px #101b3040}.quick-tuner-head span{font-size:10px}.quick-tuner-head b{font-size:16px}.quick-tuner-head button{width:44px;height:44px}.quick-tuner-note span,.quick-tuner p{font-size:12px;line-height:1.5}.quick-tuner>button{min-height:48px;font-size:14px}
dialog{max-height:calc(100dvh - 24px);padding:12px;overscroll-behavior:contain}.dialog-heading>button{min-width:44px;min-height:44px}.dialog-card input,.dialog-card select,.dialog-card textarea{font-size:16px;min-height:44px}.dialog-card>p,.help-card ol{font-size:14px}.dialog-actions{flex-wrap:wrap}.dialog-actions button{flex:1;min-height:48px}.dialog-card>label,.two-columns label{font-size:13px}.dialog-card{box-shadow:none}
.toast{max-width:calc(100vw - 32px);width:max-content;font-size:13px;line-height:1.5}
.toast:not(.show){visibility:hidden;opacity:0}
.meter-scale,.signal-quality>span,.audio-credit{color:#48566b}
.event-comment{position:relative;z-index:10;align-self:start;justify-self:end;width:32px;height:28px;border:1px solid #bc8d28;border-radius:6px;background:#fff0bf;color:#453400;font-size:18px;line-height:1;transform:translateY(-4px)}
.secondary-button#copyButton:before,.secondary-button#pasteButton:before{content:none}
.editor-tracks{background:#edf1f8;border-right:1px solid #d8dfec}.editor-tracks .track-rail{border:0}.editor-tracks summary{font-size:12px;padding:14px 12px}
.editor-tools{position:relative;margin-left:auto}.editor-tools summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;min-height:44px;padding:0 12px;border:1px solid #a6b4cb;border-radius:8px;color:#48566b;font-size:12px;font-weight:750;cursor:pointer}.editor-tools summary::-webkit-details-marker{display:none}.editor-tools summary svg{width:16px;height:16px}.editor-tools[open]{flex-basis:100%}.advanced-tools{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding-top:12px}
@media(max-width:900px){.editor-tracks{border-right:0;border-bottom:1px solid #d8dfec}.editor-tracks summary{padding:10px 14px;min-height:58px}}
@media(max-width:700px){.editor-tools summary{font-size:11px;padding:0 8px}.tool-group{flex-basis:100%}.tool-row>.compact-control{flex:0 0 auto}.tool-row>.compact-control input{width:56px}.tool-row>.compact-control select{width:68px}.advanced-tools{gap:10px}.tool-spacer{display:none}}
/* Compact layouts prioritize the stage and preserve touch target labels. */
@media(max-width:1100px){
.app-descriptor{display:none}.game-workspace{grid-template-columns:230px minmax(0,1fr)}.course-layout{grid-template-columns:235px minmax(0,1fr)}.game-legend{display:none}.game-readout{grid-template-columns:80px 1fr 110px}.hold-readout{grid-column:1/-1}.lesson-contract{grid-template-columns:1fr 1fr}.lesson-contract>div:first-child{grid-column:1/-1}.trainer-stats{gap:18px}.trainer-stats span{flex-direction:column;gap:4px}
}
@media(max-width:900px){
.course-layout,.game-workspace{grid-template-columns:minmax(0,1fr)}.song-browser,.course-syllabus{border-right:0;border-bottom:1px solid #d8dfec}.song-library,.course-route{max-height:330px;height:auto;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.course-phase{grid-column:1/-1}.song-browser-head{grid-template-columns:1fr 1fr;align-items:center}.song-filters button{font-size:12px}.game-arena canvas{height:clamp(240px,35vw,330px)}.game-legend{display:flex}.transcribe-grid{grid-template-columns:1fr}.feature-card{border-right:0;border-bottom:1px solid #d8dfec}.feature-card .feature-primary{width:100%}.track-rail{grid-template-columns:44px minmax(0,1fr) 44px 44px}.rail-action{font-size:0;width:44px}.rail-action span{font-size:20px}.track-card{min-width:240px}.lower-deck{grid-template-columns:1fr}.save-status{display:flex}
}
@media(max-width:700px){
html{scroll-padding-top:16px}.topbar{height:64px;gap:10px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}.brand{gap:8px}.brand strong{font-size:17px}.brand small{display:block;font-size:8px}.brand-mark{width:32px;height:36px}.save-status,.app-descriptor{display:none}.quick-tuner-button{margin-left:auto;padding:0 10px}.quick-tuner-button b{display:block}.icon-button{width:44px;height:44px}
.mode-nav{position:fixed;top:auto;inset-inline:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;min-height:var(--nav-height);padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -4px 24px #101b300d;border-top:1px solid #d8dfec;border-bottom:0}.mode-nav button{flex-direction:column;gap:5px;min-width:0;min-height:56px;padding:6px 2px;border-radius:8px;font-size:10px}.mode-nav button span{display:block}.mode-nav button.active{box-shadow:none}.mode-nav button svg{width:22px;height:22px}
.app-shell{padding:12px 12px calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px)}.feature-hero{padding:14px 4px 24px;gap:16px}.feature-hero h1{font-size:34px;margin:8px 0 10px}.feature-hero p:not(.eyebrow){font-size:13px}.eyebrow{font-size:9px;letter-spacing:.12em}.melody-signature,.wave-orbit{display:none}.course-score{min-width:66px;padding-left:12px}.course-score b{font-size:30px}.course-score small,.course-score span{font-size:10px}.course-hero h1{font-size:28px}
.score-heading{display:grid;gap:20px;margin:10px 4px 20px}.score-heading h1{font-size:28px}.project-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}.project-fields .composer-field{display:grid}.project-fields label:first-child{max-width:none}
.transport{padding:10px;gap:8px;overflow:visible}.transport-main{flex:1 1 auto}.transport-main .play-button b{display:block;font-size:12px}.metro-button{font-size:11px;width:auto;padding:0 10px}.metro-button:after{content:none}.number-control{flex:1;min-width:60px}.number-control span{font-size:10px}.number-control input,.number-control select{width:100%;min-width:0;font-size:16px}.history-buttons{margin-left:auto}.history-buttons button{min-width:44px}.transport-scrubber{min-width:0;flex-basis:100%;order:5}
.track-rail{padding:10px;gap:6px;grid-template-columns:44px minmax(0,1fr)}.track-list{grid-column:2;grid-row:1/4}.track-card{min-width:100%;width:100%}.rail-action,.rail-heading{grid-column:1}.track-main input,.track-main select{font-size:16px}
.tool-group{width:100%}.tool-group button{width:auto;flex:1;min-width:56px;display:grid;align-content:center;justify-items:center;gap:4px;min-height:56px;padding:4px 7px;font-size:10px}.tool-group .tool-icon{font-size:16px;margin:0}.tool-row{gap:8px}.tool-toggle{font-size:12px;width:auto}.compact-control input,.compact-control select{font-size:16px}.editor-note{display:grid;padding:12px;gap:8px}.editor-note span{max-width:none;font-size:11px}.editor-note b{text-align:left;font-size:11px}.tab-viewport,.tab-canvas{min-height:330px}
.trainer-stage{padding:16px}.trainer-head{align-items:flex-start;gap:10px}.trainer-head h2{font-size:23px}.focus-button{padding:0 10px}.focus-button span{display:none}.trainer-head .focus-button[aria-pressed=true] span{display:block;font-size:11px}.trainer-stats{gap:24px;padding:12px 0;margin-top:16px}.trainer-stats span{flex:1;font-size:11px}.trainer-stats span:last-child{display:flex}.lesson-contract{gap:14px;padding:16px 0}.challenge-card{padding:14px;margin:10px 0 18px}.challenge-card p{font-size:14px}.fretboard-toolbar{flex-wrap:wrap}.trainer-actions{display:grid;grid-template-columns:1fr 1fr}.trainer-actions button{padding:0 8px;font-size:12px}.adaptive-rule{display:grid;gap:5px}.course-resources{padding:20px 4px}.course-resources a{flex:1;justify-content:center;font-size:11px}.course-route,.song-library{grid-template-columns:1fr}.song-browser-head{grid-template-columns:1fr}.responsive-disclosure summary{padding:14px 16px}
.game-songbar{gap:10px;padding:16px}.game-songbar h2{font-size:25px}.game-songbar p{font-size:11px}.game-sessionbar{padding:10px 16px}.game-hud{width:100%;justify-content:space-between;gap:12px}.game-hud b{font-size:19px}.game-legend{display:none}.game-setup{padding:12px 16px;gap:8px 12px}.game-setup select{font-size:16px}.game-setup p{font-size:10px}.game-options-grid{grid-template-columns:1fr 1fr}.game-options-grid .game-editor-link{grid-column:1/-1}.game-arena canvas{height:280px}.game-controls{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.75fr));padding:10px 12px;gap:7px}.game-controls button{padding:0 8px;font-size:11px}.game-tab-assist>header{padding:8px 12px}.game-tab-assist canvas{height:104px}.game-readout{grid-template-columns:65px minmax(0,1fr) 95px;gap:12px;padding:12px 14px}.game-readout b{font-size:11px}.game-scrubber{padding:12px 14px 2px}.game-note{font-size:11px;padding:16px 4px}
.quick-tuner{top:72px;max-height:calc(100dvh - var(--nav-height) - 88px)}.toast{bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px)}.feature-card{padding:22px}.audio-credit{font-size:11px}.dialog-card{padding:18px}.mini-tab-editor>div:first-child{display:grid}.selection-inspector>div{display:block}.selection-inspector label{min-width:0}
}
@media(max-width:360px){
.topbar{padding-inline:12px;gap:8px}.brand small,.brand-mark{display:none}.app-shell{padding-inline:8px}.feature-hero h1{font-size:30px}.course-hero h1{font-size:26px}.course-score{min-width:54px}.game-setup{gap:8px 10px;padding-inline:12px}.game-readout{gap:8px;grid-template-columns:55px minmax(0,1fr) 86px}.fret-zones{width:100%;justify-content:space-between}.trainer-stage{padding:12px}.tool-group button{min-width:50px}.transport-main .play-button b{display:none}
}
/* Atril: dynamic viewport; on a landscape phone the controls become a side deck. */
body.has-practice-focus{overflow:hidden}
.practice-focus{position:fixed;inset:0;z-index:90;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);height:100dvh;overflow-y:auto;background:#f2f5fb;overscroll-behavior:contain}
.practice-focus>.feature-hero,.practice-focus .responsive-disclosure,.practice-focus .game-note,.practice-focus .course-resources{display:none}
.practice-focus .focus-button span{display:block;font-size:11px}
.game-panel.practice-focus{background:#101b30;overflow:hidden}
.practice-focus .game-workspace{display:block;height:100%;border:0;border-radius:0}
.practice-focus .game-stage{display:grid;height:100%;grid-template-rows:auto auto auto minmax(100px,1fr) auto auto auto auto}
.practice-focus .game-songbar{padding:10px 16px}.practice-focus .game-songbar h2{font-size:20px;margin:0}.practice-focus .game-songbar p,.practice-focus #gameSongOrigin{display:none}
.practice-focus .game-sessionbar{padding:7px 16px}.practice-focus .game-hud{gap:24px;width:auto}.practice-focus .game-hud span{display:flex;align-items:center;gap:8px}.practice-focus .game-hud b{font-size:14px}
.practice-focus .game-setup{padding:7px 16px}.practice-focus .game-setup p{display:none}.practice-focus .game-arena canvas{height:100%;min-height:0}.practice-focus .game-arena{min-height:0}
.practice-focus .game-options{display:none}
.practice-focus .game-controls{padding:8px 12px}.practice-focus .game-controls button{min-height:44px}.practice-focus .game-tab-assist{grid-template-columns:1fr}.practice-focus .game-tab-assist>header{display:none}.practice-focus .game-tab-assist canvas{height:88px}
.practice-focus .game-readout{grid-template-columns:65px minmax(0,1fr) 105px;padding:6px 14px 10px}.practice-focus .hold-readout{display:none}.practice-focus .game-scrubber{padding:6px 14px 0}.practice-focus .game-scrubber input{height:26px;min-height:26px}
.practice-focus .course-layout{display:block;border:0;border-radius:0;min-height:100%}.practice-focus .trainer-stage{max-width:1100px;margin:auto}.practice-focus .lesson-contract,.practice-focus .why-panel,.practice-focus .adaptive-rule{display:none}.practice-focus .course-recovery{position:fixed}
@media(orientation:landscape) and (max-height:600px){
.topbar{height:56px}.app-shell{padding-top:12px}.feature-hero{padding:8px 0 20px}.feature-hero h1{font-size:30px}.feature-hero p:not(.eyebrow){font-size:12px}.mode-nav{position:relative;top:auto;min-height:54px}.mode-nav button{min-height:40px}.game-arena canvas{height:240px}.game-workspace,.course-layout{grid-template-columns:1fr}.song-library,.course-route{max-height:230px}.quick-tuner{top:60px;max-height:calc(100dvh - 70px)}.quick-tuner-note b{font-size:36px}.quick-tuner-note{margin:8px 0}.quick-tuner p{margin:8px 0}.toast{bottom:12px}
.game-panel.practice-focus .game-stage{grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:50px minmax(80px,1fr) 76px 46px}
.practice-focus .game-songbar{grid-column:1;grid-row:1;padding:3px 12px}.practice-focus .game-songbar h2{font-size:18px}.practice-focus .game-sessionbar{grid-column:2;grid-row:1;border:0;padding:4px 10px}.practice-focus .game-hud{gap:10px;justify-content:space-between;width:100%}.practice-focus .game-hud span{display:grid;gap:1px;font-size:9px}.practice-focus .game-hud b{font-size:13px}.practice-focus .game-legend{display:none}
.practice-focus .game-arena{grid-column:1;grid-row:2}.practice-focus .game-setup{grid-column:2;grid-row:2;align-content:start;grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 10px 0;border:0}.practice-focus .game-setup label{gap:2px}.practice-focus .game-setup select{height:44px;font-size:14px}.practice-focus .game-setup input{min-height:32px}.practice-focus .game-tab-assist{grid-column:1;grid-row:3}.practice-focus .game-tab-assist canvas{height:76px}.practice-focus .game-controls{grid-column:2;grid-row:3/5;display:grid;grid-template-columns:1fr 1fr;align-content:center;padding:6px;gap:6px;border:0}.practice-focus .game-controls button{font-size:10px;padding:2px 5px;min-height:44px}.practice-focus .game-scrubber{grid-column:1;grid-row:4;padding:3px 12px 0}.practice-focus .game-scrubber b{font-size:9px}.practice-focus .game-readout{display:none}
.course-panel.practice-focus .trainer-stage{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:8px 16px;padding:12px 16px}.practice-focus .trainer-head{grid-column:1/-1}.practice-focus .trainer-head h2{font-size:20px;margin-top:3px}.practice-focus .trainer-stats{grid-column:2;grid-row:2;margin:0;padding:4px 0;gap:12px}.practice-focus .trainer-stats span{display:grid;gap:3px}.practice-focus .trainer-stats b{font-size:16px}.practice-focus .session-meter{grid-column:2;grid-row:3;align-self:start}.practice-focus .challenge-card{grid-column:1;grid-row:2/4;padding:8px 12px;margin:0}.practice-focus .challenge-card p{font-size:13px}.practice-focus .fretboard-toolbar{grid-column:1;margin:0}.practice-focus .course-fretboard{grid-column:1;padding:0}.practice-focus .trainer-actions{grid-column:2;grid-row:4/6;display:grid;align-content:start;margin:0}.practice-focus .trainer-actions button{min-height:44px;font-size:11px}.practice-focus .course-fretboard button{height:44px;background:linear-gradient(transparent 21px,#8494ab 21px,#8494ab 23px,transparent 23px)}
}
@media(max-width:1200px){.game-setup{grid-template-columns:minmax(150px,.7fr) minmax(230px,1.3fr)}.game-mode-choice,.game-voice-choice{grid-column:1/-1}.lesson-sequence{grid-template-columns:1fr 1fr}.lesson-sequence>div:nth-child(2){border-right:0}.lesson-sequence>div:nth-child(-n+2){border-bottom:1px solid #d8dfec}}
@media(max-width:700px){.game-setup{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.game-mode-choice button small{font-size:7.5px}.lesson-sequence>div{padding:11px}.course-methodology{padding-inline:4px}}
@media(max-width:360px){.game-setup{grid-template-columns:minmax(0,1fr)}.game-setup>label,.game-speed-control,.game-mode-choice,.game-voice-choice{grid-column:1}.game-mode-choice button{padding-inline:5px}.game-mode-choice button small{font-size:7px}}
.practice-focus .lesson-sequence{display:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(orientation:landscape) and (max-height:600px){
.course-panel.practice-focus .trainer-stage{grid-template-areas:"head head" "prompt stats" "toolbar progress" "board actions";grid-template-rows:auto auto 44px minmax(202px,1fr);gap:6px 16px;padding:8px 16px}
.practice-focus .trainer-head{grid-area:head}.practice-focus .trainer-stats{grid-area:stats}.practice-focus .session-meter{grid-area:progress}.practice-focus .challenge-card{grid-area:prompt;padding:4px 12px;min-height:52px}.practice-focus .fretboard-toolbar{grid-area:toolbar}.practice-focus .course-fretboard{grid-area:board}.practice-focus .trainer-actions{grid-area:actions;gap:6px}.practice-focus .game-controls button{font-size:11px}
}
@media(orientation:portrait) and (max-height:700px){
.practice-focus .game-stage{grid-template-rows:48px 30px 70px minmax(72px,1fr) 102px 64px 46px}.practice-focus .game-songbar{padding:2px 12px}.practice-focus .game-songbar h2{font-size:17px}.practice-focus .game-sessionbar{padding:4px 12px}.practice-focus .game-setup{padding:3px 12px;gap:0 12px}.practice-focus .game-controls{padding:4px 8px;gap:4px}.practice-focus .game-tab-assist canvas{height:64px}.practice-focus .game-scrubber{padding:2px 12px 0}.practice-focus .game-readout{display:none}
}
@media(max-width:620px){.game-mode-choice,.game-view-choice,.game-voice-choice{grid-column:1/-1}.game-mode-choice button,.game-voice-choice button{padding-inline:8px}.game-mode-choice button small,.game-voice-choice button small{font-size:8px}.game-stage[data-primary-view=tab] .game-tab-assist canvas{height:280px}.game-stage[data-primary-view=tab] .game-arena canvas{height:112px}}
@media(max-width:900px){.technique-board{grid-template-columns:repeat(5,minmax(90px,1fr));overflow-x:auto}.course-upgrade{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.technique-board{grid-template-columns:repeat(5,86px)}.course-upgrade{margin-inline:0}.game-note .request-full{display:flex!important;width:100%;justify-content:center;margin:10px 0 0}}
.practice-focus .game-mode-choice,.practice-focus .game-voice-choice{display:none}.practice-focus .game-view-choice{grid-column:1/-1}.practice-focus .game-stage[data-primary-view=tab] .game-tab-assist{grid-row:4}.practice-focus .game-stage[data-primary-view=tab] .game-arena{grid-row:6}.practice-focus .game-stage[data-primary-view=tab] .game-tab-assist canvas{height:100%;min-height:0}.practice-focus .game-stage[data-primary-view=tab] .game-arena canvas{height:88px}
@media(orientation:landscape) and (max-height:600px){.practice-focus .game-view-choice{display:none}.practice-focus .game-stage[data-primary-view=tab] .game-tab-assist{grid-column:1;grid-row:2}.practice-focus .game-stage[data-primary-view=tab] .game-arena{grid-column:1;grid-row:3}.practice-focus .game-stage[data-primary-view=tab] .game-tab-assist canvas{height:100%}.practice-focus .game-stage[data-primary-view=tab] .game-arena canvas{height:76px}}
@media print{.mode-nav,.feature-panel,.quick-tuner,.quick-tuner-button{display:none!important}.score-heading{margin:0 0 16px}.score-heading h1,.score-heading .eyebrow{display:none}.project-fields{display:block}.project-fields input{border:0}.project-fields span{display:none}.app-shell{padding:0}.tab-canvas.layout-wrapped{padding:0}}

/* 20261020k · Immersive game cockpit: music first, controls second. */
.game-stage{position:relative;background:#071425}
.game-songbar{min-height:66px;padding:11px 16px;border-bottom:1px solid #263b5c;background:linear-gradient(105deg,#0d1a2f 0%,#101f38 64%,#0a172b 100%)}
.game-songbar h2{margin:2px 0 3px;font-size:clamp(19px,1.8vw,25px)}
.game-songbar p{max-width:88ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-head-actions{display:flex;align-items:center;gap:8px;flex:none}
.game-head-actions .game-view-choice{display:flex;align-items:center;gap:7px}
.game-head-actions .game-view-choice>span{font-size:8px}
.game-head-actions .game-view-choice>div{width:154px;padding:2px;border-color:#3b5276}
.game-head-actions .game-view-choice button{min-height:34px;font-size:10px}
.game-head-actions .focus-button{min-height:40px;border-radius:999px;padding-inline:11px;background:#132846}
.game-sessionbar{min-height:34px;padding:5px 16px;border-block:0;border-bottom:1px solid #243957;background:#0b192d}
.game-hud{gap:20px}.game-hud span{display:flex;align-items:baseline;gap:6px;font-size:8px}.game-hud b{font-size:13px}
.game-legend{gap:10px}.game-legend span{font-size:8px}
.game-setup{grid-template-columns:minmax(180px,240px) minmax(250px,1fr) minmax(170px,220px);align-items:center;gap:8px 14px;padding:8px 16px;background:#0d1c32}
.game-setup select{height:38px}.game-speed-control{gap:1px}.game-speed-control>small{display:none}.game-speed-control>span{grid-template-columns:1fr auto auto;align-items:center}.game-speed-control>span b{grid-column:auto;margin-left:7px}
.game-tempo-row{grid-template-columns:34px minmax(100px,1fr) 34px;gap:7px}.game-tempo-row button{min-width:34px;width:34px;height:34px;border-radius:50%;background:#132844}.game-speed-control input{min-height:34px;height:34px}
.game-options{grid-column:auto;border:0;min-width:0}.game-options[open]{grid-column:1/-1;border-top:1px solid #2a3d5b}.game-options>summary{min-height:38px;padding:0 8px;border:1px solid #40587d;border-radius:8px;background:#122641}.game-options[open]>summary{margin-top:7px;border-color:transparent;background:transparent}.game-options>summary span{display:none}.game-options>summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-options>summary:after{flex:none;width:22px;height:22px;border:0;background:#203a60}
.game-options-grid{grid-template-columns:minmax(250px,1fr) minmax(250px,1fr) minmax(150px,.55fr) auto;padding:8px 0 2px}.game-options-grid>p{grid-column:1/-1}.game-options-grid .game-mode-status{margin-top:2px}
.game-arena{background:#050f20}.game-tab-assist{background:#040e1d}
.game-stage[data-primary-view=tab] .game-tab-assist canvas{height:clamp(360px,42vw,540px)}
.game-stage[data-primary-view=tab] .game-arena canvas{height:96px}
.game-stage[data-primary-view=pitch] .game-arena canvas{height:clamp(360px,42vw,540px)}
.game-stage[data-primary-view=pitch] .game-tab-assist canvas{height:96px}
.game-tab-assist>header{min-height:32px;padding:5px 14px}.game-tab-assist>header>div:first-child{display:flex;align-items:center;justify-content:space-between;width:100%}
.game-transport-dock{order:6;display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 14px;border-block:1px solid #29405f;background:#0c1b30;box-shadow:0 -12px 28px rgba(1,7,18,.18)}
.game-controls{order:initial;display:flex;grid-template-columns:none;flex:0 0 auto;gap:6px;padding:0;border:0;background:transparent}
.game-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:42px;min-height:42px;padding:0 13px;border-radius:999px;background:#142a48;font-size:10px}
.game-controls button:before{display:inline-grid;place-items:center;width:18px;height:18px;font-size:13px;line-height:1}
.game-controls #startGame:before{content:'▶';font-size:10px}.game-controls #pauseGame:before{content:'❚❚';font-size:10px;letter-spacing:-2px}.game-controls #restartGame:before{content:'↺';font-size:17px}
.game-controls .feature-primary{background:#f2f6ff;color:#101b30;border-color:#f2f6ff;box-shadow:0 4px 14px rgba(102,145,255,.16)}
.game-scrubber{order:initial;flex:1;min-width:180px;padding:0;background:transparent}.game-scrubber>span{font-size:8px}.game-scrubber input{height:30px;min-height:30px}
.game-readout{min-height:54px;padding:8px 16px 11px;background:#081628}.game-readout span{font-size:8px}.game-readout b{font-size:11px}

/* Atril truly behaves as a distraction-free musical surface. */
.practice-focus.game-panel{background:#030b17}
.practice-focus .game-stage{grid-template-rows:52px 56px minmax(210px,1fr) 90px 62px!important;grid-template-columns:minmax(0,1fr)!important}
.practice-focus .game-songbar{grid-column:1!important;grid-row:1!important;min-height:0;padding:5px 12px}
.practice-focus .game-songbar h2{font-size:18px}.practice-focus .game-songbar p,.practice-focus #gameSongOrigin{display:none}
.practice-focus .game-head-actions .game-view-choice{display:none}.practice-focus .game-head-actions .focus-button{width:42px;padding:0}.practice-focus .game-head-actions .focus-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.practice-focus .game-setup{grid-column:1!important;grid-row:2!important;display:grid;grid-template-columns:minmax(145px,240px) minmax(220px,1fr)!important;align-items:center;gap:10px 18px;padding:5px 12px;border:0;border-bottom:1px solid #263b5c}
.practice-focus .game-setup>label{display:grid!important}.practice-focus .game-setup .game-speed-control{display:grid}.practice-focus .game-options,.practice-focus .game-mode-choice,.practice-focus .game-voice-choice{display:none!important}
.practice-focus .game-sessionbar,.practice-focus .game-readout{display:none}
.practice-focus .game-tab-assist,.practice-focus .game-arena{grid-column:1!important;min-height:0}
.practice-focus .game-stage[data-primary-view=tab] .game-tab-assist{grid-row:3!important}.practice-focus .game-stage[data-primary-view=tab] .game-arena{grid-row:4!important}
.practice-focus .game-stage[data-primary-view=pitch] .game-arena{grid-row:3!important}.practice-focus .game-stage[data-primary-view=pitch] .game-tab-assist{grid-row:4!important}
.practice-focus .game-tab-assist>header{display:none}.practice-focus .game-tab-assist canvas,.practice-focus .game-arena canvas{height:100%!important;min-height:0}
.practice-focus .game-transport-dock{grid-column:1!important;grid-row:5!important;display:flex;min-height:0;padding:5px 12px;gap:12px;border-bottom:0}
.practice-focus .game-controls{display:flex!important;padding:0}.practice-focus .game-controls button{min-height:42px;padding:0 12px;font-size:9px}.practice-focus .game-scrubber{padding:0}.practice-focus .game-scrubber b{font-size:8px}

@media(max-width:900px){
  .game-setup{grid-template-columns:minmax(140px,.75fr) minmax(210px,1.25fr) minmax(145px,.7fr)}
  .game-options-grid{grid-template-columns:1fr 1fr}.game-options-grid .game-lookahead,.game-options-grid .game-editor-link{grid-column:auto}
  .game-stage[data-primary-view=tab] .game-tab-assist canvas,.game-stage[data-primary-view=pitch] .game-arena canvas{height:clamp(330px,54vw,470px)}
}
@media(max-width:700px){
  .game-stage{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.practice-focus .game-stage{padding-bottom:0}
  .game-songbar{min-height:58px;padding:8px 10px}.game-songbar h2{font-size:19px}.game-songbar p{display:none}.game-head-actions{gap:5px}.game-head-actions .game-view-choice>span{display:none}.game-head-actions .game-view-choice>div{width:116px}.game-head-actions .focus-button{width:40px;padding:0}.game-head-actions .focus-button span{display:none}
  .game-sessionbar{padding-inline:10px}.game-setup{grid-template-columns:minmax(118px,.8fr) minmax(160px,1.2fr);padding:7px 10px}.game-options{grid-column:1/-1}.game-options[open]{grid-column:1/-1}.game-options>summary{min-height:34px}.game-options-grid{grid-template-columns:1fr}.game-options-grid>*{grid-column:1!important}
  .game-stage[data-primary-view=tab] .game-tab-assist canvas,.game-stage[data-primary-view=pitch] .game-arena canvas{height:clamp(300px,74vw,410px)}
  .game-stage[data-primary-view=tab] .game-arena canvas,.game-stage[data-primary-view=pitch] .game-tab-assist canvas{height:86px}
  .game-transport-dock{flex-wrap:wrap;gap:5px 10px;padding:7px 9px}.game-controls{width:100%;justify-content:center}.game-controls button{min-height:40px;padding:0 11px}.game-scrubber{flex-basis:100%;min-width:0}.game-readout{grid-template-columns:60px minmax(0,1fr) 80px}
  .practice-focus .game-stage{grid-template-rows:48px 56px minmax(190px,1fr) 82px 96px!important}.practice-focus .game-transport-dock{align-content:center;flex-wrap:wrap}.practice-focus .game-controls{width:auto}.practice-focus .game-controls button{font-size:0;width:42px;padding:0}.practice-focus .game-controls button:before{font-size:13px}.practice-focus .game-scrubber{flex:1;flex-basis:auto;min-width:150px}
}
@media(max-width:390px){
  .game-setup{grid-template-columns:1fr}.game-setup>label,.game-speed-control,.game-options{grid-column:1}.game-sessionbar{display:none}.game-head-actions .game-view-choice>div{width:104px}.game-head-actions .game-view-choice button{font-size:9px}
  .game-stage[data-primary-view=tab] .game-tab-assist canvas,.game-stage[data-primary-view=pitch] .game-arena canvas{height:315px}
  .game-controls{justify-content:space-between}.game-controls button{padding-inline:9px}.game-readout{display:none}
  .practice-focus .game-stage{grid-template-rows:46px 94px minmax(170px,1fr) 74px 96px!important}.practice-focus .game-setup{grid-template-columns:1fr!important;gap:2px}.practice-focus .game-setup select{height:34px}.practice-focus .game-tempo-row button{height:30px}.practice-focus .game-speed-control input{height:30px;min-height:30px}
}
@media(orientation:landscape) and (max-height:600px){
  .game-panel.practice-focus .game-stage{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:42px 48px minmax(110px,1fr) 68px 52px!important}
  .practice-focus .game-songbar{grid-column:1!important;grid-row:1!important}.practice-focus .game-setup{grid-column:1!important;grid-row:2!important;grid-template-columns:minmax(160px,230px) minmax(230px,1fr)!important;padding:3px 10px}
  .practice-focus .game-stage[data-primary-view=tab] .game-tab-assist{grid-column:1!important;grid-row:3!important}.practice-focus .game-stage[data-primary-view=tab] .game-arena{grid-column:1!important;grid-row:4!important}
  .practice-focus .game-stage[data-primary-view=pitch] .game-arena{grid-column:1!important;grid-row:3!important}.practice-focus .game-stage[data-primary-view=pitch] .game-tab-assist{grid-column:1!important;grid-row:4!important}
  .practice-focus .game-transport-dock{grid-column:1!important;grid-row:5!important;padding:3px 10px}.practice-focus .game-controls{grid-column:auto!important;grid-row:auto!important}.practice-focus .game-scrubber{grid-column:auto!important;grid-row:auto!important}
}