:root{--text:#3f3d45;--text-h:#08060d;--bg:#f7f7f9;--surface:#fff;--border:#e5e4e7;--accent:#7c3aed;--accent-text:#fff;--danger:#dc2626;--muted:#6b6375;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.45 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#d1d5db;--text-h:#f3f4f6;--bg:#0f1115;--surface:#181b21;--border:#2a2d36;--accent:#a78bfa;--accent-text:#16171d;--danger:#f87171;--muted:#9ca3af}}*{box-sizing:border-box}body{margin:0}h1,h2{font-family:var(--sans);color:var(--text-h);margin:0 0 8px;font-weight:600}h1{font-size:22px}h2{font-size:18px}p{margin:0}.muted{color:var(--muted)}button{font:inherit}button,input,select{min-height:44px}.app{flex-direction:column;width:100%;max-width:640px;min-height:100svh;margin:0 auto;display:flex}.app-header{border-bottom:1px solid var(--border);background:var(--bg);z-index:1;padding:12px 16px;position:sticky;top:0}.app-header h1{text-align:center;font-size:18px}.tabs{justify-content:center;gap:8px;display:flex}.tab{border:1px solid var(--border);background:var(--surface);max-width:140px;color:var(--text);cursor:pointer;white-space:nowrap;border-radius:999px;flex:1;padding:10px 8px;font-size:13px}.tab-active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.app-main{flex-direction:column;flex:1;gap:16px;padding:16px;display:flex}.exercise-list{flex-direction:column;gap:12px;display:flex}.exercise-card{border:1px solid var(--border);background:var(--surface);color:var(--text);text-align:left;cursor:pointer;border-radius:12px;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;padding:16px;display:flex}.exercise-card-name{color:var(--text-h);font-weight:600}.exercise-card-desc{color:var(--muted);font-size:14px}.exercise-card-recommended{border-color:var(--accent);background:#863bff14}.exercise-card-duration{color:var(--muted);font-size:12px}.exercise-card-custom{cursor:default;padding:0}.exercise-card-main{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;padding:16px;display:flex}.exercise-card-delete{align-self:flex-start;padding:0 16px 12px}.exercise-card-create{text-align:center;color:var(--muted);border-style:dashed;justify-content:center;align-items:center}.exercise-create-actions{flex-wrap:wrap;gap:8px;display:flex}.exercise-create-actions .exercise-card-create{flex:calc(50% - 4px);min-width:140px;padding:12px 8px;font-size:13px}.exercise-editor{flex-direction:column;gap:16px;display:flex}.editor-rows{flex-direction:column;gap:8px;display:flex}.editor-row{border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;display:flex}.editor-row select,.editor-row-field input,.editor-row-lyric{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;min-height:auto;padding:6px 8px}.editor-row-field{color:var(--muted);flex-direction:column;gap:2px;font-size:11px;display:flex}.editor-row-field input{width:64px}.notation-editor{flex-direction:column;gap:12px;display:flex}.notation-toolbar{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.notation-key-field select{min-width:160px}.notation-button-group{flex-wrap:wrap;gap:4px;display:flex}.duration-btn,.accidental-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 10px;font-size:12px}.duration-btn-active,.accidental-btn-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.notation-stave-container{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:10px;padding:8px 4px;position:relative;overflow-x:auto}.notation-stave-container svg{display:block}.notation-below-stave{min-height:48px}.notation-lyric-box{color:var(--muted);flex-direction:column;gap:4px;font-size:12px;display:flex}.notation-lyric-input{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;max-width:240px;padding:6px 8px}.notation-selected-actions{align-items:center;gap:12px;font-size:13px;display:flex}.notation-hint{font-size:12px}.editor-row-lyric{flex:1;min-width:100px}.song-import-warnings{color:var(--danger);margin:0;padding-left:20px;font-size:13px}.song-import-lyrics{font-style:italic}.song-import-subhead{color:var(--text-h);font-size:15px}.song-import-row{align-items:center}.song-import-row-desc{color:var(--muted);white-space:nowrap;font-size:12px}.song-compose-row-name{flex:1;min-width:100px;font-weight:600}.song-compose-add-row select{flex:1;min-width:140px}.song-compose-row-verses{color:var(--muted);flex-direction:column;flex:100%;gap:2px;font-size:11px;display:flex}.song-compose-verse-textarea{border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;resize:vertical;border-radius:6px;padding:6px 8px}.song-compose-words-toggle-wrap{flex:100%}.song-card{cursor:default;padding:0}.song-card-desc{color:var(--muted);font-size:12px}.song-card-foreign-tracks{font-style:italic}.song-card-actions{align-self:flex-start;gap:16px;padding:0 16px 12px;display:flex}.song-player-dot{background:#4ade80;border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:1.2s ease-in-out infinite listening-pulse}.song-player-dot-idle{opacity:.25;animation:none}.warmup-section{flex-direction:column;gap:8px;display:flex}.warmup-card{border-style:dashed}.warmup-runner{flex-direction:column;gap:12px;display:flex}.warmup-step-title{text-align:center;color:var(--text-h)}.exercise-title{text-align:center}.exercise-desc{color:var(--muted);text-align:center;margin-bottom:12px;font-size:14px}.pitch-graph-wrap{border-radius:12px;width:100%;height:220px;position:relative;overflow:hidden}.pitch-graph-canvas{width:100%;height:100%;position:absolute;inset:0}.action-row{flex-wrap:wrap;gap:12px;display:flex}.btn{border:1px solid var(--border);background:var(--surface);min-width:120px;color:var(--text);cursor:pointer;border-radius:10px;flex:1;padding:12px 16px;font-weight:600}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-big{padding:16px;font-size:16px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn-secondary{background:0 0}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-link{color:var(--muted);background:0 0;border:none;flex:none;align-self:center;text-decoration:underline}.error-message{color:var(--danger);text-align:center;font-size:14px}.score-summary-row{justify-content:center;gap:32px;margin-bottom:8px;display:flex}.score-summary{flex-direction:column;align-items:center;gap:2px;display:flex}.score-big{color:var(--text-h);font-size:48px;font-weight:700;line-height:1}.score-label{color:var(--muted);font-size:14px}.playback{width:100%}.note-breakdown{flex-direction:column;gap:4px;max-height:200px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.note-row{background:var(--surface);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:14px;display:flex}.note-name{color:var(--text-h);font-weight:600}.note-status{color:var(--muted)}.note-verdict{font-weight:600}.note-row-great .note-verdict{color:#16a34a}.note-row-good .note-verdict{color:#65a30d}.note-row-off .note-verdict{color:#d97706}.note-row-missed .note-verdict{color:var(--danger)}.tone-breakdown{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.tone-row{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex}.tone-row-metrics{color:var(--muted);flex-wrap:wrap;gap:12px;display:flex}.pronunciation-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:8px;padding:12px;display:flex}.pronunciation-heard{color:var(--muted);font-size:13px;font-style:italic}.pronunciation-words{flex-wrap:wrap;gap:6px;display:flex}.pronunciation-word{border-radius:999px;padding:3px 8px;font-size:13px;font-weight:600}.pronunciation-word-hit{color:#16a34a;background:#4ade8026}.pronunciation-word-miss{color:var(--danger);background:#f8717126}.saved-confirmation{text-align:center;color:#16a34a;flex:1;min-width:120px;padding:12px 16px;font-weight:600}.history-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.history-row{border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.history-row-main{flex-direction:column;display:flex}.history-exercise{color:var(--text-h);font-weight:600}.history-date{color:var(--muted);font-size:12px}.history-score{color:var(--text-h);font-size:18px;font-weight:700}@media (width>=480px){.pitch-graph-wrap{height:280px}}.attempt-label{text-align:center;color:var(--muted);margin-bottom:-8px;font-size:13px}.count-in-overlay{text-align:center;color:var(--text-h);padding:8px 0;font-size:64px;font-weight:700;line-height:1}.listening-hint{color:var(--muted);text-align:center;justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}.listening-dot{background:#dc2626;border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:1.2s ease-in-out infinite listening-pulse}@keyframes listening-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.drill-toast{background:var(--surface);border:1px solid var(--border);color:var(--text-h);text-align:center;border-radius:10px;padding:10px 14px;font-size:14px}.drill-summary{text-align:center;color:var(--muted);margin-bottom:-4px;font-size:14px}.progress-view{flex-direction:column;gap:16px;display:flex}.progress-card{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:8px;padding:16px;display:flex}.progress-section-heading{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 -8px;font-size:13px;font-weight:600}.range-display{justify-content:center;align-items:center;gap:16px;padding:8px 0;display:flex}.range-note{color:var(--text-h);font-size:28px;font-weight:700}.range-arrow{color:var(--muted);font-size:20px}.progress-card-header{justify-content:space-between;align-items:baseline;display:flex}.progress-card-name{color:var(--text-h);font-weight:600}.progress-card-count{color:var(--muted);font-size:12px}.progress-chart{border-radius:8px;width:100%;height:100px;display:block}.progress-card-stats{color:var(--muted);gap:16px;font-size:13px;display:flex}.progress-delta-up{color:#16a34a}.progress-delta-down{color:var(--danger)}.settings-view{flex-direction:column;gap:20px;display:flex}.settings-field{border:none;flex-direction:column;gap:8px;margin:0;padding:0;display:flex}.settings-field-label{color:var(--text-h);font-size:14px;font-weight:600}.settings-field input[type=text],.settings-field select{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:10px 12px}.settings-radio-row{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.settings-radio-row input{min-height:auto;margin-top:4px}.settings-radio-label{color:var(--text-h);font-weight:600;display:block}.settings-radio-desc{font-size:13px;display:block}.profile-chip-row{flex-wrap:wrap;gap:8px;display:flex}.profile-chip{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;min-height:auto;padding:8px 14px}.profile-chip-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.profile-add-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.profile-add-row input[type=text]{border:1px solid var(--border);background:var(--surface);min-width:120px;color:var(--text);border-radius:8px;flex:1;padding:8px 10px}.settings-toggle-row{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px;display:flex}.settings-toggle-row input{flex-shrink:0;min-height:auto;margin-top:4px}.app-footer{border-top:1px solid var(--border);color:var(--muted);text-align:center;margin-top:16px;padding:8px 16px 0;font-family:ui-monospace,monospace;font-size:11px}.install-banner{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 16px 0;padding:12px 14px;display:flex}.install-banner-text{min-width:160px;color:var(--text);flex:1;margin:0;font-size:13px}.install-banner-actions{gap:8px;display:flex}.song-notation{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 4px;position:relative;overflow-x:auto}.song-notation svg{display:block}.notation-toggle{color:var(--accent);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:2px 0;font-size:12px;font-weight:600}.fullscreen-modal{z-index:200;background:var(--bg);padding:56px 12px 24px;position:fixed;inset:0;overflow:auto}.fullscreen-modal-close{z-index:201;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 16px;font-weight:600;position:fixed;top:12px;right:12px}.fullscreen-modal-content{flex-direction:column;gap:12px;max-width:100%;display:flex}.song-preview-toolbar{z-index:5;background:var(--bg);flex-direction:column;gap:8px;padding-bottom:8px;display:flex;position:sticky;top:0}.fullscreen-modal-content .song-notation{width:100%}.update-banner{border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface));color:var(--text-h);border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:12px 16px 0;padding:8px 12px;font-size:14px;font-weight:600;animation:.3s ease-out update-banner-in;display:flex}.update-banner .btn{flex:none;min-width:0;padding:6px 14px}@keyframes update-banner-in{0%{opacity:0;transform:translateY(-6px)}}.whats-new-dialog{border:1px solid var(--border);background:var(--surface);width:min(440px,100vw - 32px);color:var(--text);border-radius:14px;padding:20px}.whats-new-dialog::backdrop{background:#00000073}.whats-new-dialog h2{color:var(--text-h);margin:0 0 8px;font-size:18px}.whats-new{margin:8px 0 14px;padding-left:20px;line-height:1.45}.whats-new li+li{margin-top:6px}.version-line{color:var(--muted);text-align:center;margin:0 0 14px;font-family:ui-monospace,monospace;font-size:12px}.whats-new-dialog form{justify-content:flex-end;display:flex}.whats-new-dialog form .btn{flex:none}.update-toast{background:var(--surface);border:1px solid var(--accent);max-width:calc(100vw - 32px);color:var(--text-h);pointer-events:none;z-index:10;border-radius:10px;padding:10px 14px;font-size:14px;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000026}.hum-screen{flex-direction:column;gap:16px;display:flex}.hum-notes{flex-direction:column;gap:8px;display:flex}.hum-note-row{border:1px solid var(--border);background:var(--surface);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;display:flex}.hum-note-index{text-align:right;min-width:20px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.hum-note-row select,.hum-note-times input,.hum-note-lyric{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;min-height:auto;padding:6px 8px}.hum-note-times{color:var(--muted);align-items:center;gap:4px;font-size:12px;display:inline-flex}.hum-note-times input{font-variant-numeric:tabular-nums;width:64px}.hum-note-lyric{flex:1;min-width:96px}.hum-note-actions{gap:8px;display:inline-flex}.hum-add-note{align-self:flex-start;min-width:0;padding:8px 14px;font-size:13px}