:root{--bg:#f4f6fa;--card:#fff;--text:#1c2430;--muted:#677181;--border:#d6dce6;--accent:#3a7fd6;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#141922;--card:#1e2530;--text:#e8ecf2;--muted:#97a1b0;--border:#333d4d;--accent:#4c8fe0}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;touch-action:manipulation;margin:0;font-family:Hiragino Kaku Gothic ProN,Yu Gothic UI,Noto Sans JP,system-ui,sans-serif}.app{max-width:640px;margin:0 auto;padding:12px 12px 40px}.app-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.app-header h1{margin:0;font-size:1.2rem}.mode-tabs{gap:6px;display:flex}.mode-tabs button{border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;border-radius:20px;padding:8px 16px;font-size:.9rem}.mode-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}.panel h2{margin:0 0 12px;font-size:1.1rem}.panel.center{text-align:center}.setting-group{margin-bottom:16px}.setting-label{color:var(--muted);margin:0 0 6px;font-size:.9rem;font-weight:700}.check{cursor:pointer;padding:6px 4px;font-size:1rem;display:block}.check input{margin-right:8px;transform:scale(1.2)}.note-text{color:var(--muted);font-size:.85rem}.primary-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;margin-top:8px;padding:14px;font-size:1.05rem;font-weight:700;display:block}.primary-btn:disabled{opacity:.4}.sub-btn{border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 14px;font-size:.9rem}.text-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;font-size:.85rem}.quiz-status{color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.9rem;display:flex}.question-card{background:var(--card);border:2px solid var(--border);text-align:center;border-radius:16px;margin-bottom:14px;padding:16px;transition:border-color .2s,background .2s}.question-card.correct{background:color-mix(in srgb, #2fa463 12%, var(--card));border-color:#2fa463}.question-card.wrong{border-color:#d84a4a;animation:.3s shake}@keyframes shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}.question-hint-text{color:var(--muted);margin:0;font-size:.8rem}.question-chord{margin:4px 0;font-size:3rem;font-weight:800;line-height:1.1}.question-feedback{min-height:1.4em;margin:0;font-size:1rem}.quiz-actions{justify-content:center;gap:8px;margin-top:14px;display:flex}.keyboard-scroll{-webkit-overflow-scrolling:touch;padding-bottom:4px;overflow-x:auto}.keyboard{--white-w:max(38px, calc((100vw - 24px) / var(--whites)));width:calc(var(--white-w) * var(--whites));-webkit-user-select:none;user-select:none;touch-action:pan-x;height:150px;display:flex;position:relative}.key{cursor:pointer;border-radius:0 0 6px 6px;padding:0}.key.white{width:var(--white-w);background:#fff;border:1px solid #999;justify-content:center;align-items:flex-end;height:100%;padding-bottom:6px;display:flex}.key-label{color:#888;pointer-events:none;font-size:.65rem}.key.black{top:0;left:calc(var(--white-w) * var(--wi) - var(--white-w) * .32);width:calc(var(--white-w) * .64);z-index:2;background:#222;border:1px solid #000;height:60%;position:absolute}.key.white.selected{background:#7fb8ff}.key.black.selected{background:#3a7fd6}.key.white.hint,.key.black.hint,.key.white.selected.hint,.key.black.selected.hint{box-shadow:inset 0 0 0 3px #f0a72f}.song-card{text-align:left;background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;border-radius:12px;flex-direction:column;gap:4px;margin-bottom:10px;padding:12px 14px;display:flex}.song-title{font-size:1rem;font-weight:700}.song-level{color:#f0a72f;margin-left:8px;font-size:.85rem}.song-desc{color:var(--muted);font-size:.8rem}.song-chords{color:var(--accent);font-size:.8rem;font-weight:600}.progress-bar{background:var(--border);border-radius:3px;height:6px;margin-bottom:10px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:3px;height:100%;transition:width .3s}.done-title{font-size:1.3rem;font-weight:700}.panel.center .primary-btn,.panel.center .sub-btn{width:100%;margin-top:10px}