:root{color-scheme:light;--bg: #fbf7ef;--surface: #fff;--surface-2: #f4efe4;--paper: #f8f7f1;--paper-ink: #1f2430;--paper-ink-soft: #5d6474;--paper-accent: #3461f0;--paper-warn: #9a5b00;--ink: #1f2430;--ink-soft: #5d6474;--line: #e9e1d2;--accent: #3461f0;--accent-soft: #e5ecff;--on-accent: #fff;--good: #23a466;--good-ink: #17804d;--retry: #d9534a;--retry-ink: #c0392f;--sun: #f5a524;--spark: #8a63f5;--pink: #ec5fae;--mode-blue: #3461f0;--mode-green: #1f9a5e;--mode-coral: #e0674f;--mode-violet: #7c55e8;--shadow: 0 10px 30px rgb(80 60 20 / .08);--r: 14px;--r-card: 20px;--head: ui-rounded, "SF Pro Rounded", system-ui, sans-serif}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg: #14171d;--surface: #1d222b;--surface-2: #262c37;--ink: #eef1f6;--ink-soft: #a3acbb;--line: #2d3441;--accent: #86a6ff;--accent-soft: #28345a;--on-accent: #14171d;--good: #4fd08f;--good-ink: #4fd08f;--retry: #ff7b73;--retry-ink: #ff7b73;--sun: #ffc15c;--spark: #b39bff;--mode-blue: #86a6ff;--mode-green: #4fd08f;--mode-coral: #ff9a85;--mode-violet: #b39bff;--shadow: 0 12px 34px rgb(0 0 0 / .35)}}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;font-variant-numeric:tabular-nums}h1,h2,h3{font-family:var(--head)}button,select,input{font:inherit;color:inherit}button,select{min-height:44px}button{cursor:pointer}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.45}.trainer,.continue-card,.reward-toast,.sheet,.reward-moment{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.song-controls button,.coach-heading button,.coach-foot button,.rhythm-accessible button,.milestone-actions button,.quest-reroll,.fullscreen-toggle,.dialog-close,.back-link,.goal-pill,.hold-button,.options-button{border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;background:var(--surface);color:var(--ink);font-weight:650}.primary,.milestone-actions .primary,.rhythm-accessible button{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700}.text-button{min-height:44px;border:0;padding:0;background:none;color:var(--accent);font-weight:650;text-align:left}.eyebrow{margin:0;color:var(--ink-soft);font-size:14px;font-weight:600}.label,.field>label,.keyboard-meta,.coach-controls>div>span,.recap-stats dt,.rhythm-accessible dt,.guide-grid span{color:var(--ink-soft);font-size:14px;font-weight:600}.choice{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--r);background:var(--surface-2)}.choice button{flex:1;min-width:max-content;border:0;border-radius:10px;padding:6px 12px;background:none;color:var(--ink-soft);font-weight:650}.choice button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}[data-mode]{--tint: var(--mode-blue)}[data-mode=learning]{--tint: var(--mode-green)}[data-mode=song]{--tint: var(--mode-coral)}[data-mode=rhythm]{--tint: var(--mode-violet)}[data-mode=writer]{--tint: color-mix(in srgb, var(--mode-violet) 55%, var(--mode-coral))}[data-mode=game]{--tint: var(--accent)}.tile{display:grid;color:inherit;text-decoration:none;grid-template-columns:40px 1fr;gap:10px;align-items:center;min-width:0;border:2px solid var(--line);border-radius:var(--r-card);padding:12px;background:var(--surface);text-align:left}.tile:hover{border-color:var(--accent)}.tile[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.tile i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font:700 20px/1 var(--head);font-style:normal}.tile span{display:grid;min-width:0}.tile strong{font-size:16px}.tile small{color:var(--ink-soft);font-size:14px}.app{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:28px 0 48px}.storage-warning{margin-bottom:14px;border:1px solid var(--sun);border-radius:var(--r);padding:10px 14px;background:color-mix(in srgb,var(--sun) 14%,var(--surface))}.masthead,.play-bar,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.masthead{margin-bottom:0}.masthead h1{margin:0;font:800 clamp(34px,5vw,44px)/1 var(--head);letter-spacing:-.02em}.masthead h1 span{color:var(--accent)}.masthead-actions{display:flex;align-items:center;gap:10px}.goal-chip,.badge-button,.star-bank{display:flex;align-items:center;gap:8px;min-height:48px;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;background:var(--surface);text-align:left}.goal-chip small{display:block;color:var(--ink-soft);font-size:14px;line-height:1.2}.goal-chip strong,.star-bank strong{font-weight:800}.goal-star{display:grid;place-items:center;width:36px;height:36px;border:3px solid transparent;border-radius:50%;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(var(--sun) var(--goal-progress, 0deg),var(--line) 0) border-box;color:var(--sun);font-size:20px}.goal-chip.complete .goal-star{background:color-mix(in srgb,var(--sun) 22%,var(--surface));animation:star-pop .5s ease}.star-bank{padding-left:14px}.star-bank span,.badge-button>span:first-child{color:var(--spark);font-size:18px}.badge-button{padding-left:14px;font-weight:650;white-space:nowrap}.badge-button strong{border-radius:99px;padding:0 8px;background:var(--accent-soft);color:var(--accent)}.home-view>*+*{margin-top:18px}h1:focus,h2:focus{outline:none}.continue-card{display:flex;align-items:center;gap:16px;border-color:var(--tint);border-radius:var(--r-card);padding:20px 22px;background:color-mix(in srgb,var(--tint) 12%,var(--surface));color:inherit;text-decoration:none}.continue-text{display:grid;flex:1;min-width:0}.continue-text small,#continueDetail{color:var(--ink-soft);font-size:14px}.continue-text strong{font:800 28px/1.2 var(--head)}.continue-play{display:grid;place-items:center;flex:0 0 64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:26px}.section-title,.home-quests h2{margin-bottom:0;font-size:20px}.home-tiles,.song-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0;padding:0;list-style:none}.home-tiles .tile,.song-card{grid-template-columns:1fr;align-content:start;min-height:132px}.home-tiles .tile i{background:color-mix(in srgb,var(--tint) 16%,var(--surface));color:var(--tint)}.home-tiles .tile:hover{border-color:var(--tint)}.home-quests{border-radius:var(--r-card);padding:16px;background:var(--surface-2)}.home-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.home-device{margin:0;color:var(--ink-soft);font-size:14px}.view-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.view-bar h1{margin:0;font-size:28px}.back-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none;white-space:nowrap}.song-list{grid-template-columns:repeat(2,minmax(0,1fr))}.song-card{width:100%;grid-template-columns:40px 1fr;min-height:0}.song-card[aria-current]{border-color:var(--accent)}.song-done{color:var(--good-ink)!important;font-weight:700}.home-tiles .tile[hidden]{display:none}.games-intro,.games-sound{margin:0;color:var(--ink-soft)}.games-sound{margin-top:14px}.game-skill{color:var(--accent)!important;font-weight:700}.game-stage:not([hidden]){color:var(--paper-ink);display:grid;gap:14px;place-items:center;min-height:240px;padding:16px}.game-stage button{width:auto;border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;background:var(--surface);color:var(--ink);font-weight:650}.game-stage button.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:700}.hold-wrap{position:relative;display:inline-flex}.hold-button{display:inline-flex;align-items:center;gap:8px;padding-left:8px;color:var(--ink-soft);-webkit-touch-callout:none;user-select:none;touch-action:none}.hold-icon{position:relative;display:grid;place-items:center;width:30px;height:30px;font-size:13px}.hold-icon svg{position:absolute;inset:0;rotate:-90deg;fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100}.hold-button.holding svg{animation:hold-fill 2s linear forwards}.hold-hint{position:absolute;z-index:5;right:0;bottom:calc(100% + 6px);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink-soft);font-size:14px;white-space:nowrap}.options-button{display:inline-flex;align-items:center;gap:6px}.options-button span:first-child{color:var(--accent);font-size:18px}.sheet.options-sheet{width:min(440px,100%);height:100dvh;max-height:100dvh;margin:0 0 0 auto;border-radius:var(--r-card) 0 0 var(--r-card)}.sheet.options-sheet[open]{display:flex;flex-direction:column;animation-name:side-in}.settings.quick-settings{grid-template-columns:1fr;flex:1;align-content:start}.settings.quick-settings .tile-grid{grid-template-columns:1fr 1fr}.options-footer{display:flex;justify-content:flex-end;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.more-keys summary{min-height:44px;padding:10px 0 0;color:var(--accent);font-weight:650;cursor:pointer}.more-keys .choice{margin-top:6px}.settings-group{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.settings-group h3{margin:0 0 10px;font-size:18px}.hold-hint:empty{display:none}.goal-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;white-space:nowrap}.goal-pill span:first-child{color:var(--sun)}.parent-data{display:flex;justify-content:space-between;gap:16px;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.shortcut-help{margin:12px 0 0;color:var(--ink-soft);font-size:14px;text-align:center}.trainer{border-top:4px solid var(--tint);border-radius:var(--r-card);padding:20px}.play-bar{margin-bottom:12px}.play-title{flex:1;min-width:0}.play-title h1{margin:0;font-size:22px;line-height:1.2}.play-title p{margin:0;color:var(--ink-soft);font-size:14px}.status-dot{border-radius:999px;padding:4px 12px;background:var(--surface-2);color:var(--ink-soft);font-size:14px;white-space:nowrap}.status-dot.ready{display:none}.status-dot i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--good)}.status-dot.waiting i,.status-dot.warning i{background:var(--sun)}.status-dot.paused i{background:var(--ink-soft)}.fullscreen-toggle{display:flex;align-items:center;gap:6px;padding-inline:12px;color:var(--ink-soft);font-size:14px}.fullscreen-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.fullscreen-exit-icon,.fullscreen-toggle[aria-pressed=true] .fullscreen-enter-icon{display:none}.fullscreen-toggle[aria-pressed=true] .fullscreen-exit-icon{display:block}.stat,.recap-stats div{border-radius:var(--r);padding:8px 12px;background:var(--surface-2)}.notation-surface{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}.staff{height:clamp(225px,30vw,300px)}.staff.multi-line[data-rows="2"]{height:460px}.staff.multi-line[data-rows="3"]{height:690px}.staff.multi-line[data-rows="4"]{height:920px}.staff svg{display:block;width:100%;height:100%}.staff.song-staff{height:auto;aspect-ratio:84 / 33}.staff.song-staff[data-rows="2"]{aspect-ratio:84 / 66}.staff.song-staff[data-rows="3"]{aspect-ratio:84 / 99}.staff.song-staff[data-rows="4"]{aspect-ratio:84 / 132}.staff.song-staff svg{height:auto}.staff.score-staff{height:auto;aspect-ratio:84 / 29;overflow-y:auto}.trainer[data-mode=writer] .notation-surface{display:flex;flex-direction:column}.trainer[data-mode=writer] .game-stage{order:-1}.staff.score-staff svg{height:auto}.trainer[data-mode=writer] .game-stage:not([hidden]){min-height:0;padding:12px 16px 10px;border-bottom:1px solid var(--line)}.trainer[data-mode=writer] .score-line,.trainer[data-mode=writer] .keyboard-meta{display:none}.writer-controls{display:grid;gap:8px;width:100%}.writer-buttons{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.writer-controls .writer-record{min-width:132px}.writer-controls button:disabled{opacity:.5;cursor:not-allowed}.writer-status{min-height:1.4em;margin:0;color:var(--paper-ink-soft);font-weight:650;text-align:center;font-variant-numeric:tabular-nums}.writer-takes{justify-self:center;width:min(100%,520px);color:var(--paper-ink)}.writer-takes summary{min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}.writer-takes ul{display:grid;gap:6px;max-height:11.5rem;overflow-y:auto;margin:4px 0 0;padding:2px;list-style:none}.writer-takes li{display:flex;gap:6px}.writer-takes li.empty{justify-content:center;color:var(--paper-ink-soft)}.game-stage .writer-takes .writer-take-open{flex:1;text-align:left}.writer-text{justify-self:center;width:min(100%,720px);color:var(--paper-ink)}.writer-text summary{min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}.writer-text ol{max-height:14rem;overflow-y:auto;margin:4px 0 0;padding:0 0 0 2.2em;line-height:1.5}.writer-text ol.empty{list-style:none;padding:0;text-align:center;color:var(--paper-ink-soft)}.game-stage .writer-takes .writer-take-open[aria-current]{border-color:var(--paper-accent);box-shadow:inset 0 0 0 1px var(--paper-accent)}.rhythm-canvas{display:none;width:100%;height:auto;background:#10151e;touch-action:none}.rhythm-canvas.active{display:block}.learning-guide{margin-bottom:10px}.key-chip summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-radius:999px;padding:6px 14px;background:var(--accent-soft);color:var(--ink);cursor:pointer}.key-chip summary:after{content:"▾";color:var(--accent);transition:rotate .15s}.key-chip[open] summary:after{rotate:180deg}.key-chip[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}.key-chip-body{border-radius:0 var(--r-card) var(--r-card);padding:12px 16px;background:var(--accent-soft)}.guide-grid{display:grid;grid-template-columns:1.15fr 1fr 1.2fr;gap:16px}.guide-grid>div{min-width:0}.guide-grid p,.guide-rule{margin:4px 0 0;font-size:14px}.guide-changes{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.guide-changes b{border-radius:8px;padding:2px 8px;background:var(--surface);font-size:14px}.guide-changes i,.pattern-sequence i,.scale-coach i{margin:0 4px;color:var(--ink-soft);font-style:normal}.scale-notes{font-weight:700;word-spacing:3px}.guide-rule{padding-top:10px;border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent);color:var(--ink-soft)}.learning-guide.compact .guide-grid{grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr)}.response{display:grid;place-items:center;min-height:52px;padding-top:12px;text-align:center}.response p{margin:0;color:var(--ink-soft)}.feedback.good{color:var(--good-ink);font-weight:800}.feedback.bad{color:var(--retry-ink);font-weight:800}.device-status{min-height:20px;margin:0;color:var(--ink-soft);font-size:14px}.device-status.good{color:var(--good-ink)}.device-status.bad{color:var(--retry-ink)}.keyboard-wrap{width:min(1000px,100%);margin:4px auto 0;border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px 14px;background:var(--surface-2)}.keyboard-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.keyboard-meta span:last-child{font-weight:400}.piano-keyboard{display:flex;height:108px;overflow:auto hidden;border-radius:10px;padding:0 2px 3px;background:#2a2f3a}.piano-key-slot{position:relative;flex:1 0 42px}.piano-key-slot+.piano-key-slot{margin-left:2px}.piano-key{min-height:0;padding:0;touch-action:none;transition:background .14s,transform .14s}.piano-key.white{position:relative;width:100%;height:100%;border:1px solid #c9c3b6;border-top:0;border-radius:0 0 7px 7px;background:linear-gradient(#fffdf8 0 84%,#ebe5d8)}.piano-key.white b{position:absolute;inset:auto 0 7px;color:#6b6558;text-align:center;font-size:11px}.piano-key.black{position:absolute;z-index:2;top:0;right:-31%;width:58%;height:61%;border:0;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#2b303a,#12151b 72%)}.piano-key.white.expected{background:linear-gradient(#dce6ff,#9db6ff);box-shadow:inset 0 -5px #3461f0}.piano-key.black.expected{background:linear-gradient(90deg,#4d74e8,#2645a8 72%)}.piano-key.input-good{background:var(--good)!important;transform:translateY(3px)}.piano-key.input-bad{background:var(--retry)!important;transform:translateY(3px)}.score-line{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:10px 0 0;color:var(--ink-soft);font-size:14px}.score-line strong{color:var(--ink);font-size:16px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:12px}.stat{text-align:center}.stat strong{display:block;font-size:20px}.stat span{color:var(--ink-soft);font-size:14px}.song-controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:10px}.song-controls span{color:var(--ink-soft);font-size:14px;text-align:center}.note-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin-top:12px}.note-strip ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.note-strip li{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:14px;font-weight:700}.note-strip li.mastered{border-color:transparent;background:var(--accent-soft)}.note-strip li.mastered span{color:var(--sun)}.note-strip li[aria-current]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.note-strip small{color:var(--ink-soft);font-size:14px}.badge-progress{height:8px;overflow:hidden;border-radius:99px;background:var(--surface-2)}progress{display:block;width:100%;height:100%;border:0;border-radius:99px;appearance:none;background:var(--surface-2);color:var(--good)}progress::-webkit-progress-bar{background:var(--surface-2)}progress::-webkit-progress-value{border-radius:99px;background:currentColor}progress::-moz-progress-bar{border-radius:99px;background:currentColor}.badge-progress progress{color:var(--spark)}.quest-card progress{height:8px;color:var(--sun)}.rhythm-accessible{display:grid;grid-template-columns:1.2fr 2fr auto;align-items:center;gap:14px;margin-top:10px;border-radius:var(--r-card);padding:12px 14px;background:var(--surface-2)}.rhythm-accessible[hidden]{display:none}.rhythm-accessible h3{margin:0;font-size:16px}.rhythm-accessible dl,.recap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.rhythm-accessible dl div{border-left:1px solid var(--line);padding-left:10px}dd{margin:2px 0 0;font-weight:800}.pattern-guide{display:flex;align-items:center;gap:12px;border-radius:var(--r-card);padding:10px 16px;background:var(--accent-soft)}.pattern-guide p,.learning-pattern-panel>p,.scale-coach p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}.pattern-symbol{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:12px;background:var(--surface);color:var(--accent);font:700 24px/1 var(--head)}.pattern-symbol.fingers{font-size:12px;font-weight:800}.pattern-symbol.scale{color:var(--good-ink)}.learning-pattern-panel{display:grid;gap:10px;margin-top:12px;border:1px solid var(--line);border-radius:var(--r-card);padding:14px}.learning-pattern-panel>strong{font-size:14px}.pattern-sequence{display:flex;align-items:center;gap:6px}.pattern-sequence span,.finger-sequence span,.scale-coach span{display:grid;place-items:center;min-width:44px;height:44px;border-radius:10px;background:var(--surface-2);color:var(--ink-soft);font-weight:800}.finger-sequence{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}.finger-sequence span{min-width:0}.finger-sequence small,.scale-coach small{font-size:11px}.pattern-sequence span.active,.finger-sequence span.active{background:var(--accent);color:var(--on-accent)}.pattern-sequence span.done,.finger-sequence span.done{color:var(--good-ink)}.scale-coach{display:grid;grid-template-columns:76px 20px 76px 1fr;gap:8px;align-items:center}.scale-coach span{height:54px}.scale-coach strong{color:var(--good-ink);font-size:22px}.practice-coach{margin-top:12px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card)}.practice-coach.active{border-color:var(--accent)}.coach-heading{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:12px}.coach-heading div{min-width:0}.coach-heading p,.coach-foot p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}.coach-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:20px}.coach-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;border-top:1px solid var(--line);padding:12px}.coach-controls>div{display:grid;align-content:start;gap:6px;min-width:0}.coach-controls .choice button{min-width:44px;padding-inline:6px}.coach-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:10px 12px}.coach-foot p{text-align:right}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{display:grid;align-content:start;gap:6px}.pathway-field{grid-column:1 / -1}.check{display:flex;align-items:center;gap:8px;min-height:44px}.check input{width:20px;height:20px;accent-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}.range-value{color:var(--ink);font-weight:800}.midi-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px 14px;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.midi-settings h3{grid-column:1 / -1;margin:0;font-size:18px}.primary,select{width:100%;border:1px solid var(--line);border-radius:var(--r)}select{padding:8px 10px;background:var(--surface)}.primary{border-color:var(--accent)}.reward-toasts{position:fixed;z-index:20;bottom:max(18px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:grid;gap:8px;width:min(360px,calc(100% - 32px));pointer-events:none}.reward-toast{display:flex;align-items:center;gap:12px;border-radius:var(--r-card);padding:10px 14px;animation:toast-in .25s ease both}.reward-toast.leaving{animation:toast-out .35s ease both}.reward-toast-icon,.badge-icon,.quest-icon{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--sun) 20%,var(--surface));color:var(--sun);font-size:20px}.reward-toast span:last-child{display:grid}.reward-toast small{color:var(--ink-soft);font-size:14px}.sheet{width:min(760px,calc(100% - 28px));max-height:min(780px,calc(100dvh - 28px));border-radius:var(--r-card);padding:22px;color:var(--ink)}.sheet[open]{animation:sheet-in .18s ease-out both}.sheet::backdrop{background:#14171d73;backdrop-filter:blur(4px)}.dialog-heading{margin-bottom:14px}.dialog-heading h2{margin:0;font-size:28px;line-height:1.15}.dialog-close{width:44px;border-radius:50%;padding:0;font-size:24px}.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.badge-card,.quest-card{display:grid;min-width:0;border:1px solid var(--line);border-radius:var(--r-card);padding:12px;background:var(--surface)}.badge-card{grid-template-columns:48px 1fr;gap:12px}.badge-icon{width:48px;height:48px;font-size:24px}.badge-card.locked .badge-icon{background:var(--surface-2);color:var(--ink-soft)}.badge-card h3{margin:0;font-size:16px}.badge-card p{margin:2px 0 8px;color:var(--ink-soft);font-size:14px}.badge-meta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--ink-soft);font-size:14px}.badge-meta strong,.quest-card.complete small{color:var(--good-ink);font-weight:800}.dialog-footnote{margin:14px 0 0;color:var(--ink-soft);font-size:14px;text-align:center}.album-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.album-footer .dialog-footnote{margin:0;text-align:left}.quest-panel{margin-bottom:14px;border-radius:var(--r-card);padding:14px;background:var(--surface-2)}.quest-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px}.quest-heading h3{margin:0;font-size:18px}.quest-heading p{margin:0;color:var(--ink-soft);font-size:14px}.quest-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.quest-card{grid-template-columns:36px 1fr;align-content:start;gap:6px 10px}.quest-card.complete{border-color:var(--good)}.quest-card>div{display:grid;gap:6px;min-width:0}.quest-card strong{font-size:14px;line-height:1.3}.quest-card small{color:var(--ink-soft);font-size:14px}.quest-card.complete .quest-icon{background:color-mix(in srgb,var(--good) 20%,var(--surface));color:var(--good-ink)}.quest-reroll{grid-column:2;justify-self:start;border-radius:999px;padding:4px 12px;color:var(--ink-soft);font-size:14px}.recap-dialog,.onboarding-dialog{width:min(620px,calc(100% - 28px))}.recap-dialog h3{margin:16px 0 8px;font-size:16px}.recap-goal,.onboarding-dialog>p:not(.eyebrow){margin:0;color:var(--ink-soft)}.recap-stats{margin-top:14px}.recap-stats dd{font-size:24px}.recap-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.recap-badges li{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:14px;font-weight:650}.recap-badges li span:first-child{color:var(--sun)}.recap-badges li.empty{border-style:dashed;color:var(--ink-soft);font-weight:400}.milestone-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.milestone-actions button{width:auto}.milestone-dialog{width:min(560px,calc(100% - 28px));overflow:hidden;text-align:center}.milestone-dialog[open]{display:grid;justify-items:center;gap:12px}.milestone-dialog h2{margin:0;font-size:34px;line-height:1.1}.milestone-dialog>p:not(.eyebrow){max-width:430px;margin:0;color:var(--ink-soft)}.milestone-dialog .text-button{text-align:center}.milestone-icon{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sun) 35%,var(--surface)),var(--surface-2));color:var(--sun);font-size:46px;animation:star-pop .55s ease both}.onboarding-dialog h2{margin:4px 0;font-size:30px;line-height:1.15}.onboarding-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.onboarding-options .tile{grid-template-columns:1fr;gap:4px;min-height:108px;align-content:center}.fireworks{position:absolute;inset:0;pointer-events:none}.fireworks i{position:absolute;left:var(--ox, 50%);top:var(--oy, 42%);width:var(--size, 7px);height:var(--size, 7px);border-radius:50%;color:var(--c, var(--sun));background:currentColor;animation:firework 1.35s ease-out both;animation-delay:var(--delay, 0s)}.fireworks i:nth-child(8n+1){--x: 0px;--y: -125px}.fireworks i:nth-child(8n+2){--x: 88px;--y: -88px;--c: var(--accent)}.fireworks i:nth-child(8n+3){--x: 125px;--y: 0px;--c: var(--good);--size: 6px}.fireworks i:nth-child(8n+4){--x: 88px;--y: 88px;--c: var(--retry)}.fireworks i:nth-child(8n+5){--x: 0px;--y: 125px;--c: var(--accent);--size: 5px}.fireworks i:nth-child(8n+6){--x: -88px;--y: 88px}.fireworks i:nth-child(8n+7){--x: -125px;--y: 0px;--c: var(--good);--size: 6px}.fireworks i:nth-child(8n){--x: -88px;--y: -88px;--c: var(--retry)}.fireworks i:nth-child(n+9):nth-child(-n+16){--ox: 24%;--oy: 54%;--delay: .18s}.fireworks i:nth-child(n+17){--ox: 76%;--oy: 55%;--delay: .36s}.reward-sky{position:fixed;z-index:18;inset:0;overflow:hidden;pointer-events:none}.reward-burst{position:absolute;left:50%;top:49%;width:1px;height:1px}.reward-burst i{position:absolute;color:var(--accent);font:900 18px/1 var(--head);animation:reward-spark 1.05s cubic-bezier(.15,.7,.24,1) both}.reward-burst i:nth-child(4n+2){color:var(--sun)}.reward-burst i:nth-child(4n+3){color:var(--pink)}.reward-burst i:nth-child(4n){color:var(--spark)}.reward-burst.perfect i{color:var(--good)}.reward-burst i:nth-child(1){--rx: -110px;--ry: -65px}.reward-burst i:nth-child(2){--rx: -72px;--ry: -116px}.reward-burst i:nth-child(3){--rx: -18px;--ry: -135px}.reward-burst i:nth-child(4){--rx: 43px;--ry: -124px}.reward-burst i:nth-child(5){--rx: 102px;--ry: -76px}.reward-burst i:nth-child(6){--rx: 126px;--ry: -10px}.reward-burst i:nth-child(7){--rx: 101px;--ry: 64px}.reward-burst i:nth-child(8){--rx: 49px;--ry: 112px}.reward-burst i:nth-child(9){--rx: -15px;--ry: 127px}.reward-burst i:nth-child(10){--rx: -78px;--ry: 99px}.reward-burst i:nth-child(11){--rx: -121px;--ry: 49px}.reward-burst i:nth-child(12){--rx: -137px;--ry: -7px}.reward-burst.streak i,.reward-burst.mastery i,.reward-burst.concert i{font-size:22px;animation-duration:1.25s}.reward-moment{position:absolute;left:50%;top:28%;display:grid;grid-template-columns:54px auto;gap:12px;align-items:center;min-width:min(370px,calc(100vw - 36px));border-color:var(--spark);border-radius:var(--r-card);padding:12px 18px 12px 12px;transform:translate(-50%,-50%);animation:reward-moment-in .45s cubic-bezier(.2,.85,.3,1.25) both}.reward-moment>span{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:color-mix(in srgb,var(--spark) 18%,var(--surface));color:var(--spark);font:800 30px/1 var(--head)}.reward-moment div{display:grid;gap:2px}.reward-moment strong{font:800 22px/1.1 var(--head)}.reward-moment small{color:var(--ink-soft);font-size:14px;font-weight:600}.reward-moment.leaving{animation:reward-moment-out .35s ease both}.reward-moment.goal,.reward-moment.concert{top:24%;border-color:var(--sun)}.reward-moment.goal>span,.reward-moment.concert>span{background:color-mix(in srgb,var(--sun) 22%,var(--surface));color:var(--sun)}.reward-finale{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--spark) 14%,transparent),transparent 30%);animation:finale-glow 2s ease both}.reward-finale i{position:absolute;left:var(--fx, 50%);top:var(--fy, 46%);width:7px;height:7px;border-radius:50%;background:currentColor;color:var(--sun);animation:finale-spark 1.65s ease-out both;animation-delay:var(--fd, 0s)}.reward-finale i:nth-child(6n+2){color:var(--accent);--dx: 105px;--dy: -92px}.reward-finale i:nth-child(6n+3){color:var(--pink);--dx: 122px;--dy: 31px}.reward-finale i:nth-child(6n+4){color:var(--good);--dx: 18px;--dy: 118px}.reward-finale i:nth-child(6n+5){color:var(--spark);--dx: -105px;--dy: 82px}.reward-finale i:nth-child(6n){--dx: -119px;--dy: -42px}.reward-finale i:nth-child(6n+1){--dx: -12px;--dy: -132px}.reward-finale i:nth-child(n+7):nth-child(-n+12),.reward-finale i:nth-child(n+25):nth-child(-n+30){--fx: 18%;--fy: 62%;--fd: .18s}.reward-finale i:nth-child(n+13):nth-child(-n+18),.reward-finale i:nth-child(n+31){--fx: 82%;--fy: 57%;--fd: .32s}.reward-finale i:nth-child(n+19):nth-child(-n+24){--fx: 50%;--fy: 30%;--fd: .48s}@keyframes side-in{0%{opacity:0;transform:translate(24px)}}@keyframes hold-fill{to{stroke-dashoffset:0}}@keyframes star-pop{0%{transform:scale(.72) rotate(-12deg)}70%{transform:scale(1.12) rotate(4deg)}to{transform:scale(1)}}@keyframes toast-in{0%{opacity:0;transform:translateY(9px)}}@keyframes toast-out{to{opacity:0;transform:translateY(9px)}}@keyframes sheet-in{0%{opacity:0;transform:translateY(16px)}}@keyframes firework{0%{opacity:0;transform:translate(0) scale(.25)}18%{opacity:1}72%{opacity:1}to{opacity:0;transform:translate(var(--x),var(--y)) scale(1.35)}}@keyframes reward-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}20%{opacity:1}to{opacity:0;transform:translate(var(--rx),var(--ry)) scale(1.25) rotate(180deg)}}@keyframes reward-moment-in{0%{opacity:0;transform:translate(-50%,-40%) scale(.72) rotate(-2deg)}}@keyframes reward-moment-out{to{opacity:0;transform:translate(-50%,-68%) scale(.92)}}@keyframes finale-spark{0%{opacity:0;transform:translate(0) scale(.2)}15%{opacity:1}75%{opacity:1}to{opacity:0;transform:translate(var(--dx, 0),var(--dy, -120px)) scale(1.3)}}@keyframes finale-glow{0%,to{opacity:0}18%,75%{opacity:1}}a{color:var(--accent)}kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 5px;background:var(--surface);font:inherit}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app:fullscreen{width:100%;height:100%;overflow:auto;padding:clamp(14px,2.5vw,32px);background:var(--bg)}.app:fullscreen .trainer{display:flex;flex-direction:column;width:min(1440px,100%);min-height:100%;margin:0 auto}.app:fullscreen .staff:not(.song-staff){height:clamp(300px,46vh,520px)}.app:fullscreen .staff.multi-line[data-rows="2"]{height:clamp(480px,58vh,640px)}.app:fullscreen .staff.multi-line[data-rows="3"]{height:clamp(620px,66vh,820px)}.app:fullscreen .staff.multi-line[data-rows="4"]{height:clamp(760px,74vh,1000px)}@media(max-width:760px){.masthead{align-items:flex-start}.masthead-actions{flex-wrap:wrap;justify-content:flex-end}.star-bank{order:2}.quest-list{grid-template-columns:1fr}.guide-grid,.learning-guide.compact .guide-grid{grid-template-columns:1fr;gap:10px}.song-controls{grid-template-columns:1fr 1fr}.song-controls span{grid-column:1 / -1;grid-row:1}.tile-grid,.home-tiles,.home-tiles.with-games{grid-template-columns:repeat(2,1fr)}.coach-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.coach-foot{flex-direction:column;align-items:stretch}.coach-foot p{text-align:left}}@media(max-width:540px){.app{width:calc(100% - 20px);padding-top:16px}.masthead{flex-wrap:wrap}.masthead .eyebrow,.keyboard-meta span:first-child{display:none}.keyboard-meta{justify-content:center;margin-bottom:4px}.masthead-actions{flex-wrap:wrap;justify-content:flex-start;width:100%}.goal-chip,.badge-button{min-width:0}.fullscreen-toggle span{display:none}.trainer{padding:12px}.play-bar{flex-wrap:wrap;gap:8px}.play-title{order:-1;flex-basis:100%}.options-button span:last-child,.back-link span:last-child{display:none}.sheet.options-sheet{width:100%;height:auto;max-height:88dvh;margin:auto 0 0;border-radius:var(--r-card) var(--r-card) 0 0}.sheet.options-sheet[open]{animation-name:sheet-in}.song-list{grid-template-columns:1fr}.home-tiles .tile{min-height:0}.continue-text strong{font-size:24px}.settings,.badge-grid,.tile-grid,.onboarding-options,.rhythm-accessible,.midi-settings{grid-template-columns:1fr}.home-footer,.parent-data{flex-direction:column;align-items:flex-start}.milestone-actions{flex-direction:column;width:100%}.pattern-sequence{flex-wrap:wrap}.rhythm-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.rhythm-stats .stat{padding-inline:4px}.keyboard-wrap{width:100%;padding-inline:8px}.staff.multi-line[data-rows]{height:auto}.staff.multi-line svg{height:auto}.piano-keyboard{height:84px}.piano-key-slot{flex:0 0 44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.hold-button.holding svg,.goal-chip.complete .goal-star,.reward-toast,.reward-toast.leaving,.sheet[open],.milestone-icon,.fireworks i,.reward-burst i,.reward-moment,.reward-moment.leaving,.reward-finale,.reward-finale i{animation:none!important}.fireworks,.reward-burst,.reward-finale{display:none}}
