:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#243b35;background:#f5f6f2;font-synthesis:none;font-size:15px;--green: #173d35;--muted: #738179;--line: #e5e9e2;--lime: #e5efcb}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}button{touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #95af59;outline-offset:4px}button{transition:background .15s,transform .15s}button:not(:disabled):active{transform:translateY(1px)}.shell{max-width:1240px;margin:auto;padding:0 40px}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce3d8}.brand{display:flex;gap:12px;align-items:center;color:var(--green);text-decoration:none;font-size:15px;line-height:1.25;letter-spacing:-.4px}.brand strong{font-size:20px;font-weight:700}.brand-mark{display:grid;place-items:center;width:45px;height:48px;border-radius:13px;background:var(--green);color:var(--lime);font-size:36px}.version{color:var(--muted);font-size:10px;letter-spacing:1.6px;font-weight:600}.version span{margin-left:13px;letter-spacing:0;border:1px solid #dce3d8;border-radius:6px;padding:5px 8px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:42px 0 30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted);margin:0 0 10px}h1{font-size:clamp(27px,3.4vw,40px);letter-spacing:-1.5px;font-weight:650;line-height:1.18;margin:0 0 12px}h2{font-size:21px;font-weight:650;letter-spacing:-.6px;margin:0}.intro p:not(.eyebrow){margin:0;color:#6c7b73;line-height:1.6}.mode-tag{white-space:nowrap;font-size:12px;color:#4a6150;background:#e9eddf;border-radius:30px;padding:11px 15px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:stretch}.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 4px 18px #243b3503}.trainer{padding:28px 30px}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.pill{font-weight:600;font-size:12px;background:#f1f4ec;border:1px solid #e6ebde;padding:8px 12px;border-radius:8px}.steps{display:flex;gap:22px;border-bottom:1px solid var(--line);padding:25px 0 17px;font-size:10px;color:#8e9890}.steps span{display:flex;gap:7px;align-items:center}.steps b{font-size:11px;font-weight:500}.steps .active{color:#357051}.steps .active b{font-weight:700}.score-panel{margin-top:15px;min-height:190px;display:flex;flex-direction:column;justify-content:center}#notation{width:100%;max-width:610px;margin:auto}#notation svg{display:block;width:100%;height:auto;max-height:170px}#score-caption{text-align:center;color:#869087;font-size:11px;min-height:16px;margin:0 0 17px}.prompt{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;text-align:center}.prompt p{font-size:13px;line-height:1.5;margin:8px 0}.status-dot{width:7px;height:7px;background:#97a885;border-radius:50%;flex-shrink:0}.status-dot.playing{background:#557834;animation:pulse 1.2s ease-in-out infinite}.answers{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-top:12px}.answers button{position:relative;border:1px solid #dce3d8;border-radius:12px;background:#f8faf5;min-height:72px;font-size:28px;font-weight:550;color:#234638}.answers button:not(:disabled):hover{background:var(--lime);border-color:#98b777}.answers button:disabled{color:#8b978b;background:#f5f6f2}.answers button.wrong{color:#a9ada8;background:#e7e9e5;border-color:#e7e9e5;text-decoration:line-through}.answers button.correct:disabled{background:var(--green);color:#f0f6e6;border-color:var(--green)}.answers button.correct:after{content:"✓";position:absolute;right:7px;top:4px;font-size:13px;color:#cde4a7}.answers:has(.gesture){grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.answers button.gesture{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:110px;padding:8px;background:#fff}.answer-gesture{display:block;width:100%;max-width:120px;height:100px;object-fit:contain;object-position:center}.answers button.gesture.wrong{opacity:.4;filter:grayscale(1)}.answers button.gesture.correct:disabled{background:#fff;box-shadow:inset 0 0 0 3px var(--green);color:var(--green)}.answers button.gesture.correct:after{color:var(--green)}.keyboard-hint{text-align:center;font-size:10px;color:#8b958c;margin:12px 0 24px}.transport{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.transport button{min-height:46px;border-radius:9px;padding:10px 16px;font-size:12px;font-weight:600}.primary{background:var(--green);border:1px solid var(--green);color:#fff}.primary:hover:not(:disabled){background:#285747}.primary:disabled{opacity:.45}.secondary{background:#fff;border:1px solid #dbe1d5;color:var(--green)}.secondary:hover:not(:disabled){background:#f4f7ed}.secondary:disabled,.text-button:disabled{opacity:.4}.text-button{background:transparent;border:1px solid transparent;color:#6e7c70}.gentle-note{color:#90998e;text-align:center;font-size:10px;line-height:1.6;margin:20px 0 0}.settings{padding:28px 24px}.settings h2{margin-bottom:29px}.settings fieldset{border:0;padding:0;margin:0;min-width:0}.field-label{display:block;font-size:12px;font-weight:650;margin:0 0 10px}select{border:1px solid #dce3d8;border-radius:9px;color:#294538;background:#fafbf8;width:100%;padding:12px;min-height:46px}.setting-divider{height:1px;background:var(--line);margin:25px 0}.muted{font-size:12px;color:#819080;line-height:1.6;margin:0 0 14px}.degree-toggles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.degree-toggle{position:relative;cursor:pointer}.degree-toggle input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.degree-toggle span{display:grid;place-items:center;min-height:46px;border:1px solid #dce3d8;border-radius:9px;color:#6d7c71;font-size:16px;background:#fafbf8}.degree-toggle input:checked+span{background:var(--lime);border-color:#c6d5ad;color:var(--green);font-weight:650}.degree-toggle input:focus-visible+span{outline:3px solid #95af59;outline-offset:2px}.settings fieldset:disabled{opacity:.6}.small-note{font-size:10px;line-height:1.7;color:#889381;margin:10px 0 0}.volume-label{display:flex;justify-content:space-between}.volume-label output{font-weight:400;color:var(--muted)}input[type=range]{accent-color:var(--green);width:100%;height:30px;margin:0}.tip{display:flex;align-items:flex-start;gap:13px;background:#f4f6ed;border-radius:12px;padding:16px;margin-top:24px}.tip>span{font-size:25px;color:#71925d}.tip p{font-size:11px;line-height:1.8;color:#708064;margin:0}.statistics{margin-top:22px;padding:25px 30px}.stats-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.stats-title h2{font-size:18px}.stats-title .eyebrow{font-size:9px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0}.metrics>div{padding:0 25px;border-right:1px solid var(--line);display:flex;gap:14px;align-items:center}.metrics>div:first-child{padding-left:0}.metrics>div:last-child{border:0}.metrics strong{font-size:32px;font-weight:550;letter-spacing:-1px}.metrics span{font-size:11px;color:#7f8d7c;max-width:120px;line-height:1.6}details{border-top:1px solid var(--line);padding-top:15px}summary{font-size:11px;color:#617460;min-height:30px;padding:8px 0}summary span{color:#9aa394;margin-left:5px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;margin-top:10px;white-space:nowrap}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}th{font-size:10px;font-weight:600;color:#7b8b73}footer{flex-wrap:wrap;display:flex;justify-content:space-between;gap:20px;padding:25px 0 30px;font-size:10px;color:#90998a}footer a{color:inherit;text-underline-offset:3px}footer span:first-child{font-weight:600}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes pulse{50%{opacity:.3}}@media(min-width:1600px){.shell{max-width:1400px}.answers button{min-height:90px}.trainer{padding:35px 40px}.workspace{grid-template-columns:minmax(0,1fr) 320px}.score-panel{min-height:225px}}@media(max-width:950px){.shell{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 245px;gap:16px}.trainer{padding:23px 20px}.settings{padding:25px 18px}.steps{gap:12px}.steps b{font-size:10px}.answers{gap:6px}.answers button{min-height:62px}.metrics>div{padding:0 15px}.metrics strong{font-size:28px}.mode-tag{display:none}}@media(max-width:760px){.shell{padding:0 18px}.header{height:87px}.version{font-size:8px;letter-spacing:.7px}.intro{padding:30px 0 23px}.intro .eyebrow{font-size:8px;letter-spacing:1.2px}.intro p:not(.eyebrow){font-size:13px}.workspace{grid-template-columns:1fr}.trainer{padding:22px 18px}.settings{padding:23px}.settings h2{margin-bottom:20px}.degree-toggles{grid-template-columns:repeat(4,1fr)}.score-panel{min-height:170px}.steps{justify-content:space-between;gap:8px}.steps span{gap:5px}.answers{grid-template-columns:repeat(4,1fr)}.answers button{font-size:25px;min-height:64px}.statistics{padding:23px 18px}.stats-title{align-items:flex-start;flex-direction:column;gap:0}.stats-title .small-note{margin-top:7px}.metrics>div{flex-direction:column;align-items:flex-start;gap:3px;padding:0 12px}.metrics span{font-size:10px}.transport button{padding:10px 12px}.gentle-note{font-size:9px}.tip{margin-top:16px}.setting-divider{margin:20px 0}footer{font-size:9px}.card{border-radius:16px}}@media(max-width:380px){.shell{padding:0 10px}.trainer{padding:20px 12px}.answers{gap:4px}.answers button{min-height:53px;font-size:23px}.steps b{font-size:9px}.version{max-width:110px;text-align:right;line-height:2}.version span{margin-left:5px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.mix-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;cursor:pointer}.mix-toggle input{width:20px;height:20px;accent-color:var(--green)}.key-picker{margin:10px 0}.key-picker summary{min-height:44px}.key-toggles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.key-toggles .degree-toggle span{font-size:11px}.key-actions{display:flex;gap:6px;margin:8px 0 12px}.key-actions button{min-height:44px;padding:8px;border-radius:8px;font-size:11px;flex:1}#key-selection-note{margin-bottom:16px}.workspace{align-items:start}.workspace .trainer{grid-column:1;grid-row:1}.workspace .settings{grid-column:2;grid-row:1 / span 2}.workspace .statistics{grid-column:1;grid-row:2;margin-top:0}@media(max-width:760px){.workspace .settings{grid-column:1;grid-row:2}.workspace .statistics{grid-column:1;grid-row:3}}#resolution{display:none;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 4px}#resolution.visible{display:flex}.resolution-sequence{display:flex;gap:8px;padding:6px;border:1px solid var(--line);border-radius:12px}.resolution-note{display:grid;place-items:center;width:clamp(40px,4vw,64px);height:clamp(40px,4vw,64px);border-radius:8px;background:#edf1e7;color:var(--green);font-size:clamp(24px,3vw,42px);font-weight:700}.resolution-note.playing{outline:3px solid #173d35;outline-offset:2px;box-shadow:inset 0 -5px 0 currentColor}.score-caption-row{display:flex;align-items:center;justify-content:center;gap:16px;min-height:32px}#absolute-answer:not([hidden]){display:inline-flex;align-items:center;gap:8px;font-size:24px;white-space:nowrap}#absolute-swatch{width:24px;height:24px;border-radius:50%;border:1px solid #0003}#answers.keyboard{display:block;position:relative;height:clamp(200px,25vw,270px);min-height:200px;isolation:isolate;-webkit-user-select:none;user-select:none}#answers.keyboard>[data-key-tone]{position:absolute;box-sizing:border-box;top:0;left:var(--key-left);width:var(--key-width);height:100%;min-height:0;border:1px solid #9aa39c;border-radius:0 0 8px 8px;background:#fff;color:#173d35;padding:10px 2px}#answers.keyboard>button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;touch-action:manipulation;transition:none}#answers.keyboard>[data-key-tone=black]{height:60%;z-index:2;background:#20272a;color:#fff;border-color:#141a1d}#answers.keyboard>.unused-key[data-key-tone=white]{background:#eef0ed}#answers.keyboard>button:active:not(:disabled){box-shadow:inset 0 0 0 4px #95af59;transform:none}#answers.keyboard>button:focus-visible{outline:3px solid #648836;outline-offset:-4px}#answers.keyboard>button.wrong{opacity:.4;filter:grayscale(1);text-decoration:line-through}#answers.keyboard>button.correct{box-shadow:inset 0 0 0 4px #648836}.note-color-dot{display:block;flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1px solid #777;pointer-events:none}.board-mode #answers.keyboard{height:100%;min-height:0}.board-mode #answers.keyboard>button{font-size:clamp(24px,min(4vw,7dvh),76px);padding:8px 2px}.board-mode .note-color-dot{width:clamp(18px,2.5dvh,28px);height:clamp(18px,2.5dvh,28px)}@media(max-width:600px){#answers.keyboard{margin-inline:-12px;width:calc(100% + 24px)}#answers.keyboard>[data-key-tone=black]{width:max(44px,var(--key-width));left:clamp(0px,calc(var(--key-left) + (var(--key-width) - max(44px,var(--key-width))) / 2),calc(100% - max(44px,var(--key-width))))}}.workspace[hidden],#same-different[hidden],#board-settings[hidden]{display:none!important}.exercise-picker{display:flex;align-items:center;gap:12px;margin-bottom:16px}.exercise-picker select,#board-exercise-select{min-height:48px;max-width:100%;padding:8px;border:1px solid #dbe1d5;border-radius:8px;font:inherit}#same-different{text-align:center;display:grid;gap:20px;padding:24px}#same-different h2,#pair-status{margin:0}.pair-replays,.pair-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,40px)}#same-different button{touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:16px;border:2px solid #b5c6ba}.pair-replays button{min-height:110px;font-size:clamp(48px,8vw,100px);background:#fff;color:#173d35}.pair-answers button{min-height:160px;font-size:clamp(28px,4vw,64px);background:#f8faf5;color:#173d35;font-weight:700}.pair-answers button.wrong{opacity:.5;text-decoration:line-through}.pair-answers button.correct{border:5px solid #648836}#same-different button:active:not(:disabled){box-shadow:inset 0 0 0 4px #95af59}.pair-transport{display:flex;gap:16px;justify-content:center}.pair-transport button{min-height:48px;padding:12px 20px}.pair-statistics{text-align:left}.board-mode .exercise-picker{display:none}.board-mode #same-different{height:100%;min-height:0;overflow:hidden;padding:var(--board-gap);gap:var(--board-gap);grid-template-rows:auto auto minmax(0,1fr) minmax(0,1.5fr) auto}.board-mode #same-different h2{font-size:clamp(24px,4dvh,48px)}.board-mode #pair-status{font-size:clamp(16px,2.5dvh,28px)}.board-mode .pair-replays button,.board-mode .pair-answers button{min-height:0;height:100%}.board-mode .pair-replays button{font-size:clamp(48px,15dvh,160px)}.board-mode .pair-answers button{font-size:clamp(28px,7dvh,90px)}.board-mode .pair-statistics{display:none}@media(max-width:600px){#same-different{padding:12px}#board-exercise-select{max-width:160px;font-size:12px}}#board-exercise-select{width:auto;min-width:0}#board-toolbar button{white-space:nowrap}@media(max-width:600px){#board-toolbar>div{flex-wrap:wrap}#board-exercise-select{max-width:none;flex:1 1 100%}}#board-enter,#board-toolbar button,.board-dialog-heading button{min-height:48px;padding:10px 16px;border-radius:10px}#board-enter{white-space:nowrap}#board-toolbar[hidden]{display:none}#board-settings-dialog:not([open]){display:none}html.board-mode,.board-mode body{height:100dvh;overflow:hidden;overscroll-behavior:none}.board-mode{--board-gap: clamp(8px, 1.2dvh, 18px);user-select:none;-webkit-user-select:none}.board-mode .shell{width:100%;max-width:none;height:100dvh;padding:max(8px,1dvh) max(12px,1.2vw);display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--board-gap)}.board-mode .header,.board-mode .intro,.board-mode footer,.board-mode .statistics,.board-mode .workspace>.settings,.board-mode .steps,.board-mode .keyboard-hint,.board-mode .gentle-note,.board-mode .card-heading>div{display:none}#board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:clamp(16px,1.5vw,28px)}#board-toolbar>div{display:flex;gap:var(--board-gap)}.board-mode main,.board-mode .workspace{height:100%;min-height:0;min-width:0}.board-mode .workspace{display:block}.board-mode .workspace .trainer{height:100%;min-height:0;padding:var(--board-gap);display:grid;grid-template-rows:auto minmax(0,1.8fr) auto auto minmax(0,1fr);gap:var(--board-gap)}.board-mode .card-heading{grid-row:1;justify-content:center}.board-mode .pill{font-size:clamp(16px,2dvh,28px);padding:4px 16px}.board-mode .score-panel{grid-row:2;min-height:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.board-mode #notation{height:100%;min-height:0;max-width:none}.board-mode #notation svg{width:100%;height:100%!important;max-height:none}.board-mode #score-caption{margin:0;min-height:0;font-size:clamp(14px,1.8dvh,24px)}.board-mode .prompt{grid-row:3;min-height:0}.board-mode .prompt p{margin:0;font-size:clamp(18px,2.7dvh,34px);line-height:1.2}.board-mode .transport{grid-row:4;gap:var(--board-gap)}.board-mode .transport button{min-height:clamp(48px,6dvh,76px);font-size:clamp(16px,2dvh,26px);padding:8px clamp(12px,2vw,36px)}.board-mode .answers{grid-row:5;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:var(--board-gap);min-height:0;margin:0}.board-mode .answers button{min-width:0;min-height:0;padding:clamp(6px,1vw,18px);border-radius:clamp(12px,1.5vw,24px);font-size:clamp(32px,min(6vw,10dvh),120px);touch-action:manipulation}.board-mode .answers button:active:not(:disabled){box-shadow:inset 0 0 0 4px #95af59;transform:scale(.97)}.board-mode .answer-gesture{width:100%;height:100%;min-height:0;max-width:none;object-fit:contain}.board-mode .answers button.correct:after{font-size:clamp(20px,3dvh,36px)}#board-settings-dialog{width:min(1100px,96vw);max-width:96vw;height:min(900px,94dvh);max-height:94dvh;padding:0;border:1px solid var(--line);border-radius:20px;color:var(--green);overflow:hidden}#board-settings-dialog[open]{display:flex;flex-direction:column}#board-settings-dialog::backdrop{background:#173d35aa}.board-dialog-heading{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:clamp(18px,2vw,28px)}#board-settings-content{overflow:auto;overscroll-behavior:contain;min-height:0;touch-action:pan-y}#board-settings-content .settings{border:0;box-shadow:none;padding:24px}#board-settings-content :is(.field-label,.mix-toggle,select,summary,.degree-toggle span,.key-actions button){font-size:20px}#board-settings-content :is(select,summary,.degree-toggle span,.key-actions button,.mix-toggle){min-height:56px}#board-settings-content .mix-toggle input{width:28px;height:28px}#board-settings-content :is(.small-note,.muted,.tip p){font-size:16px}#board-settings-content input[type=range]{height:48px}#board-settings-content .degree-toggles{grid-template-columns:repeat(7,minmax(0,1fr))}#board-settings-content .key-toggles{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1100px){.board-mode .answers{grid-template-columns:repeat(4,minmax(0,1fr))}.board-mode .workspace .trainer{grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1fr)}}@media(max-width:600px){#board-toolbar>strong{display:none}#board-toolbar>div{width:100%;justify-content:space-between}#board-toolbar button{font-size:14px;padding:8px}.board-mode .transport button{font-size:13px;padding:6px 8px}#board-settings-content .degree-toggles,#board-settings-content .key-toggles{grid-template-columns:repeat(4,minmax(0,1fr))}.board-dialog-heading{padding:8px;font-size:16px}}.board-mode .score-panel{grid-template-rows:minmax(0,1fr) auto clamp(72px,12dvh,130px)}.board-mode #resolution{display:flex;visibility:hidden;min-height:0;flex-wrap:nowrap;gap:clamp(10px,2vw,40px);padding:6px}.board-mode #resolution.visible{visibility:visible}.board-mode .resolution-sequence{gap:clamp(6px,1vw,16px);padding:6px}.board-mode .resolution-note{width:clamp(36px,min(7vw,8dvh),96px);height:clamp(36px,min(7vw,8dvh),96px);font-size:clamp(24px,5dvh,64px)}