:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#15122e;--card:#221e47;--card-2:#2e2960;--line:#3b3575;--ink:#f5f3ff;--muted:#b2acd9;--accent:#3ff3c3;--accent-ink:#0f0d24;--accent-soft:#3ff3c324;--accent-glow:#3ff3c347;--pink:#ff5ea8;--pink-soft:#ff5ea829;--pink-glow:#ff5ea83d;--gold:#ffcf48;--gold-soft:#ffcf4824;--ok:#3ff3c3;--bad:#ff6b6b;--meh:#ffa24a;--star-off:#4d4694;--series:#16a080;--heat0:#5b528f;--heat1:#9a5fc4;--heat2:#d85ea6;--heat3:#ff7a9c;--piano-bg:#0e0c20;--piano-fade:#0e0c2000;--key-white:#efeaff;--key-white-edge:#b9b2e6;--key-black:#2a2552;--key-black-edge:#0a0818;--key-label:#5d5694;--key-down:#3ff3c3;--key-down-edge:#1fb58f;--key-down-black:#1c9c7a;--key-hint:#ffcf48;--key-hint-edge:#d9a520;--key-hint-black:#c99a1c;--key-mark:#ffb3d4;--key-mark-edge:#e27bab;--key-mark-black:#b2427c;--key-wrong:#ff8a8a;--key-wrong-edge:#d95c5c;--key-wrong-black:#b8434b;--display:"Bungee", Impact, "Arial Black", sans-serif;--sans:"Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;touch-action:manipulation;overscroll-behavior:none;font-size:16px;line-height:1.4}h2{font-family:var(--display);letter-spacing:.04em;color:var(--muted);margin:24px 2px 10px;font-size:14px;font-weight:400;line-height:1.2}h3{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 4px;font-size:12px;font-weight:700}ul{margin:0;padding:0;list-style:none}p{margin:8px 0}button{font:inherit;color:var(--ink);background:var(--card-2);letter-spacing:.04em;text-transform:uppercase;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;border-radius:14px;justify-content:center;align-items:center;min-height:50px;padding:6px 20px;font-size:14px;font-weight:700;line-height:1.2;transition:transform 80ms ease-out;display:inline-flex}button:active:not(:disabled){transform:translateY(1px)scale(.98)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{cursor:default}button.primary{background:var(--accent);color:var(--accent-ink)}button.danger{background:var(--bad);color:var(--accent-ink)}button.link{min-height:44px;color:var(--accent);letter-spacing:normal;text-transform:none;background:0 0;border-radius:10px;padding:0 8px;font-size:15px;font-weight:500}button.link svg{flex:none;margin-right:4px}.icon-button{background:var(--card);width:44px;height:44px;min-height:0;color:var(--ink);border-radius:12px;flex:none;padding:0}.icon-button svg{flex:none}@media (hover:hover){button:not(:disabled):hover{filter:brightness(1.12)}}.muted{color:var(--muted)}.small{font-size:13px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{flex-direction:column;height:100dvh;display:flex}.screen{flex-direction:column;flex:1;min-height:0;display:flex}.bar{padding:6px 12px;padding-top:max(6px, env(safe-area-inset-top));flex:none;justify-content:space-between;align-items:center;min-height:58px;display:flex}.bar>.icon-button{margin-right:12px}.bar-title{min-width:0;font-family:var(--display);letter-spacing:.02em;text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:14px;overflow:hidden}.bar-meta{text-align:right;min-width:56px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;padding:8px 16px;display:flex;overflow:hidden}.scroll{min-height:0;padding:8px 16px 32px;padding-bottom:max(32px, env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.scroll.centered{text-align:center;flex-direction:column;align-items:center;display:flex}.player{padding:10px 16px 14px;padding-top:max(10px, env(safe-area-inset-top));flex:none;align-items:center;display:flex}.player-badge{background:var(--card-2);border:2px solid var(--accent);width:52px;height:52px;font-family:var(--display);color:var(--accent);border-radius:16px;flex:none;justify-content:center;align-items:center;margin-right:12px;font-size:22px;display:inline-flex}.player-body{flex-direction:column;flex:1;min-width:0;display:flex}.player-level{font-family:var(--display);letter-spacing:.02em;font-size:16px;line-height:1.1}.player .xp-bar{margin:6px 0 5px}.player .icon-button{margin-left:8px}.xp-bar{appearance:none;background:var(--card-2);width:100%;height:10px;color:var(--accent);border:0;border-radius:5px;display:block;overflow:hidden}.xp-bar::-webkit-progress-bar{background:var(--card-2);border-radius:5px}.xp-bar::-webkit-progress-value{background:var(--accent);border-radius:5px}.xp-bar::-moz-progress-bar{background:var(--accent);border-radius:5px}.xp-text{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.pill{background:var(--card);height:44px;font-family:var(--display);border-radius:12px;flex:none;align-items:center;margin-left:10px;padding:0 10px;font-size:15px;display:inline-flex}.pill svg{flex:none;margin-right:4px}.pill.streak{color:var(--pink)}.home .scroll{padding-top:2px}.banner{background:var(--card);border:1px solid var(--line);letter-spacing:normal;text-transform:none;text-align:left;border-radius:18px;justify-content:flex-start;align-items:center;width:100%;min-height:0;margin-bottom:12px;padding:14px;font-size:16px;font-weight:400;line-height:1.3;display:flex}.banner.chrono{border-color:var(--pink);box-shadow:0 0 24px var(--pink-glow)}.banner-icon{border-radius:12px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;margin-right:12px;display:inline-flex}.banner.chrono .banner-icon{background:var(--pink-soft);color:var(--pink)}.banner.review .banner-icon{background:var(--accent-soft);color:var(--accent)}.banner-body{flex-direction:column;flex:1;min-width:0;display:flex}.banner-title{font-family:var(--display);letter-spacing:.02em;font-size:15px}.banner-sub{color:var(--muted);margin-top:3px;font-size:13px}.banner-side{flex-direction:column;flex:none;align-items:flex-end;margin-left:10px;display:flex}.banner-kicker{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px}.banner-value{font-family:var(--display);color:var(--gold);margin-top:2px;font-size:18px}.banner.review .banner-kicker{color:var(--accent);font-weight:700}.banner.review.done .banner-kicker{color:var(--muted);font-weight:400}.world-head{justify-content:space-between;align-items:center;margin:16px 2px 10px;display:flex}.world-head h2{margin:0;font-size:13px}.world-stars{color:var(--gold);font-variant-numeric:tabular-nums;flex:none;align-items:center;margin-left:10px;font-size:13px;font-weight:700;display:inline-flex}.world-stars svg{margin-right:5px}.tiles{flex-wrap:wrap;display:flex}.tile{width:calc(50% - 6px);margin:0 12px 12px 0;display:flex;position:relative}.tile:nth-child(2n){margin-right:0}.tile-main{background:var(--card);border:1px solid var(--line);letter-spacing:normal;text-transform:none;text-align:left;border-radius:18px;flex-direction:column;flex:1;justify-content:flex-start;align-items:stretch;min-width:0;min-height:118px;padding:14px;font-size:16px;font-weight:400;display:flex}.tile.current .tile-main{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 22px var(--accent-glow)}.tile.locked .tile-main{opacity:.55}.tile-top{justify-content:space-between;align-items:center;display:flex}.tile-num{font-family:var(--display);background:var(--card-2);color:var(--muted);border-radius:8px;padding:3px 8px;font-size:12px;line-height:1.3}.tile-lock{color:var(--muted);display:inline-flex}.tile-title{margin:8px 0;font-size:16px;font-weight:700;line-height:1.2}.tile.locked .tile-title{color:var(--muted)}.tile-info{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;margin-top:auto;padding-right:36px;font-size:12px;line-height:1.3;display:flex}.tile.locked .tile-info{padding-right:0}.tile-info svg{color:var(--gold);flex:none;margin-right:6px}.tile-new{color:var(--pink);letter-spacing:.06em;text-transform:uppercase;font-weight:700}.tile-play{background:var(--accent);color:var(--accent-ink);letter-spacing:.04em;text-transform:uppercase;border-radius:10px;align-self:flex-start;margin-top:8px;padding:6px 12px;font-size:13px;font-weight:700}.tile-lesson{width:44px;height:44px;min-height:0;color:var(--muted);background:0 0;border-radius:14px;padding:0;position:absolute;bottom:4px;right:4px}.stars{align-items:center;display:inline-flex}.star{color:var(--line);display:inline-flex}.star+.star{margin-left:2px}.star.on{color:var(--gold)}.stars.big{align-items:flex-end;margin:10px 0 2px}.stars.big .star{color:var(--star-off);margin:0 4px}.stars.big .star.on{color:var(--gold)}.stars.big .star:nth-child(2){margin:0 12px 12px;transform:scale(1.25)}.star.new svg{animation:.5s ease-out both rise}.star.new:nth-child(2) svg{animation-delay:.15s}.star.new:nth-child(3) svg{animation-delay:.3s}.drill{position:relative}.game-bar{padding:6px 16px;padding-top:max(10px, env(safe-area-inset-top));flex:none;grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.game-bar>.icon-button{justify-self:start}.score{flex-direction:column;align-items:center;display:flex}.score-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:11px}.score-num{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:30px;line-height:1}.game-side{flex-direction:column;justify-self:end;align-items:flex-end;display:flex}.progress-count{color:var(--muted);letter-spacing:.1em;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.progress-count.timer{font-family:var(--display);letter-spacing:.02em;color:var(--ink);font-size:20px}.progress-count.timer.urgent{color:var(--bad);animation:1s ease-in-out infinite pulse}.best{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:center;margin-top:2px;font-size:12px;font-weight:700;display:inline-flex}.best svg{flex:none;margin-right:4px}.combo-row{flex:none;justify-content:center;align-items:center;padding:4px 16px 0;display:flex}.combo{font-family:var(--display);border:2px solid var(--line);color:var(--muted);border-radius:12px;margin-right:12px;padding:6px 14px;font-size:18px;line-height:1.2;transition:color .15s,border-color .15s,box-shadow .15s}.combo.on{border-color:var(--pink);color:var(--pink);box-shadow:0 0 18px var(--pink-glow)}.combo-steps{display:flex}.combo-steps span{background:var(--card-2);border-radius:4px;width:18px;height:8px;transition:background .12s}.combo-steps span+span{margin-left:4px}.combo-steps span.on{background:var(--pink)}.game-title{text-align:center;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;flex:none;margin:10px 16px 0;font-size:12px;overflow:hidden}.pop-slot{flex:none;justify-content:center;align-items:center;height:40px;display:flex}.pop{font-family:var(--display);align-items:baseline;animation:.9s ease-out both pop;display:inline-flex}.pop-label{font-size:24px;display:inline-block;transform:rotate(-4deg)}.pop-points{color:var(--accent);margin-left:10px;font-size:22px}.pop.perfect .pop-label{color:var(--gold)}.pop.good .pop-label{color:var(--accent)}.pop.ok .pop-label{color:var(--ink)}.pop.miss .pop-label{color:var(--bad)}.answer{height:30px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;flex:none;margin-top:6px;font-size:16px;line-height:30px}.answer.wrong{color:var(--bad);font-weight:700}.chrono-start{text-align:center;flex-direction:column;align-items:center;max-width:320px;display:flex}.chrono-title{font-family:var(--display);color:var(--accent);margin-bottom:10px;font-size:44px;line-height:1}.chrono-start p{margin:4px 0;font-size:16px;line-height:1.45}.chrono-start .muted{font-size:14px}.chrono-start button{min-width:200px;margin-top:18px}.ear-controls{flex:none;justify-content:center;margin-top:10px;display:flex}.ear-controls button svg{flex:none;margin-right:8px}.staff{max-width:100%;display:block}.staff .ink{color:var(--ink)}.staff .el{color:var(--ink);transition:color .12s}.staff text{fill:currentColor}.staff text.glyph{font-family:Bravura}.staff text.label{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500}.staff line{stroke:currentColor}.staff rect{fill:currentColor}.staff .el.right,.staff .el.ok{color:var(--ok)}.staff .el.wrong,.staff .el.bad{color:var(--bad)}.staff .el.meh{color:var(--meh)}.staff .el.current{color:var(--pink)}.staff .el.heat-0{color:var(--heat0)}.staff .el.heat-1{color:var(--heat1)}.staff .el.heat-2{color:var(--heat2)}.staff .el.heat-3{color:var(--heat3)}.staff .el.tappable{cursor:pointer;outline:none}.staff rect.hit{fill:#0000;pointer-events:all}.staff .el.tappable:focus-visible rect.hit{stroke:var(--accent);stroke-width:2px;rx:6px}.drill .staff{flex:0 auto;width:min(100%,358px);height:auto;min-height:0;max-height:min(46vh,380px)}.drill .staff.grand{max-height:min(52vh,420px)}.exercise .staff{width:100%;max-width:760px;height:auto}.stats .staff{background:var(--card);border-radius:16px;width:auto;max-width:100%;height:auto;margin:0 auto;padding:10px 6px}.reward .scroll{padding-top:max(20px, env(safe-area-inset-top))}.eyebrow{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;font-size:12px}.record-flag{font-family:var(--display);color:var(--gold);align-items:center;margin-top:14px;font-size:24px;animation:.6s ease-out .2s both rise;display:inline-flex}.record-flag svg{flex:none;margin-right:8px}.record-flag.small{margin:0 0 6px;font-size:16px}.big-score{font-family:var(--display);font-variant-numeric:tabular-nums;margin-top:12px;font-size:64px;line-height:1;animation:.5s ease-out both rise}.score-delta{color:var(--accent);margin-top:8px;font-size:14px;font-weight:500}.stat-row{width:100%;display:flex}.stat{background:var(--card);text-align:center;border-radius:16px;flex-direction:column;flex:1 1 0;align-items:center;min-width:0;padding:14px 6px;display:flex}.stat+.stat{margin-left:10px}.stat-value{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:22px;line-height:1.1}.stat-label{color:var(--muted);margin-top:4px;font-size:12px;line-height:1.25}.reward .stat-row{margin-top:16px}.verdict{max-width:340px;color:var(--muted);margin:14px 0 0;font-size:15px;line-height:1.45}.xp-card{background:var(--card);text-align:left;border-radius:16px;flex-direction:column;width:100%;margin-top:14px;padding:14px;display:flex}.xp-head{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.xp-gain{font-family:var(--display);color:var(--accent);font-size:20px}.xp-level,.xp-up{font-family:var(--display);color:var(--muted);font-size:14px}.xp-up{color:var(--gold);animation:.6s ease-out .3s both rise}.xp-card .xp-text{margin-top:8px}.badge-list{text-align:left;width:100%;margin-top:12px}.badge-card{border:1px dashed var(--line);border-radius:16px;align-items:center;padding:12px 14px;animation:.5s ease-out .4s both rise;display:flex}.badge-card+.badge-card{margin-top:10px}.badge-icon{background:var(--gold-soft);width:44px;height:44px;color:var(--gold);border-radius:50%;flex:none;justify-content:center;align-items:center;margin-right:12px;display:inline-flex;overflow:hidden}.badge-glyph{font-family:Bravura;font-size:22px;line-height:1;transform:translateY(5px)}.badge-body{flex-direction:column;min-width:0;display:flex}.badge-kicker{color:var(--gold);letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:700}.badge-title{font-family:var(--display);margin-top:2px;font-size:14px;line-height:1.2}.badge-hint{color:var(--muted);margin-top:2px;font-size:13px;line-height:1.3}.badges{flex-wrap:wrap;display:flex}.badge{background:var(--card);border-radius:16px;flex-direction:column;align-items:flex-start;width:calc(50% - 5px);margin:0 10px 10px 0;padding:12px;display:flex}.badge:nth-child(2n){margin-right:0}.badge .badge-icon{background:var(--card-2);width:40px;height:40px;color:var(--muted);margin:0 0 8px}.badge.on .badge-icon{background:var(--gold-soft);color:var(--gold)}.badge .badge-title{font-size:13px}.badge:not(.on) .badge-title{color:var(--muted)}.badge .badge-hint{font-size:12px}.badge.on .badge-hint{color:var(--gold);font-weight:700}.weak{text-align:left;width:100%;max-width:420px}.weak li,.sessions li,.records li{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;padding:12px 2px;display:flex}.weak li>span:first-child,.sessions li>span:first-child,.records li>span:first-child,.row-button>span:first-child{min-width:0;margin-right:12px;font-size:16px;font-weight:500}.weak li>span:last-child,.sessions li>span:last-child,.records li>span:last-child,.row-button>span:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums;font-size:14px}.weak li .small,.sessions li .small{font-size:13px;font-weight:400}.weak li.tappable{padding:0}.row-button{letter-spacing:normal;text-transform:none;text-align:left;background:0 0;border-radius:0;justify-content:space-between;align-items:baseline;width:100%;min-height:0;padding:12px 2px;font-weight:400;display:flex}.row-button svg{color:var(--muted);flex:none;align-self:center;margin-left:8px}.record-value{color:var(--gold);align-items:center;font-weight:700;display:inline-flex}.record-value svg{flex:none;margin-right:6px}.actions{justify-content:center;width:100%;margin-top:16px;display:flex}.actions button{flex:0 auto}.actions button+button{margin-left:10px}.reward .actions{margin-top:auto;padding-top:18px}.reward .actions button{flex:1 1 0}.reward .actions+.link{margin-top:8px}.actions.wrap{flex-wrap:wrap;justify-content:flex-start}.actions.wrap button{margin:0 10px 10px 0}.actions.wrap button+button{margin-left:0}.actions.secondary{min-height:36px;margin-top:4px}.exercise-status{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:520px;min-height:84px;display:flex}.exercise-status .muted{font-size:15px;line-height:1.4}.count{font-family:var(--display);color:var(--accent);font-variant-numeric:tabular-nums;font-size:64px;line-height:1}.beats{justify-content:center;align-items:center;height:64px;display:flex}.beat{border:2px solid var(--line);background:var(--card);border-radius:50%;width:14px;height:14px;margin:0 7px;transition:transform 80ms}.beat:first-child{width:18px;height:18px}.beat.on{background:var(--pink);border-color:var(--pink);box-shadow:0 0 12px var(--pink-glow);transform:scale(1.15)}.result{flex-direction:column;align-items:center;display:flex}.result-top{align-items:center;display:flex}.score-value{font-family:var(--display);font-variant-numeric:tabular-nums;margin-right:12px;font-size:40px;line-height:1}.exercise-status .result .muted{margin-top:6px;font-size:14px}.xp-line{font-family:var(--display);color:var(--accent);margin-top:6px;font-size:14px}.result .badge-list{max-width:360px;margin-top:8px}.stats .stat-row{margin:8px 0 4px}.stats .stat-value{font-size:26px}.legend{color:var(--muted);flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:13px;display:flex}.legend-item{margin:0 8px}.legend-item:before{content:"";background:currentColor;border-radius:50%;width:10px;height:10px;margin-right:5px;display:inline-block}.legend-item.heat-0:before{background:var(--heat0)}.legend-item.heat-1:before{background:var(--heat1)}.legend-item.heat-2:before{background:var(--heat2)}.legend-item.heat-3:before{background:var(--heat3)}.trend{background:var(--card);border-radius:16px;margin:0 0 12px;padding:12px 12px 6px}.trend-head{flex-direction:column;margin-bottom:6px;display:flex}.trend-title{font-size:15px;font-weight:700}.trend-sub{color:var(--muted);font-size:13px}.trend-plot{touch-action:pan-y;border-radius:8px;outline:none;position:relative}.trend-plot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.trend-plot svg{display:block}.trend-grid{stroke:var(--line);stroke-width:1px}.trend-grid.goal{stroke:var(--muted)}.trend-tick,.trend-axis{fill:var(--muted);font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px}.trend-area{fill:var(--series);fill-opacity:.14;stroke:none}.trend-line{fill:none;stroke:var(--series);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.trend-dot{fill:var(--series);stroke:var(--card);stroke-width:2px}.trend-end{fill:var(--ink);font-family:var(--sans);font-size:12px;font-weight:700}.trend-cross{stroke:var(--muted);stroke-width:1px}.trend-tip rect{fill:var(--card-2);stroke:var(--line);stroke-width:1px}.trend-tip .v{fill:var(--ink);font-family:var(--sans);font-size:14px;font-weight:700}.trend-tip .d{fill:var(--muted);font-family:var(--sans);font-size:11px}.table-toggle{padding-left:0}.trend-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;margin-bottom:8px;font-size:14px}.trend-table th,.trend-table td{text-align:right;border-bottom:1px solid var(--line);padding:8px 4px}.trend-table th:first-child{text-align:left;font-weight:500}.trend-table thead th{color:var(--muted);font-size:12px;font-weight:700}.row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.row>span:first-child{margin-right:12px}.row>span:last-child{text-align:right}.row>button{min-height:44px;padding:0 16px;font-size:13px}.help-row{flex-direction:column;align-items:flex-start;padding:4px 0}.help-row>.link{padding-left:0}.help{margin-top:4px;padding-bottom:8px;font-size:15px;line-height:1.5}.help ol{margin:0;padding-left:22px}.help li{margin-bottom:8px}.row.help-row>span:last-child,.row.help-row>div{text-align:left;width:100%}.seg{background:var(--card);border-radius:12px;flex:none;padding:3px;display:inline-flex}.seg button{min-height:38px;color:var(--muted);letter-spacing:normal;text-transform:none;background:0 0;border-radius:9px;padding:0 12px;font-size:14px;font-weight:500}.seg button.active{background:var(--accent);color:var(--accent-ink);font-weight:700}.range{align-items:center;display:inline-flex}.range input[type=range]{width:150px;accent-color:var(--accent)}.range-value{font-variant-numeric:tabular-nums;min-width:64px;margin-left:10px;font-size:15px}.lesson .scroll{width:100%;max-width:640px;margin:0 auto;padding-top:12px}.lesson-title{letter-spacing:.01em;color:var(--ink);margin:0 0 14px;font-size:20px;line-height:1.2}.lesson-figure{background:var(--card);text-align:center;border-radius:18px;margin-bottom:14px;padding:12px 12px 6px}.lesson-figure .staff{width:auto;max-width:100%;height:auto;max-height:260px;margin:0 auto}.lesson-figure.wide{-webkit-overflow-scrolling:touch;overflow-x:auto}.lesson-figure.wide .staff{min-width:620px}.figure-hint{margin:4px 0 6px}.figure-hint.done{color:var(--accent)}.lesson-text{margin:0 0 12px;font-size:17px;line-height:1.5}.lesson-piano{border-radius:14px;margin:6px 0 14px;overflow:hidden}.lesson-piano .piano{padding-bottom:10px}.lesson-piano .piano-inner{height:120px}.lesson-actions{margin-top:18px}.onboarding .bar{padding:6px 16px;padding-top:max(10px, env(safe-area-inset-top))}.brand{font-family:var(--display);color:var(--accent);font-size:26px;line-height:1}.onboarding .scroll{width:100%;max-width:640px;margin:0 auto;padding-top:12px}.onboarding .lesson-piano{margin:0 0 14px}.onboarding-list li{border-bottom:1px solid var(--line);text-align:left;flex-direction:column;padding:10px 4px;display:flex}.onboarding-list li:last-child{border-bottom:none}.onboarding-list li>span:first-child{font-family:var(--display);letter-spacing:.02em;font-size:13px}.onboarding-list li>span:last-child{margin-top:2px;font-size:14px}.onboarding-dots{justify-content:center;margin:16px 0 4px;display:flex}.onboarding-dots span{background:var(--line);border-radius:4px;width:8px;height:8px;margin:0 4px;transition:width .2s}.onboarding-dots span.on{background:var(--accent);width:22px}.gallery .staff{width:auto;max-width:100%;height:auto;margin:0 auto 12px;display:block}.piano-wrap{flex:none;position:relative}.piano{background:var(--piano-bg);padding:8px 8px 10px;padding-bottom:max(10px, env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:none;overflow:auto hidden}.piano::-webkit-scrollbar{display:none}.piano-inner{height:150px;width:calc(var(--n) * var(--kw));margin:0 auto;position:relative}.piano-fade{pointer-events:none;z-index:3;width:28px;position:absolute;top:0;bottom:0}.piano-fade.left{background:linear-gradient(to right, var(--piano-bg), var(--piano-fade));left:0}.piano-fade.right{background:linear-gradient(to left, var(--piano-bg), var(--piano-fade));right:0}.key{touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;position:absolute;top:0}.key.white{left:calc(var(--i) * var(--kw) + 1px);width:calc(var(--kw) - 2px);background:var(--key-white);height:100%;box-shadow:inset 0 -6px 0 var(--key-white-edge);border-radius:0 0 6px 6px}.key.black{left:calc(var(--i) * var(--kw) - var(--kw) * .31);width:calc(var(--kw) * .62);background:var(--key-black);height:62%;box-shadow:inset 0 -5px 0 var(--key-black-edge);z-index:2;border-radius:0 0 5px 5px}.key.hint{background:var(--key-hint);box-shadow:inset 0 -3px 0 var(--key-hint-edge)}.key.black.hint{background:var(--key-hint-black)}.key.mark{background:var(--key-mark);box-shadow:inset 0 -3px 0 var(--key-mark-edge)}.key.black.mark{background:var(--key-mark-black)}.key.pressed{background:var(--key-down);box-shadow:inset 0 -3px 0 var(--key-down-edge)}.key.black.pressed{background:var(--key-down-black)}.key.wrong{background:var(--key-wrong);box-shadow:inset 0 -3px 0 var(--key-wrong-edge)}.key.black.wrong{background:var(--key-wrong-black)}.key-label{text-align:center;color:var(--key-label);pointer-events:none;font-size:11px;font-weight:500;position:absolute;bottom:12px;left:0;right:0}.key.hint .key-label,.key.mark .key-label,.key.pressed .key-label,.key.wrong .key-label{color:var(--accent-ink)}.key.middle-c:before{content:"";background:var(--pink);border-radius:50%;width:6px;height:6px;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:translateY(6px)scale(.6)}18%{opacity:1;transform:translateY(0)scale(1.12)}30%{transform:translateY(0)scale(1)}70%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-14px)}}@keyframes rise{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@media (height<=700px){.piano-inner{height:132px}.player{padding-bottom:10px}.game-bar{padding-bottom:2px}.score-num{font-size:26px}.combo{padding:4px 12px;font-size:16px}.game-title{margin-top:6px}.pop-slot{height:32px}.pop-label{font-size:20px}.pop-points{font-size:18px}.answer{height:26px;margin-top:4px;font-size:15px;line-height:26px}.big-score{font-size:54px}}@media (width>=700px){.scroll{width:100%;max-width:680px;margin:0 auto}.piano-inner{height:190px}.tile{width:calc(33.3333% - 8.1px)}.tile:nth-child(2n){margin-right:12px}.tile:nth-child(3n){margin-right:0}.badge{width:calc(25% - 7.6px)}.badge:nth-child(2n){margin-right:10px}.badge:nth-child(4n){margin-right:0}.drill .staff{width:min(100%,520px);max-height:min(50vh,520px)}.drill .staff.grand{max-height:min(56vh,600px)}}@media (height<=500px){.bar{min-height:48px;padding-top:max(2px, env(safe-area-inset-top));padding-bottom:2px}.piano-inner{height:100px}.game-bar{padding-top:max(4px, env(safe-area-inset-top))}.score-num{font-size:22px}.combo-row{top:max(10px, env(safe-area-inset-top));padding:0;position:absolute;left:72px}.combo{padding:4px 10px;font-size:14px}.combo-steps span{width:14px}.game-title{display:none}.pop-slot{height:28px}.pop-label{font-size:18px}.pop-points{font-size:16px}.answer{height:24px;margin-top:2px;font-size:14px;line-height:24px}.drill .staff{max-height:40vh}.drill .staff.grand{max-height:48vh}.chrono-title{font-size:32px}.chrono-start button{min-height:44px;margin-top:10px}.exercise .stage{flex-flow:wrap;align-content:center;padding:4px 16px}.exercise .staff{width:58%;max-width:none}.exercise-status{width:40%;min-height:0;margin-left:2%}.exercise .actions{width:100%;margin-top:4px}.exercise .actions.secondary{min-height:0;margin-top:0}.exercise .actions button{min-height:40px}.beats{height:40px}.count{font-size:40px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}