:root{--site-canvas:#fff;--site-surface:#f8f9fd;--site-raised:#fff;--site-ink:#11182c;--site-muted:#46516c;--site-line:#e2e6f0;--site-accent:#5747cf;--site-soft:#f1efff;--site-on:#fff;--site-bottom:calc(64px + env(safe-area-inset-bottom));--site-top:0px}
:root[data-creator-color-scheme=dark]{--site-canvas:#111318;--site-surface:#191d25;--site-raised:#20242e;--site-ink:#f2f4fa;--site-muted:#c0c7d5;--site-line:#363e4d;--site-accent:#c3baff;--site-soft:#2c2844;--site-on:#161b26}
:root[data-creator-palette=ocean]{--site-accent:#126484;--site-soft:#eaf4fa}
:root[data-creator-palette=sand]{--site-accent:#855520;--site-soft:#f8f0e4}
:root[data-creator-color-scheme=dark][data-creator-palette=ocean]{--site-accent:#a1d7ee;--site-soft:#1c3342}
:root[data-creator-color-scheme=dark][data-creator-palette=sand]{--site-accent:#e6c699;--site-soft:#393022}
:root[data-creator-theme=deep-ocean-original]{--site-canvas:#030b11;--site-surface:#081b28;--site-raised:#081b28;--site-ink:#f5f1e7;--site-muted:#bac6cd;--site-accent:#f2be51;--site-soft:#12344a}
:root[data-creator-theme=bright-deep-ocean]{--site-canvas:#06131c;--site-surface:#0d2d42;--site-raised:#0d2d42;--site-ink:#f8f4e9;--site-muted:#c4d7df;--site-accent:#efbd5b;--site-soft:#16415c}
:root[data-creator-theme=warm-creative-night]{--site-canvas:#100f0d;--site-surface:#262019;--site-raised:#262019;--site-ink:#f4ead6;--site-muted:#d3c2a8;--site-accent:#e4b85e;--site-soft:#3d3020}
:root[data-creator-theme=light-reading]{--site-canvas:#e9e2d4;--site-surface:#f7f2e8;--site-raised:#f7f2e8;--site-ink:#17303c;--site-muted:#49616b;--site-accent:#855520;--site-soft:#eadbc2}
body.has-site-shell{--ink:var(--site-ink);--muted:var(--site-muted);--line:var(--site-line);--paper:var(--site-raised);--green:var(--site-accent);--bg:var(--site-raised);background:var(--site-canvas);color:var(--site-ink);height:100dvh;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:var(--site-bottom);overflow:hidden}
body.has-site-shell.harmony-unified>main{height:auto;min-height:0;flex:1;width:100%;background:var(--site-canvas)}
body.has-site-shell:not(.app-shell):not(.harmony-unified)>main{flex:1;min-height:0;width:100%;overflow:auto;overscroll-behavior:contain}
.has-site-shell :is(.site-header,main>header,.toolbar,.score-card,.graph-card,.settings-card,.result-card,.score-heading,.score-foot,.transport-zone,.sound-card,.entry,dialog,#reveal){background:var(--site-raised);color:var(--site-ink);border-color:var(--site-line)}
.has-site-shell :is(button,select,input){color:var(--site-ink);border-color:var(--site-line)}
.has-site-shell button{background:var(--site-raised)}
.has-site-shell :is(.primary,.button.primary,button[aria-pressed=true]){background:var(--site-accent);color:var(--site-on);border-color:var(--site-accent)}
.has-site-shell :is(.text-button,.training-switch a,main>footer a,.welcome p,.score-foot button){color:var(--site-accent)}
.has-site-shell :is(.training-switch a[aria-current],.progression-chords,.progression-beats span,.score-foot button,.shared-volume button,.shared-volume a){background:var(--site-soft);color:var(--site-ink);border-color:var(--site-line)}
.has-site-shell .progression-beats span.active{background:var(--site-accent);color:var(--site-on)}
.has-site-shell :is(.progression-choices button,.choices button):disabled{color:var(--site-muted)}
.has-site-shell .entry.dark{background:var(--site-accent);color:var(--site-on)}
.has-site-shell main a{color:var(--site-accent)}
.has-site-shell .staff-scroll{background:#fff;color:#173d31}
.has-site-shell #quick-tempo-confirm{background:var(--site-accent);color:var(--site-on)}
.has-site-shell :is(.choices,.progression-choices) button.correct{background:#eaf6ef;color:#19684e;border-color:#19684e}
.has-site-shell :is(.choices,.progression-choices) button.wrong{background:#ffedf0;color:#ae3344;border-color:#ae3344}
:root[data-creator-color-scheme=dark] .has-site-shell :is(.choices,.progression-choices) button.correct{background:#1c332b;color:#94d8b4;border-color:#94d8b4}
:root[data-creator-color-scheme=dark] .has-site-shell :is(.choices,.progression-choices) button.wrong{background:#3c252e;color:#f4a5b1;border-color:#f4a5b1}
.has-site-shell .harmony-unified footer,.has-site-shell.harmony-unified main footer{background:var(--site-raised);border-color:var(--site-line);padding-bottom:4px}
.global-site-header{display:none}
.has-site-shell .global-account{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--site-line);border-radius:50%;color:var(--site-ink);background:var(--site-raised);text-decoration:none;box-sizing:border-box}
.global-account>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.global-account:focus-visible{outline:3px solid var(--site-accent);outline-offset:2px}
.has-site-shell.app-shell .site-header>a.global-account,.has-site-shell.harmony-unified main>header>a.global-account{flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;order:5!important;margin:0!important;padding:0!important}
.has-site-shell .global-site-nav{position:fixed;inset:auto 0 0;z-index:60;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:var(--site-bottom);min-height:0;padding:0 4px env(safe-area-inset-bottom);margin:0;gap:0;background:var(--site-surface);border:0;border-top:1px solid var(--site-line);color:var(--site-muted)}
.has-site-shell .global-site-nav[data-count="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.has-site-shell .global-site-nav>a,.has-site-shell .global-site-nav>button{min-width:0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:400 11px/1.3 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;padding:7px 0;margin:0;border:0;border-radius:0;background:transparent;color:var(--site-muted);text-decoration:none}
.has-site-shell .global-site-nav [hidden]{display:none!important}
.has-site-shell .global-site-nav [aria-current=page],.has-site-shell .global-site-nav [aria-expanded=true]{color:var(--site-accent);font-weight:700}
.global-site-nav svg,.global-account svg,#global-course-dialog svg{width:22px;height:22px;flex-shrink:0}
.has-site-shell #global-course-dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(100dvh - 24px);overflow:auto;padding:18px 20px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--site-line);border-radius:24px 24px 0 0;background:var(--site-raised);color:var(--site-ink);box-sizing:border-box}
#global-course-dialog::backdrop{background:#0006}
#global-course-dialog .global-course-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#global-course-dialog .global-course-heading strong{font-size:17px}
#global-course-dialog .global-course-heading button{min-width:44px;min-height:44px;border:0;font-size:26px;background:transparent}
#global-course-dialog>a{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 8px;color:inherit;text-decoration:none;font-size:15px;border-radius:10px}
#global-course-dialog>a:hover{background:var(--site-soft)}
.global-site-nav :focus-visible,#global-course-dialog :focus-visible,.global-site-header :focus-visible{outline:2px solid var(--site-accent);outline-offset:-3px}
@media(max-height:600px){
 .has-site-shell #progression-panel .progression-content{grid-template-rows:34px 36px 20px 24px minmax(96px,1fr) 34px 24px;gap:2px}
 .has-site-shell #progression-panel #progression-feedback{height:34px}
 .has-site-shell #progression-panel #progression-keyboard svg{height:20px}
 .has-site-shell #progression-panel #progression-status{font-size:11px;line-height:12px}
 .has-site-shell.harmony-unified #reveal .keyboard-legend{display:none}
 .has-site-shell.harmony-unified #reveal .feedback-heading{min-height:16px;line-height:16px}
 .has-site-shell.harmony-unified #keyboard svg{height:24px}
 .has-site-shell.harmony-unified #choices button{padding:1px!important}
 .has-site-shell .dense-options #choices button{padding:0!important}
 .has-site-shell .dense-options #choices b{line-height:1}
}
@media(min-width:901px){
 :root{--site-bottom:0px;--site-top:64px}
 .has-site-shell .global-site-header{height:64px;min-height:64px;flex-shrink:0;display:flex;align-items:center;gap:20px;padding:0 24px;border-bottom:1px solid var(--site-line);background:var(--site-surface);color:var(--site-ink);box-sizing:border-box}
 .global-site-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:20px;font-weight:650;white-space:nowrap}
 .global-site-brand img{width:40px;height:40px}
 .has-site-shell .global-site-nav{position:static;display:flex;flex:1;height:100%;padding:0;border:0;justify-content:center;gap:4px}
 .has-site-shell .global-site-nav>a,.has-site-shell .global-site-nav>button{flex-direction:row;min-height:44px;height:100%;min-width:58px;padding:0 10px;font-size:14px;border-bottom:2px solid transparent}
 .has-site-shell .global-site-nav svg{display:none}
 .has-site-shell .global-site-nav [aria-current=page]{border-bottom-color:currentColor}
 .global-account{display:flex;align-items:center;gap:6px;min-height:44px;color:var(--site-accent);text-decoration:none;white-space:nowrap;font-size:14px}
 .has-site-shell #global-course-dialog{inset:76px auto auto 50%;width:360px;transform:translateX(-50%);border-radius:18px;padding:16px}
}
@media(max-height:450px) and (min-width:600px){
 .has-site-shell.harmony-unified>main{max-width:none}
 .has-site-shell #progression-panel .progression-content{grid-template-rows:30px 20px minmax(60px,1fr) 26px;gap:2px 8px}
 .has-site-shell #progression-panel #progression-feedback{height:26px}
 .has-site-shell #progression-panel #progression-keyboard svg{height:14px}
}

/* 2026-10-10: shared product frame; instrument and brand colors are semantic. */
html body.has-site-shell :is(.training-unified-brand .rsl-logo,.brand-mark){color:#5747cf!important;--rsl-logo-ink:#fff!important;--site-on:#fff!important;filter:none!important;opacity:1!important}
html body.has-site-shell :is(.training-unified-brand,.dictionary-header .brand){color:var(--site-ink)!important}
html[data-creator-color-scheme=dark] body.has-site-shell>.global-site-header{--site-ink:#f2f4fa;--site-muted:#c0c7d5;--site-accent:#c3baff;color:#f2f4fa!important}
html body.has-site-shell>.global-site-header{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
@media(min-width:901px){
 html body.has-site-shell{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important}
 :root{--training-frame-max:1560px;--training-frame-gutter:clamp(16px,2.5vw,40px);--training-frame-width:min(calc(100% - 2 * var(--training-frame-gutter)),var(--training-frame-max))}
 html body.has-site-shell>.global-site-header{display:flex!important;height:64px!important;min-height:64px!important;flex:0 0 64px!important}
 html body.has-site-shell>.global-site-header>.global-site-nav{display:flex!important;position:static!important;inset:auto!important;width:auto!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
 html body.has-site-shell>.global-site-header>.global-account{display:flex!important}
 html body.has-site-shell>.global-site-header .global-site-nav [aria-current=page]{border-bottom-color:transparent!important;text-decoration:none!important}
 html body.has-site-shell:is(.theory-page,.rhythm-page,.app-shell,.chord-dictionary,.harmony-unified,.mode-lab-integrated,.training-home)>main{width:var(--training-frame-width)!important;max-width:var(--training-frame-max)!important;min-width:0!important;margin-inline:auto!important;padding-inline:0!important;box-sizing:border-box!important;height:auto!important;min-height:0!important;flex:1!important;overflow:visible!important}
 html body.has-site-shell>:is(.training-unified-header,.dictionary-header){width:100%!important;max-width:none!important;margin-inline:0!important;box-sizing:border-box!important}
 html body.has-site-shell main>:is(.training-unified-header,.dictionary-header){width:100vw!important;max-width:none!important;grid-column:1/-1;box-sizing:border-box!important;margin:0!important;position:relative!important;left:calc(-1 * max(var(--training-frame-gutter),(100vw - var(--training-frame-max))/2))!important;transform:none!important}
 html body.has-site-shell:is(.mode-lab-integrated,.app-shell,.rhythm-page,.harmony-unified,.theory-page,.chord-dictionary) :is(header.training-unified-header,header.dictionary-header){height:56px!important;min-height:56px!important;flex-shrink:0;padding:6px 12px!important}
 html body.has-site-shell :is(header.training-unified-header,header.dictionary-header)>:is(.training-mode-trigger,#menu-trigger){position:absolute!important;right:12px!important;top:6px!important;transform:none!important;translate:none!important;margin:0!important}
 html body.has-site-shell :is(.practice-nav-toggle,#site-nav-trigger){display:none!important}
 html body.has-site-shell.theory-page.theory-home-one-screen>main.theory-shell{height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important;min-height:0!important}
 html body.has-site-shell.theory-page>main{grid-template-columns:minmax(0,1fr)!important}
 html body.has-site-shell.theory-book .theory-course-index{max-width:none!important;width:100%!important;margin-inline:0!important}
 html body.has-site-shell.mode-lab-integrated>main.container>:is(.tabs,section){width:100%!important;max-width:none!important;margin-inline:0!important}
 html body.has-site-shell.chord-dictionary #app{margin-block:0!important}
 html body.has-site-shell.chord-dictionary .workspace{width:100%!important;max-width:none!important}
 html body.has-site-shell.chord-dictionary .dictionary-footer{grid-template-columns:46px 176px 176px}
}

/* 2026-10-10 r2: common global gutter, independent sight-reading tools. */
@media(min-width:901px){
 html body.has-site-shell>.global-site-header{padding:0 24px!important;gap:20px!important}
 html body.has-site-shell.app-shell>.app-actions{left:auto!important;right:80px!important;transform:none!important;width:auto!important;max-width:calc(50vw - 140px)!important}
}

@media(min-width:901px){html body.has-site-shell:is(.theory-page,.rhythm-page,.app-shell,.chord-dictionary,.harmony-unified,.mode-lab-integrated)>.global-site-header{padding-inline:24px!important;gap:20px!important}}

@media(max-width:900px){
 html body.has-site-shell:is(.theory-page,.rhythm-page,.app-shell,.chord-dictionary,.harmony-unified,.mode-lab-integrated) :is(header.training-unified-header,header.dictionary-header){height:56px!important;min-height:56px!important;padding:6px 12px!important;box-sizing:border-box!important;position:relative!important}
 html body.has-site-shell :is(header.training-unified-header,header.dictionary-header)>:is(.training-mode-trigger,#menu-trigger){position:absolute!important;right:12px!important;top:6px!important;transform:none!important;translate:none!important;margin:0!important}
}