:root{color:#172026;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f3ee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,select{font:inherit}.app-shell{background:linear-gradient(135deg,#316f832e,#0000 34%),#f6f3ee;min-height:100vh;padding:24px}.trainer-layout{gap:18px;width:min(1440px,100%);margin:0 auto;display:grid}.home-layout{gap:20px;width:min(1120px,100%);margin:0 auto;display:grid}.home-header{padding:8px 0}.task-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.task-card{background:#ffffffe6;border:1px solid #1720261f;border-radius:8px;flex-direction:column;justify-content:space-between;min-height:220px;padding:20px;display:flex;box-shadow:0 20px 50px #17202614}.task-card h2{color:#172026;letter-spacing:0;margin:14px 0 10px;font-size:24px}.task-card p{color:#63717a;margin:0;line-height:1.45}.task-card button,.back-button{color:#244f5c;cursor:pointer;background:#fff;border:1px solid #17202629;border-radius:8px;width:fit-content;min-height:40px;padding:0 14px;font-weight:700}.task-card button:disabled{cursor:default;opacity:.5}.task-card button:hover:not(:disabled),.back-button:hover{background:#eef5f4;border-color:#244f5c80}.task-status,.task-status-ready{color:#63717a;background:#eef2f1;border-radius:999px;align-items:center;min-height:28px;padding:0 10px;font-size:13px;font-weight:700;display:inline-flex}.task-status-ready{color:#1f5d3f;background:#dff1e6}.setup-panel,.result-panel,.game-topbar,.exercise-panel{background:#ffffffe6;border:1px solid #1720261f;border-radius:8px;box-shadow:0 20px 50px #17202614}.setup-panel{gap:24px;padding:24px;display:grid}.setup-header{justify-content:space-between;align-items:end;gap:18px;display:flex}.setup-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.setting-section{align-content:start;gap:10px;min-width:0;display:grid}.setting-section-wide{grid-column:span 2}.settings-panel{grid-template-columns:minmax(150px,.55fr) minmax(360px,1fr) minmax(560px,1.6fr);align-items:center;gap:18px;padding:18px 20px;display:grid}.game-topbar{grid-template-columns:minmax(210px,1fr) minmax(110px,auto) minmax(180px,auto) minmax(180px,320px);align-items:center;gap:18px;padding:18px 20px;display:grid}.title-block{min-width:0}.translation-panel{grid-template-columns:minmax(170px,1fr) 28px minmax(170px,1fr);align-items:end;gap:10px;display:grid}.select-control{gap:8px;display:grid}.select-control span,.panel-label,.control-label{color:#63717a;margin:0;font-size:14px}.select-control select{color:#25333b;cursor:pointer;background:#fff;border:1px solid #17202629;border-radius:8px;width:100%;min-height:42px;padding:0 12px}.direction-arrow{color:#63717a;place-items:center;min-height:42px;font-size:20px;display:grid}.secondary-controls{grid-template-columns:minmax(190px,1fr) auto minmax(150px,320px);align-items:end;gap:14px;min-width:0;display:grid}.exercise-panel{flex-direction:column;gap:24px;min-height:620px;padding:28px;display:flex}.panel-label,.control-label{margin-bottom:8px}h1{letter-spacing:0;margin:0;font-size:30px;line-height:1.1}.control-group{gap:8px;display:grid}.segmented-control{border:1px solid #17202629;border-radius:8px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.segmented-control button{color:#25333b;cursor:pointer;overflow-wrap:anywhere;background:0 0;border:0;min-width:0;min-height:42px;padding:0 8px;line-height:1.15}.segmented-control button+button{border-left:1px solid #17202629}.range-control{grid-template-columns:repeat(3,1fr)}.repeat-control{grid-template-columns:repeat(5,1fr)}.two-option-control{grid-template-columns:repeat(2,minmax(0,1fr))}.three-option-control{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-control .segment-active{color:#fff;background:#244f5c}.toggle-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.interval-toggle-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.checkbox-card{color:#25333b;cursor:pointer;background:#fff;border:1px solid #17202629;border-radius:8px;align-items:center;gap:10px;min-height:42px;padding:0 12px;font-weight:700;display:flex}.checkbox-card span{overflow-wrap:anywhere;min-width:0}.checkbox-card input{accent-color:#244f5c;width:18px;height:18px}.setup-actions{justify-content:flex-end;display:flex}.primary-action-button{color:#fff;cursor:pointer;background:#244f5c;border:0;border-radius:8px;min-height:46px;padding:0 22px;font-weight:750}.primary-action-button:hover{background:#1c3f49}.progress-block{background:#f9faf8;border:1px solid #1720261f;border-radius:8px;min-width:100px;padding:10px 12px}.progress-block span,.progress-block small{display:block}.progress-block span{font-size:24px;font-weight:750;line-height:1}.progress-block small{color:#63717a;margin-top:4px}.result-panel{justify-items:start;gap:18px;padding:28px;display:grid}.result-stats{grid-template-columns:repeat(2,minmax(120px,1fr));gap:12px;display:grid}.result-stats div{background:#f9faf8;border:1px solid #1720261f;border-radius:8px;padding:14px 16px}.result-stats span,.result-stats small{display:block}.result-stats span{font-size:34px;font-weight:780;line-height:1}.result-stats small{color:#63717a;margin-top:6px}.result-actions{flex-wrap:wrap;gap:10px;display:flex}.stats-row{grid-template-columns:repeat(2,minmax(72px,1fr));gap:10px;display:grid}.stats-row div{background:#f9faf8;border:1px solid #1720261f;border-radius:8px;min-width:72px;padding:10px 12px}.stats-row span,.stats-row small{display:block}.stats-row span{font-size:24px;font-weight:750;line-height:1}.stats-row small{color:#63717a;margin-top:4px}.midi-block{gap:10px;min-width:0;display:grid}.midi-status{color:#63717a;align-items:center;gap:10px;min-width:0;font-size:14px;display:flex}.midi-status span:last-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.status-dot{background:#d9a441;border-radius:999px;flex:none;width:10px;height:10px}.midi-status-connected .status-dot{background:#2f7d57}.midi-status-error .status-dot,.midi-status-unsupported .status-dot{background:#b44a3b}.midi-button{color:#244f5c;cursor:pointer;background:#fff;border:1px solid #17202629;border-radius:8px;width:100%;min-height:40px;font-weight:700}.midi-button:hover:not(:disabled){background:#eef5f4;border-color:#244f5c80}.midi-button:disabled{cursor:default;opacity:.55}.prompt-area{gap:10px;display:grid}.prompt-card{color:#18242b;text-align:center;letter-spacing:0;background:#fffdf9;border:1px solid #1720261a;border-radius:8px;place-items:center;min-height:150px;padding:20px;font-size:clamp(34px,5vw,64px);font-weight:780;line-height:1.05;display:grid}.prompt-card-sound{align-content:center;gap:18px;font-size:clamp(30px,4vw,48px)}.prompt-card-staff{min-height:250px;padding:12px 20px}.prompt-card-keyboard{padding:16px}.prompt-card-keyboard .piano-keyboard{width:100%;min-height:180px}.staff-note{width:min(520px,100%);margin:0}.staff-note-svg{width:100%;height:auto;display:block}.staff-line,.staff-ledger-line{stroke:#263238;stroke-linecap:round;stroke-width:2px}.staff-ledger-line{stroke-width:2.4px}.staff-clef{fill:#263238;font-family:Times New Roman,Georgia,serif;font-size:58px;font-weight:400}.staff-note-head{fill:#172026}.staff-accidental{fill:#172026;font-family:Times New Roman,Georgia,serif;font-size:34px;font-weight:700}.play-prompt-button{color:#fff;cursor:pointer;background:#244f5c;border:0;border-radius:8px;min-height:46px;padding:0 22px;font-weight:750}.play-prompt-button:hover{background:#1c3f49}.play-prompt-button:disabled{cursor:default;opacity:.72}.piano-keyboard{--white-key-width:calc(100% / var(--white-key-count));--black-key-width:calc((100% / var(--white-key-count)) * .62);background:linear-gradient(#263238 0 24px,#172026 24px 100%);border:1px solid #1720262e;border-radius:8px;min-height:228px;padding:26px 18px 18px;position:relative;overflow:hidden}.white-key-layer{grid-template-columns:repeat(var(--white-key-count), minmax(0, 1fr));width:100%;display:grid;position:relative}.black-key-layer{pointer-events:none;height:132px;position:absolute;top:26px;left:18px;right:18px}.piano-key{cursor:pointer;border:1px solid #1720264d;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;transition:transform .14s,background .14s,color .14s;display:flex}.piano-key span{margin-bottom:12px;font-size:13px;font-weight:700;line-height:1}.piano-key-white{color:#25333b;background:#fffdf8;width:100%;height:176px;box-shadow:inset 0 -10px 16px #17202614}.piano-key-black{left:var(--black-key-left);z-index:2;width:var(--black-key-width);color:#fff;pointer-events:auto;background:linear-gradient(#10171b,#222c32);height:114px;position:absolute;box-shadow:0 8px 14px #00000047}.piano-key:hover{transform:translateY(-3px)}.piano-key:disabled{cursor:default}.piano-key:disabled:hover{transform:none}.piano-key-selected{color:#fff;background:#5aa6a0}.piano-key-prompt{color:#172026;background:#f2c94c;border-color:#7c4f00a6;box-shadow:inset 0 -10px 16px #7c4f002e,0 0 0 2px #f2c94c73}.piano-key-correct{color:#fff;background:#2f7d57}.piano-key-wrong{color:#fff;background:#b44a3b}.note-answer-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;display:grid}.interval-answer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.note-answer-button{color:#25333b;cursor:pointer;background:#fffdf8;border:1px solid #17202629;border-radius:8px;min-height:52px;padding:0 10px;font-weight:750;transition:background .14s,border-color .14s,color .14s,transform .14s}.note-answer-button:hover:not(:disabled){background:#eef5f4;border-color:#244f5c75;transform:translateY(-2px)}.note-answer-button:disabled{cursor:default}.note-answer-altered{background:#f6f3ee}.note-answer-correct{color:#fff;background:#2f7d57;border-color:#0000}.note-answer-correct:hover:not(:disabled){color:#fff;background:#2f7d57;border-color:#0000;transform:none}.note-answer-wrong{color:#fff;background:#b44a3b;border-color:#0000}.note-answer-wrong:hover:not(:disabled){color:#fff;background:#b44a3b;border-color:#0000;transform:none}.feedback{color:#25333b;background:#eef2f1;border-radius:8px;width:fit-content;min-height:40px;padding:10px 14px;font-size:14px}.feedback-correct{color:#1f5d3f;background:#dff1e6}.feedback-wrong{color:#8d3428;background:#f6e3df}@media (width<=1240px){.settings-panel,.game-topbar{grid-template-columns:minmax(160px,.8fr) minmax(420px,1.4fr)}.secondary-controls,.midi-block{grid-column:span 2}}@media (width<=760px){.app-shell{padding:12px}.trainer-layout{gap:12px}.settings-panel,.setup-grid,.game-topbar,.translation-panel,.secondary-controls,.task-grid{grid-template-columns:1fr}.settings-panel,.setup-panel,.game-topbar{gap:14px;padding:16px}.setting-section-wide,.secondary-controls,.midi-block{grid-column:auto}.setup-header{flex-direction:column;align-items:start}.repeat-control{grid-template-columns:repeat(5,minmax(0,1fr))}.interval-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.direction-arrow{display:none}.exercise-panel{gap:16px;min-height:auto;padding:16px}.prompt-card{min-height:120px;font-size:clamp(28px,10vw,42px)}.prompt-card-staff{min-height:190px}.piano-keyboard{min-height:170px;padding:20px 10px 10px}.black-key-layer{top:20px;left:10px;right:10px}.piano-key-white{height:130px}.piano-key-black{height:82px}.note-answer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.interval-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.note-answer-button{min-height:46px;font-size:14px}}@media (width<=420px){.app-shell{padding:8px}.setup-panel,.game-topbar,.exercise-panel{padding:14px}.piano-keyboard{padding-left:8px;padding-right:8px}.black-key-layer{left:8px;right:8px}}