/* Training only: the original piano, audio controls and live room keep their styles. */
#train-overlay{background:rgba(17,35,26,.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:28px;align-items:center}
#train-card,#train-fs-top,#train-fs-setup,#train-fs-metro,#scale-setup,#scale-run,#ivi-setup,#ivi-run,#legacy-fs{--white:#1a2c21;--g1:#53695b;--g2:#617669;--g3:#6c7c72;--p1:#ffffffb8;--p2:#ffffffc9;--b1:#d9e6dd;--b2:#cfddd3;--b3:#99b8a4;--local-key:#17773d;--local-key2:#3ecf6a;--red:#a83232;color:#1a2c21;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#train-card{width:min(900px,100%);max-width:900px;max-height:calc(100dvh - 56px);padding:34px;border:1px solid #fff;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,248,241,.96));box-shadow:0 35px 100px #0c201f40,0 1px 0 white inset;overflow:auto}
#train-head{margin-bottom:12px;align-items:center;gap:15px}
#train-head h2{font:650 clamp(27px,4vw,36px)/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-1.2px;color:#183124;margin:6px 0 0}
.train-eyebrow{font-size:10px;letter-spacing:.17em;color:#49725a;font-weight:650}
#train-close{border:1px solid #d2e2d7;background:#fff9;width:38px;height:38px;color:#314d3c;font-size:17px;flex:none;border-radius:50%}
.train-intro{font-size:14px;line-height:1.6;color:#5a7162;margin:0 0 26px;max-width:550px}
#train-card .train-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px}
#train-card .train-mode{text-align:left;min-width:0;position:relative;appearance:none;padding:18px 15px;min-height:146px;border:1px solid #d4e1d8;border-radius:19px;background:#ffffffb3;color:#273e2f;box-shadow:0 2px 7px #19312304;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s;font-family:inherit}
#train-card .train-mode:hover{background:#fff;border-color:#8eb49b;box-shadow:0 5px 18px #1931230c}
#train-card .train-mode.sel{background:linear-gradient(145deg,#effcf2,#e2f7e7);border-color:#329653;box-shadow:0 0 0 1px #329653 inset}
#train-card .tm-icon{font-size:23px;margin:0 0 12px}
#train-card .tm-title{font-size:13px;font-weight:650;letter-spacing:-.15px;color:#243d2d;line-height:1.3;margin-bottom:6px}
#train-card .tm-sub{font-size:11px;color:#5d7063;line-height:1.5}
#train-card .train-mode.locked{opacity:.72}
#train-card .tm-lock{position:absolute;top:12px;right:12px;font-size:11px}
#train-card .train-cat-chip{background:#ffffffb0;border-color:#d6e3da;border-radius:10px;color:#3d5846;font-size:12px;padding:8px 12px}
#train-card input{accent-color:#218d48}
#train-card #train-diff{display:flex;width:fit-content;padding:4px;background:#dce8e080;border:1px solid #d2dfd7;border-radius:13px;gap:3px;margin:20px 0}
#train-card .diff-btn{border:0;border-radius:9px;font-family:inherit;background:transparent;color:#4b6353;padding:8px 17px;font-size:12px;letter-spacing:0;text-transform:none}
#train-card .diff-btn.sel{background:white;color:#1e5b33;box-shadow:0 2px 7px #16281c12}
#train-card #train-score{display:flex;justify-content:flex-start;gap:28px;border-top:1px solid #d9e4dc;padding:20px 0 0;margin:16px 0}
#train-card .ts-box{background:none;border:0;padding:0;min-width:54px;text-align:left}
#train-card .tsv{font:600 23px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#274c34}
#train-card .tsl{font-size:10px;letter-spacing:.03em;color:#657b6b;margin-top:4px}
#train-card #train-exercise{border:1px solid #d5e4d9;border-radius:20px;background:#fff9;padding:24px;margin-top:20px}
#train-card #train-prompt{font:600 25px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#234e31}
#train-card #train-instruction{font-size:13px;color:#5c7464;line-height:1.6}
#train-card #train-feedback{font-size:13px;line-height:1.5}
#train-card .train-btn,#legacy-fs .train-btn{font:600 13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;border-radius:13px;background:#3ecf6a;color:#092d16;padding:12px 18px;letter-spacing:0;border:1px solid #32bd5b;min-height:44px;text-transform:none}
#train-card .train-btn.ghost,#legacy-fs .train-btn.ghost{background:#fff9;color:#3b5c46;border-color:#ccdcd1}
.train-auto{display:flex;align-items:center;justify-content:center;gap:8px;flex-basis:100%;font:12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#577160;margin:0 0 8px}
.train-auto input{accent-color:#208a46;width:16px;height:16px}
#train-card .train-choice,#legacy-fs .train-choice{font:600 14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:#30513b;border:1px solid #c4d7ca;padding:10px 18px;border-radius:12px;min-height:44px}
#train-card .train-choice.correct,#legacy-fs .train-choice.correct{background:#ddf5e4;border-color:#2c9850;color:#1b6433}
#train-card .train-choice.wrong,#legacy-fs .train-choice.wrong{background:#fff0ef;border-color:#cf7974;color:#9a2e2e}
#train-fs{background:radial-gradient(ellipse at 18% 0,#d9f0e2,transparent 45%),linear-gradient(135deg,#f6faf7,#edf4f0);padding:38px 24px 16px;gap:18px}
#train-fs-top{margin-top:10px}
#train-fs #train-fs-chord{font:650 clamp(27px,4vw,42px)/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-1px;color:#204f32}
#train-fs #train-fs-instr{font-size:14px;letter-spacing:0;line-height:1.6;color:#587160;margin:12px auto 0;max-width:640px}
#train-fs #train-fs-count{color:#5b7464;font-size:12px}
#train-fs #train-fs-progress{height:7px;background:#d5e5db;border:0;max-width:320px;margin-top:20px}
#train-fs #train-fs-fill{background:linear-gradient(90deg,#208c47,#3ecf6a)}
#train-fs #train-fs-close{background:#ffffffc9;border:1px solid #cbded1;color:#31573d;box-shadow:0 3px 15px #0d281311;border-radius:50%;top:18px;right:22px}
#train-fs-setup,#scale-setup,#ivi-setup{width:min(840px,100%);padding:24px;border:1px solid #fff;border-radius:25px;background:#ffffffa3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 40px #1439230b}
#train-fs .tfs-level,#train-fs .ivi-mode-card,#train-fs .ivi-voicing-card,#train-fs .ivi-step-card{background:#ffffffc4;border-color:#cfdfd4;border-radius:16px;min-height:72px}
#train-fs .tfs-level.sel,#train-fs .ivi-mode-card.sel,#train-fs .ivi-voicing-card.sel,#train-fs .ivi-step-card.sel{background:#e6f8eb;border-color:#309b53}
#train-fs .tfs-level-name,#train-fs .ivi-card-name{color:#294b35;font-family:inherit;font-weight:650;font-size:15px}
#train-fs .tfs-level-desc,#train-fs .ivi-card-desc{font-size:12px;line-height:1.6;color:#5b7463}
#train-fs .ivi-section-title{font-size:11px;letter-spacing:.07em;color:#597560}
#train-fs .tfs-btn,#train-fs .tfs-tempo-btn{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;border-radius:12px;min-height:40px;letter-spacing:0}
#train-fs .tfs-btn:not(.ghost):not(.quit):not(.learn-toggle),#train-fs #tfs-start-btn,#train-fs #scale-start-btn,#train-fs #ivi-start-btn{background:#3ecf6a;color:#092d16;border:1px solid #32bd5b;border-radius:14px;font-family:inherit;font-weight:600;letter-spacing:0;text-transform:none}
#train-fs .tfs-btn.learn-toggle.on{background:#fff4d4;color:#765c13;border-color:#cdb768}
#train-fs .tfs-space-hint{color:#6a7f71;font-size:11px}
#train-fs #legacy-fs{width:min(850px,100%)}
#legacy-fs #train-exercise{width:100%;padding:28px;background:#ffffffb8;border:1px solid #fff;border-radius:24px;box-shadow:0 12px 40px #1439230b}
#legacy-fs #train-prompt{font:600 32px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.6px;color:#225c35}
#legacy-fs #train-instruction{font-size:14px;color:#526d5b;line-height:1.6}
#legacy-fs #train-feedback{font:14px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:24px;color:#536d5b}
#train-fs #train-fs-feedback.ok,#train-fs #scale-feedback.ok,#train-fs #ivi-feedback.ok,#legacy-fs #train-feedback.ok{color:#1b7037}
#train-fs #train-fs-feedback.err,#train-fs #scale-feedback.err,#train-fs #ivi-feedback.err,#legacy-fs #train-feedback.ko{color:#ad3830}
#train-fs #train-fs-piano-slot{flex-shrink:0;padding-top:6px}
:is(#train-card,#train-fs-setup,#ivi-setup,#scale-setup,#legacy-fs) :is(button,select,input):focus-visible{outline:3px solid #278e49;outline-offset:3px}
@media(max-width:700px){#train-overlay{padding:12px}#train-card{padding:23px 18px;border-radius:24px;max-height:calc(100dvh - 24px)}#train-card .train-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#train-card .train-mode{min-height:130px;padding:16px}#train-fs{padding:64px 12px 12px}#train-fs-setup,#scale-setup,#ivi-setup{padding:18px 12px}#tfs-levels{gap:8px}#train-fs .tfs-level{min-width:130px;padding:15px;flex:1}#legacy-fs #train-exercise{padding:22px 14px}.train-intro{font-size:13px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#train-card *,#train-fs *{transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){#train-card,#train-fs-setup,#scale-setup,#ivi-setup,#legacy-fs #train-exercise{background:#f6fbf7;backdrop-filter:none;-webkit-backdrop-filter:none}#train-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){#train-card,#train-fs-setup,#scale-setup,#ivi-setup,#legacy-fs #train-exercise{background:#fff;border-color:#536c5b}#train-card .tm-sub,.train-intro{color:#314e3b}}

body:is(.legacy-mode,.scale-mode,.ivi-mode) #train-fs-progress,body:is(.legacy-mode,.scale-mode,.ivi-mode) #train-fs-count{display:none}
#legacy-fs-slot{width:min(720px,100%)}

:is(#train-card,#legacy-fs) #train-prompt em{font:inherit;color:#208849}

/* One shared volume dial for the timed training modules. */
#training-metro-control{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;width:fit-content;margin:16px auto 0;padding:9px 17px;border:1px solid #ffffffed;border-radius:22px;background:linear-gradient(135deg,#ffffffe0,#f0f8f2bd);box-shadow:0 5px 20px #1d493010,inset 0 1px 0 #fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#284a34}
.training-metro-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.training-metro-copy span:first-child{font-size:13px;font-weight:650;letter-spacing:-.1px}
.training-metro-copy span:last-child{font-size:11px;color:#607366}
#training-metro-control .knob-dial{width:48px;height:48px;flex:none;padding:0;border:1px solid #b4cdbc;border-radius:50%;background:conic-gradient(from 225deg,#299c51 0deg var(--knob-sweep),#cfdfd4 var(--knob-sweep) 270deg,transparent 270deg 360deg);box-shadow:0 3px 9px #234d3020,inset 0 1px 0 #fff;touch-action:none}
#training-metro-control .knob-cap{inset:5px;border-radius:50%;background:linear-gradient(145deg,#ffffff,#e2ede6);box-shadow:inset 0 1px 2px #fff,inset 0 -2px 4px #8eaf9a55}
#training-metro-control .knob-pointer{top:7px;height:10px;background:#25643b;transform-origin:50% 16px}
#training-metro-control .knob-dial:focus-visible{outline:3px solid #208849;outline-offset:4px}
#training-metro-value{min-width:50px;text-align:right;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:#285039}
#training-metro-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){#training-metro-control{margin-top:12px;padding:7px 14px;gap:12px}}
@media(prefers-reduced-transparency:reduce){#training-metro-control{background:#f4faf6;backdrop-filter:none;-webkit-backdrop-filter:none}}