/* Shared appearance tokens. The system media query is also a no-script fallback. */
:root{
 --glitter-ink:#8a69bd;--glitter-gold:#a77c2d;--glitter-blue:#527cc0;
 --surface-soft:#f7f8fc;--surface-hover:#eeeefa;--primary-bg:#17233c;--primary-text:#fff;--primary-hover:#2b3652;
 --notation-ink:#26344d;--staff-line:#aab4c6;--note-done:#6c8e81;--notice-bg:#fff5e4;--notice-text:#775421;
 --stop-bg:#faeded;--stop-text:#884349;--stop-line:#eacbd0;--result-bg:#f2f8f4;--result-line:#cfdfd7;
 --meter-line:#cbd2df;--meter-bg:#e7ebf2;--meter-good:#abd6c7b8;--meter-zero:#286d60;--meter-halo:#ffffffd9;
 --intro-bg:#f2f4f8;--spotlight:conic-gradient(from 155deg at 50% 0,transparent 0deg,#fffefa70 8deg,#fffefa 25deg,#fffefa70 42deg,transparent 50deg);--wordmark-glow:#d4af5635;--intro-ink:#17233c;--intro-muted:#606a80;
 --intro-symbol:#6556b8;--intro-mark:linear-gradient(150deg,#ffffffc0,#ffffff50);--intro-border:#c9c2df;--intro-shadow:#17233c14;
}
:root[data-theme="dark"]{
 --glitter-ink:#ece1ff;--glitter-gold:#e4c477;--glitter-blue:#cae7ff;
 color-scheme:dark;--ink:#e8edf7;--muted:#aebbd0;--bg:#101722;--paper:#1a2333;--line:#34415a;--accent:#c1adff;--lav:#30294a;
 --good:#86d3bb;--good-bg:#193b33;--surface-soft:#202b3e;--surface-hover:#303b54;
 --primary-bg:#c1adff;--primary-text:#211831;--primary-hover:#d1c1ff;
 --notation-ink:#e8edf7;--staff-line:#72839e;--note-done:#8ccbb7;--notice-bg:#3b3020;--notice-text:#f2ce89;
 --stop-bg:#41282f;--stop-text:#ffc3cd;--stop-line:#7c4a59;--result-bg:#19372f;--result-line:#3c695b;
 --meter-line:#53617c;--meter-bg:#29364b;--meter-good:#3f796a;--meter-zero:#a8ead2;--meter-halo:#101722;
 --intro-bg:#101722;--spotlight:conic-gradient(from 155deg at 50% 0,transparent 0deg,#fff5d318 8deg,#fff5d332 25deg,#fff5d318 42deg,transparent 50deg);--wordmark-glow:#e9c57325;--intro-ink:#e8edf7;--intro-muted:#b9c5d9;
 --intro-symbol:#d8ceff;--intro-mark:linear-gradient(150deg,#ffffff12,#ffffff04);--intro-border:#ded5ff32;--intro-shadow:#080d1640;
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
 --glitter-ink:#ece1ff;--glitter-gold:#e4c477;--glitter-blue:#cae7ff;
 color-scheme:dark;--ink:#e8edf7;--muted:#aebbd0;--bg:#101722;--paper:#1a2333;--line:#34415a;--accent:#c1adff;--lav:#30294a;
 --good:#86d3bb;--good-bg:#193b33;--surface-soft:#202b3e;--surface-hover:#303b54;
 --primary-bg:#c1adff;--primary-text:#211831;--primary-hover:#d1c1ff;
 --notation-ink:#e8edf7;--staff-line:#72839e;--note-done:#8ccbb7;--notice-bg:#3b3020;--notice-text:#f2ce89;
 --stop-bg:#41282f;--stop-text:#ffc3cd;--stop-line:#7c4a59;--result-bg:#19372f;--result-line:#3c695b;
 --meter-line:#53617c;--meter-bg:#29364b;--meter-good:#3f796a;--meter-zero:#a8ead2;--meter-halo:#101722;
 --intro-bg:#101722;--spotlight:conic-gradient(from 155deg at 50% 0,transparent 0deg,#fff5d318 8deg,#fff5d332 25deg,#fff5d318 42deg,transparent 50deg);--wordmark-glow:#e9c57325;--intro-ink:#e8edf7;--intro-muted:#b9c5d9;
 --intro-symbol:#d8ceff;--intro-mark:linear-gradient(150deg,#ffffff12,#ffffff04);--intro-border:#ded5ff32;--intro-shadow:#080d1640;
}}
:root[data-theme="light"]{color-scheme:light}
body{background:var(--bg);color:var(--ink)}
.appearance-settings{margin:24px 0}.appearance-settings .field{max-width:420px;font-size:14px}.appearance-settings select{font-size:16px;min-height:48px}.appearance-settings p{font-size:16px;line-height:1.6;margin-top:14px}
.primary,.account-tabs button[aria-pressed=true]{background:var(--primary-bg);color:var(--primary-text)}
.primary:hover{background:var(--primary-hover)}
.brand-mark,.profile-avatar{background:var(--primary-bg);color:var(--primary-text)}
.secondary,.feedback,.mic-test-graphic{background:var(--surface-soft);color:var(--ink)}
.secondary:hover{background:var(--surface-hover)}
.feedback.hit{background:var(--good-bg)}
.controls select,.controls input,select,.tempo-entry input,.account-card input{background:var(--paper);color:var(--ink);border-color:var(--line)}
.account-card input::placeholder{color:var(--muted);opacity:1}
.exercise-tile,.stat{background:var(--paper);color:var(--ink)}
.exercise-tile:hover{background:var(--surface-soft);border-color:var(--accent)}
.next-card{background:linear-gradient(145deg,var(--lav),var(--paper))}
.listening-guide,.reflection{background:var(--surface-soft);border-color:var(--line)}
.notice,.account-setup-note{background:var(--notice-bg);color:var(--notice-text);border-color:var(--line)}
.result{background:var(--result-bg);border-color:var(--result-line)}
.stop{background:var(--stop-bg);color:var(--stop-text);border-color:var(--stop-line)}
#start-mic{background:var(--lav);color:var(--accent);border-color:var(--line)}
#start-mic:hover{background:var(--surface-hover)}
.menu-toggle{background:var(--surface-soft)}
.menu-toggle:hover,.icon-button:hover,.menu-nav button:hover{background:var(--surface-hover)}
.menu-nav button.active{background:var(--lav);color:var(--accent)}
.mode-badge{border-color:var(--line)}
.guide-stages li{border-color:var(--line)}
.guide-stages li[aria-current=step]{border-color:var(--accent)}
.guide-stages li[data-done=true]{border-color:var(--good)}
.mic-test-pointer{border-color:var(--paper);box-shadow:0 0 0 1px var(--line)}
.mic-test-zero{background:var(--accent)}
.pitch-track{background:repeating-linear-gradient(90deg,var(--meter-line) 0 1px,transparent 1px 10%),var(--meter-bg);border-color:var(--meter-line)}
.sweetspot{background:var(--meter-good)}.fine-zero{background:var(--meter-zero)}
.pitch-needle{box-shadow:0 0 0 2px var(--meter-halo)}.hold-track{background:var(--line)}
.sync-indicator[data-state=offline],.sync-indicator[data-state=error]{color:var(--notice-text)}
footer{color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--accent)}
.launch-screen{background:#101722;color:#e8edf7;--glitter-gold:#e4c477;--wordmark-glow:#e9c57325;--spotlight:conic-gradient(from 155deg at 50% 0,transparent 0deg,#fff5d318 8deg,#fff5d332 25deg,#fff5d318 42deg,transparent 50deg)}

/* Personal score workflow shares Fokus surfaces and the existing player. */
.library-import,.library-detail{margin-block:24px}.library-import details,.library-detail details{margin-block:20px;padding-block:14px;border-block:1px solid var(--line,#ddd)}.library-tools{display:flex;gap:24px;justify-content:space-between;align-items:end;flex-wrap:wrap}.library-item{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;text-align:left;border:0;border-bottom:1px solid var(--line,#ddd);background:transparent;color:inherit}.library-item strong,.library-item small{display:block}.library-item small{margin-top:5px;font-weight:400;color:var(--muted)}.library-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;margin-block:24px}.library-compare>div{min-width:0}.library-compare canvas{width:100%;height:auto;display:block;background:white;border-radius:8px;margin-block:16px}.library-detail input:not([type=checkbox]),.library-tools input{width:100%;min-width:0;padding:12px;border-radius:10px;border:1px solid var(--line,#bbb);background:var(--paper);color:inherit;font:inherit}.library-tools .score-selectors{margin:0}.library-detail .score-selectors{flex-wrap:wrap}.library-detail .button-row{flex-wrap:wrap}.library-detail .danger{color:var(--muted)}#library-status{min-height:1.5em}button[aria-pressed=true]{border-color:var(--accent);background:var(--lav)}@media(max-width:850px){.library-compare{grid-template-columns:1fr}.library-tools{display:block}.library-item{align-items:start;flex-wrap:wrap}.library-tools .score-selectors{margin-block:16px}}

/* Existing assessment categories; no percentage of singing ability. */
.skill-bars{display:grid;gap:1.35rem;margin:1.5rem 0}.skill-row>div:first-child{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.skill-row span{color:var(--muted);font-size:.875rem}.skill-segments{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.skill-segments i{height:8px;border-radius:4px;background:var(--line,#d4d8e0)}.skill-segments .filled{background:var(--accent,#93733d)}
@media(max-width:420px){.skill-row>div:first-child{display:grid;gap:.15rem}}

/* Imported songs keep separate, accessible Open and microphone Start actions. */
.library-open{flex:1;min-width:0;border:0;border-radius:0;padding:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}.library-open strong,.library-open small{overflow-wrap:anywhere}.library-item>.primary{flex:none;min-width:84px;min-height:44px}.library-open:focus-visible{outline:2px solid var(--accent);outline-offset:5px}