:root,[data-theme=modern]{--color-background:#f5f7f5;--color-background-warm:#fbfaf7;--color-surface:#ffffffeb;--color-surface-solid:#fff;--color-surface-soft:#f4f8f5;--color-text:#151a22;--color-muted:#69707d;--color-subtle:#969da6;--color-border:#e4e8e4;--color-border-strong:#d6dcd7;--color-accent:#178861;--color-accent-dark:#0d6d4c;--color-accent-soft:#eaf6f0;--color-accent-glow:#38be8b3b;--color-success:#178861;--color-error:#d75e55;--color-error-soft:#fff0ee;--color-gold:#f2b634;--color-flame:#f17938;--notation-color:#111714;--piano-frame:#cbd3cd;--piano-key-border:#c5ccc7;--piano-white-start:#fff;--piano-white-end:#f7faf8;--piano-black-start:#121615;--piano-black-mid:#383d3b;--border-radius:22px;--border-radius-small:12px;--shadow-card:0 12px 35px #2b362f0e, 0 2px 7px #2b362f08;--shadow-float:0 22px 60px #19352724;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}[data-theme=colorful]{--color-background:#fff6ec;--color-background-warm:#fffaf4;--color-surface:#fffffff0;--color-surface-solid:#fff;--color-surface-soft:#fff2df;--color-text:#27203a;--color-muted:#756e83;--color-subtle:#a49caf;--color-border:#eee2d7;--color-border-strong:#ddcfc1;--color-accent:#7e54c8;--color-accent-dark:#6440aa;--color-accent-soft:#f1eafa;--color-accent-glow:#7e54c83b;--color-success:#2b9b77;--color-error:#dc5f69;--color-error-soft:#fff0f1;--color-gold:#f2ad2f;--color-flame:#ee7651;--notation-color:#211b2e;--piano-frame:#d8c9bd;--piano-key-border:#d7cbc1;--piano-white-start:#fff;--piano-white-end:#fff9f4;--piano-black-start:#211d2a;--piano-black-mid:#484151;--shadow-card:0 12px 35px #533b2a12, 0 2px 7px #533b2a09;--shadow-float:0 22px 60px #4b305e29}*{box-sizing:border-box}html{background:var(--color-background);min-width:320px;min-height:100%;color:var(--color-text);font-family:var(--font-sans)}body{background:radial-gradient(circle at 46% -10%, var(--color-surface-solid) 0%, transparent 45%), linear-gradient(145deg, var(--color-background-warm), var(--color-background));min-height:100vh;margin:0}button,input,select{font:inherit}button{color:inherit}button:focus-visible{outline:3px solid var(--color-accent-glow);outline-offset:2px}.app-shell{width:min(1520px,100% - 48px);margin:0 auto;padding:38px 0 24px}.card{background:var(--color-surface);border-radius:var(--border-radius);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #e0e5e0d1}.topbar{z-index:10;grid-template-columns:210px 1fr 350px;align-items:center;gap:24px;min-height:94px;padding:14px 20px 14px 32px;display:grid;position:relative}.brand{cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;padding:0;display:flex}.brand strong{letter-spacing:-1.8px;font-size:35px;line-height:1}.brand small{color:var(--color-muted);margin-top:5px;font-size:13px}.topbar nav{justify-content:center;gap:22px;display:flex}.topbar nav button{min-height:54px;color:var(--color-muted);cursor:pointer;background:0 0;border:0;border-radius:14px;align-items:center;gap:12px;padding:0 22px;transition:all .16s;display:inline-flex}.topbar nav button:hover{color:var(--color-text);background:var(--color-surface-soft)}.topbar nav button.active{color:var(--color-text);background:var(--color-accent-soft)}.topbar nav button.active svg{color:var(--color-accent)}.midi-status{text-align:left;border:1px solid var(--color-border);background:var(--color-surface-solid);cursor:pointer;border-radius:15px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:62px;padding:8px 14px;display:grid}.midi-status span:nth-child(2){flex-direction:column;min-width:0;display:flex}.midi-status strong{white-space:nowrap;font-size:13px}.midi-status small{color:var(--color-muted);white-space:nowrap;text-overflow:ellipsis;max-width:140px;margin-top:2px;font-size:11px;overflow:hidden}.status-dot{background:var(--color-subtle);border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 5px #969da61a}.status-dot.connected{background:var(--color-success);box-shadow:0 0 0 5px var(--color-accent-glow)}.chevron{color:var(--color-muted)}.topbar-actions{justify-content:flex-end;align-items:center;gap:9px;display:flex}.topbar-actions .midi-status{flex:1;min-width:0}.language-menu{flex:none;position:relative}.language-trigger{border:1px solid var(--color-border);background:var(--color-surface-solid);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:4px;width:54px;height:54px;font-size:22px;display:flex}.language-trigger .chevron{font-size:13px;transition:transform .16s}.language-menu.is-open .language-trigger .chevron{transform:rotate(180deg)}.language-options{z-index:30;border:1px solid var(--color-border);background:var(--color-surface-solid);width:184px;box-shadow:var(--shadow-float);border-radius:14px;gap:5px;padding:8px;display:grid;position:absolute;top:calc(100% + 9px);right:0}.language-options button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:9px;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;min-height:42px;padding:0 10px;display:grid}.language-options button:hover,.language-options button.active{color:var(--color-accent-dark);background:var(--color-accent-soft)}.language-options button b{color:var(--color-accent)}.profile-menu{flex:none;position:relative}.profile-trigger{border:1px solid var(--color-border);background:var(--color-surface-solid);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:3px;width:58px;height:54px;padding:0 5px;display:flex}.profile-trigger .chevron{font-size:12px;transition:transform .16s}.profile-menu.is-open .profile-trigger .chevron{transform:rotate(180deg)}.profile-avatar{color:#fff;letter-spacing:-.02em;border-radius:50%;flex:none;place-items:center;font-weight:750;line-height:1;display:inline-grid;box-shadow:inset 0 0 0 1px #ffffff38,0 3px 10px #181f1b1f}.profile-avatar svg{width:58%;height:58%}.profile-avatar-small{width:30px;height:30px;font-size:10px}.profile-avatar-medium{width:36px;height:36px;font-size:12px}.profile-avatar-large{width:70px;height:70px;font-size:21px}.avatar-green{background:#238967}.avatar-blue{background:#397dc6}.avatar-purple{background:#7959b9}.avatar-orange{background:#d87936}.avatar-rose{background:#c95e78}.avatar-teal{background:#248b91}.profile-options{z-index:40;border:1px solid var(--color-border);background:var(--color-surface-solid);width:242px;box-shadow:var(--shadow-float);border-radius:15px;gap:4px;padding:9px;display:grid;position:absolute;top:calc(100% + 9px);right:0}.profile-options-label{color:var(--color-muted);letter-spacing:.07em;text-transform:uppercase;padding:6px 9px 5px;font-size:10px;font-weight:700}.profile-options button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:46px;padding:5px 9px;display:grid}.profile-options button:hover,.profile-options button.active{color:var(--color-accent-dark);background:var(--color-accent-soft)}.profile-options button>span:nth-child(2){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.profile-options button b{color:var(--color-accent)}.profile-options-divider{background:var(--color-border);height:1px;margin:4px 2px}.profile-options .manage-profiles-button{color:var(--color-muted);grid-template-columns:32px 1fr}.profile-modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#1118145c;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.profile-manager{background:var(--color-surface-solid);width:min(540px,100%);max-height:min(720px,100vh - 48px);padding:30px;overflow-y:auto}.profile-manager>header{justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:23px;display:flex}.profile-manager>header h2{letter-spacing:-.7px;margin:2px 0 7px;font-size:28px}.profile-manager>header p:last-child{max-width:390px;color:var(--color-muted);margin:0;font-size:13px;line-height:1.5}.profile-modal-close{border:1px solid var(--color-border);background:var(--color-surface-soft);width:36px;height:36px;color:var(--color-muted);cursor:pointer;border-radius:10px;flex:none;font-size:24px;line-height:1}.profile-manager-list{gap:9px;display:grid}.profile-manager-row{border:1px solid var(--color-border);border-radius:14px;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:68px;padding:10px 12px;display:grid}.profile-manager-row>span:nth-child(2){flex-direction:column;gap:3px;min-width:0;display:flex}.profile-manager-row strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.profile-manager-row small{color:var(--color-accent-dark);font-size:10px}.add-profile-button{border:1px dashed var(--color-border-strong);min-height:58px;color:var(--color-accent-dark);background:var(--color-accent-soft);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:10px;margin-top:5px;font-weight:650;display:flex}.add-profile-button span{font-size:22px}.profile-editor{gap:18px;display:grid}.profile-editor h3{margin:0;font-size:20px}.profile-editor-preview{justify-content:center;padding:4px 0;display:flex}.profile-editor label{gap:7px;font-size:12px;font-weight:650;display:grid}.profile-editor input{border:1px solid var(--color-border-strong);width:100%;height:48px;color:var(--color-text);background:var(--color-surface-solid);border-radius:12px;padding:0 14px}.profile-editor input:focus{outline:3px solid var(--color-accent-glow);border-color:var(--color-accent)}.avatar-color-picker{border:0;margin:0;padding:0}.avatar-color-picker legend{margin-bottom:10px;font-size:12px;font-weight:650}.avatar-color-picker>div{flex-wrap:wrap;gap:10px;display:flex}.avatar-color-option{border:3px solid var(--color-surface-solid);cursor:pointer;width:34px;height:34px;box-shadow:0 0 0 1px var(--color-border-strong);border-radius:50%}.avatar-color-option.selected{box-shadow:0 0 0 2px var(--color-accent)}.profile-editor-actions{justify-content:flex-end;gap:9px;padding-top:4px;display:flex}.profile-editor-actions button{min-width:130px}.profile-editor-actions button:disabled{opacity:.48;cursor:not-allowed}.profile-delete-button{color:var(--color-error);cursor:pointer;background:0 0;border:0;justify-self:start;padding:6px 0;font-size:12px;font-weight:650}.page{padding-top:28px;animation:.32s both page-in}@keyframes page-in{0%{opacity:0;transform:translateY(5px)}}.eyebrow{color:var(--color-muted);margin:0 0 8px;font-size:14px;font-weight:600}h1,h2,p{margin-top:0}h1{letter-spacing:-1.8px;margin-bottom:13px;font-size:clamp(34px,3vw,48px);line-height:1.05}h2{letter-spacing:-.6px}.page-heading{max-width:700px;padding:22px 4px 30px}.page-heading p:last-child,.practice-heading p:last-child,.platformer-intro p:last-child{color:var(--color-muted);font-size:16px}.practice-hub-heading{max-width:none;padding-bottom:25px}.practice-hub-heading p:last-child{max-width:560px}.practice-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.practice-activity-card{border-color:var(--color-border);min-height:214px;color:var(--color-text);text-align:left;cursor:pointer;grid-template-columns:60px minmax(0,1fr) auto;align-items:start;gap:20px;padding:28px;transition:border-color .18s,box-shadow .18s,transform .18s;display:grid;position:relative}.practice-activity-card:hover:not(:disabled){box-shadow:var(--shadow-float);border-color:#17886157;transform:translateY(-3px)}.activity-icon{width:60px;height:60px;color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:17px;place-items:center;display:grid}.activity-icon svg{width:28px;height:28px}.activity-copy{flex-direction:column;gap:7px;min-width:0;padding-top:2px;display:flex}.activity-copy small{color:var(--color-muted);letter-spacing:.07em;text-transform:uppercase;font-size:11px;font-weight:700}.activity-copy strong{letter-spacing:-.45px;font-size:23px}.activity-copy>span{max-width:470px;color:var(--color-muted);font-size:14px;line-height:1.55}.activity-arrow{width:38px;height:38px;color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:50%;align-self:end;place-items:center;font-size:20px;transition:transform .18s;display:grid}.practice-activity-card:hover:not(:disabled) .activity-arrow{transform:translate(3px)}.activity-badge{border:1px solid var(--color-border);color:var(--color-muted);background:var(--color-surface-soft);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:700;position:absolute;top:21px;right:22px}.practice-activity-card.is-disabled{opacity:.62;box-shadow:none;cursor:not-allowed}.practice-activity-card.is-disabled .activity-icon{color:var(--color-muted);background:var(--color-surface-soft)}.practice-breadcrumb{color:var(--color-subtle);align-items:center;gap:8px;margin-bottom:14px;font-size:12px;display:flex}.practice-breadcrumb button{color:var(--color-accent-dark);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:650}.practice-breadcrumb button:hover{text-underline-offset:3px;text-decoration:underline}.practice-breadcrumb span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.practice-layout{grid-template-columns:minmax(0,1fr) 370px;gap:24px;display:grid}.practice-card{flex-direction:column;min-height:590px;padding:40px 42px 34px;display:flex;overflow:hidden}.practice-heading{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.practice-heading h1{margin-bottom:12px}.practice-heading p:last-child{margin-bottom:0}.practice-progress{flex-direction:column;align-items:flex-end;gap:14px;display:flex}.practice-progress-tools{align-items:center;gap:9px;display:flex}.practice-progress-tools>strong{border:1px solid var(--color-border);white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:13px}.hint-button{width:34px;height:34px;color:var(--color-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;padding:0;transition:all .16s;display:grid}.hint-button svg{width:18px;height:18px}.hint-button:hover,.hint-button:focus-visible{color:var(--color-accent-dark);border-color:var(--color-border);background:var(--color-accent-soft);outline:none}.hint-button.is-active{color:var(--color-accent);background:var(--color-accent-soft)}.staff-wrap{flex:1;justify-content:center;align-items:center;min-height:285px;display:flex;position:relative}.staff-notation{width:100%;min-height:210px;color:var(--notation-color);transition:transform .18s}.staff-wrap.is-grand-staff{min-height:330px}.grand-staff-notation{min-height:280px}.staff-correct{animation:.5s staff-correct}.staff-incorrect{animation:.26s staff-wrong}@keyframes staff-correct{45%{transform:scale(1.025)}}@keyframes staff-wrong{33%{transform:translate(-4px)}66%{transform:translate(4px)}}.feedback-pill{white-space:nowrap;min-height:38px;color:var(--color-accent-dark);background:var(--color-accent-soft);opacity:0;border-radius:999px;align-items:center;gap:7px;padding:8px 15px;font-size:13px;font-weight:600;transition:all .16s;display:flex;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.feedback-pill svg{width:16px;height:16px}.feedback-pill.correct,.feedback-pill.incorrect,.staff-wrap .feedback-pill:not(:empty){opacity:1}.feedback-pill.incorrect{color:var(--color-error);background:var(--color-error-soft)}.keyboard-finder-wrap{isolation:isolate}.keyboard-finder-wrap:before{content:"";aspect-ratio:1;z-index:-1;background:radial-gradient(circle, var(--color-accent-soft) 0 57%, #eaf6f073 58% 68%, transparent 69%);border-radius:50%;width:clamp(190px,26vw,270px);position:absolute}.keyboard-finder-note{color:var(--color-text);letter-spacing:-.08em;font-size:clamp(128px,15vw,220px);font-weight:700;line-height:1;transition:color .16s,transform .18s;transform:translate(-.04em)}.keyboard-finder-note.correct{color:var(--color-accent);animation:.5s staff-correct}.keyboard-finder-note.incorrect{color:var(--color-error);animation:.26s staff-wrong}.naming-card .staff-wrap{min-height:250px}.naming-answer-area{width:min(660px,100%);margin:0 auto}.naming-answer-grid{grid-template-columns:repeat(7,minmax(54px,1fr));gap:9px;display:grid}.naming-answer-grid button{border:1px solid var(--color-border-strong);min-height:54px;color:var(--color-text);background:var(--color-surface-solid);cursor:pointer;border-radius:12px;font-size:17px;font-weight:700;transition:all .14s}.naming-answer-grid button:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent-dark);background:var(--color-accent-soft);transform:translateY(-1px)}.naming-answer-grid button.correct{border-color:var(--color-accent);color:#fff;background:var(--color-accent);box-shadow:0 7px 18px var(--color-accent-glow)}.naming-answer-grid button.incorrect{border-color:var(--color-error);color:var(--color-error);background:var(--color-error-soft);animation:.26s staff-wrong}.naming-answer-grid button:disabled:not(.correct){opacity:.52}.naming-feedback{min-height:38px;color:var(--color-muted);justify-content:center;align-items:center;gap:7px;margin-top:14px;font-size:13px;font-weight:600;display:flex}.naming-feedback svg{width:16px;height:16px}.naming-feedback.correct{color:var(--color-accent-dark)}.naming-feedback.incorrect{color:var(--color-error)}.naming-stats-card{margin-top:24px;padding:0 24px}kbd{border:1px solid var(--color-border-strong);background:linear-gradient(var(--color-surface-solid), var(--color-surface-soft));min-width:26px;height:26px;color:var(--color-muted);box-shadow:0 1px 0 var(--color-border-strong);font:600 12px var(--font-sans);border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.practice-config{padding:31px 27px}.section-title{align-items:center;gap:14px;margin-bottom:31px;display:flex}.section-title>span:last-child,.section-title>span:only-child{flex-direction:column;gap:4px;display:flex}.section-title strong{font-size:16px}.section-title small{color:var(--color-muted);font-size:12px}.icon-tile{background:var(--color-surface-soft);width:42px;height:42px;color:var(--color-text);border-radius:11px;flex:none;place-items:center;display:grid}.practice-config label{justify-content:space-between;margin:25px 0 11px;font-size:13px;font-weight:600;display:flex}.practice-config label span{color:var(--color-muted);font-size:11px;font-weight:500}.hand-setting{border:0;margin:0;padding:0}.hand-setting legend{margin-bottom:11px;font-size:13px;font-weight:600}.hand-selector{border:1px solid var(--color-border);background:var(--color-surface-soft);border-radius:12px;grid-template-columns:repeat(3,1fr);padding:3px;display:grid}.hand-selector button{min-height:37px;color:var(--color-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:9px;font-size:12px;font-weight:650;transition:all .15s}.hand-selector button:hover{color:var(--color-accent-dark)}.hand-selector button.selected{color:var(--color-accent-dark);background:var(--color-surface-solid);box-shadow:0 2px 8px #1c322814, inset 0 0 0 1px var(--color-border)}.hand-selector button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.note-toggle-grid button{border:1px solid var(--color-border);background:var(--color-surface-solid);cursor:pointer;min-height:42px;color:var(--color-muted);border-radius:10px;font-size:12px;font-weight:600}.note-toggle-grid button.selected{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent-dark);box-shadow:inset 0 0 0 1px #17886112}.note-toggle-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.note-toggle-grid button{min-height:38px}.config-note{border-top:1px solid var(--color-border);color:var(--color-muted);margin:24px 0 0;padding-top:17px;font-size:12px}.piano-card{margin-top:24px;padding:0 24px 23px}.stats-strip{grid-template-columns:repeat(3,minmax(140px,1fr));align-items:center;min-height:96px;display:grid}.stat-item{border-right:1px solid var(--color-border);align-items:center;gap:14px;padding:0 28px;display:flex}.stat-item:last-child{border-right:0}.stat-item svg{stroke-width:2.1px;width:31px;height:31px}.stat-item.flame svg{color:var(--color-flame);fill:#f179381a}.stat-item.star svg{color:var(--color-gold);fill:#f2b63424}.stat-item.target svg{color:var(--color-accent)}.stat-item span{flex-direction:column;display:flex}.stat-item strong{font-size:21px}.stat-item small{color:var(--color-muted);font-size:12px}.world-progress,.note-bar>div{background:var(--color-border);border-radius:999px;height:9px;overflow:hidden}.world-progress i,.note-bar>div i{background:linear-gradient(90deg, var(--color-accent), #46b78d);border-radius:inherit;height:100%;display:block}.piano{background:var(--color-surface-solid);border:0;border-radius:15px;height:166px;position:relative;overflow:hidden;box-shadow:inset 0 3px 8px #18201b14}.piano:after{content:"";z-index:4;border:2px solid var(--piano-frame);border-radius:inherit;pointer-events:none;position:absolute;inset:0}.white-keys{border-radius:inherit;width:100%;height:100%;display:flex;overflow:hidden}.piano-key{appearance:none;color:inherit;font:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;padding:0;transition:all 80ms}.piano-key:focus-visible{outline:3px solid var(--color-accent);outline-offset:-4px}.white-key{border:0;border-right:1px solid var(--piano-key-border);background:linear-gradient(90deg, var(--piano-white-start), var(--piano-white-end));flex:1;min-width:0;position:relative;box-shadow:inset 0 -7px 10px #1f2b2406}.white-key:last-child{border-right:0}.white-key.is-active{background:linear-gradient(var(--color-accent-soft), #bcebd6);box-shadow:inset 0 0 0 2px var(--color-accent), 0 0 24px var(--color-accent-glow);transform:translateY(3px)}.white-key .key-note{font-size:12px;font-weight:600;position:absolute;bottom:13px;left:50%;transform:translate(-50%)}.white-key kbd{opacity:.62;position:absolute;bottom:39px;left:50%;transform:translate(-50%)}.black-key{z-index:2;border:2px solid var(--piano-black-start);background:linear-gradient(90deg, var(--piano-black-start), var(--piano-black-mid) 50%, var(--piano-black-start));border-radius:0 0 5px 5px;width:4.7%;height:58%;position:absolute;top:0;transform:translate(-50%);box-shadow:0 5px 5px #00000047,inset 0 -4px 3px #ffffff14}.black-key.is-active{background:linear-gradient(90deg, var(--color-accent-dark), #5bd2a5, var(--color-accent-dark));box-shadow:0 4px 8px var(--color-accent-glow);transform:translate(-50%,3px)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.rhythm-card{min-height:780px}.rhythm-heading{align-items:flex-start}.rhythm-session-meta{white-space:nowrap;align-items:center;gap:7px;padding-top:30px;display:flex}.rhythm-session-meta strong,.rhythm-session-meta span{border:1px solid var(--color-border);background:var(--color-surface-soft);border-radius:999px;align-items:center;min-height:32px;padding:0 11px;font-size:11px;display:inline-flex}.rhythm-session-meta strong{color:var(--color-accent-dark);background:var(--color-accent-soft)}.continuous-metronome{border:1px solid var(--color-border);background:var(--color-surface-soft);border-radius:15px;grid-template-columns:minmax(120px,1fr) auto 42px;align-items:center;gap:20px;min-height:68px;margin-top:22px;padding:12px 17px;display:grid}.continuous-metronome>span{flex-direction:column;gap:2px;display:flex}.continuous-metronome>span small{color:var(--color-muted);font-size:10px}.continuous-metronome>b{width:34px;height:34px;color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:50%;place-items:center;font-size:13px;display:grid}.metronome-beats{align-items:center;gap:15px;display:flex}.metronome-beats i{--beat-energy:0;border:2px solid var(--color-border-strong);background:var(--color-surface-solid);border-radius:50%;width:13px;height:13px;transition:border-color 80ms linear,background 80ms linear;display:block}.metronome-beats i.accent{border-color:color-mix(in srgb, var(--color-accent) 42%, var(--color-border));width:15px;height:15px}.metronome-beats i.active{border-color:var(--color-accent);background:var(--color-accent);transform:scale(calc(1 + var(--beat-energy) * .24));box-shadow:0 0 0 calc(var(--beat-energy) * 7px) var(--color-accent-glow)}.metronome-beats i.active.accent{background:var(--color-accent-dark)}.rhythm-stage{border:1px solid var(--color-border);background:linear-gradient(180deg, var(--color-surface-solid), var(--color-surface-soft));border-radius:18px;flex-direction:column;flex:1;justify-content:center;min-height:430px;margin-top:14px;display:flex;position:relative;overflow:hidden}.rhythm-notation-scroll{scroll-snap-type:x proximity;scrollbar-width:thin;gap:12px;width:100%;padding:24px 22px 27px;display:flex;overflow-x:auto}.rhythm-measure{scroll-snap-align:center;border:1px solid var(--color-border);background:var(--color-surface-solid);border-radius:14px;flex:1 0 320px;min-width:min(340px,100vw - 130px);position:relative;box-shadow:0 8px 24px #203b2c0b}.rhythm-measure>small{color:var(--color-subtle);text-align:right;padding:0 14px 12px;font-size:10px;display:block}.rhythm-notation-svg{height:168px;color:var(--notation-color);overflow:hidden}.rhythm-notation-svg svg{display:block}.rhythm-playhead{z-index:4;background:var(--color-accent);width:3px;height:83px;box-shadow:0 0 0 5px var(--color-accent-glow);pointer-events:none;border-radius:999px;transition:left 45ms linear;position:absolute;top:57px}.rhythm-event-markers{justify-content:space-around;align-items:center;gap:5px;min-height:28px;padding:0 34px;display:flex}.rhythm-event-marker{color:#0000;border-radius:50%;place-items:center;width:24px;height:24px;font-size:12px;font-weight:800;display:grid}.rhythm-event-marker.good{color:#fff;background:var(--color-success)}.rhythm-event-marker.warning{color:var(--color-text);background:var(--color-gold)}.rhythm-event-marker.bad{color:#fff;background:var(--color-error)}.rhythm-event-marker.holding{color:var(--color-accent-dark);background:var(--color-accent-soft);animation:.7s ease-in-out infinite alternate rhythm-holding}@keyframes rhythm-holding{to{box-shadow:0 0 0 6px var(--color-accent-glow);transform:scale(1.16)}}.rhythm-waiting-guide{border-top:1px solid var(--color-border);min-height:72px;color:var(--color-text);align-items:center;gap:13px;padding:14px 24px;display:flex}.rhythm-waiting-guide>span:last-child{flex-direction:column;gap:3px;display:flex}.rhythm-waiting-guide small{color:var(--color-muted);font-size:11px}.waiting-pulse{width:39px;height:39px;color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:50%;flex:none;place-items:center;font-size:21px;animation:1.3s ease-in-out infinite alternate waiting-pulse;display:grid}@keyframes waiting-pulse{to{box-shadow:0 0 0 7px var(--color-accent-glow);transform:scale(1.08)}}.rhythm-live-feedback{border-top:1px solid var(--color-border);min-height:66px;color:var(--color-muted);flex-direction:column;justify-content:center;gap:10px;padding:13px 24px 16px;font-size:13px;display:flex}.rhythm-live-feedback.perfect,.rhythm-live-feedback.good{color:var(--color-accent-dark)}.rhythm-live-feedback.early,.rhythm-live-feedback.late,.rhythm-live-feedback.too-short,.rhythm-live-feedback.too-long{color:#8a6200}.rhythm-live-feedback.extra,.rhythm-live-feedback.rest-mistake,.rhythm-live-feedback.missed{color:var(--color-error)}.rhythm-progress-track{background:var(--color-border);border-radius:999px;width:100%;height:6px;overflow:hidden}.rhythm-progress-track i{border-radius:inherit;background:linear-gradient(90deg, var(--color-accent), #46b78d);height:100%;transition:width 45ms linear;display:block}.rhythm-results{border:1px solid var(--color-border);background:var(--color-surface-soft);border-radius:18px;gap:24px;margin-top:16px;padding:26px;animation:.26s both rhythm-results-in;display:grid}@keyframes rhythm-results-in{0%{opacity:0;transform:translateY(7px)}}.rhythm-results-summary{text-align:center;place-items:center;gap:12px;display:grid}.rhythm-result-icon{color:#fff;background:var(--color-accent);width:54px;height:54px;box-shadow:0 9px 24px var(--color-accent-glow);border-radius:50%;place-items:center;display:grid}.rhythm-result-icon svg{width:28px;height:28px}.rhythm-results h2{margin:4px 0 0;font-size:27px}.rhythm-results-summary>div>small{color:var(--color-muted)}.rhythm-result-grid{grid-template-columns:repeat(5,1fr);gap:9px;width:min(620px,100%);display:grid}.rhythm-result-grid.duration-only{grid-template-columns:repeat(2,1fr);width:min(320px,100%)}.rhythm-result-grid span{border:1px solid var(--color-border);background:var(--color-surface-soft);border-radius:12px;flex-direction:column;gap:3px;padding:13px 8px;display:flex}.rhythm-result-grid strong{font-size:21px}.rhythm-result-grid small{color:var(--color-muted);font-size:10px}.rhythm-event-results-heading{border-top:1px solid var(--color-border);justify-content:space-between;align-items:flex-end;gap:20px;padding-top:20px;display:flex}.rhythm-event-results-heading h3{margin:0 0 4px;font-size:18px}.rhythm-event-results-heading p{color:var(--color-muted);margin:0;font-size:11px}.rhythm-event-results{scrollbar-width:thin;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:340px;padding-right:3px;display:grid;overflow-y:auto}.rhythm-event-result{border:1px solid var(--color-border);background:var(--color-surface-solid);border-left-width:4px;border-radius:12px;gap:12px;min-width:0;padding:14px;display:grid}.rhythm-event-result.success{border-left-color:var(--color-success)}.rhythm-event-result.warning{border-left-color:var(--color-gold)}.rhythm-event-result.error{border-left-color:var(--color-error)}.rhythm-event-result-title{align-items:center;gap:10px;display:flex}.rhythm-event-result-title>span:last-child{flex-direction:column;gap:2px;display:flex}.rhythm-event-result-title small{color:var(--color-muted);font-size:10px}.rhythm-event-result-icon{color:#fff;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-size:12px;font-weight:800;display:grid}.rhythm-event-result-icon.success{background:var(--color-success)}.rhythm-event-result-icon.warning{color:var(--color-text);background:var(--color-gold)}.rhythm-event-result-icon.error{background:var(--color-error)}.rhythm-event-result>p{color:var(--color-error);margin:0;font-size:11px;line-height:1.45}.rhythm-event-result.success>p{color:var(--color-accent-dark)}.rhythm-event-result-details{grid-template-columns:1fr 1fr;gap:7px;display:grid}.rhythm-event-result-details.duration-only{grid-template-columns:1fr}.rhythm-event-result-details span{min-width:0;color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:9px;flex-direction:column;gap:3px;padding:9px 10px;display:flex}.rhythm-event-result-details span.has-error{color:#805b00;background:color-mix(in srgb, var(--color-gold) 18%, var(--color-surface-solid))}.rhythm-event-result-details b{text-transform:uppercase;letter-spacing:.04em;font-size:10px}.rhythm-event-result-details small{text-overflow:ellipsis;color:inherit;white-space:nowrap;font-size:10px;overflow:hidden}.rhythm-result-actions{justify-content:center;gap:9px;padding-top:4px;display:flex}.rhythm-result-actions button{align-items:center;gap:7px;display:inline-flex}.rhythm-result-actions svg{width:17px;height:17px}.rhythm-settings{padding-bottom:25px}.rhythm-settings .section-title{margin-bottom:17px}.rhythm-settings fieldset{border:0;min-width:0;margin:0;padding:0}.rhythm-settings fieldset:disabled{opacity:.6}.rhythm-setting-label{justify-content:space-between;margin:16px 0 8px;font-size:12px;font-weight:650;display:flex}.rhythm-setting-label span{color:var(--color-muted);font-size:10px;font-weight:500}.rhythm-segmented{gap:6px;display:grid}.rhythm-segmented.three{grid-template-columns:repeat(3,1fr)}.rhythm-segmented.four{grid-template-columns:repeat(4,1fr)}.rhythm-segmented button,.rhythm-value-grid button{border:1px solid var(--color-border);min-width:0;min-height:36px;color:var(--color-muted);background:var(--color-surface-solid);cursor:pointer;border-radius:9px;padding:6px;font-size:11px;font-weight:650}.rhythm-segmented button.selected,.rhythm-value-grid button.selected{border-color:var(--color-accent);color:var(--color-accent-dark);background:var(--color-accent-soft)}.rhythm-segmented button:disabled,.rhythm-value-grid button:disabled{cursor:not-allowed;opacity:.36}.length-options button{flex-direction:column;align-items:center;gap:1px;display:flex}.length-options small{color:var(--color-subtle);font-size:8px;font-weight:500}.rhythm-tempo{width:100%;accent-color:var(--color-accent);cursor:pointer}.rhythm-switch-row{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:15px;min-height:54px;display:flex}.rhythm-switch-row>span{flex-direction:column;gap:2px;display:flex}.rhythm-switch-row strong{font-size:12px}.rhythm-switch-row small{color:var(--color-muted);font-size:10px}.rhythm-value-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.rhythm-piano-card{padding-top:21px}.rhythm-piano-heading{align-items:center;gap:12px;margin:0 5px 18px;display:flex}.rhythm-piano-heading>span:last-child{flex-direction:column;gap:3px;display:flex}.rhythm-piano-heading small{color:var(--color-muted);font-size:11px}.finish-star{background:var(--color-accent-soft);width:66px;height:66px;color:var(--color-accent);border-radius:50%;place-items:center;margin:0 auto 20px;display:grid}.finish-star svg{width:34px;height:34px}.primary-button,.secondary-button,.danger-button{cursor:pointer;border:1px solid #0000;border-radius:11px;min-height:44px;padding:0 20px;font-weight:600}.primary-button{color:#fff;background:var(--color-accent);box-shadow:0 8px 20px var(--color-accent-glow)}.primary-button:hover{background:var(--color-accent-dark)}.secondary-button{background:var(--color-surface-solid);border-color:var(--color-border-strong)}.danger-button{color:var(--color-error);background:var(--color-error-soft);border-color:#d75e552e}.platformer-intro{justify-content:space-between;align-items:flex-end;gap:30px;padding:9px 4px 27px;display:flex}.platformer-intro h1{margin-bottom:9px}.game-stats{align-items:center;gap:10px;display:flex}.game-stats span{border:1px solid var(--color-border);background:var(--color-surface);min-width:70px;height:48px;box-shadow:var(--shadow-card);border-radius:14px;justify-content:center;align-items:center;gap:8px;display:flex}.game-stats b{color:var(--color-accent);font-size:18px}.game-stats span:nth-child(2) b{color:var(--color-flame)}.game-stats span:nth-child(3) b{color:var(--color-gold)}.game-stats strong{font-size:18px}.game-card{padding:18px;position:relative;overflow:hidden}.world{isolation:isolate;background:linear-gradient(#bde7ee 0%,#e6f5e9 57%,#c8ddac 58%,#86b76d 100%);border-radius:17px;height:430px;position:relative;overflow:hidden;box-shadow:inset 0 0 55px #25664e14}.world.is-paused:after{content:"";z-index:9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#1f44391c;animation:.22s both pause-world;position:absolute;inset:0}@keyframes pause-world{0%{opacity:0}}.world-track{z-index:3;will-change:transform;transition:transform 45ms linear;position:absolute;inset:0 auto 0 0}.world-track.is-traversing{transition:transform var(--crossing-time) cubic-bezier(.35,.05,.25,1)}.sun{background:#fff3bd;border-radius:50%;width:94px;height:94px;position:absolute;top:29px;right:8%;box-shadow:0 0 0 18px #fff3bd29,0 0 60px #ffd76652}.game-cloud{opacity:.78;width:104px;height:30px;animation:9s ease-in-out infinite alternate cloud-float;position:absolute}.game-cloud i{background:#ffffffd1;border-radius:999px;position:absolute;bottom:0}.game-cloud i:first-child{width:104px;height:22px;left:0}.game-cloud i:nth-child(2){width:42px;height:42px;left:20px}.game-cloud i:nth-child(3){width:34px;height:34px;right:16px}.cloud-one{top:50px;left:8%}.cloud-two{animation-delay:-4s;top:103px;right:26%;transform:scale(.7)}@keyframes cloud-float{to{translate:18px 3px}}.mountain{clip-path:polygon(0 100%,22% 34%,39% 71%,58% 13%,100% 100%);background:#3a7c6224;width:45%;height:170px;position:absolute;bottom:90px}.mountain-one{left:-3%}.mountain-two{opacity:.7;right:-5%;transform:scaleX(-1)}.far-trees{opacity:.42;justify-content:space-around;align-items:flex-end;height:76px;display:flex;position:absolute;bottom:106px;left:0;right:0}.far-trees i{clip-path:polygon(50% 0,72% 34%,62% 34%,88% 72%,60% 72%,60% 100%,40% 100%,40% 72%,12% 72%,38% 34%,28% 34%);background:#57936b;width:34px;height:62px;display:block}.far-trees i:nth-child(3n){scale:.72}.far-trees i:nth-child(2n){translate:0 9px}.world-path{z-index:1;clip-path:polygon(0 14%,7% 5%,14% 12%,23% 3%,32% 11%,42% 4%,51% 13%,61% 3%,71% 11%,80% 4%,91% 12%,100% 3%,100% 100%,0 100%);background:#6fa05c;border-top:9px solid #e8f2bd;height:87px;position:absolute;bottom:42px;left:-2%;right:-2%;box-shadow:inset 0 11px #ffffff1f}.world-details{z-index:2;color:#fffc;justify-content:space-between;display:flex;position:absolute;bottom:132px;left:10%;right:9%}.world-details i{font-style:normal;animation:2.4s ease-in-out infinite alternate detail-float}.world-details i:nth-child(2n){color:#1788616b;animation-delay:-1s}@keyframes detail-float{to{transform:translateY(-8px)rotate(8deg)}}.game-obstacle{z-index:5;transition:filter .3s,opacity .3s;position:absolute;transform:translate(-50%)}.game-obstacle.is-cleared{filter:saturate(.75);opacity:.88}.brick-wall{background:#8a5542;border-radius:6px 6px 3px 3px;grid-template-columns:repeat(2,1fr);gap:3px;width:100%;height:100%;padding:4px;display:grid;box-shadow:0 7px #6d4033,0 10px 12px #2d412e33}.brick-wall i{background:linear-gradient(145deg,#e18a64,#b7644c);border:1px solid #67362866;border-radius:3px;box-shadow:inset 0 2px #ffffff2e}.brick-wall i:nth-child(3),.brick-wall i:nth-child(4),.brick-wall i:nth-child(7),.brick-wall i:nth-child(8){translate:-6px}.chasm-depth{clip-path:polygon(0 0,15% 11%,26% 2%,39% 15%,50% 4%,62% 14%,75% 3%,87% 12%,100% 0,88% 100%,11% 100%);background:linear-gradient(#35463f,#101d1a 65%);width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 16px 20px #0000004d}.chasm-depth:before,.chasm-depth:after{content:"";background:#e8f2bd;width:32px;height:28px;position:absolute;top:-4px}.chasm-depth:before{left:-7px;rotate:-13deg}.chasm-depth:after{right:-7px;rotate:13deg}.chasm-depth i{background:#8ec4a12e;border-radius:50%;width:11px;height:11px;animation:1.7s ease-in-out infinite alternate chasm-glow;position:absolute}.chasm-depth i:first-child{top:32%;left:33%}.chasm-depth i:nth-child(2){animation-delay:-.7s;top:55%;left:58%}.chasm-depth i:nth-child(3){animation-delay:-1.2s;top:76%;left:46%}@keyframes chasm-glow{to{opacity:.2;scale:.55}}.player{--crossing-time:0s;z-index:7;background:linear-gradient(145deg,#ffd18b,#efa45b);border:3px solid #674d32;border-radius:48% 48% 44% 44%;width:54px;height:54px;transition:left 40ms linear;position:absolute;bottom:111px;transform:translate(-50%);box-shadow:0 8px #2f4a3724,inset 6px 6px #ffffff29}.player-ear{z-index:-1;background:#f6b768;border:3px solid #674d32;border-radius:80% 20% 50% 50%;width:20px;height:25px;position:absolute;top:-13px}.player-ear.left{left:2px;transform:rotate(-25deg)}.player-ear.right{right:2px;transform:rotate(25deg)}.player-face{height:100%;position:relative}.player-face>i{background:#5d4430;border-radius:50%;width:5px;height:7px;position:absolute;top:20px}.player-face>i:first-child{left:14px}.player-face>i:nth-child(2){right:14px}.player-face>span{border-bottom:2px solid #5d4430;border-radius:50%;width:12px;height:6px;position:absolute;top:31px;left:50%;translate:-50%}.player-scarf{background:#3b9b78;border-radius:8px;width:31px;height:9px;position:absolute;bottom:3px;left:11px;box-shadow:17px 7px 0 -2px #3b9b78}.facing-left{transform:translate(-50%)scaleX(-1)}@keyframes bunny-walk{50%{bottom:117px;rotate:-2deg}}@keyframes hop-wall{0%,to{rotate:0;bottom:111px}45%{bottom:202px;rotate:12deg}}@keyframes leap-chasm{0%,to{rotate:0;bottom:111px}48%{bottom:236px;rotate:18deg;scale:1.04}}.traversal-effect{z-index:8;pointer-events:none;width:130px;height:95px;position:absolute;bottom:97px;transform:translate(-50%)}.traversal-effect i{border-radius:50%;animation:.7s ease-out both traversal-particle;display:block;position:absolute}.traversal-effect i:first-child{bottom:8%;left:13%}.traversal-effect i:nth-child(2){animation-delay:80ms;bottom:3%;left:28%}.traversal-effect i:nth-child(3){animation-delay:.14s;bottom:11%;left:43%}.traversal-effect i:nth-child(4){animation-delay:.22s;bottom:4%;left:58%}.traversal-effect i:nth-child(5){animation-delay:.3s;bottom:12%;left:72%}.traversal-effect i:nth-child(6){animation-delay:.36s;bottom:5%;left:84%}.traversal-effect i:nth-child(7){animation-delay:.12s;bottom:20%;left:50%}.effect-wall i,.effect-chasm i{background:#f2d28c;width:10px;height:10px}@keyframes traversal-particle{0%{opacity:0;transform:translateY(0)scale(.3)}25%{opacity:1}to{opacity:0;transform:translateY(-62px)scale(1.15)}}.finish-flag{z-index:4;color:var(--color-accent-dark);flex-direction:column;align-items:center;display:flex;position:absolute;bottom:113px;right:auto;transform:translate(-50%)}.finish-flag>span{background:#fff9d6;border:2px solid #786f49;border-radius:4px;place-items:center;width:48px;height:37px;font-size:20px;display:grid}.finish-flag:after{content:"";background:#786f49;width:3px;height:58px}.world-progress{z-index:8;background:#ffffff73;height:7px;position:absolute;bottom:16px;left:3%;right:3%}.challenge-panel{z-index:10;width:min(850px,100% - 60px);min-height:230px;box-shadow:var(--shadow-float);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff0;border:1px solid #ffffffe6;border-radius:20px;align-items:center;padding:24px 30px;animation:.26s challenge-in;position:absolute;top:50%;left:50%;transform:translate(-50%,-53%)}@keyframes challenge-in{0%{opacity:0;transform:translate(-50%,-48%)scale(.98)}}.visual-challenge{grid-template-columns:1fr 56px;gap:0;width:min(500px,100% - 40px);min-height:225px;padding:12px 20px 18px;transition:border-color .16s;display:grid;overflow:hidden}.visual-challenge.has-correct{border-color:#17886166}.visual-challenge.has-incorrect{border-color:#d75e5573;animation:.26s challenge-wrong}@keyframes challenge-wrong{33%{transform:translate(-51%,-53%)}66%{transform:translate(-49%,-53%)}}.challenge-orbit{pointer-events:none;position:absolute;inset:0}.challenge-orbit i{background:var(--color-accent-glow);border-radius:50%;width:8px;height:8px;animation:1.8s ease-in-out infinite alternate orbit-pulse;position:absolute}.challenge-orbit i:first-child{top:28px;left:25px}.challenge-orbit i:nth-child(2){animation-delay:-.7s;bottom:31px;right:33px}.challenge-orbit i:nth-child(3){animation-delay:-1.2s;top:16px;left:53%}@keyframes orbit-pulse{to{opacity:.25;transform:scale(2)}}.visual-challenge .mini-staff{height:178px;position:relative;overflow:hidden}.visual-challenge .mini-staff .staff-notation{transform-origin:50%;transform:scale(.92)}.challenge-status{background:var(--color-accent-soft);width:50px;height:50px;color:var(--color-accent);border-radius:50%;align-self:center;place-items:center;font-size:24px;transition:all .16s;display:grid;box-shadow:0 0 0 8px #1788610f}.challenge-status svg{stroke-width:2.5px;width:25px;height:25px}.challenge-status.correct{background:var(--color-accent);color:#fff;transform:scale(1.08)}.challenge-status.incorrect{background:var(--color-error-soft);color:var(--color-error);box-shadow:0 0 0 8px #d75e550f}.challenge-pips{grid-column:1/-1;justify-content:center;gap:9px;display:flex}.challenge-pips i{background:var(--color-border);border-radius:999px;width:38px;height:7px;transition:all .18s}.challenge-pips i.done{background:var(--color-accent);box-shadow:0 3px 9px var(--color-accent-glow)}.challenge-pips i.current{background:linear-gradient(90deg, var(--color-accent-glow), var(--color-border));animation:1.2s ease-in-out infinite alternate pip-breathe}@keyframes pip-breathe{to{opacity:.45}}.game-finish-overlay{z-index:12;text-align:center;width:min(650px,100% - 60px);box-shadow:var(--shadow-float);background:#fffffff5;border:1px solid #ffffffe6;border-radius:22px;padding:28px 35px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.game-finish-overlay .finish-star{color:var(--color-gold);background:#fff8df}.game-finish-overlay .finish-star svg{fill:#f2b63426}.visual-summary{grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0;display:grid}.visual-summary span{background:var(--color-surface-soft);border-radius:13px;justify-content:center;align-items:center;gap:8px;min-height:66px;display:flex}.visual-summary b{color:var(--color-accent);font-size:19px}.visual-summary span:nth-child(2) b{color:var(--color-flame)}.visual-summary span:nth-child(3) b{color:var(--color-gold)}.visual-summary strong{font-size:21px}.replay-button{place-items:center;width:54px;height:48px;padding:0;display:inline-grid}.replay-button svg{width:22px;height:22px}.game-piano-card{margin-top:20px;padding:18px}.visual-controls{color:var(--color-muted);justify-content:center;align-items:center;gap:18px;padding:0 6px 15px;display:flex}.visual-controls span{align-items:center;gap:6px;display:flex}.visual-controls>i{background:var(--color-border-strong);width:1px;height:24px}.visual-controls b{letter-spacing:2px;font-weight:600}.piano-compact{height:112px}.piano-compact .white-key .key-note{bottom:7px}.piano-compact .white-key kbd{bottom:30px}.platformer-toolbar{align-items:center;gap:14px;display:flex}.level-learning{border:1px solid var(--color-border);min-width:220px;box-shadow:var(--shadow-card);background:#ffffffad;border-radius:13px;flex-direction:column;gap:7px;padding:10px 13px;display:flex}.level-learning small{color:var(--color-muted);letter-spacing:.04em;text-transform:uppercase;font-size:10px;font-weight:600}.level-learning>div{align-items:center;gap:6px;display:flex}.level-learning span{color:var(--color-text);margin-right:3px;font-size:12px;font-weight:600}.level-learning b{min-width:30px;color:var(--color-accent-dark);background:var(--color-accent-soft);text-align:center;border-radius:8px;padding:4px 6px;font-size:11px}.movement-toggle{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);border-radius:13px;padding:4px;display:flex}.movement-toggle button{min-height:38px;color:var(--color-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:9px;padding:0 13px;font-size:12px;font-weight:600}.movement-toggle button.active{color:var(--color-accent-dark);background:var(--color-accent-soft);box-shadow:inset 0 0 0 1px #17886124}.star-meter{white-space:nowrap;min-width:0!important;height:auto!important;box-shadow:none!important;background:0 0!important;border:0!important;gap:2px!important;display:inline-flex!important}.star-meter i{color:#787a7338;font-size:16px;font-style:normal;line-height:1}.star-meter i.earned{color:var(--color-gold);filter:drop-shadow(0 2px 4px #f2b6343d)}.level-selector{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:18px;padding:10px;display:grid}.level-selector>button{min-width:0;min-height:64px;color:var(--color-text);background:var(--color-surface-soft);font:inherit;text-align:left;cursor:pointer;border:1px solid #0000;border-radius:12px;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:8px;padding:7px 9px;transition:all .16s;display:grid}.level-selector>button:hover:not(:disabled){border-color:var(--color-border-strong);transform:translateY(-1px)}.level-selector>button.active{border-color:var(--color-accent);background:var(--color-accent-soft)}.level-selector>button:disabled{color:var(--color-subtle);cursor:not-allowed;opacity:.58}.level-selector>button>b{width:30px;height:30px;color:var(--color-accent-dark);background:#fff;border-radius:9px;place-items:center;display:grid;box-shadow:0 3px 9px #1f473614}.level-selector>button:disabled>b{color:var(--color-subtle)}.level-selector>button>span{flex-direction:column;gap:7px;min-width:0;display:flex}.level-selector strong{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.level-selector .star-meter i{font-size:11px}.world{--ground:#76ab64;--ground-edge:#dceead;--tree:#57936b;background:linear-gradient(#bde7ee 0%,#e6f5e9 58%,#c8ddac 59%,#86b76d 100%);height:440px}.world.biome-forest{--ground:#4f8b59;--ground-edge:#b9da8b;--tree:#336f50;background:linear-gradient(#8bc9bf 0%,#c9e3c5 58%,#7fa56b 59%,#48764f 100%)}.biome-backdrop{z-index:-1;background-image:linear-gradient(to bottom, #ffffff0a, #fff3 55%, #3d6f4a29), var(--biome-image);opacity:.58;filter:saturate(.86);background-position:50%;background-size:cover;position:absolute;inset:0}.biome-forest .biome-backdrop{opacity:.7;filter:saturate(.76)brightness(.92)}.biome-forest .sun{opacity:.55;width:70px;height:70px}.biome-forest .game-cloud{opacity:.34}.biome-forest .mountain{background:#1c553b33}.biome-forest .far-trees{opacity:.72}.biome-forest .far-trees i{background:var(--tree);clip-path:polygon(44% 0,64% 4%,67% 23%,90% 29%,79% 48%,91% 62%,63% 70%,58% 100%,42% 100%,39% 70%,9% 62%,21% 46%,10% 29%,35% 23%);width:48px;height:92px}.biome-forest .world-details i:nth-child(3n+1){color:#f2d87c;font-size:11px}.world.is-paused:after{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#1f44390a,#1f44391a)}.world-path{background:var(--ground);border-top-color:var(--ground-edge)}.game-obstacle{transition:filter .26s,opacity .26s,transform .26s}.game-obstacle.is-reacting{filter:drop-shadow(0 0 13px #ffec89b3)}.obstacle-art{width:100%;height:100%;position:relative}.obstacle-art>img{object-fit:contain;width:100%;height:100%;transition:all .32s;display:block}.obstacle-wall{width:94px;height:105px;bottom:69px}.wall-art{overflow:visible}.wall-art img{z-index:2;filter:saturate(.92);position:relative}.wall-cracks{position:absolute;inset:12px 10px 13px}.wall-cracks i{opacity:0;transform-origin:top;background:#6e392e;width:2px;height:20px;transition:all .18s;position:absolute;top:44%;left:50%;transform:rotate(28deg)}.wall-cracks i:after{content:"";background:inherit;transform-origin:0;width:12px;height:2px;position:absolute;top:9px;left:0;transform:rotate(-58deg)}.wall-cracks i:nth-child(2){top:20%;left:34%;transform:rotate(-21deg)}.wall-cracks i:nth-child(3){top:24%;left:67%;transform:rotate(14deg)}.wall-cracks i:nth-child(4){top:57%;left:44%;transform:rotate(-42deg)}.wall-cracks i.active{opacity:.92;animation:.22s both crack-pop}.obstacle-wall.is-cleared{opacity:.96;filter:saturate(.78)}.obstacle-wall.is-cleared img{opacity:1;filter:saturate(.78)brightness(.98);transform:none}@keyframes crack-pop{0%{opacity:0;scale:.2}}.obstacle-water{width:240px;height:142px;bottom:0}.water-art{overflow:hidden}.water-depth{clip-path:polygon(0 0,13% 7%,25% 1%,37% 8%,50% 2%,63% 8%,75% 1%,87% 7%,100% 0,91% 100%,9% 100%);background:linear-gradient(#62c4dc 0,#2387b0 34%,#15506f 73%,#0d3048 100%);position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 18px 24px #104d6552}.water-depth:before,.water-depth:after{content:"";z-index:1;background:var(--ground-edge);width:36px;height:31px;position:absolute;top:-7px}.water-depth:before{left:-8px;rotate:-14deg}.water-depth:after{right:-8px;rotate:14deg}.water-depth i{border-top:2px solid #e0f9ff9e;border-radius:50%;width:42px;height:7px;animation:1.8s ease-in-out infinite alternate water-current;position:absolute}.water-depth i:first-child{top:48%;left:23%}.water-depth i:nth-child(2){animation-delay:-.7s;top:67%;right:18%}.water-depth i:nth-child(3){animation-delay:-1.2s;top:83%;left:41%}@keyframes water-current{to{opacity:.35;translate:13px}}.water-art .water-surface{z-index:2;opacity:.72;object-fit:contain;filter:saturate(.98);width:218px;height:108px;position:absolute;top:-21px;left:50%;transform:translate(-50%)}.stepping-stones{z-index:3;height:44px;position:absolute;top:18px;left:26px;right:26px}.stepping-stones i{opacity:.28;background:#82968c;border:2px solid #ffffff9e;border-radius:50%;width:30px;height:13px;transition:all .22s cubic-bezier(.2,.8,.3,1.25);position:absolute;bottom:0;transform:translate(-50%)scale(.75);box-shadow:0 5px #1e4f5c40}.stepping-stones i:nth-child(2n){bottom:12px}.stepping-stones i.active{opacity:1;background:#a9c784;transform:translate(-50%)scale(1);box-shadow:0 0 0 5px #ffed9340,0 5px #1e4f5c40}.obstacle-chasm{width:220px;height:140px;bottom:0}.chasm-art{overflow:hidden}.chasm-art .chasm-depth{clip-path:polygon(0 0,14% 8%,26% 1%,39% 10%,50% 3%,62% 11%,75% 2%,88% 8%,100% 0,88% 100%,12% 100%);background:linear-gradient(#32473f 0,#172521 48%,#09110f 100%);width:auto;height:auto;position:absolute;inset:0;box-shadow:inset 0 20px 25px #00000061}.jump-charge{z-index:2;justify-content:space-around;display:flex;position:absolute;top:13px;left:25px;right:25px}.jump-charge i{color:#ffffff80;opacity:.35;background:#10251f7a;border:1px solid #ffffff73;border-radius:50%;place-items:center;width:26px;height:26px;font-size:13px;font-style:normal;transition:all .24s cubic-bezier(.2,.8,.3,1.25);display:grid;transform:translateY(7px)scale(.78)}.jump-charge i.active{color:#644b1f;opacity:1;background:#ffe480;transform:translateY(0)scale(1);box-shadow:0 0 0 5px #ffe4802e,0 0 18px #ffe480a6}.obstacle-chasm.is-cleared .jump-charge{opacity:.62}.obstacle-gate{perspective:240px;width:108px;height:110px;bottom:70px;overflow:visible}.gate-art{overflow:visible}.gate-art:before,.gate-art:after{content:"";z-index:0;filter:drop-shadow(0 5px 2px #2a3e2d26);background:linear-gradient(#8f6745,#8f6745) 0 10px/100% 6px no-repeat,linear-gradient(#8f6745,#8f6745) 0 31px/100% 6px no-repeat,repeating-linear-gradient(90deg,#aa7a4d 0 7px,#0000 7px 21px);border-bottom:5px solid #76513a;width:82px;height:47px;position:absolute;bottom:13px}.gate-art:before{right:calc(100% - 8px)}.gate-art:after{left:calc(100% - 8px)}.gate-art>img{z-index:2;transform-origin:100%;position:relative}.gate-lights{z-index:3;justify-content:center;gap:5px;display:flex;position:absolute;top:-4px;left:13px;right:13px}.gate-lights i{background:#ffffffb8;border:1px solid #455b422e;border-radius:50%;width:9px;height:9px;transition:all .18s}.gate-lights i.active{background:#ffe37c;transform:translateY(-2px);box-shadow:0 0 9px #ffe37c}.obstacle-gate.is-reacting:not(.is-cleared) img{transform:rotateY(-12deg)}.obstacle-gate.is-cleared img{opacity:.78;transform:rotateY(-82deg)}.player{width:96px;height:96px;box-shadow:none;background:0 0;border:0;border-radius:0;transition:left 55ms linear;bottom:77px}.player img{z-index:1;object-fit:contain;filter:drop-shadow(0 7px 3px #29423233);width:100%;height:100%;display:block;position:relative}.player.is-walking{animation:.27s ease-in-out infinite rabbit-walk}.player.is-happy{animation:.28s ease-out both rabbit-happy}.player.is-mistake{animation:.26s both rabbit-mistake}.player.is-crossing-water{transition:left .26s ease-out;animation:.28s ease-out both rabbit-water-step}.player.is-traversing{transition:left var(--crossing-time) cubic-bezier(.35,.05,.25,1)}.player.traversing-wall{animation:rabbit-jump var(--crossing-time) ease-in-out both}.player.traversing-water{animation:rabbit-water-jump var(--crossing-time) cubic-bezier(.28,.04,.52,1) both}.player.traversing-chasm{animation:rabbit-chasm-jump var(--crossing-time) cubic-bezier(.28,.04,.52,1) both}.player.traversing-gate{z-index:4;animation:rabbit-gate-cross var(--crossing-time) ease-in-out both}@keyframes rabbit-walk{50%{bottom:82px;rotate:-2deg}}@keyframes rabbit-happy{45%{bottom:94px;scale:1.06}}@keyframes rabbit-mistake{33%{translate:-5px;rotate:-4deg}66%{translate:5px;rotate:4deg}}@keyframes rabbit-water-step{50%{bottom:91px;rotate:-3deg}}@keyframes rabbit-jump{0%,to{bottom:77px}48%{bottom:172px;rotate:9deg}}@keyframes rabbit-water-jump{0%,to{rotate:0;bottom:77px;scale:1}46%{bottom:210px;rotate:9deg;scale:1.05}73%{bottom:143px;rotate:-5deg}}@keyframes rabbit-chasm-jump{0%,to{rotate:0;bottom:77px;scale:1}45%{bottom:222px;rotate:11deg;scale:1.06}72%{bottom:153px;rotate:-5deg}}@keyframes rabbit-gate-cross{0%,to{bottom:77px}50%{opacity:.88;scale:.92}}.performance-stars{z-index:8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffc7;border:1px solid #ffffffb3;border-radius:13px;padding:10px 12px;position:absolute;top:17px;right:18px;box-shadow:0 8px 22px #25513d1a}.performance-stars .star-meter i{font-size:23px}.effect-water i{border:3px solid #fffc;width:13px;height:13px}.effect-gate i{background:#ffe37c;width:10px;height:10px}.challenge-panel.visual-challenge{grid-template-columns:1fr 54px;width:min(560px,100% - 150px);min-height:178px;padding:6px 18px 13px;animation:.24s both challenge-in-adventure;top:27px;transform:translate(-50%)}@keyframes challenge-in-adventure{0%{opacity:0;transform:translate(-50%,-8px)scale(.98)}to{opacity:1;transform:translate(-50%)}}.visual-challenge.has-incorrect{animation:.25s challenge-wrong-adventure}@keyframes challenge-wrong-adventure{33%{transform:translate(calc(-50% - 5px))}66%{transform:translate(calc(5px - 50%))}}.sequence-notation{min-width:0;height:148px;overflow:hidden}.sequence-notation svg{width:100%;height:100%}.challenge-pips{margin-top:-2px}.challenge-pips i{flex:1;max-width:52px}.game-finish-overlay{width:min(580px,100% - 60px);padding:28px 35px 30px}.game-finish-overlay h2{margin:4px 0 13px;font-size:30px}.game-finish-overlay>.star-meter{justify-content:center;margin:0 auto 11px}.game-finish-overlay>.star-meter i{font-size:34px}.completion-message{color:var(--color-accent-dark);font-size:14px;display:block}.new-note-unlocked{color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:10px;margin:-8px 0 20px;padding:10px}.finish-actions{justify-content:center;gap:10px;display:flex}.finish-actions .replay-button{gap:8px;width:auto;display:inline-flex}.finish-actions .replay-button svg{width:18px;height:18px}.visual-controls b{letter-spacing:0;font-size:12px}.metric-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.metric{align-items:center;gap:20px;min-height:125px;padding:24px;display:flex}.metric>span{background:var(--color-accent-soft);width:51px;height:51px;color:var(--color-accent);border-radius:14px;place-items:center;display:grid}.metric.correct>span{color:var(--color-accent-dark);background:var(--color-accent-soft)}.metric.incorrect>span{color:var(--color-error);background:var(--color-error-soft);font-size:31px;font-weight:500}.metric>div{flex-direction:column;display:flex}.metric strong{font-size:28px}.metric small{color:var(--color-muted)}.progress-layout{grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr);gap:20px;margin-top:20px;display:grid}.note-mastery,.journey-card{padding:30px}.note-bars{grid-template-columns:1fr 1fr;gap:15px 34px;display:grid}.note-bar{grid-template-columns:38px 1fr 42px;align-items:center;gap:12px;display:grid}.note-bar strong{font-size:13px}.note-bar>div{height:8px}.note-bar span{text-align:right;color:var(--color-muted);font-size:11px}.journey-stat{border-top:1px solid var(--color-border);align-items:center;gap:15px;padding:18px 0;display:flex}.journey-stat>div{flex-direction:column;display:flex}.journey-stat strong{font-size:23px}.journey-stat small{color:var(--color-muted)}.encouragement{color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:13px;gap:12px;margin-top:22px;padding:17px;display:flex}.encouragement svg{flex:none}.encouragement p{margin:0;font-size:12px;line-height:1.55}.settings-layout{grid-template-columns:1fr 1fr;gap:20px;display:grid}.settings-card{padding:30px}.setting-row{border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:20px;min-height:77px;display:flex}.setting-row>div{flex-direction:column;gap:5px;display:flex}.setting-row small,.danger-card small{color:var(--color-muted)}.available-badge{color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:600}.mapping-table{background:var(--color-surface-soft);border-radius:13px;grid-template-columns:repeat(12,1fr);gap:5px;padding:17px;display:grid}.mapping-table span{flex-direction:column;align-items:center;gap:7px;display:flex}.mapping-table kbd{width:100%;min-width:22px}.mapping-table small{font-size:10px}.sound-toggle{background:var(--color-border-strong);cursor:pointer;border:0;border-radius:999px;flex:none;width:48px;height:28px;transition:all .18s;position:relative}.sound-toggle span{background:#fff;border-radius:50%;width:22px;height:22px;transition:all .18s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #1a271f33}.sound-toggle.enabled{background:var(--color-accent)}.sound-toggle.enabled span{transform:translate(20px)}.free-play-page{gap:22px;display:grid}.free-play-heading{justify-content:space-between;align-items:flex-end;gap:28px;padding:18px 4px 2px;display:flex}.free-play-heading>div:first-child{max-width:760px}.free-play-heading h1{margin-bottom:12px}.free-play-heading p:last-child{color:var(--color-muted);margin-bottom:0}.free-play-phase{border:1px solid var(--color-border);background:var(--color-surface);min-width:142px;box-shadow:var(--shadow-card);border-radius:14px;align-items:center;gap:11px;padding:11px 15px;display:flex}.free-play-phase>i{background:var(--color-subtle);border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 5px #969da61a}.free-play-phase.recording>i{background:var(--color-error);box-shadow:0 0 0 5px var(--color-error-soft);animation:1.2s ease-in-out infinite free-play-pulse}.free-play-phase.countIn>i{background:var(--color-gold);box-shadow:0 0 0 5px #f2b63426}.free-play-phase>span{flex-direction:column;gap:2px;display:flex}.free-play-phase small{color:var(--color-muted);text-transform:uppercase;letter-spacing:.07em;font-size:10px}.free-play-phase strong{font-size:13px}@keyframes free-play-pulse{50%{opacity:.55;transform:scale(.76)}}.free-play-controls{grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(120px,.72fr)) minmax(200px,1fr) minmax(170px,.8fr) auto;align-items:stretch;gap:0;padding:18px 20px;display:grid}.free-play-control-title,.free-play-piano-heading{align-items:center;gap:13px;padding-right:20px;display:flex}.free-play-control-title>span:last-child,.free-play-piano-heading>span:last-child{flex-direction:column;gap:3px;display:flex}.free-play-control-title strong,.free-play-piano-heading strong{font-size:14px}.free-play-control-title small,.free-play-piano-heading small{color:var(--color-muted);font-size:10px;line-height:1.35}.free-play-field{border-left:1px solid var(--color-border);min-height:64px;color:var(--color-muted);flex-direction:column;justify-content:center;gap:7px;margin:0;padding:0 17px;font-size:11px;display:flex}.free-play-field input,.free-play-field select{border:1px solid var(--color-border-strong);max-width:148px;height:34px;color:var(--color-text);background:var(--color-surface-solid);border-radius:9px;padding:0 9px;font-size:12px;font-weight:650}.free-play-field input{width:68px}.free-play-tempo-value{align-items:center;gap:5px;display:flex}.free-play-tempo-value small{color:var(--color-muted);font-size:10px}.free-play-readonly strong{color:var(--color-text);font-size:17px}.free-play-metronome{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;min-width:210px}.free-play-metronome>span:first-child{flex-direction:column;gap:3px;display:flex}.free-play-metronome strong{color:var(--color-text);font-size:12px}.free-play-metronome small{max-width:150px;font-size:9px;line-height:1.3}.free-play-input-status{border:0;border-left:1px solid var(--color-border);min-width:180px;color:var(--color-accent-dark);text-align:left;cursor:pointer;background:0 0;align-items:center;gap:10px;padding:0 14px;display:flex}.free-play-input-status svg{flex:none}.free-play-input-status>span{flex-direction:column;gap:3px;min-width:0;display:flex}.free-play-input-status strong{white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.free-play-input-status small{color:var(--color-muted);font-size:9px}.free-play-actions{border-left:1px solid var(--color-border);align-items:center;gap:8px;padding-left:16px;display:flex}.free-play-actions button{min-width:84px}.free-play-actions button:disabled,.free-play-controls button:disabled,.free-play-controls input:disabled,.free-play-controls select:disabled{opacity:.52;cursor:not-allowed}.free-play-stop{background:var(--color-error);box-shadow:0 8px 20px #d75e552e}.free-play-stop:hover{background:#bd4942}.free-play-score-card{overflow:hidden}.free-play-score-heading{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:20px;min-height:78px;padding:16px 24px;display:flex}.free-play-score-heading>span{flex-direction:column;gap:4px;display:flex}.free-play-score-heading>span strong{font-size:15px}.free-play-score-heading>span small{color:var(--color-muted);font-size:11px}.free-play-score-heading>div{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:7px;display:flex}.free-play-score-heading>div>span,.free-play-recording-label{border:1px solid var(--color-border);min-height:29px;color:var(--color-muted);background:var(--color-surface-soft);border-radius:999px;align-items:center;gap:6px;padding:0 10px;font-size:10px;display:inline-flex}.free-play-recording-label{color:var(--color-error);border-color:color-mix(in srgb, var(--color-error) 24%, var(--color-border));background:var(--color-error-soft)}.free-play-recording-label i{background:var(--color-error);border-radius:50%;width:7px;height:7px}.free-play-score-stage{background:linear-gradient(180deg, var(--color-surface-solid), color-mix(in srgb, var(--color-surface-soft) 38%, var(--color-surface-solid)));min-height:330px;position:relative}.free-play-score-viewport{scrollbar-color:var(--color-border-strong) transparent;scrollbar-width:thin;width:100%;min-height:300px;overflow:auto hidden}.free-play-score-canvas{min-height:300px;position:relative}.free-play-notation-svg{width:100%;min-height:270px;color:var(--notation-color)}.free-play-notation-svg svg{display:block}.free-play-playhead{z-index:2;background:var(--color-accent);width:2px;height:214px;box-shadow:0 0 0 4px var(--color-accent-glow);pointer-events:none;border-radius:999px;transition:left 70ms linear;display:block;position:absolute;top:25px}.free-play-playhead:before{content:"";background:inherit;border-radius:50%;width:8px;height:8px;position:absolute;top:-3px;left:-3px}.free-play-playhead:not(.is-recording){opacity:.38}.free-play-count-in,.free-play-empty{z-index:3;text-align:center;background:color-mix(in srgb, var(--color-surface-solid) 88%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.free-play-count-in small{color:var(--color-muted);font-size:13px;font-weight:650}.free-play-count-in strong{color:var(--color-accent-dark);letter-spacing:-4px;margin:5px 0 12px;font-size:76px;line-height:1}.free-play-count-in>div{gap:9px;display:flex}.free-play-count-in i{background:var(--color-border-strong);border-radius:50%;width:9px;height:9px}.free-play-count-in i.active{background:var(--color-accent);box-shadow:0 0 0 5px var(--color-accent-glow)}.free-play-empty{z-index:2;background:color-mix(in srgb, var(--color-surface-solid) 68%, transparent);pointer-events:none}.free-play-empty>span{width:49px;height:49px;color:var(--color-accent-dark);background:var(--color-accent-soft);border-radius:50%;place-items:center;margin-bottom:13px;font-size:24px;display:grid}.free-play-empty strong{font-size:18px}.free-play-empty small{max-width:500px;color:var(--color-muted);margin-top:7px;padding:0 20px;font-size:12px;line-height:1.5}.free-play-piano-card{margin-top:0}.free-play-piano-heading{min-height:88px}@media (width<=1250px){.free-play-controls{grid-template-columns:repeat(4,minmax(130px,1fr))}.free-play-control-title{grid-column:1/-1;min-height:60px;padding-bottom:13px}.free-play-field:first-of-type{border-left:0}.free-play-input-status{border-top:1px solid var(--color-border);border-left:0;min-height:60px}.free-play-actions{border-top:1px solid var(--color-border);grid-column:span 3;justify-content:flex-end;min-height:60px}}@media (width<=760px){.free-play-heading{flex-direction:column;align-items:stretch}.free-play-phase{align-self:flex-start}.free-play-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:15px}.free-play-control-title{grid-column:1/-1}.free-play-field{border-top:1px solid var(--color-border)}.free-play-field:nth-of-type(odd){border-left:0}.free-play-metronome{min-width:0}.free-play-input-status{grid-column:1/-1}.free-play-actions{border-left:0;grid-column:1/-1;justify-content:stretch;padding:12px 0 0}.free-play-actions button{flex:1}.free-play-score-heading{flex-direction:column;align-items:flex-start}.free-play-score-heading>div{justify-content:flex-start}}.appearance-card{min-height:265px}.theme-options{gap:10px;display:grid}.theme-choice{border:1px solid var(--color-border);background:var(--color-surface-solid);text-align:left;cursor:pointer;border-radius:15px;grid-template-columns:82px 1fr 20px;align-items:center;gap:15px;width:100%;padding:13px;display:grid}.theme-choice:hover{border-color:var(--color-accent);background:var(--color-surface-soft)}.theme-choice.selected{border-color:var(--color-accent);background:var(--color-accent-soft)}.theme-choice>span:nth-child(2){flex-direction:column;gap:4px;display:flex}.theme-choice small{color:var(--color-muted)}.theme-choice b{color:var(--color-accent)}.theme-preview{background:var(--color-surface-solid);height:55px;box-shadow:var(--shadow-card);border-radius:9px;grid-template-columns:1fr 1fr;gap:4px;padding:6px;display:grid}.theme-preview i{background:var(--color-accent-soft);border-radius:4px}.theme-preview i:first-child{background:var(--color-border);grid-column:1/-1}.theme-colorful .theme-preview{background:#fff8f0}.theme-colorful .theme-preview i{background:#efe4fb}.theme-colorful .theme-preview i:first-child{background:#f4b65c}.coming-soon{color:var(--color-muted);text-align:center;margin:20px 0 0;font-size:12px}.danger-card{grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}.danger-card>div{flex-direction:column;gap:5px;display:flex}footer{color:var(--color-subtle);justify-content:space-between;padding:24px 6px 0;font-size:11px;display:flex}@media (width<=1160px){.app-shell{width:min(100% - 28px,1200px);padding-top:18px}.topbar{grid-template-columns:150px 1fr 306px;padding-left:22px}.topbar nav{gap:5px}.topbar nav button{padding:0 13px}.practice-layout{grid-template-columns:1fr 330px}.practice-card{padding:32px 28px}.challenge-panel{width:calc(100% - 35px)}.platformer-intro{align-items:flex-start}.platformer-toolbar{flex-direction:column-reverse;align-items:flex-end}.level-selector{grid-template-columns:repeat(3,1fr)}}@media (width<=900px){.topbar{grid-template-columns:1fr auto}.brand{padding-left:5px}.topbar nav{order:3;grid-area:2/1/auto/-1;justify-content:stretch}.topbar nav button{flex:1;justify-content:center}.topbar-actions{width:306px}.midi-status{width:auto}.practice-layout,.progress-layout{grid-template-columns:1fr}.practice-activity-card{min-height:195px}.practice-config{grid-row:1}.practice-card{min-height:560px}.stats-strip{grid-template-columns:repeat(3,1fr)}.metric-grid{grid-template-columns:1fr 1fr}.settings-layout{grid-template-columns:1fr}.visual-challenge{grid-template-columns:1fr 56px}.platformer-intro{flex-direction:column}.level-learning{width:100%}.platformer-toolbar{flex-direction:row;justify-content:space-between;align-items:center;width:100%}.challenge-panel.visual-challenge{width:min(520px,100% - 70px)}.rhythm-settings{grid-row:auto}.rhythm-card{min-height:680px}}@media (width<=660px){.app-shell{width:calc(100% - 18px)}.topbar{gap:10px;padding:13px}.brand strong{font-size:29px}.topbar nav{justify-content:flex-start;overflow-x:auto}.topbar nav button{flex-direction:column;gap:3px;min-width:66px;padding:0 10px;font-size:10px}.topbar nav button svg{width:18px;height:18px}.topbar-actions{gap:6px;width:160px}.topbar-actions .midi-status{flex:0 0 52px;grid-template-columns:1fr;justify-items:center;width:52px;padding:8px}.topbar-actions .midi-status span:nth-child(2),.topbar-actions .midi-status .chevron{display:none}.language-trigger{width:44px;height:54px}.profile-trigger{width:52px}.profile-manager{padding:24px 18px}.practice-card{padding:27px 18px}.practice-activity-grid{grid-template-columns:1fr;gap:13px}.practice-activity-card{grid-template-columns:50px minmax(0,1fr) auto;gap:15px;min-height:170px;padding:22px 18px}.activity-icon{border-radius:14px;width:50px;height:50px}.activity-copy strong{font-size:20px}.activity-badge{top:16px;right:16px}.practice-heading{flex-direction:column}.practice-progress{align-items:flex-start}.stats-strip{grid-template-columns:1fr;padding:12px 0}.naming-answer-grid{grid-template-columns:repeat(4,1fr)}.stat-item{border:0;padding:10px 18px}.piano{height:130px;overflow-x:auto}.white-keys{min-width:calc(var(--white-key-count,12) * 55px)}.black-key{display:none}.platformer-intro{flex-direction:column;align-items:flex-start}.platformer-toolbar{flex-direction:column-reverse;align-items:stretch}.level-learning{min-width:0}.movement-toggle button{flex:1}.level-selector{grid-template-columns:1fr 1fr}.game-stats span:first-child{border:0}.world{height:360px}.challenge-panel.visual-challenge{grid-template-columns:1fr 48px;width:calc(100% - 35px);min-height:165px;padding:4px 12px 12px;top:18px}.sequence-notation{height:136px}.visual-challenge .mini-staff{height:168px}.challenge-status{width:44px;height:44px}.visual-summary{grid-template-columns:1fr 1fr}.visual-summary span:last-child:nth-child(odd){grid-column:1/-1}.metric-grid,.note-bars{grid-template-columns:1fr}.settings-card{padding:22px 18px}.mapping-table{grid-template-columns:repeat(12,34px);overflow-x:auto}footer{flex-direction:column;gap:5px}.rhythm-heading{gap:5px}.rhythm-session-meta{width:100%;padding-top:0;overflow-x:auto}.rhythm-card{min-height:640px}.rhythm-stage{min-height:440px;margin-top:15px}.rhythm-notation-scroll{padding:18px 12px 22px}.rhythm-measure{flex-basis:calc(100vw - 78px);min-width:calc(100vw - 78px)}.continuous-metronome{grid-template-columns:1fr auto;gap:12px}.continuous-metronome>b{display:none}.metronome-beats{gap:11px}.rhythm-result-grid{grid-template-columns:1fr 1fr}.rhythm-results{padding:20px 14px}.rhythm-results h2{font-size:23px}.rhythm-event-results,.rhythm-event-result-details{grid-template-columns:1fr}.rhythm-value-grid{grid-template-columns:1fr 1fr}}.blaster-heading{justify-content:space-between;align-items:center;gap:20px;padding:10px 4px 25px;display:flex}.blaster-heading h1{margin-bottom:10px}.blaster-heading p:last-child{color:var(--color-muted);margin:0}.blaster-session-info{color:var(--color-muted);align-items:center;gap:18px;font-size:14px;display:flex}.blaster-session-info button{align-items:center;gap:10px;display:flex}.blaster-setup{grid-template-columns:minmax(0,1fr) minmax(200px,.4fr);gap:38px;margin-bottom:22px;padding:26px 30px;display:grid}.blaster-setup h2{margin:0 0 15px;font-size:16px}.blaster-difficulty{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.blaster-difficulty button{border:1px solid var(--color-border);background:var(--color-surface-solid);text-align:left;cursor:pointer;border-radius:12px;flex-direction:column;align-items:flex-start;gap:7px;min-height:75px;padding:14px 18px;display:flex}.blaster-difficulty button:hover{background:var(--color-surface-soft);border-color:var(--color-accent)}.blaster-difficulty button.active{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent-dark)}.blaster-difficulty small{color:var(--color-muted);font-size:12px}.blaster-difficulty-description{color:var(--color-muted);margin:13px 0 0;font-size:13px}.blaster-start-details{border-left:1px solid var(--color-border);flex-direction:column;justify-content:space-between;gap:15px;padding-left:30px;display:flex}.blaster-start-details>div{gap:5px;display:grid}.blaster-start-details small,.blaster-start-details span{color:var(--color-muted);font-size:12px}.blaster-start-details strong{letter-spacing:-.6px;font-size:25px}.blaster-start-details button{justify-content:space-between;align-items:center;gap:12px;display:flex}.blaster-start-details button span{color:inherit;font-size:20px}.blaster-arena-card{overflow:hidden}.blaster-hud{border-bottom:1px solid var(--color-border);grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 30px 20px;display:grid}.blaster-hud>div{border-left:1px solid var(--color-border);flex-direction:column;align-items:flex-start;gap:6px;padding-left:24px;display:flex;position:relative}.blaster-hud>div:first-child{border-left:none;padding-left:0}.blaster-hud small{color:var(--color-muted);font-size:12px}.blaster-hud strong{font-variant-numeric:tabular-nums;letter-spacing:-.6px;font-size:28px}.blaster-hud strong span{color:var(--color-muted);font-size:15px;font-weight:400}.blaster-hud .blaster-combo{color:var(--color-accent-dark)}.blaster-combo>span{background:var(--color-accent-soft);border-radius:7px;padding:5px 7px;font-size:11px;position:absolute;bottom:4px;right:8px}.blaster-hud .blaster-low-hp strong{color:var(--color-error)}.blaster-arena{background:radial-gradient(ellipse at 13% 68%, var(--color-accent-soft), transparent 39%), var(--color-surface-solid);position:relative}.blaster-scene{width:100%;height:auto;display:block;overflow:visible}.blaster-scenery{fill:var(--color-accent-soft);opacity:.4}.blaster-floor{fill:none;stroke:var(--color-border);stroke-width:1.5px;stroke-dasharray:3 7}.blaster-staff{opacity:.72}.blaster-staff path,.blaster-staff rect{stroke:var(--notation-color)}.blaster-danger{stroke:var(--color-error);opacity:.32;stroke-width:1.5px;stroke-dasharray:4 7}.blaster-danger-tip{fill:var(--color-error);opacity:.5}.blaster-shadow{fill:var(--color-accent);opacity:.13}.blaster-orb-glow{fill:var(--color-accent-glow)}.blaster-orb{fill:var(--color-accent);stroke:var(--color-surface-solid);stroke-width:3px}.blaster-hp-track{fill:var(--color-border-strong)}.blaster-hp-fill{fill:var(--color-success)}.blaster-hp-fill.is-low{fill:var(--color-error)}.blaster-note-aura{fill:var(--color-accent-soft);opacity:.85}.blaster-target.is-active .blaster-note-aura{fill:var(--color-accent-glow);stroke:var(--color-accent);stroke-width:1.8px}.blaster-target.is-targeted .blaster-note-aura{fill:var(--color-accent-glow)}.blaster-target path{fill:var(--notation-color)}.blaster-projectile{fill:var(--color-accent);filter:drop-shadow(0 0 5px var(--color-accent-glow))}.blaster-projectile line{stroke:var(--color-accent);stroke-width:7px;stroke-linecap:round;opacity:.35}.blaster-projectile .blaster-projectile-core{fill:var(--color-surface-solid)}.blaster-burst{fill:var(--color-accent)}.blaster-burst-ring{fill:none;stroke:var(--color-accent);stroke-width:2px}.blaster-burst text{fill:var(--color-accent-dark);font-size:18px;font-weight:700}.blaster-overlay{text-align:center;background:color-mix(in srgb, var(--color-surface-solid) 90%, transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);place-items:center;padding:20px;display:grid;position:absolute;inset:0}.blaster-overlay h2{outline:none;margin:12px 0 10px;font-size:clamp(24px,3vw,38px)}.blaster-overlay p{color:var(--color-muted);max-width:460px;font-size:14px}.blaster-overlay-icon{background:var(--color-accent-soft);width:48px;height:48px;color:var(--color-accent);border-radius:50%;place-items:center;font-size:22px;display:inline-grid}.blaster-over-overlay svg{width:38px;height:38px;color:var(--color-accent)}.blaster-status{border-top:1px solid var(--color-border);min-height:60px;color:var(--color-muted);text-align:center;justify-content:center;align-items:center;padding:16px 25px;font-size:13px;line-height:1.5;display:flex}.blaster-status.is-damage{color:var(--color-error);background:var(--color-error-soft)}.blaster-rules{color:var(--color-muted);flex-wrap:wrap;justify-content:center;gap:14px 24px;margin:21px 0;font-size:12px;display:flex}.blaster-rules span{align-items:center;gap:7px;display:inline-flex}.blaster-rules span:first-child{color:var(--color-accent-dark)}.blaster-rules svg{width:17px;height:17px}.blaster-results{margin-top:20px;padding:28px}.blaster-result-score{text-align:center;justify-content:center;gap:70px;margin-bottom:24px;display:flex}.blaster-result-score>div{gap:7px;display:grid}.blaster-result-score small{color:var(--color-muted)}.blaster-result-score strong{letter-spacing:-1px;color:var(--color-accent-dark);font-size:38px}.blaster-result-grid{grid-template-columns:repeat(5,1fr);gap:10px;margin:0;display:grid}.blaster-result-grid>div{background:var(--color-surface-soft);text-align:center;border-radius:13px;padding:17px 10px}.blaster-result-grid dt{color:var(--color-muted);margin-bottom:7px;font-size:12px}.blaster-result-grid dd{margin:0;font-size:24px;font-weight:700}.blaster-accuracy-help{color:var(--color-muted);text-align:center;margin:15px 0 25px;font-size:11px}.blaster-result-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}@media (width<=900px){.blaster-setup{grid-template-columns:minmax(0,1fr);gap:20px}.blaster-start-details{border-left:0;border-top:1px solid var(--color-border);flex-direction:row;align-items:center;padding:18px 0 0}.blaster-hud{padding:18px}.blaster-hud>div{padding-left:16px}.blaster-combo>span{display:none}}@media (width<=660px){.blaster-heading{flex-direction:column;align-items:flex-start;gap:15px}.blaster-session-info{justify-content:space-between;width:100%}.blaster-setup{padding:20px 15px}.blaster-difficulty{gap:6px}.blaster-difficulty button{padding:12px 8px}.blaster-difficulty strong{font-size:13px}.blaster-difficulty small{font-size:10px}.blaster-start-details{flex-direction:column;align-items:stretch}.blaster-hud{gap:8px;padding:17px 12px}.blaster-hud>div{gap:7px;padding-left:9px}.blaster-hud strong{font-size:20px}.blaster-hud strong span{font-size:10px}.blaster-hud small{font-size:11px}.blaster-scene{min-height:195px}.blaster-overlay{padding:12px}.blaster-overlay-icon,.blaster-over-overlay svg{display:none}.blaster-overlay h2{margin-top:0}.blaster-overlay p{margin-bottom:12px;font-size:12px}.blaster-status{padding:14px;font-size:12px}.blaster-result-grid{grid-template-columns:repeat(2,1fr)}.blaster-result-grid>div:last-child{grid-column:1/-1}.blaster-result-score{gap:30px}.blaster-results{padding:20px 15px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}[data-theme=classical]{--color-background:#f3e9d3;--color-background-warm:#ede0c5;--color-background-secondary:#ede0c5;--color-surface:#f8f0dff5;--color-surface-solid:#fcf6e9;--color-surface-soft:#ede0c5;--color-surface-elevated:#fcf6e9;--color-text:#211a13;--color-text-secondary:#655848;--color-muted:#655848;--color-subtle:#8c7a64;--color-border:#cdbb98;--color-border-strong:#b7a47e;--color-border-subtle:#ded0b5;--color-accent:#9c7835;--color-accent-dark:#806127;--color-accent-hover:#806127;--color-accent-soft:#e7d8b6;--color-accent-glow:#9c783533;--color-success:#58704b;--color-error:#8b5145;--color-error-soft:#ead9d2;--color-gold:#9c7835;--color-flame:#9a6256;--notation-color:#16120f;--piano-frame:#8a7b68;--piano-key-border:#8a7b68;--piano-white-start:#fcf6e9;--piano-white-end:#f7f0df;--piano-black-start:#181512;--piano-black-mid:#332c26;--border-radius:8px;--border-radius-small:6px;--shadow-card:0 2px 8px #402e1b14;--shadow-float:0 8px 22px #402e1b21;--shadow-soft:0 1px 4px #402e1b0f;--font-sans:"Source Serif 4", "Iowan Old Style", Georgia, serif}[data-theme=classical] body{background-color:var(--color-background);background-image:linear-gradient(#f3e9d3c2,#f3e9d3c2),url(/assets/paper-texture-DRx-MV3Q.png);background-repeat:repeat;background-size:auto,600px 600px}[data-theme=classical] .app-shell{padding-top:22px}[data-theme=classical] .card{border-color:var(--color-border-subtle);border-radius:var(--border-radius);background:var(--color-surface);box-shadow:var(--shadow-card);-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=classical] h1,[data-theme=classical] h2,[data-theme=classical] h3,[data-theme=classical] .brand,[data-theme=classical] .topbar nav button,[data-theme=classical] .activity-copy strong,[data-theme=classical] .section-title strong{font-family:Libre Baskerville,Baskerville,Baskerville Old Face,Georgia,serif}[data-theme=classical] h1{letter-spacing:-.035em;font-weight:500}[data-theme=classical] h2,[data-theme=classical] h3{letter-spacing:-.018em;font-weight:500}[data-theme=classical] .eyebrow,[data-theme=classical] .activity-copy small,[data-theme=classical] .profile-options-label{color:var(--color-accent-dark);letter-spacing:.15em;text-transform:uppercase;font-size:11px;font-weight:600}[data-theme=classical] .topbar{border:0;border-bottom:1px solid var(--color-border);min-height:82px;box-shadow:none;background:#f8f0dfc2;border-radius:0;grid-template-columns:180px 1fr 350px;padding:9px 14px 9px 22px}[data-theme=classical] .brand{justify-content:center;width:126px;height:56px;position:relative}[data-theme=classical] .brand:before{content:"";background:url(/assets/nota-wordmark-CZ-E-dY6.png) 50%/contain no-repeat;width:126px;height:46px;display:block}[data-theme=classical] .brand strong,[data-theme=classical] .brand small{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-theme=classical] .topbar nav{gap:28px}[data-theme=classical] .topbar nav button{min-height:48px;color:var(--color-text-secondary);background:0 0;border-radius:0;padding:0 8px;position:relative}[data-theme=classical] .topbar nav button:hover,[data-theme=classical] .topbar nav button.active{color:var(--color-text);background:0 0}[data-theme=classical] .topbar nav button:after{content:"";background:var(--color-accent);transform-origin:50%;height:2px;transition:transform .16s;position:absolute;bottom:4px;left:8px;right:8px;transform:scaleX(0)}[data-theme=classical] .topbar nav button.active:after{transform:scaleX(1)}[data-theme=classical] .topbar nav button svg{width:18px;color:var(--color-muted)}[data-theme=classical] .midi-status,[data-theme=classical] .language-trigger,[data-theme=classical] .profile-trigger{background:#fcf6e9c7;border-radius:6px;height:52px}[data-theme=classical] .language-options,[data-theme=classical] .profile-options,[data-theme=classical] .profile-manager{border-radius:8px}[data-theme=classical] .practice-card{border-color:var(--color-border);background:var(--color-surface-elevated);box-shadow:var(--shadow-soft);position:relative}[data-theme=classical] .practice-card:after{content:"";z-index:0;opacity:.13;pointer-events:none;background:url(/assets/grand-piano-etching-B0CpFuJ7.png) 100% 0/contain no-repeat;width:clamp(230px,29vw,430px);height:clamp(170px,22vw,310px);position:absolute;top:-34px;right:-28px}[data-theme=classical] .practice-card>*{z-index:1;position:relative}[data-theme=classical] .practice-heading>div:first-child:after{content:"";opacity:.52;pointer-events:none;background:url(/assets/ornament-divider-nxS3cBJj.png) 0/contain no-repeat;width:168px;height:22px;margin-top:17px;display:block}[data-theme=classical] .practice-heading h1{font-size:clamp(38px,3.5vw,54px)}[data-theme=classical] .practice-heading p:last-child,[data-theme=classical] .page-heading p:last-child,[data-theme=classical] .platformer-intro p:last-child{color:var(--color-text-secondary)}[data-theme=classical] .staff-wrap{margin-top:10px}[data-theme=classical] .staff-notation,[data-theme=classical] .rhythm-notation-svg,[data-theme=classical] .free-play-notation-svg{color:var(--notation-color)}[data-theme=classical] .practice-breadcrumb button{color:var(--color-accent-dark)}[data-theme=classical] .practice-progress-tools>strong,[data-theme=classical] .activity-badge,[data-theme=classical] .rhythm-session-meta strong,[data-theme=classical] .rhythm-session-meta span{border-radius:4px}[data-theme=classical] .practice-config,[data-theme=classical] .settings-card,[data-theme=classical] .note-mastery,[data-theme=classical] .journey-card{background:#f8f0dff5}[data-theme=classical] .icon-tile,[data-theme=classical] .activity-icon,[data-theme=classical] .metric>span{border:1px solid var(--color-border-subtle);border-radius:6px}[data-theme=classical] .practice-activity-card{border-color:var(--color-border-subtle)}[data-theme=classical] .practice-activity-card:hover:not(:disabled){border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px #402e1b1a}[data-theme=classical] .activity-arrow{border:1px solid var(--color-border-subtle);border-radius:50%}[data-theme=classical] .hand-selector,[data-theme=classical] .hand-selector button,[data-theme=classical] .note-toggle-grid button,[data-theme=classical] .naming-answer-grid button,[data-theme=classical] .rhythm-segmented button,[data-theme=classical] .rhythm-value-grid button,[data-theme=classical] .primary-button,[data-theme=classical] .secondary-button,[data-theme=classical] .danger-button,[data-theme=classical] .theme-choice,[data-theme=classical] .level-selector,[data-theme=classical] .level-selector>button,[data-theme=classical] .movement-toggle,[data-theme=classical] .movement-toggle button{border-radius:6px}[data-theme=classical] .hand-selector button.selected,[data-theme=classical] .note-toggle-grid button.selected,[data-theme=classical] .rhythm-segmented button.selected,[data-theme=classical] .rhythm-value-grid button.selected,[data-theme=classical] .movement-toggle button.active{border-color:var(--color-accent);color:var(--color-accent-dark);background:color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-solid));box-shadow:none}[data-theme=classical] .primary-button{color:#fcf6e9;background:var(--color-accent);box-shadow:var(--shadow-soft)}[data-theme=classical] .primary-button:hover{background:var(--color-accent-hover)}[data-theme=classical] .stats-strip{border-bottom:1px solid var(--color-border-subtle)}[data-theme=classical] .stat-item{border-color:var(--color-border-subtle)}[data-theme=classical] .stat-item svg{width:26px;height:26px;color:var(--color-accent);fill:#0000}[data-theme=classical] .stat-item strong,[data-theme=classical] .metric strong,[data-theme=classical] .journey-stat strong{font-family:Libre Baskerville,Baskerville,Georgia,serif;font-weight:500}[data-theme=classical] .world-progress,[data-theme=classical] .note-bar>div,[data-theme=classical] .rhythm-progress-track{border-radius:2px;height:6px}[data-theme=classical] .world-progress i,[data-theme=classical] .note-bar>div i,[data-theme=classical] .rhythm-progress-track i{border-radius:inherit;background:var(--color-accent)}[data-theme=classical] .piano-card{border-color:var(--color-border);background:var(--color-surface-elevated)}[data-theme=classical] .piano{box-shadow:0 -2px 0 #211a16, 0 -3px 0 var(--color-accent), inset 0 0 8px #16120f5c;background:#211a16;border-radius:6px}[data-theme=classical] .piano:before{content:"";z-index:3;border-bottom:2px solid var(--color-accent);pointer-events:none;background:linear-gradient(#302923,#181512);height:13px;position:absolute;top:0;left:0;right:0;box-shadow:0 3px 5px #211a133d}[data-theme=classical] .piano:after{border-color:var(--piano-frame);border-radius:inherit}[data-theme=classical] .white-key{background:linear-gradient(90deg, #ece1cb 0, var(--piano-white-start) 13%, var(--piano-white-end) 82%, #e4d7be 100%);box-shadow:inset 0 -7px 10px #402e1b14}[data-theme=classical] .white-keys{height:calc(100% - 13px);margin-top:13px}[data-theme=classical] .black-key{background:linear-gradient(90deg,#100e0c,#3a332d 48%,#181512);border-color:#181512;height:calc(58% - 7px);top:13px;box-shadow:0 6px 6px #18151257,inset 0 -5px 4px #fcf6e914}[data-theme=classical] .white-key.is-active{box-shadow:inset 0 0 0 2px var(--color-accent), 0 0 15px var(--color-accent-glow);background:linear-gradient(#d4c18d,#b79b5b)}[data-theme=classical] .black-key.is-active{background:linear-gradient(90deg,#6f5729,#b79b5b,#6f5729)}[data-theme=classical] kbd{background:var(--color-surface-elevated);box-shadow:0 1px 0 var(--color-border-strong);border-radius:4px}[data-theme=classical] .rhythm-stage,[data-theme=classical] .rhythm-measure,[data-theme=classical] .rhythm-results,[data-theme=classical] .free-play-score-stage{background:var(--color-surface-elevated);box-shadow:var(--shadow-soft);border-radius:8px}[data-theme=classical] .sound-toggle span{background:var(--color-surface-elevated)}[data-theme] .theme-classical .theme-preview{background:#f8f0df;border:1px solid #cdbb98;box-shadow:0 1px 4px #402e1b0f}[data-theme] .theme-classical .theme-preview i{background:#e7d8b6;border-radius:2px}[data-theme] .theme-classical .theme-preview i:first-child{background:#9c7835}@media (width<=1160px){[data-theme=classical] .topbar{grid-template-columns:150px 1fr 306px}[data-theme=classical] .topbar nav{gap:8px}}@media (width<=900px){[data-theme=classical] .topbar{grid-template-columns:1fr auto}[data-theme=classical] .practice-card:after{opacity:.08;width:260px;height:190px}}@media (width<=660px){[data-theme=classical] .app-shell{padding-top:10px}[data-theme=classical] .topbar{padding:8px 10px}[data-theme=classical] .brand,[data-theme=classical] .brand:before{width:102px}[data-theme=classical] .practice-card:after,[data-theme=classical] .practice-heading>div:first-child:after{display:none}}[data-theme=arcade]{--color-background:#081026;--color-background-warm:#0c1634;--color-background-secondary:#0c1634;--color-surface:#101935f5;--color-surface-solid:#101935;--color-surface-soft:#121b3b;--color-surface-elevated:#1a2450;--color-text:#f8faff;--color-text-secondary:#a7b0d9;--color-muted:#a7b0d9;--color-subtle:#7381b8;--color-border:#28447e;--color-border-strong:#56638b;--color-border-subtle:#1d315d;--color-accent:#8b5cf6;--color-accent-dark:#a78bfa;--color-accent-hover:#a78bfa;--color-accent-soft:#20245b;--color-accent-glow:#8b5cf652;--color-accent-secondary:#22d3ee;--color-success:#2dd4bf;--color-error:#f87171;--color-error-soft:#341e45;--color-gold:#fbbf24;--color-flame:#fbbf24;--notation-color:#f8faff;--piano-frame:#56638b;--piano-key-border:#56638b;--piano-white-start:#f8faff;--piano-white-end:#e9edff;--piano-black-start:#10152a;--piano-black-mid:#252c4a;--border-radius:12px;--border-radius-small:8px;--shadow-card:0 8px 30px #00000047;--shadow-float:0 12px 34px #0006;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:Orbitron, Inter, ui-sans-serif, system-ui, sans-serif}[data-theme=arcade] body{background:radial-gradient(circle at 50% 0,#5b21b62e,#0000 42%),linear-gradient(#081026 0%,#0b1230 55%,#081026 100%);position:relative;overflow-x:hidden}[data-theme=arcade] body:before{content:"";z-index:0;opacity:.42;pointer-events:none;background:url(/assets/background-city-CFk5Uirj.png) bottom/auto 190px repeat-x;height:190px;position:fixed;bottom:0;left:0;right:0}[data-theme=arcade] .app-shell{z-index:1;padding-top:22px;position:relative}[data-theme=arcade] .card{border-color:var(--color-border);border-radius:var(--border-radius);background:var(--color-surface);box-shadow:var(--shadow-card);-webkit-backdrop-filter:none;backdrop-filter:none}[data-theme=arcade] h1,[data-theme=arcade] h2,[data-theme=arcade] h3,[data-theme=arcade] .brand,[data-theme=arcade] .topbar nav button,[data-theme=arcade] .activity-copy strong,[data-theme=arcade] .section-title strong,[data-theme=arcade] .stat-item strong,[data-theme=arcade] .metric strong,[data-theme=arcade] .journey-stat strong{font-family:var(--font-display)}[data-theme=arcade] h1{letter-spacing:-.045em;font-weight:650}[data-theme=arcade] h2,[data-theme=arcade] h3{letter-spacing:-.025em;font-weight:600}[data-theme=arcade] .eyebrow,[data-theme=arcade] .activity-copy small,[data-theme=arcade] .profile-options-label,[data-theme=arcade] .level-learning small,[data-theme=arcade] .free-play-phase small{color:var(--color-accent-secondary);font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:650}[data-theme=arcade] .topbar{border-color:var(--color-border);border-radius:var(--border-radius);background:#101935e6;grid-template-columns:180px 1fr 350px;min-height:82px;padding:10px 14px 10px 24px;box-shadow:0 0 20px #22d3ee0d}[data-theme=arcade] .brand{justify-content:center;width:126px;height:56px;position:relative}[data-theme=arcade] .brand:before{content:"";background:url(/assets/logo-nota-arcade-D-7CNMeY.png) 50%/contain no-repeat;width:126px;height:51px;display:block}[data-theme=arcade] .brand strong,[data-theme=arcade] .brand small{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-theme=arcade] .topbar nav{gap:8px}[data-theme=arcade] .topbar nav button{min-height:50px;color:var(--color-text-secondary);border:1px solid #0000;border-radius:8px;padding:0 16px}[data-theme=arcade] .topbar nav button:hover{color:var(--color-text);background:var(--color-surface-soft);border-color:var(--color-border)}[data-theme=arcade] .topbar nav button.active{color:var(--color-text);background:linear-gradient(135deg,#6d4aff,#9333ea);border-color:#a78bfa8c;box-shadow:0 0 14px #8b5cf640}[data-theme=arcade] .topbar nav button.active svg{color:var(--color-text)}[data-theme=arcade] .midi-status,[data-theme=arcade] .language-trigger,[data-theme=arcade] .profile-trigger{border-color:var(--color-border);background:var(--color-surface-solid);border-radius:8px}[data-theme=arcade] .status-dot.connected{background:var(--color-success);box-shadow:0 0 0 4px #2dd4bf29,0 0 11px #2dd4bf80}[data-theme=arcade] .language-options,[data-theme=arcade] .profile-options,[data-theme=arcade] .profile-manager{border-color:var(--color-border);background:var(--color-surface-solid);border-radius:10px}[data-theme=arcade] .page-heading p:last-child,[data-theme=arcade] .practice-heading p:last-child,[data-theme=arcade] .platformer-intro p:last-child{color:var(--color-text-secondary)}[data-theme=arcade] .practice-page{position:relative}[data-theme=arcade] .practice-page:before{content:"";z-index:-1;opacity:.22;pointer-events:none;background:url(/assets/cloud-purple-BNeQ4bkU.png) 50%/contain no-repeat;width:180px;height:105px;position:absolute;top:20px;right:2%}[data-theme=arcade] .practice-page:after{content:"";z-index:-1;opacity:.62;pointer-events:none;background:url(/assets/mascot-cat-BuwsTw1I.png) 50%/contain no-repeat;width:108px;height:94px;position:absolute;bottom:158px;right:2%}[data-theme=arcade] .practice-card{box-shadow:0 0 20px #22d3ee14, var(--shadow-card);background:linear-gradient(#0b1329,#0e1832);border-color:#22d3ee59;position:relative;overflow:hidden}[data-theme=arcade] .practice-card:before{content:"";opacity:.26;pointer-events:none;background:url(data:image/png;base64,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) 50%/contain no-repeat;width:94px;height:71px;position:absolute;top:15px;right:17px}[data-theme=arcade] .practice-card:after{content:none}[data-theme=arcade] .practice-card>*,[data-theme=arcade] .practice-config>*{z-index:1;position:relative}[data-theme=arcade] .practice-heading h1{font-size:clamp(38px,3.5vw,54px)}[data-theme=arcade] .practice-progress-tools>strong{border-color:var(--color-border);color:var(--color-accent-secondary);background:var(--color-surface-soft);font-family:var(--font-display);border-radius:8px}[data-theme=arcade] .practice-breadcrumb button,[data-theme=arcade] .practice-progress-tools>strong{color:var(--color-accent-secondary)}[data-theme=arcade] .staff-wrap{background:#0b1329;border:1px solid #22d3ee38;border-radius:8px;margin-top:10px;box-shadow:inset 0 0 22px #0b1329b3}[data-theme=arcade] .staff-notation,[data-theme=arcade] .rhythm-notation-svg,[data-theme=arcade] .free-play-notation-svg{color:var(--notation-color)}[data-theme=arcade] .staff-notation svg,[data-theme=arcade] .rhythm-notation-svg svg,[data-theme=arcade] .rhythm-notation-svg svg *{color:var(--notation-color);fill:var(--notation-color);stroke:var(--notation-color)}[data-theme=arcade] .staff-notation .vf-stave path,[data-theme=arcade] .staff-notation .vf-stem path{stroke:var(--notation-color)}[data-theme=arcade] .staff-notation .vf-stavebarline rect,[data-theme=arcade] .staff-notation .vf-clef text,[data-theme=arcade] .staff-notation .vf-notehead text{fill:var(--notation-color)}[data-theme=arcade] .staff-correct,[data-theme=arcade] .keyboard-finder-note.correct{filter:drop-shadow(0 0 8px #2dd4bf8c)}[data-theme=arcade] .staff-incorrect,[data-theme=arcade] .keyboard-finder-note.incorrect{filter:drop-shadow(0 0 6px #f8717173)}[data-theme=arcade] .feedback-pill{color:var(--color-accent-secondary);background:#121b3bf0;border:1px solid #22d3ee42}[data-theme=arcade] .feedback-pill.incorrect{color:var(--color-error);background:#341e45f0;border-color:#f8717147}[data-theme=arcade] .feedback-pill.correct:after,[data-theme=arcade] .feedback-pill.incorrect:after{content:"";opacity:.8;pointer-events:none;background:50%/contain no-repeat;width:72px;height:62px;position:absolute;top:-12px;right:-47px}[data-theme=arcade] .feedback-pill.correct:after{background-image:url(/assets/note-correct-sparkles-BLtjN_XA.png)}[data-theme=arcade] .feedback-pill.incorrect:after{background-image:url(/assets/note-wrong-sparkles-C4TzIA4M.png)}[data-theme=arcade] .practice-config,[data-theme=arcade] .settings-card,[data-theme=arcade] .note-mastery,[data-theme=arcade] .journey-card,[data-theme=arcade] .piano-card,[data-theme=arcade] .rhythm-results,[data-theme=arcade] .blaster-results{border-color:var(--color-border);background:var(--color-surface)}[data-theme=arcade] .section-title strong,[data-theme=arcade] .activity-copy strong{color:var(--color-text)}[data-theme=arcade] .icon-tile,[data-theme=arcade] .activity-icon,[data-theme=arcade] .metric>span{border:1px solid var(--color-border);color:var(--color-accent-secondary);background:var(--color-accent-soft);border-radius:8px;box-shadow:0 0 12px #22d3ee14}[data-theme=arcade] .practice-activity-card{border-color:var(--color-border);background:var(--color-surface)}[data-theme=arcade] .practice-activity-card:hover:not(:disabled){border-color:var(--color-accent);box-shadow:0 0 18px #8b5cf633, var(--shadow-card);transform:translateY(-2px)}[data-theme=arcade] .activity-arrow{border:1px solid var(--color-border);color:var(--color-accent-secondary);background:var(--color-accent-soft)}[data-theme=arcade] .activity-badge,[data-theme=arcade] .rhythm-session-meta strong,[data-theme=arcade] .rhythm-session-meta span{border-color:var(--color-border);color:var(--color-text-secondary);background:var(--color-surface-soft);border-radius:6px}[data-theme=arcade] .hand-selector,[data-theme=arcade] .movement-toggle,[data-theme=arcade] .rhythm-segmented button,[data-theme=arcade] .rhythm-value-grid button,[data-theme=arcade] .note-toggle-grid button,[data-theme=arcade] .naming-answer-grid button,[data-theme=arcade] .theme-choice{border-color:var(--color-border);color:var(--color-text-secondary);background:var(--color-surface-soft)}[data-theme=arcade] .hand-selector button,[data-theme=arcade] .movement-toggle button{color:var(--color-text-secondary)}[data-theme=arcade] .hand-selector button.selected,[data-theme=arcade] .movement-toggle button.active,[data-theme=arcade] .rhythm-segmented button.selected,[data-theme=arcade] .rhythm-value-grid button.selected,[data-theme=arcade] .note-toggle-grid button.selected,[data-theme=arcade] .theme-choice.selected{border-color:var(--color-accent);color:var(--color-text);background:linear-gradient(135deg,#6d4aff6b,#22d3ee29);box-shadow:0 0 14px #8b5cf62e}[data-theme=arcade] .naming-answer-grid button:hover:not(:disabled),[data-theme=arcade] .theme-choice:hover,[data-theme=arcade] .secondary-button:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}[data-theme=arcade] .primary-button{color:var(--color-text);background:linear-gradient(135deg,#6d4aff,#9333ea);border-color:#a78bfa8c;border-radius:8px;box-shadow:0 0 14px #8b5cf638}[data-theme=arcade] .primary-button:hover{background:linear-gradient(135deg,#805dff,#a044f1)}[data-theme=arcade] .secondary-button,[data-theme=arcade] .danger-button{border-color:var(--color-border);color:var(--color-text-secondary);background:var(--color-surface-solid);border-radius:8px}[data-theme=arcade] .danger-button{color:var(--color-error);background:#341e45b3;border-color:#f871714d}[data-theme=arcade] .stats-strip{border-bottom:1px solid var(--color-border-subtle)}[data-theme=arcade] .stat-item{border-color:var(--color-border-subtle)}[data-theme=arcade] .stat-item svg{color:var(--color-accent-secondary);fill:#0000;filter:drop-shadow(0 0 6px #22d3ee4d)}[data-theme=arcade] .stat-item strong,[data-theme=arcade] .metric strong,[data-theme=arcade] .journey-stat strong{color:var(--color-text);font-weight:650}[data-theme=arcade] .world-progress,[data-theme=arcade] .note-bar>div,[data-theme=arcade] .rhythm-progress-track{background:#17234c;border-radius:4px;height:7px}[data-theme=arcade] .world-progress i,[data-theme=arcade] .note-bar>div i,[data-theme=arcade] .rhythm-progress-track i{border-radius:inherit;background:linear-gradient(90deg,#22d3ee,#8b5cf6);box-shadow:0 0 9px #22d3ee3d}[data-theme=arcade] .piano{background:#10152a;border-radius:10px;box-shadow:inset 0 3px #28447e,inset 0 -5px 10px #00000040}[data-theme=arcade] .piano:after{border-color:var(--piano-key-border);border-radius:inherit}[data-theme=arcade] .white-key{border-right-color:var(--piano-key-border);background:linear-gradient(90deg, #e8edff, var(--piano-white-start) 18%, var(--piano-white-end));box-shadow:inset 0 -7px 10px #10152a1f}[data-theme=arcade] .white-key .key-note{color:#7381b8}[data-theme=arcade] .white-key.is-active{background:linear-gradient(#65e9fa,#22d3ee);box-shadow:inset 0 0 0 2px #a78bfa,0 0 18px #22d3ee8c}[data-theme=arcade] .black-key{background:linear-gradient(90deg,#070b1a,#252c4a 48%,#10152a);border-color:#10152a;box-shadow:0 5px 5px #00000073,inset 0 -4px 3px #a78bfa1a}[data-theme=arcade] .black-key.is-active{background:linear-gradient(90deg,#0c879e,#22d3ee,#0c879e);box-shadow:0 0 18px #22d3ee8c}[data-theme=arcade] kbd{border-color:var(--color-border-strong);color:var(--color-text-secondary);background:var(--color-surface-soft);font-family:var(--font-display);box-shadow:0 1px #1d315d}[data-theme=arcade] .rhythm-stage,[data-theme=arcade] .rhythm-measure,[data-theme=arcade] .free-play-score-stage,[data-theme=arcade] .blaster-arena-card{background:#0b1329;border-color:#22d3ee47;border-radius:10px;box-shadow:0 0 16px #22d3ee0f}[data-theme=arcade] .sound-toggle{background:var(--color-border-strong)}[data-theme=arcade] .sound-toggle.enabled{background:linear-gradient(90deg,#22d3ee,#8b5cf6);box-shadow:0 0 12px #22d3ee4d}[data-theme=arcade] .sound-toggle span{background:var(--color-text)}[data-theme=arcade] .theme-preview{background:#101935;border:1px solid #28447e;box-shadow:0 0 10px #22d3ee14}[data-theme] .theme-arcade .theme-preview{background:#101935;border:1px solid #28447e}[data-theme] .theme-arcade .theme-preview i{background:#20245b}[data-theme] .theme-arcade .theme-preview i:first-child{background:linear-gradient(90deg,#22d3ee,#8b5cf6)}[data-theme=arcade] footer{color:var(--color-subtle)}@media (width<=1160px){[data-theme=arcade] .topbar{grid-template-columns:150px 1fr 306px}}@media (width<=900px){[data-theme=arcade] .topbar{grid-template-columns:1fr auto}[data-theme=arcade] .practice-page:after{opacity:.3}}@media (width<=660px){[data-theme=arcade] .app-shell{padding-top:10px}[data-theme=arcade] .topbar{padding:8px 10px}[data-theme=arcade] .brand,[data-theme=arcade] .brand:before{width:102px}[data-theme=arcade] .practice-page:before,[data-theme=arcade] .practice-page:after{display:none}[data-theme=arcade] body:before{opacity:.28;background-size:auto 115px;height:115px}}.mobile-practice-controls{display:none}@media (hover:none) and (pointer:coarse) and (width<=700px) and (orientation:portrait){html[data-practice-session=true] .mobile-practice-controls{z-index:100;top:max(8px, env(safe-area-inset-top));border:1px solid var(--color-border-strong);background:color-mix(in srgb, var(--color-surface-solid) 94%, transparent);min-height:50px;box-shadow:var(--shadow-float);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;align-items:center;gap:7px;margin:10px 0;padding:6px;display:flex;position:sticky}.mobile-orientation-hint{min-width:0;color:var(--color-muted);align-items:center;gap:6px;margin-right:auto;padding-left:7px;font-size:11px;display:flex}.mobile-practice-controls button{border:1px solid var(--color-border);min-height:38px;color:var(--color-text);background:var(--color-surface-solid);border-radius:11px;align-items:center;gap:5px;padding:0 11px;font-size:11px;font-weight:700;display:inline-flex}.mobile-practice-controls button svg{width:17px;height:17px}}@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (height<=600px){html[data-practice-session=true]{--mobile-piano-height:126px;height:100%;overflow:hidden}html[data-practice-session=true] body{overscroll-behavior:none;height:100dvh;min-height:100%;overflow:hidden}html[data-practice-session=true] .app-shell{width:100%;height:100dvh;padding:0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));margin:0}html[data-practice-session=true] .topbar{display:none}html[data-practice-session=true] .mobile-practice-controls{z-index:100;top:max(6px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));border:1px solid var(--color-border-strong);background:color-mix(in srgb, var(--color-surface-solid) 91%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;align-items:center;gap:6px;padding:4px;display:flex;position:fixed;box-shadow:0 5px 18px #141f1921}.mobile-practice-controls button{min-height:34px;color:var(--color-text);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:9px;align-items:center;gap:5px;padding:0 9px;font-size:10px;font-weight:750;display:inline-flex}.mobile-practice-controls button:last-child,.mobile-practice-controls button.is-active{border-color:var(--color-border);color:var(--color-accent-dark);background:var(--color-accent-soft)}.mobile-practice-controls button svg{width:15px;height:15px}.mobile-orientation-hint{display:none}html[data-practice-session=true] .page{height:100dvh;padding:0 0 calc(var(--mobile-piano-height) + env(safe-area-inset-bottom));animation:none;overflow:hidden}html[data-practice-session=true] .card{border-radius:10px}html[data-practice-session=true] .piano-card,html[data-practice-session=true] .game-piano-card{z-index:80;height:calc(var(--mobile-piano-height) + env(safe-area-inset-bottom));padding:6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));background:var(--color-surface-solid);border-bottom:0;border-left:0;border-right:0;border-radius:0;margin:0;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -7px 24px #141f1924}html[data-practice-session=true] .piano,html[data-practice-session=true] .piano-compact{touch-action:none;border-radius:10px;height:114px}html[data-practice-session=true] .white-keys{min-width:0}html[data-practice-session=true] .black-key{display:block}html[data-practice-session=true] .piano kbd{display:none}html[data-practice-session=true] .white-key .key-note{font-size:10px;bottom:5px}html[data-practice-session=true] .stats-strip,html[data-practice-session=true] .visual-controls,html[data-practice-session=true] .rhythm-piano-heading,html[data-practice-session=true] .free-play-piano-heading{display:none}html[data-practice-session=true] .practice-layout{display:block}html[data-practice-session=true] .practice-config{display:none}html[data-practice-session=true] .practice-card{height:calc(100dvh - var(--mobile-piano-height) - env(safe-area-inset-bottom));min-height:0;box-shadow:none;border:0;border-radius:0;padding:4px 12px;position:relative}html[data-practice-session=true] .practice-heading>div:first-child{display:none}html[data-practice-session=true] .practice-heading{z-index:6;top:max(7px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));display:block;position:absolute}html[data-practice-session=true] .practice-progress{align-items:flex-start}html[data-practice-session=true] .practice-progress-tools>strong{display:none}html[data-practice-session=true] .hint-button{border-color:var(--color-border);background:color-mix(in srgb, var(--color-surface-solid) 88%, transparent);width:36px;height:36px}html[data-practice-session=true] .staff-wrap,html[data-practice-session=true] .staff-wrap.is-grand-staff,html[data-practice-session=true] .naming-card .staff-wrap{width:100%;height:100%;min-height:0}html[data-practice-session=true] .staff-notation,html[data-practice-session=true] .grand-staff-notation{min-height:0}html[data-practice-session=true] .staff-notation svg{max-width:100%;max-height:100%}html[data-practice-session=true] .feedback-pill{bottom:7px}html[data-practice-session=true] .keyboard-finder-note{font-size:clamp(96px,25vh,150px)}html[data-practice-session=true] .keyboard-finder-wrap:before{width:min(45vh,190px)}html[data-practice-session=true] .note-naming-page{padding-bottom:0}html[data-practice-session=true] .note-naming-page .practice-card{height:100dvh;padding-bottom:58px}html[data-practice-session=true] .naming-answer-area{z-index:8;right:max(8px, env(safe-area-inset-right));bottom:max(6px, env(safe-area-inset-bottom));left:max(8px, env(safe-area-inset-left));width:auto;position:absolute}html[data-practice-session=true] .naming-answer-grid{grid-template-columns:repeat(7,1fr);gap:6px}html[data-practice-session=true] .naming-answer-grid button{min-height:47px}html[data-practice-session=true] .naming-feedback,html[data-practice-session=true] .naming-stats-card,html[data-practice-session=true] .platformer-intro,html[data-practice-session=true] .level-selector{display:none}html[data-practice-session=true] .game-card{height:calc(100dvh - var(--mobile-piano-height) - env(safe-area-inset-bottom));box-shadow:none;border:0;border-radius:0;padding:0}html[data-practice-session=true] .world{border-radius:0;height:100%}html[data-practice-session=true] .challenge-panel.visual-challenge{grid-template-columns:1fr 44px;width:min(480px,100% - 120px);min-height:154px;padding:0 12px 8px;top:50%}html[data-practice-session=true] .visual-challenge .mini-staff,html[data-practice-session=true] .sequence-notation{height:125px}html[data-practice-session=true] .challenge-status{width:40px;height:40px}html[data-practice-session=true] .game-finish-overlay{max-height:calc(100% - 16px);padding:15px 22px;overflow-y:auto}html[data-practice-session=true] .visual-summary{margin:10px 0}html[data-practice-session=true] .rhythm-card{padding:5px 10px}html[data-practice-session=true] .rhythm-heading{display:none}html[data-practice-session=true] .continuous-metronome{border-radius:10px;grid-template-columns:minmax(110px,1fr) auto;gap:12px;min-height:43px;margin:0 190px 4px 0;padding:5px 12px}html[data-practice-session=true] .continuous-metronome>b{display:none}html[data-practice-session=true] .rhythm-stage{border-radius:10px;height:calc(100% - 47px);min-height:0;margin:0}html[data-practice-session=true] .rhythm-notation-scroll{padding:6px 10px 8px}html[data-practice-session=true] .rhythm-measure{flex-basis:270px;min-width:270px}html[data-practice-session=true] .rhythm-notation-svg{height:112px}html[data-practice-session=true] .rhythm-notation-svg svg{max-height:112px}html[data-practice-session=true] .rhythm-playhead{height:66px;top:40px}html[data-practice-session=true] .rhythm-waiting-guide{min-height:39px;padding:4px 12px}html[data-practice-session=true] .rhythm-waiting-guide small{display:none}html[data-practice-session=true] .waiting-pulse{width:30px;height:30px}html[data-practice-session=true] .rhythm-live-feedback{min-height:40px;padding:5px 12px}html[data-practice-session=true] .rhythm-results{max-height:100%;margin:0;overflow-y:auto}html[data-practice-session=true] .blaster-heading,html[data-practice-session=true] .blaster-rules,html[data-practice-session=true] .blaster-page.phase-ready .blaster-arena-card{display:none}html[data-practice-session=true] .blaster-page.phase-over{padding-bottom:0}html[data-practice-session=true] .blaster-page.phase-over .blaster-arena-card{display:none}html[data-practice-session=true] .blaster-setup{height:calc(100dvh - var(--mobile-piano-height) - env(safe-area-inset-bottom));box-shadow:none;border:0;border-radius:0;grid-template-columns:minmax(0,1.5fr) minmax(150px,.55fr);gap:14px;margin:0;padding:12px 16px}html[data-practice-session=true] .blaster-setup h2{margin-bottom:7px}html[data-practice-session=true] .blaster-difficulty{gap:6px}html[data-practice-session=true] .blaster-difficulty button{min-height:57px;padding:7px 10px}html[data-practice-session=true] .blaster-difficulty-description{margin:7px 0 0;font-size:11px}html[data-practice-session=true] .blaster-start-details{padding-left:14px}html[data-practice-session=true] .blaster-start-details strong{font-size:19px}html[data-practice-session=true] .blaster-arena-card{height:calc(100dvh - var(--mobile-piano-height) - env(safe-area-inset-bottom));box-shadow:none;border:0;border-radius:0}html[data-practice-session=true] .blaster-hud{gap:8px;height:52px;padding:7px 14px}html[data-practice-session=true] .blaster-hud>div{gap:1px;padding-left:10px}html[data-practice-session=true] .blaster-hud small{font-size:9px}html[data-practice-session=true] .blaster-hud strong{font-size:18px}html[data-practice-session=true] .blaster-combo>span{display:none}html[data-practice-session=true] .blaster-scene{width:100%;height:calc(100dvh - var(--mobile-piano-height) - 88px - env(safe-area-inset-bottom));min-height:122px}html[data-practice-session=true] .blaster-status{min-height:36px;padding:5px 14px;font-size:10px}html[data-practice-session=true] .blaster-overlay{padding:8px}html[data-practice-session=true] .blaster-overlay p{margin-bottom:8px}html[data-practice-session=true] .blaster-page.phase-over .blaster-results{height:100dvh;padding:12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));box-shadow:none;border:0;border-radius:0;margin:0;overflow-y:auto}html[data-practice-session=true] .blaster-result-score{gap:50px;margin-bottom:8px}html[data-practice-session=true] .blaster-result-score>div{gap:2px}html[data-practice-session=true] .blaster-result-score strong{font-size:27px}html[data-practice-session=true] .blaster-result-grid{gap:6px}html[data-practice-session=true] .blaster-result-grid>div{padding:7px 5px}html[data-practice-session=true] .blaster-result-grid dt{margin-bottom:2px;font-size:9px}html[data-practice-session=true] .blaster-result-grid dd{font-size:18px}html[data-practice-session=true] .blaster-accuracy-help{margin:5px 0 8px}html[data-practice-session=true] .free-play-page{display:block}html[data-practice-session=true] .free-play-heading{display:none}html[data-practice-session=true] .free-play-controls{height:48px;box-shadow:none;border:0;border-radius:0;padding:4px 190px 4px 8px;display:block}html[data-practice-session=true] .free-play-controls>:not(.free-play-actions){display:none}html[data-practice-session=true] .free-play-actions{border:0;justify-content:flex-start;gap:6px;height:40px;padding:0}html[data-practice-session=true] .free-play-actions button{min-height:36px}html[data-practice-session=true] .free-play-score-card{height:calc(100dvh - var(--mobile-piano-height) - 48px - env(safe-area-inset-bottom));box-shadow:none;border:0;border-radius:0}html[data-practice-session=true] .free-play-score-heading{min-height:38px;padding:4px 12px}html[data-practice-session=true] .free-play-score-heading>span small{display:none}html[data-practice-session=true] .free-play-score-stage,html[data-practice-session=true] .free-play-score-viewport,html[data-practice-session=true] .free-play-score-canvas{height:calc(100% - 38px);min-height:0}html[data-practice-session=true] .free-play-notation-svg{height:100%;min-height:0}html[data-practice-session=true] .free-play-notation-svg svg{max-height:100%}}@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (height<=430px){.mobile-practice-controls button span{display:none}}