:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#12141a;--surface:#1b1e27;--surface-2:#242836;--text:#eef0f6;--text-dim:#9aa0b4;--accent:#7c9cff;--green:#4fd17a;--red:#f0555a;--radius:14px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);min-height:100%;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;gap:16px;max-width:480px;min-height:100vh;margin:0 auto;padding:12px 16px 32px;display:flex}button{font:inherit;color:inherit}.nav{background:var(--surface);border-radius:var(--radius);gap:8px;padding:4px;display:flex}.nav a{text-align:center;border-radius:calc(var(--radius) - 4px);color:var(--text-dim);flex:1;justify-content:center;align-items:center;min-height:44px;padding:10px 8px;font-size:.9rem;line-height:1.2;text-decoration:none;display:flex}.nav a.active{background:var(--surface-2);color:var(--text)}.skill-switcher{background:var(--surface);border-radius:var(--radius);gap:8px;padding:4px;display:flex}.skill-switcher button{border-radius:calc(var(--radius) - 4px);min-height:44px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;flex:1}.skill-switcher button[aria-pressed=true]{background:var(--surface-2);color:var(--text)}.settings-bar{justify-content:flex-end;gap:8px;display:flex}.settings-switcher{background:var(--surface);border-radius:var(--radius);gap:4px;padding:4px;display:flex}.settings-switcher button{border-radius:calc(var(--radius) - 4px);min-width:44px;min-height:36px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 10px;font-size:.9rem}.settings-switcher button[aria-pressed=true]{background:var(--surface-2);color:var(--text)}.settings-switcher button[data-accidental]{font-size:1.15rem;line-height:1}.header-strip{background:var(--surface);border-radius:var(--radius);justify-content:space-between;width:100%;padding:12px 16px;font-size:.95rem;display:flex;position:relative}.header-strip .stat{flex-direction:column;align-items:center;gap:2px;display:flex;position:relative}.header-strip .stat-label{color:var(--text-dim);font-size:.75rem}.header-strip .stat-value{font-size:1.15rem;font-weight:600}.delta{opacity:0;pointer-events:none;font-size:.85rem;font-weight:600;transition:opacity .6s,transform .6s;position:absolute;top:-14px;transform:translateY(0)}.delta.show{opacity:1;transform:translateY(-10px)}.delta.positive{color:var(--green)}.delta.negative{color:var(--red)}.delta.neutral{color:var(--text-dim)}.delta-unrated{color:var(--text-dim);left:50%;transform:translate(-50%)}.delta-unrated.show{opacity:1;transform:translate(-50%)translateY(-10px)}.stage{background:var(--surface);border-radius:var(--radius);flex-direction:column;align-items:center;gap:16px;padding:24px 16px;display:flex}.play-button{background:var(--accent);color:#0d0f14;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;font-size:2rem;display:flex}.play-button:active{filter:brightness(.9)}.secondary-actions{align-items:center;gap:10px;display:flex}.hint-button,.kamerton-button{border:1px solid var(--surface-2);min-height:44px;color:var(--text);cursor:pointer;background:0 0;border-radius:999px;padding:0 16px}.hint-note{color:var(--text-dim);font-size:.8rem}.result{text-align:center;min-height:1.4em;font-size:1.05rem;font-weight:600}.result.correct{color:var(--green)}.result.wrong{color:var(--red)}.next-button{background:var(--accent);color:#0d0f14;cursor:pointer;border:none;border-radius:999px;min-height:44px;padding:0 20px;font-weight:600}#grid-slot{width:100%}.interval-grid{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}.grid-key{border:1px solid var(--surface-2);background:var(--surface-2);min-width:44px;min-height:44px;color:var(--text);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:12px 6px;display:flex}.grid-key:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.grid-key-short{font-size:1.4rem;font-weight:700}.grid-key-name{color:var(--text-dim);text-align:center;font-size:.7rem}.grid-key--correct{color:#0d0f14;background:var(--green)!important}.grid-key--correct .grid-key-name{color:#0d0f14}.grid-key--wrong{color:#0d0f14;background:var(--red)!important}.grid-key--wrong .grid-key-name{color:#0d0f14}.grid-key:disabled{cursor:default}.piano{width:calc(100% + 16px);height:180px;margin:0 -8px;display:flex;position:relative}.piano-key{cursor:pointer}.piano-key--white{border:1px solid var(--surface-2);background:var(--text);color:#0d0f14;border-radius:0 0 8px 8px;flex:1;justify-content:center;align-items:flex-end;min-width:44px;height:100%;padding-bottom:8px;display:flex}.piano-key--black{z-index:1;width:10%;min-width:44px;height:60%;color:var(--text);border:1px solid var(--surface-2);background:#0d0f14;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;padding-bottom:6px;display:flex;position:absolute;top:0;transform:translate(-50%)}.piano-key-label{font-size:.85rem;font-weight:600}.piano-key--correct{color:#0d0f14;background:var(--green)!important}.piano-key--wrong{color:#0d0f14;background:var(--red)!important}.piano-key:disabled{cursor:default}.piano-key:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.stats-table{border-collapse:collapse;background:var(--surface);border-radius:var(--radius);width:100%;overflow:hidden}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid var(--surface-2);padding:10px 12px;font-size:.9rem}.stats-table th{color:var(--text-dim);font-weight:500}.sparkline-wrap{background:var(--surface);border-radius:var(--radius);padding:16px}.sparkline-wrap svg{width:100%;height:80px;display:block}.run-title{text-align:center;margin:0;font-size:1.4rem}.run-copy{color:var(--text-dim);text-align:center;margin:0;font-size:.95rem}.run-record{text-align:center;margin:0;font-size:1.05rem;font-weight:600}.run-record--best{color:var(--green)}.run-start-button{background:var(--accent);color:#0d0f14;cursor:pointer;border:none;border-radius:999px;min-height:44px;padding:0 28px;font-size:1.05rem;font-weight:600}.run-summary-number{font-size:3rem;font-weight:700;line-height:1}.run-summary-caption{color:var(--text-dim);margin-top:-8px;font-size:.85rem}.run-rating-line{margin:0;font-size:.95rem}.run-missed-title{color:var(--text-dim);align-self:flex-start;margin:0;font-size:.85rem}.run-missed-list{flex-direction:column;gap:6px;width:100%;margin:0;padding:0;list-style:none;display:flex}.run-missed-list li{background:var(--surface-2);border-radius:10px;padding:8px 12px;font-size:.9rem}.run-summary-actions{gap:10px;width:100%;margin-top:4px;display:flex}.run-summary-actions button{flex:1}.runs-section{background:var(--surface);border-radius:var(--radius);flex-direction:column;gap:10px;margin-top:16px;padding:16px;display:flex}.runs-heading{margin:0;font-size:1rem}.runs-record,.runs-empty{color:var(--text-dim);margin:0;font-size:.9rem}.runs-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.runs-row{background:var(--surface-2);border-radius:10px;align-items:center;gap:12px;min-height:44px;padding:6px 10px;font-size:.9rem;display:flex}.runs-date{color:var(--text-dim);flex:1}.runs-score{font-weight:600}.runs-delta{text-align:right;min-width:3ch;color:var(--text-dim)}.runs-inprogress{color:var(--accent);font-size:.8rem}.toast{background:var(--surface-2);color:var(--text);opacity:0;pointer-events:none;z-index:10;border-radius:999px;padding:10px 18px;font-size:.9rem;transition:opacity .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}