:root{--bg:#fbf6ee;--card:#fff;--ink:#2b2622;--muted:#8a7f74;--line:#ece3d6;--plum:#7b5ea7;--plum-soft:#efe8f7;--green:#22a35a;--green-soft:#e3f6ea;--red:#e04848;--red-soft:#fdeaea;--gold:#f2b632;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:ui-rounded,SF Pro Rounded,Segoe UI Variable Display,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{min-height:100dvh;margin:0}#app{flex-direction:column;gap:16px;max-width:460px;margin:0 auto;padding:16px 18px 40px;display:flex}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}h1,h2{letter-spacing:-.01em;margin:0}h1{font-size:1.5rem}h2{text-align:center;font-size:1.15rem}.muted{color:var(--muted);font-size:.9rem}.top{grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:44px;display:grid}.top h1{grid-column:1/3}.back{background:0 0;border:0;border-radius:12px;width:40px;height:40px;font-size:1.4rem}.back:hover{background:var(--line)}.streak,.combo{color:#a96a00;text-align:center;font-variant-numeric:tabular-nums;background:#fff1d6;border-radius:999px;min-width:44px;padding:6px 12px;font-weight:700;transition:transform .2s,background .2s,color .2s}.icon{vertical-align:-.125em;flex:none;display:inline-block}.row-title .icon{color:var(--plum);margin-right:2px}.streak .icon{color:#e07a1f}.combo.hot .icon{color:#fff}.combo.hot{background:var(--gold);color:#fff;transform:scale(1.12)}.mascot{align-items:flex-end;gap:10px;display:flex}.mascot-face{flex:none;width:96px}.mascot-svg{width:100%;display:block}.bubble{background:var(--card);border:2px solid var(--line);border-radius:18px 18px 18px 4px;flex:1;margin-bottom:18px;padding:12px 14px;line-height:1.4;position:relative}.bubble.pop{animation:.25s ease-out pop}.card{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:10px;transition:background .2s,border-color .2s;position:relative}.card.right{background:var(--green-soft);border-color:var(--green);animation:.35s ease-out bounce}.card.wrong{background:var(--red-soft);border-color:var(--red);animation:.35s shake}.staff{justify-content:center;display:flex;overflow:hidden}.staff svg{max-width:100%;height:auto}.list{flex-direction:column;gap:10px;display:flex}.row{text-align:left;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;display:flex}.row:not(:disabled):active{border-bottom-width:2px;transform:translateY(2px)}.row.highlight{border-color:var(--plum);background:var(--plum-soft)}.row.lesson{flex-direction:row;align-items:center;gap:12px}.row-body{flex-direction:column;flex:1;gap:2px;display:flex}.row-title{font-weight:700}.row-sub{color:var(--muted);font-size:.9rem}.badge{background:var(--plum);color:#fff;border-radius:50%;flex:none;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.bar{background:var(--line);border-radius:99px;flex:1;height:8px;margin-top:6px;display:block;overflow:hidden}.bar>span{background:var(--green);border-radius:inherit;height:100%;transition:width .4s;display:block}.progress{background:var(--line);border-radius:99px;height:14px;overflow:hidden}.progress>span{background:var(--green);border-radius:inherit;width:0;height:100%;transition:width .3s;display:block}.primary{background:var(--plum);color:#fff;border:0;border-bottom:4px solid #5d4585;border-radius:16px;padding:14px;font-size:1.05rem;font-weight:700}.primary:active{border-bottom-width:2px;transform:translateY(2px)}.calib{flex-direction:column;align-items:center;gap:16px;padding:18px;display:flex}.dots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.dot{border:2px solid var(--line);width:40px;height:40px;color:var(--muted);border-radius:50%;place-items:center;font-weight:700;transition:all .2s;display:grid}.dot.current{border-color:var(--plum);color:var(--plum);transform:scale(1.1)}.dot.done{background:var(--green);border-color:var(--green);color:#fff}.dot.shake{border-color:var(--red);animation:.35s shake}.hearing{font-size:1.1rem}.hearing strong{font-variant-numeric:tabular-nums;min-width:3ch;display:inline-block}.meter{background:var(--line);border-radius:99px;width:100%;height:6px;overflow:hidden}.meter>span{background:var(--plum);width:0;height:100%;transition:width 60ms linear;display:block}.meter.small{opacity:.6;width:120px;margin:0 auto}.stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stats>div{background:var(--card);border:2px solid var(--line);text-align:center;border-radius:16px;flex-direction:column;gap:2px;padding:12px 8px;display:flex}.stats strong{font-size:1.4rem}.stats span{color:var(--muted);font-size:.8rem}.notes-known{flex-direction:column;gap:8px;padding:14px;display:flex}.known{grid-template-columns:2ch 1fr 4ch;align-items:center;gap:10px;font-weight:700;display:grid}.known .bar{margin:0}.known .muted{text-align:right;font-weight:400}.foot{text-align:center;color:var(--muted);margin:0;font-size:.85rem}.confetti{pointer-events:none;border-radius:2px;width:9px;height:14px;animation:.9s ease-out forwards burst;position:absolute;top:50%;left:50%}@keyframes burst{to{transform:translate(var(--x), var(--y)) rotate(var(--r));opacity:0}}@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.unit{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 0;font-size:.85rem}.row.locked{opacity:.5}.row.locked .badge{background:var(--line);color:var(--muted)}.unit span{text-transform:none;letter-spacing:0;margin-top:2px;font-size:.85rem;font-weight:400;display:block}.row.song .badge{background:var(--gold);font-size:1.2rem}.row.exercise .badge{background:var(--green);color:#fff;font-size:1.2rem}.stars{color:var(--line);letter-spacing:0;gap:1px;font-size:1.05rem;display:inline-flex}.stars .on{color:var(--gold)}.earned{flex-direction:column;align-items:center;gap:4px;display:flex}.earned .stars{font-size:3rem}.earned .stars .on{animation:.4s ease-out backwards pop}.earned .stars .on:nth-child(2){animation-delay:.15s}.earned .stars .on:nth-child(3){animation-delay:.3s}.new-best{color:var(--plum);font-weight:700}#app.wide{max-width:760px}.lesson-title{margin-top:-6px}.sheet-card{padding:6px 0}.sheet{position:relative;overflow:hidden}.sheet-strip{will-change:transform;transition:transform .35s cubic-bezier(.3,.7,.3,1);position:absolute;top:0;left:0}.sheet-clef{background:var(--card);z-index:1;transition:background .2s;position:absolute;top:0;left:0}.sheet-clef:after{content:"";background:linear-gradient(to right, var(--card), transparent);width:24px;position:absolute;top:0;bottom:0;right:-24px}.sheet-card.right .sheet-clef{background:var(--green-soft)}.sheet-card.right .sheet-clef:after{background:linear-gradient(to right, var(--green-soft), transparent)}.sheet-card.wrong .sheet-clef{background:var(--red-soft)}.sheet-card.wrong .sheet-clef:after{background:linear-gradient(to right, var(--red-soft), transparent)}.controls{align-items:center;gap:12px;display:flex}.controls .meter{flex:1}.ghost{border:2px solid var(--line);background:var(--card);color:var(--plum);border-radius:14px;padding:10px 14px;font-weight:700}.ghost:disabled{opacity:.5}button.ghost:not(.controls *){padding:14px}.row.zen{background:linear-gradient(135deg,#eef6ef,#f3eef9)}.zen-options{flex-direction:column;gap:10px;padding:16px;display:flex}.zen-label{font-size:.9rem;font-weight:700}.pills{gap:8px;display:flex}.pill{border:2px solid var(--line);background:var(--card);border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px 6px;font-weight:700;display:flex}.pill small{color:var(--muted);font-weight:400}.pill.on{border-color:var(--plum);background:var(--plum-soft);color:var(--plum)}.note-chips{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.chip{border:2px solid var(--line);background:var(--card);color:var(--muted);border-radius:12px;padding:8px 0;font-weight:700}.chip sub{font-size:.65em;font-weight:400}.chip.on{border-color:var(--plum);background:var(--plum);color:#fff}.zen-count{text-align:center;font-size:1.1rem}.zen-count strong{color:var(--green);font-size:1.8rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.kb-guide{max-width:520px;margin:4px auto 6px;padding:0 12px}.ghost[data-fingers][aria-pressed=false]{opacity:.55}.hand-visual{justify-content:center;padding:18px;display:flex}.hand-visual>svg.hand-svg{max-width:220px}.hand-visual>svg.keyboard{max-width:480px}.hand-visual [data-music]{width:100%}.primary.continue{flex-direction:column;align-items:center;gap:2px;display:flex}.primary.continue small{opacity:.9;font-size:.85rem;font-weight:500}.stage-row.complete .badge{background:var(--green)}.stage-bar{background:var(--line);border-radius:99px;height:6px;margin-top:6px;display:block;overflow:hidden}.stage-bar>span{background:var(--green);border-radius:inherit;height:100%;display:block}.tag{vertical-align:2px;background:var(--gold);color:var(--ink);text-transform:uppercase;letter-spacing:.04em;border-radius:99px;margin-left:4px;padding:1px 7px;font-size:.7rem;font-weight:800;display:inline-block}.cal-card{--flame:#e07a1f;--flame-soft:#fff1d6;--flame-mid:#ffd9a3;--flame-ink:#a96a00;flex-direction:column;gap:10px;padding:14px;display:flex}.cal-sr{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cal-top{align-items:center;gap:12px;display:flex}.cal-flame{background:var(--line);width:48px;height:48px;color:var(--muted);border-radius:16px;flex:none;place-items:center;font-size:1.7rem;transition:background .2s,color .2s;display:grid}.cal-flame.lit{background:var(--flame-soft);color:var(--flame)}.cal-flame.lit .icon{transform-origin:50% 90%;animation:2.4s ease-in-out infinite cal-flicker}.cal-streak{flex:1;min-width:0}.cal-streak-num{font-size:1rem;font-weight:700}.cal-streak-num strong{font-variant-numeric:tabular-nums;margin-right:2px;font-size:1.6rem}.cal-best{color:var(--muted);font-size:.85rem}.cal-ring{flex:none;width:54px;height:54px;position:relative}.cal-ring svg{width:100%;height:100%;display:block}.cal-ring circle{fill:none;stroke-width:6px}.cal-ring-track{stroke:var(--line)}.cal-ring-fill{stroke:var(--green);stroke-linecap:round;transition:stroke-dasharray .4s}.cal-ring-text{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;font-size:.75rem;line-height:54px;display:flex;position:absolute;inset:0}.cal-ring-text strong{color:var(--ink);font-size:.95rem}.cal-ring.met .cal-ring-track{stroke:var(--green-soft)}.cal-ring.met .cal-ring-text strong{color:var(--green)}.cal-keys{background:var(--bg);border-radius:14px;align-items:center;gap:8px;padding:6px 10px 6px 6px;display:flex}.cal-keys-face{flex:none;width:34px}.cal-keys-face svg{width:100%;display:block}.cal-keys p{margin:0;font-size:.9rem;line-height:1.35}.cal-nav{align-items:center;gap:8px;display:flex}.cal-month{text-align:center;flex-direction:column;flex:1;line-height:1.25;display:flex}.cal-month span{color:var(--muted);font-size:.8rem}.cal-arrow{border:2px solid var(--line);background:var(--card);width:36px;height:36px;color:var(--plum);border-radius:12px;flex:none;place-items:center;font-size:1rem;display:grid}.cal-arrow:not(:disabled):hover{background:var(--plum-soft)}.cal-arrow:disabled{opacity:.3}.cal-grid{flex-direction:column;gap:4px;display:flex}.cal-week{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.cal-head span{text-align:center;color:var(--muted);font-size:.75rem;font-weight:700}.cal-day{aspect-ratio:1;font-variant-numeric:tabular-nums;max-height:40px;color:var(--ink);border:2px solid #0000;border-radius:10px;place-items:center;font-size:.85rem;display:grid}.cal-day.blank{visibility:hidden}.cal-day.practised{background:var(--flame-mid);color:var(--flame-ink);font-weight:700}.cal-day.goal{background:var(--flame);color:#fff;font-weight:700}.cal-day.today{border-color:var(--plum);font-weight:700}.cal-day.today:not(.practised){color:var(--plum)}.cal-day.future{color:var(--muted);opacity:.45}.cal-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.cal-legend{color:var(--muted);gap:10px;font-size:.75rem;display:flex}.cal-legend span{align-items:center;gap:4px;display:inline-flex}.cal-swatch{border-radius:3px;width:10px;height:10px;display:inline-block}.cal-swatch.practised{background:var(--flame-mid)}.cal-swatch.goal{background:var(--flame)}.cal-goal{color:var(--muted);align-items:center;gap:4px;font-size:.8rem;display:flex}.cal-goal>span{margin-right:2px}.cal-goal-btn{border:2px solid var(--line);background:var(--card);min-width:34px;height:30px;color:var(--muted);border-radius:10px;padding:0 8px;font-weight:700}.cal-goal-btn.on{border-color:var(--plum);background:var(--plum-soft);color:var(--plum)}.cal-card button:focus-visible{outline:3px solid var(--plum);outline-offset:2px}@keyframes cal-flicker{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.06)rotate(-3deg)}}@media (prefers-reduced-motion:reduce){.cal-flame.lit .icon{animation:none}}.import-card{flex-direction:column;gap:12px;padding:16px 18px;line-height:1.45;display:flex}.import-help ol{flex-direction:column;gap:8px;margin:0;padding-left:1.3em;display:flex}.import-help a{color:var(--plum);font-weight:700}.piece-facts{flex-direction:column;gap:2px;display:flex}.piece-title{font-size:1.1rem}.import-note{color:#7a4f00;background:#fff1d6;border-radius:14px;margin:0;padding:10px 12px;font-size:.92rem}.import-warnings ul{flex-direction:column;gap:4px;margin:6px 0 0;padding-left:1.2em;font-size:.9rem;display:flex}.import-actions{flex-direction:column;gap:10px;display:flex}.file-btn{text-align:center;cursor:pointer;display:block;position:relative}.file-btn.ghost{padding:14px}.file-btn.primary:active{border-bottom-width:2px;transform:translateY(2px)}.file-btn:focus-within{outline:3px solid var(--plum);outline-offset:2px}.file-btn:has(input:disabled){opacity:.6;cursor:progress}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}