:root{--feedback-bg:#fff;--feedback-row:#f8f9fd;--feedback-alternate:#edf0f7;--feedback-grid:#737f95;--feedback-bar:#6659ac;--feedback-note:#e4dfff;--feedback-note-ink:#30236c;--feedback-note-line:#6553a5;--feedback-actual:#975018;--feedback-uncertain:#526178;--feedback-white:#fbfcff;--feedback-white-ink:#46516c;--feedback-black:#202c4c;--feedback-key-line:#778399;--feedback-on-black:#fff;--feedback-bass:#8c5815}
:root[data-creator-color-scheme=dark]{--feedback-bg:#191d25;--feedback-row:#20242e;--feedback-alternate:#292e39;--feedback-grid:#7f8ba0;--feedback-bar:#b0a4ee;--feedback-note:#383351;--feedback-note-ink:#ece8ff;--feedback-note-line:#c3baff;--feedback-actual:#f1b46e;--feedback-uncertain:#b4bdcf;--feedback-white:#b9c3d5;--feedback-white-ink:#192237;--feedback-black:#10151c;--feedback-key-line:#8492a9;--feedback-on-black:#f2f4fa;--feedback-bass:#e9b75e}
.has-site-shell :is(input:not([type=range]):not([type=checkbox]),select,textarea){background:var(--site-raised);color:var(--site-ink);border-color:var(--feedback-key-line);color-scheme:inherit}
.has-site-shell{--green-light:var(--site-soft);--feedback-note:var(--site-soft);--feedback-note-ink:var(--site-ink);--feedback-note-line:var(--site-accent);--feedback-bar:var(--site-accent)}
.rsl-logo{width:36px;height:36px;flex-shrink:0;color:var(--cos-accent,var(--site-accent,#6553a5));--rsl-logo-ink:var(--cos-on-accent,var(--site-on,#fff));stroke:none!important}
.has-site-shell :is(.bank-heading,.environment-note,.score-hero){background:var(--site-surface);border-color:var(--site-line);color:var(--site-ink)}
.has-site-shell :is(.bank-heading,.environment-note,.score-hero) :is(label,div,b,strong,span,p){color:inherit}
.has-site-shell .score-hero-copy>strong[data-grade=retry]{color:var(--feedback-actual)}
.has-site-shell :is(input,textarea)::placeholder{color:var(--site-muted);opacity:1}
.has-site-shell input[type=range]{background:var(--site-raised);color:var(--site-ink);accent-color:var(--site-accent)}
.has-site-shell button{transition:transform 120ms ease}
.has-site-shell :is(button,input,select,textarea):disabled{opacity:1;color:var(--site-muted);background:var(--site-surface);border-color:var(--site-line)}
.has-site-shell :is(dialog,.app-drawer,.settings-card,.sound-card,.graph-card,.result-card,.live-card,.practice-tip,.local-badge){background:var(--site-raised);color:var(--site-ink);border-color:var(--site-line)}
.has-site-shell :is(dialog,.settings-card,.sound-card,.graph-card,.result-card,.live-card) :is(p,small,label,h2,h3,summary,th,td){color:inherit}
.has-site-shell :is(.overline,.muted,.small-note,.setting-row,.graph-legend,.graph-bottom,.source-context,.drawer-scroll,.feedback-heading,.keyboard-legend,.result-summary,.metrics span,.metrics small){color:var(--site-muted)}
.has-site-shell :is(.drawer-header,.drawer-stop,.mode-choice,.shared-volume,.custom-grid label,.source-details,.source-note){background:var(--site-raised);color:var(--site-ink);border-color:var(--site-line)}
.has-site-shell :is(.cue-volume-setting,.adaptive-status,.pitch-target,.audio-path,.exercise-tab,.exercise-tab.active,.practice-tip,.graph-empty){background:var(--site-surface);color:var(--site-ink);border-color:var(--site-line)}
.has-site-shell :is(.settings-card,.live-card,.graph-card,.result-card) :is(span,b,small){color:inherit}
.has-site-shell :is(.settings-card,.live-card,.graph-card,.result-card) :is(.tempo-header,.range-labels,.setting-row,.tuner-labels,.meter-label,.pitch-reading>span){color:var(--site-muted)}
.has-site-shell .exercise-tab :is(strong,b){color:var(--site-ink)}
.has-site-shell .exercise-tab :is(span,small){color:var(--site-muted)}
.has-site-shell .app-drawer :is(.tempo-header,.tuner-labels,.meter-label,.onset-reading,.input-level,.tuner-scale){color:var(--site-muted)}
.has-site-shell .app-drawer :is(.tempo-header,.tuner-labels,.meter-label,.onset-reading,.input-level,.tuner-scale) :is(label,span,b,strong){color:inherit}
.has-site-shell :is(.progression-beats span,.progression-chords){background:var(--site-soft);color:var(--site-ink)}
.has-site-shell .progression-beats .active{background:var(--site-accent);color:var(--site-on)}
.has-site-shell .app-drawer :is(.tuner-label,.onset-row,.mic-level){color:var(--site-muted)}
.has-site-shell .app-drawer :is(.tuner-label,.onset-row,.mic-level) :is(span,b,strong){color:inherit}
.has-site-shell .app-drawer .exercise-tab>span{color:var(--site-muted)}
.has-site-shell :is(main>footer>span,.photo-steps){color:var(--site-muted)}
.has-site-shell .photo-button.photo-primary{background:var(--site-accent);color:var(--site-on);border-color:var(--site-accent)}
.has-site-shell dialog .fields a{color:var(--site-accent)}
.has-site-shell :is(.graph-wrapper,.live-curve-panel,.curve-plot,#pitch-graph,#live-curve,#keyboard,#progression-keyboard){background:var(--feedback-bg);color:var(--site-ink)}
.has-site-shell .white-key{fill:var(--feedback-white);stroke:var(--feedback-key-line)}
.has-site-shell .black-key{fill:var(--feedback-black);stroke:var(--feedback-key-line)}
.has-site-shell .active-key.correct{fill:var(--site-accent)}
.has-site-shell .active-key.wrong{fill:var(--feedback-actual)}
.has-site-shell .bass-key{fill:var(--feedback-bass)}
.has-site-shell .key-dot{fill:var(--site-on);stroke:none}
.practice-focus .site-header,.practice-focus main>header{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:4px 12px;min-height:56px;height:56px;box-sizing:border-box;flex-shrink:0}
.practice-focus .site-header>a,.practice-focus main>header>a{width:auto;min-width:0;display:flex;align-items:center;gap:8px;flex:1;text-decoration:none;color:var(--site-ink);padding:0}
.practice-focus .site-header>a img,.practice-focus main>header>a img{width:36px;height:36px;flex-shrink:0}
.practice-brand-title{display:flex;flex-direction:column;min-width:0;white-space:nowrap}
.practice-brand-title strong{font-size:16px;line-height:1.3;letter-spacing:0}
.practice-focus .practice-brand-title small{display:block!important;font-size:10px;line-height:1.3;letter-spacing:0;color:var(--site-muted)}
.practice-focus .training-switch{order:3;flex:none}
.practice-focus .training-switch a{font-size:13px;padding:0;width:44px;height:44px;min-width:44px;max-width:44px;min-height:44px;flex:0 0 44px;box-sizing:border-box}
.practice-focus :is(#open-settings,#settings-open){order:4;display:grid;place-items:center;min-width:44px;width:44px;min-height:44px;height:44px;margin:0;padding:10px;color:var(--site-ink);background:transparent;border:1px solid var(--site-line);border-radius:8px}
.practice-focus :is(#open-settings,#settings-open) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.practice-focus .app-actions{gap:8px}
.practice-focus .app-actions button{flex:1}
.practice-focus .practice-nav-toggle{flex:0 0 44px!important;min-width:44px!important;width:44px;height:44px;min-height:44px!important;display:grid;place-items:center;padding:0!important;background:var(--site-raised);color:var(--site-accent);border:1px solid var(--feedback-key-line);border-radius:8px}
.practice-nav-toggle svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor}
.practice-focus .active-practice-action{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;flex:1;background:var(--site-accent);color:var(--site-on);border-color:var(--site-accent)}
.practice-focus #active-practice-label{font-size:13px;white-space:nowrap}
.practice-focus #transport-time{display:inline-block;width:12ch;flex:none;font-size:11px;line-height:1.3;text-align:right;white-space:nowrap;margin:0;color:inherit;font-variant-numeric:tabular-nums}
.practice-focus #stop[hidden]{display:none!important}
.practice-focus :is(.transport,.transport-zone){min-width:0}
.practice-focus .transport{flex-wrap:nowrap;gap:8px}
@media(max-width:900px){
 body.practice-focus{--site-bottom:0px;padding-bottom:env(safe-area-inset-bottom)}
 .practice-focus .global-site-nav{display:none;inset:auto 8px auto;bottom:76px;height:auto;min-height:64px;padding:6px;background:var(--site-raised);border:1px solid var(--feedback-key-line);border-radius:14px;box-shadow:0 8px 28px #0004}
 .practice-focus .global-site-nav.practice-nav-open{display:grid}
 .practice-focus .global-site-nav>a,.practice-focus .global-site-nav>button{min-height:56px;padding:5px 0}
}
@media(min-width:901px){.practice-focus .practice-nav-toggle{display:none}}
@media(max-width:359px){.practice-focus .site-header,.practice-focus main>header{padding-inline:8px;gap:4px}.practice-brand-title strong{font-size:14px}.practice-focus .practice-brand-title small{font-size:9px}.practice-focus .site-header>a img,.practice-focus main>header>a img{width:30px;height:30px}.practice-focus .training-switch a{padding:0}}
.has-site-shell{--practice-error-surface:#fff0ec;--practice-error-line:#9d3d28}
:root[data-creator-color-scheme=dark] .has-site-shell{--practice-error-surface:#3b2525;--practice-error-line:#efac9b}
.has-site-shell #progression-panel .progression-choices button:is(.selected,.correct){background:var(--site-soft);color:var(--site-ink);border-color:var(--site-accent)}
.has-site-shell #progression-panel .progression-choices button.wrong{background:var(--practice-error-surface);color:var(--site-ink);border-color:var(--practice-error-line)}
.has-site-shell #progression-panel .progression-choices button:is(.selected,.correct,.wrong) :is(strong,small){color:var(--site-ink)}
.has-site-shell #settings .settings-close{width:44px;height:44px;min-height:44px;padding:10px;border:0;background:transparent;color:var(--site-ink);box-shadow:none}
.has-site-shell #settings .settings-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.has-site-shell #settings .settings-close:focus:not(:focus-visible){outline:none}
.has-site-shell #settings .settings-close:focus-visible{outline:2px solid var(--site-accent);outline-offset:-2px}
.has-site-shell #settings-title:focus{outline:none}

/* Let the active transport shrink beside navigation without clipping its label. */
@media(max-width:359px){
 .practice-focus .transport .active-practice-action{min-width:0;flex-direction:column;gap:2px;padding-inline:6px}
 .practice-focus #active-practice-label{max-width:100%;font-size:12px;line-height:16px}
 .practice-focus #transport-time{width:auto;line-height:14px;font-size:10px;text-align:center}
}