:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#183c36;background:#f5f4ee;font-synthesis:none;--green:#153f36;--muted:#66746d;--line:#dfe3d9;--gold:#ba7747}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,label.file-button{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,.file-button:focus-within{outline:3px solid #bd7c42;outline-offset:4px}button{border:0}header{max-width:1352px;margin:auto;padding:25px 42px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand{font-size:34px;letter-spacing:-2px;font-weight:750;text-decoration:none;color:var(--green);display:flex;align-items:center}.brand-icon{font-size:26px;letter-spacing:0;margin-right:9px}.brand-dot{color:var(--gold)}.header-tag{font-size:10px;letter-spacing:2px;color:var(--muted)}.quiet{background:transparent;color:var(--green);padding:10px 12px;border-radius:8px;font-size:13px}.quiet:hover{background:#e7ebe2}header>.quiet{margin-left:auto}main{max-width:1268px;margin:auto;padding:0 24px}.intro{display:flex;align-items:end;justify-content:space-between;padding:55px 0 42px;gap:20px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#687b6a;margin:0 0 20px}h1{font-family:Georgia,'Times New Roman',serif;font-size:46px;line-height:1.21;font-weight:400;letter-spacing:-1.7px;margin:0 0 19px}h1 em{font-weight:400;color:#6c8064}.lead{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.intro-note{display:flex;gap:17px;align-items:center;padding:20px 0 5px}.note-glyph{font-size:53px;color:#b98050;transform:rotate(-12deg)}.intro-note strong,.intro-note div>span{display:block;font-size:12px;line-height:1.9}.intro-note div>span{color:var(--muted)}.workspace{display:grid;grid-template-columns:285px 1fr;gap:24px;align-items:start}.lesson-panel{border:1px solid var(--line);background:#eeefe7;border-radius:18px;padding:24px 14px;max-height:1000px;overflow:auto}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:0 10px}.panel-title h2{font-size:18px;margin:0}.panel-title span{font-size:11px;color:var(--muted)}.subtle{font-size:12px;line-height:1.7;color:var(--muted)}.lesson-panel>.subtle{padding:0 10px;margin:10px 0 22px}.stage-label{font-size:9px;letter-spacing:1.5px;font-weight:750;color:#727e6d;padding:16px 12px 9px;text-transform:uppercase}.lesson-button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;color:#425a50;border-radius:10px;padding:12px 10px;margin:3px 0}.lesson-button:hover{background:#e2e7db}.lesson-button.active{background:#163f36;color:#fff}.lesson-num{width:29px;height:29px;border:1px solid #cdd5c6;border-radius:50%;display:grid;place-items:center;font-size:10px;flex-shrink:0}.active .lesson-num{border-color:#668175;color:#c2cfbb}.lesson-button .name{font-size:12px;font-weight:600;display:block}.lesson-button .meta{font-size:10px;display:block;opacity:.7;margin-top:4px}.completed{margin-left:auto;font-size:12px;color:#8ba280}.practice{padding:30px 34px;background:#fffef9;border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 25px #1c3d2604}.practice-top{display:flex;align-items:center;justify-content:space-between}.practice-top .eyebrow{margin:0}.pill{border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:10px;color:var(--muted)}.practice>h2{font-family:Georgia,serif;font-size:32px;letter-spacing:-.7px;font-weight:400;margin:20px 0 11px}.tip{color:var(--muted);font-size:13px;line-height:1.8;min-height:24px;margin:0 0 24px}.mode-switch{display:flex;background:#eeefe9;border-radius:10px;padding:4px;gap:4px}.mode-switch button{width:50%;background:transparent;padding:11px 5px;border-radius:7px;color:#637468;font-size:13px}.mode-switch .selected{background:#fffef9;color:var(--green);box-shadow:0 2px 4px #173b2710}.mode-description{font-size:11px;color:#66766b;line-height:1.7;margin:12px 0 20px;min-height:19px}.score-wrap{border:1px solid var(--line);border-radius:12px;padding:17px 20px;background:#f8f9f2}.score-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#71816d}.score-head span:last-child{font-size:15px;color:var(--green);letter-spacing:0;font-weight:600}.score{display:flex;margin:21px 0 16px;border-left:2px solid #acb79e;border-right:2px solid #acb79e}.score-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:65px;border-right:1px solid #e0e4d7;color:var(--green);gap:8px}.score-cell:last-child{border-right:0}.score-cell .symbol{font-size:28px;line-height:1}.score-cell .count{font-size:10px;color:#75806f}.score-cell.hold .symbol{color:#a9b29c}.score-cell.rest .symbol{color:#9d7d60}.legend{display:flex;gap:20px;justify-content:center;font-size:9px;color:#75806f}.controls{display:grid;grid-template-columns:1fr 195px;gap:34px;padding:25px 0 23px;border-bottom:1px solid var(--line)}.tempo label{display:flex;justify-content:space-between;font-size:12px;align-items:center;margin-bottom:14px}.tempo strong{font-size:25px;font-weight:500}.tempo small{font-size:9px;color:var(--muted)}input[type=range]{width:100%;accent-color:#365e40;cursor:pointer;height:5px}.range-label{display:flex;justify-content:space-between;font-size:9px;color:#84907d;margin-top:11px}.sound-controls{display:flex;flex-direction:column;gap:11px;padding-top:4px}.sound-controls label{font-size:11px;color:#586b5c;display:flex;gap:8px;align-items:center}.sound-controls input[type=checkbox]{accent-color:var(--green);margin:0}.sound-controls input[type=range]{width:90px}.transport{text-align:center;padding-top:25px}.beat-lights{display:flex;justify-content:center;gap:12px}.beat-light{width:12px;height:12px;border-radius:50%;background:#e7eadd;transition:background .06s}.beat-light.first{box-shadow:0 0 0 2px #ced6c5}.beat-light.lit{background:#c08a51;box-shadow:0 0 0 5px #c08a511c}#status{font-size:12px;color:var(--muted);min-height:18px;margin:17px 0}.primary{padding:13px 22px;background:var(--green);color:#fff;border-radius:9px;font-size:12px;font-weight:600}.primary:hover{background:#23594b}.transport-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.tap-pad{touch-action:manipulation;user-select:none;display:block;width:100%;background:#eef1e7;border:1px solid #dce3d3;border-bottom:4px solid #d1dac7;color:#34543b;border-radius:12px;margin-top:21px;padding:18px}.tap-pad>span{display:block;font-size:8px;letter-spacing:1.7px;margin-bottom:9px}.tap-pad strong{font-size:18px;font-weight:500}.tap-pad strong span{font-size:11px;font-weight:400;margin-left:8px;color:#728068}.tap-pad:active:not(:disabled),.tap-pad.flash{background:#dce8cf;transform:translateY(2px);border-bottom-width:2px}.timing-note{font-size:10px;line-height:1.7;color:#7b8376;margin:13px auto 0;max-width:550px}.guide{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.guide summary{font-size:12px;cursor:pointer}.guide p{font-size:12px;line-height:1.9;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 0 35px;font-size:11px;color:#63715f}.muted{color:#92998d;margin-left:14px}footer>span:last-child{font-size:10px}.result{margin-top:24px;padding:20px;border:1px solid #d8dfce;background:#f1f4e9;border-radius:12px}.result h3{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:0 0 14px}.result p{font-size:12px;line-height:1.7}.metrics{display:flex;justify-content:space-around;gap:12px;text-align:center;margin:17px 0}.metrics strong{font-size:25px;display:block;font-weight:500}.metrics span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.result .quiet{padding-left:0}dialog{border:1px solid var(--line);border-radius:18px;max-width:610px;width:calc(100% - 28px);padding:28px;color:var(--green);background:#fffef9;max-height:85vh}dialog::backdrop{background:#142a26a8;backdrop-filter:blur(3px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-top h2{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0}dialog p{font-size:12px;line-height:1.7;color:var(--muted)}.history-item{padding:12px 0;border-bottom:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:12px}.history-item span{font-size:10px;color:var(--muted);display:block;margin-top:6px}.data-actions{display:flex;gap:12px;align-items:center;margin-top:24px}.file-button{font-size:12px;border:1px solid var(--line);padding:12px 18px;cursor:pointer;border-radius:8px}.file-button input{width:1px;height:1px;position:absolute;opacity:0}#dataStatus{color:#79502d}[hidden]{display:none!important}@media(min-width:1500px){main{max-width:1320px}.workspace{grid-template-columns:300px 1fr}.practice{padding:34px 42px}}@media(max-width:900px){header{padding:20px 24px}.header-tag{display:none}.intro-note{display:none}.workspace{grid-template-columns:225px 1fr;gap:16px}.practice{padding:24px}.controls{grid-template-columns:1fr;gap:22px}.sound-controls{flex-direction:row;flex-wrap:wrap}.legend{gap:10px}.intro{padding-top:38px}h1{font-size:41px}}@media(max-width:650px){header{padding:15px 20px}.brand{font-size:29px}main{padding:0 16px}.intro{padding:30px 3px 28px}h1{font-size:34px;letter-spacing:-1.2px}.lead{font-size:12px}.desktop{display:none}.eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:14px}.workspace{display:flex;flex-direction:column;gap:16px}.lesson-panel{width:100%;padding:16px 12px;max-height:230px}.lesson-panel>.subtle{margin:5px 0 8px;font-size:10px}.panel-title h2{font-size:15px}#lessons{display:flex;overflow-x:auto;gap:7px;padding:4px 2px 7px}.stage-label{display:none}.lesson-button{min-width:181px;max-width:181px;align-items:flex-start;padding:12px 9px}.lesson-button .name{font-size:11px}.lesson-button .meta{font-size:9px}.lesson-num{width:24px;height:24px}.completed{display:none}.practice{width:100%;padding:22px 18px}.practice>h2{font-size:28px}.tip{font-size:12px}.mode-switch button{font-size:12px}.score-wrap{padding:15px 11px}.legend{font-size:8px;gap:12px}.controls{gap:18px;padding:23px 0}.sound-controls{gap:15px}.sound-controls label{font-size:10px}.sound-controls input[type=range]{width:65px}footer{flex-direction:column;gap:10px;padding:23px 3px}.metrics strong{font-size:22px}.metrics span{font-size:9px}.tap-pad{padding:21px 10px}.tap-pad strong span{font-size:10px}.dialog-top h2{font-size:23px}dialog{padding:22px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Guided learning: instructions remain near the action, not buried in help. */
.first-guide{border:1px solid #d9dfca;border-radius:12px;background:#f0f3e7;padding:17px 19px;margin-bottom:20px}.first-guide summary{cursor:pointer;font-size:13px;font-weight:700}.first-guide ol{padding-left:21px;display:grid;gap:10px;font-size:12px;line-height:1.7}.first-guide p{font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:0}.first-guide .primary{padding:11px 15px}.lesson-goal{border-left:3px solid #bc8754;padding:2px 0 2px 15px;margin:0 0 20px}.lesson-goal>strong{font-size:12px}.lesson-goal p{font-size:12px;line-height:1.75;margin:6px 0}.lesson-goal .subtle{font-size:10px}.learning-steps{padding:0;display:flex;list-style:none;gap:8px;margin:0 0 20px}.learning-steps li{flex:1;font-size:12px;padding:10px 8px;text-align:center;border-bottom:2px solid #e3e6dc;color:#88937f}.learning-steps .current{border-color:#31523d;color:#234832;font-weight:700;background:#f0f4e9;border-radius:7px 7px 0 0}.learning-steps li>span{margin-left:6px}.settings-panel{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:13px 15px}.settings-panel>summary{cursor:pointer;font-size:11px;color:#63715e}.settings-panel>summary>span{float:right;color:#34513c;font-weight:700}.settings-panel .controls{border-bottom:0;padding:18px 0 2px}.run-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;margin-bottom:12px}.run-heading strong{font-size:10px;letter-spacing:.8px;color:#537147}.run-heading>span{font-size:10px;color:#708167;white-space:nowrap}.live-guide{display:grid;grid-template-columns:140px 1fr;border:1px solid #d8e0ce;border-radius:12px;overflow:hidden;background:#f7f9f1;text-align:left}.count-display{padding:14px 12px;background:#e8eedf;text-align:center;display:flex;flex-direction:column;justify-content:center}.small-label{font-size:8px;letter-spacing:1.5px;color:#718265}.count-display>strong{font-size:44px;line-height:1.15;font-weight:600;color:#294b32;margin:4px 0;white-space:nowrap}.count-display>span:last-child{font-size:9px;line-height:1.5;color:#647557}.action-display{padding:20px;display:flex;flex-direction:column;justify-content:center;gap:10px}.action-display>strong{font-size:21px;line-height:1.3;letter-spacing:-.4px}.action-display>span{font-size:11px;line-height:1.6;color:#65765b}.beat-lights{margin-top:17px}.beat-light{height:27px;width:27px;display:grid;place-items:center;font-size:11px;color:#687d5e;font-weight:600}.beat-light.lit{color:#342c1a;background:#d7a463}.exercise-progress{margin-top:13px;display:flex;gap:13px;align-items:center}.exercise-progress progress{flex:1;min-width:0;width:100%;height:6px;accent-color:#507147}.exercise-progress span{font-size:9px;color:#75866a;white-space:nowrap}.score-cell.current-cell{background:#e0ead3;border-radius:6px;box-shadow:inset 0 -3px #587843}.score-cell.current-cell::before{content:'▼';position:absolute;top:-15px;font-size:10px;color:#587843}.score-cell.current-cell .symbol{color:#1b4c32}.score-cell.rest.current-cell{background:#f3e6d8;box-shadow:inset 0 -3px #ad7647}.tap-feedback{font-size:11px;line-height:1.65;background:#f5f4ed;border-radius:8px;min-height:41px;padding:10px;margin:12px 0 0;color:#5d7057}.secondary{border:1px solid #b9c8ae;background:#f0f4e8;color:#315037;border-radius:9px;padding:12px 17px;font-size:12px;cursor:pointer}.secondary:hover{background:#e3ebd8}.transport-buttons{flex-wrap:wrap}.transport #status{margin:13px 0;font-size:11px}.tap-pad{margin-top:15px;min-height:82px}.tap-pad strong{font-size:24px;font-weight:700}.tap-pad strong span{font-weight:400}.timeline-review{margin-top:18px}.timeline-review>summary{font-size:12px;cursor:pointer;font-weight:600}.timeline-rows{padding:0;margin:12px 0;list-style:none;max-height:360px;overflow:auto;border:1px solid #dce3d1;border-radius:8px;background:#fbfcf7}.timeline-rows li{display:grid;grid-template-columns:110px minmax(90px,1fr) 155px;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid #e6eadd;font-size:10px;min-height:39px}.timeline-rows li:last-child{border-bottom:0}.timeline-track{position:relative;height:23px;border-bottom:1px solid #c8d1bc}.expected-mark{position:absolute;left:50%;top:6px;font-size:12px;color:#849478;transform:translateX(-50%)}.actual-mark{position:absolute;top:-2px;font-size:12px;color:#a66d38;transform:translateX(-50%)}.missing-mark{position:absolute;left:50%;top:-6px;font-size:15px;color:#9a6147;transform:translateX(-50%)}.timeline-verdict{color:#6e705f;font-size:10px;text-align:right}.extra-rows{font-size:11px;line-height:1.8;padding-left:20px}.retry-advice{padding:11px 14px;border-left:3px solid #bb8956;background:#fcfaf1}.retry-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.score-head>span:first-child{font-size:8px;letter-spacing:1px}.score{scroll-margin-top:20px}
@media(max-width:900px){.live-guide{grid-template-columns:110px 1fr}.action-display{padding:15px}.action-display>strong{font-size:18px}.timeline-rows li{grid-template-columns:90px minmax(60px,1fr) 110px;gap:7px}}
@media(max-width:650px){.first-guide{padding:15px}.first-guide summary{font-size:12px}.first-guide ol{font-size:11px}.lesson-goal>strong{font-size:11px}.lesson-goal p{font-size:11px}.learning-steps{gap:5px}.learning-steps li{font-size:10px;padding:9px 3px}.learning-steps li>span{margin-left:3px}.live-guide{grid-template-columns:96px 1fr}.count-display{padding:11px 7px}.count-display>strong{font-size:36px}.action-display{padding:14px}.action-display>strong{font-size:18px}.action-display>span{font-size:10px}.run-heading{align-items:start;gap:9px}.run-heading strong{font-size:8px;line-height:1.5}.run-heading>span{font-size:9px}.exercise-progress{gap:8px}.exercise-progress span{font-size:8px}.tap-feedback{font-size:10px}.timeline-rows li{grid-template-columns:71px minmax(45px,1fr) 100px;gap:5px;padding:8px;font-size:9px}.timeline-verdict{font-size:9px}.legend{flex-wrap:wrap;gap:5px 12px}.settings-panel>summary{font-size:10px}.transport-buttons .primary,.transport-buttons .secondary{padding:11px 12px;font-size:11px}.tap-pad strong span{font-size:10px;margin-left:4px}.session-active header{padding:8px 16px}.session-active header .brand{font-size:24px}.session-active header .quiet{font-size:10px}.session-active .intro,.session-active .lesson-panel,.session-active .practice-top,.session-active .practice>h2,.session-active .practice>.tip,.session-active .first-guide,.session-active .lesson-goal,.session-active .mode-switch,.session-active .mode-description,.session-active .settings-panel{display:none}.session-active .workspace{padding-top:12px}.session-active .practice{padding:14px 12px}.session-active .learning-steps{margin-bottom:12px}.session-active .score-wrap{padding:12px 10px}.session-active .score{margin:17px 0 10px}.session-active .score-cell{height:48px;gap:5px}.session-active .score-cell .symbol{font-size:23px}.session-active .transport{padding-top:14px}.session-active .live-guide{min-height:99px}.session-active .beat-lights{margin-top:12px}.session-active .tap-pad{margin-top:12px;padding:14px 8px;min-height:75px}.session-active .timing-note{font-size:9px}.session-active footer{display:none}}
.score-cell.next-cell{outline:2px dashed #b58b57;outline-offset:-3px;border-radius:6px}.score-cell.next-cell::after{content:'sắp tới';position:absolute;bottom:-12px;font-size:7px;color:#98713f;white-space:nowrap}
.update-notice{font-size:12px;line-height:1.7;color:#4a613d;background:#edf3df;border:1px solid #cad9b7;border-radius:9px;padding:13px 17px;margin:20px 0 0}#patternPanel{scroll-margin-top:12px}
@media(max-height:800px){.session-active header{padding-top:9px;padding-bottom:9px}.session-active .intro,.session-active .practice-top,.session-active .practice>h2,.session-active .practice>.tip,.session-active .first-guide,.session-active .lesson-goal,.session-active .mode-switch,.session-active .mode-description,.session-active .settings-panel{display:none}.session-active .workspace{padding-top:12px}.session-active .practice{padding:14px 18px}.session-active .learning-steps{margin-bottom:10px}.session-active .score-wrap{padding:11px 14px}.session-active .score{margin:15px 0 9px}.session-active .score-cell{height:42px;gap:5px}.session-active .score-cell .symbol{font-size:23px}.session-active .transport{padding-top:12px}.session-active .live-guide{min-height:86px}.session-active .count-display{padding:9px}.session-active .count-display>strong{font-size:33px}.session-active .action-display{padding:12px 16px;gap:6px}.session-active .action-display>strong{font-size:19px}.session-active .beat-lights{margin-top:10px;gap:10px}.session-active .beat-light{height:23px;width:23px}.session-active .exercise-progress{margin-top:9px}.session-active .transport #status{margin:8px 0;font-size:10px}.session-active .transport-buttons .primary,.session-active .transport-buttons .secondary,.session-active .transport-buttons .quiet{padding:9px 12px;font-size:11px}.session-active .tap-pad{margin-top:10px;padding:11px 8px;min-height:66px}.session-active .tap-pad>span{margin-bottom:5px}.session-active .tap-feedback{margin-top:8px;padding:8px;min-height:32px}.session-active .timing-note{margin-top:7px;font-size:9px;line-height:1.5}.session-active .guide{margin-top:12px;padding-top:10px}.session-active footer{display:none}}