:root{--bg: #e9e0d2;--panel-bg: #ffffff;--border: #cbd5e1;--text: #0f172a;--muted: #64748b;--accent: #2563eb}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;align-items:center;min-height:100dvh;padding:16px;box-sizing:border-box}.app{position:relative;width:100%;max-width:1400px;height:calc(100dvh - 32px);box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(165deg,#fdfbf7,#f3ece1);border:2px solid #b3a892;border-radius:12px;box-shadow:0 10px 25px #00000014}@media(max-width:640px){body{padding:0}.app{height:100dvh;border:none;border-radius:0}.app-top{padding:10px 14px 6px}}@media(max-height:720px){.controls{margin-bottom:10px}.transport{margin-bottom:8px;padding:6px 12px}.app-top{padding:10px 24px 4px}}.app-top{flex:0 0 auto;padding:14px 24px 8px}.app-bottom{position:relative;flex:0 0 auto;padding:0}.play-mode.float{position:absolute;right:25px;bottom:8px;z-index:5;gap:5px;color:#fff;font-size:.72rem}.play-mode.float select{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:4px;height:15px;padding:0 4px;font-size:.72rem;line-height:1}.play-mode.float select option{color:#000}.chord-result.float{position:absolute;right:18px;top:2px;z-index:5}.lead-sheet{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 8px;background:#fffdf9;border-top:1px solid var(--border);scrollbar-width:none;-ms-overflow-style:none}.lead-sheet::-webkit-scrollbar{display:none}.ls-line{padding:2px 0 12px;border-radius:6px}.ls-line.current{background:#2563eb0f}.ls-row{position:relative;cursor:pointer}.ls-staff svg{display:block}.ls-chord{position:absolute;top:2px;font-size:1.05rem;font-weight:500;color:var(--muted);white-space:nowrap}.ls-chord.clickable{cursor:pointer}.ls-chord.clickable:hover{color:var(--accent)}.ksig-hit{position:absolute;z-index:3;cursor:pointer;border-radius:4px}.ksig-hit:hover{background:#2563eb0f}.key-popover-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40}.key-popover{position:fixed;transform:translate(-50%,10px);background:#1f2933;color:#fff;font-size:.8rem;padding:6px 10px;border-radius:6px;box-shadow:0 6px 18px #0000004d;white-space:nowrap;pointer-events:none}.ls-chord.current{font-weight:800;color:var(--accent)}.ls-simile{position:absolute;top:56px;transform:translate(-50%);color:#333;line-height:0;pointer-events:none}.ls-simile.current{color:var(--accent)}.ls-note{color:var(--muted);font-size:.85rem;padding:12px 4px}.now-bar{display:flex;align-items:center;justify-content:space-between;min-height:26px;padding:0 4px 4px}.app-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}.app-header h1{font-size:1.25rem;margin:0;cursor:pointer}.app-header .tag{font-size:.8rem;color:var(--muted)}.header-right{display:flex;align-items:center;gap:10px}.practice-timer{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}.practice-reset{border:1px solid var(--border);background:var(--panel-bg);color:var(--muted);border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:.85rem;line-height:1}.gear-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer}.gear-btn:hover{color:var(--text)}.gear-btn.on{color:var(--accent)}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#0f172a59}.settings-panel{width:620px;max-width:calc(100% - 48px);background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:20px 24px;box-shadow:0 18px 50px #0000004d}.settings-title{margin:0 0 16px;font-size:1.05rem}.setting{margin-bottom:14px}.setting:last-child{margin-bottom:0}.setting label{font-size:.9rem;color:var(--text)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.setting-check{display:flex;align-items:center;gap:6px}.setting-label{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text)}.setting-status{font-size:.78rem;color:var(--muted);white-space:nowrap}.borderless{border:none;background:transparent}.nudge-left{margin-left:-5px}.lead-slider{width:200px}.info-icon{position:relative;display:inline-flex;align-items:center;color:var(--muted);cursor:help}.info-tip{display:none;position:absolute;bottom:150%;left:50%;transform:translate(-50%);width:240px;background:#1f2933;color:#fff;padding:8px 10px;border-radius:6px;font-size:.78rem;font-weight:400;line-height:1.4;z-index:50;box-shadow:0 6px 16px #00000059}.info-icon:hover .info-tip,.info-icon:focus .info-tip{display:block}.app-title{display:flex;align-items:center;gap:8px}.title-info{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);cursor:pointer;padding:0}.title-info:hover{color:var(--accent)}.about-card{position:relative;width:460px;max-width:calc(100% - 48px);max-height:calc(100% - 64px);overflow-y:auto;background:linear-gradient(165deg,#fdfbf7,#e9f0f5);border:1px solid var(--border);border-radius:16px;padding:36px 40px 48px;box-shadow:0 18px 50px #0000004d;text-align:center}.about-poem{font-family:Georgia,Times New Roman,serif;font-style:italic;color:#334155;line-height:1.5;font-size:1.05rem}.about-poem p{margin:0 0 18px}.about-poem p:last-child{margin-bottom:0}.about-quote{font-size:1.35rem;color:var(--accent)}.about-desc{text-align:left;color:#334155;line-height:1.55;font-size:.92rem}.about-desc p{margin:0 0 14px}.about-desc p:last-child{margin-bottom:0}.about-desc a{color:var(--accent)}.about-nav{position:absolute;left:0;right:0;bottom:0;pointer-events:none}.about-close,.about-arrow{position:absolute;bottom:12px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:var(--muted);cursor:pointer;pointer-events:auto;padding:4px}.about-close{left:14px}.about-arrow{right:14px}.about-close:hover,.about-arrow:hover{color:var(--text)}.version{position:absolute;left:8px;bottom:3px;z-index:6;font-size:.62rem;color:#ffffff59;pointer-events:none}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}.control label{display:block;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.control select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel-bg);color:var(--text);font-size:.9rem}.transport{display:flex;align-items:center;gap:12px;background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:8px 14px;margin-bottom:12px}.t-left{flex:1;display:flex;align-items:center;gap:12px}.t-center{flex:0 0 auto;display:flex;justify-content:center}.t-right{flex:1;display:flex;justify-content:flex-end}.play-btn,.metro-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);cursor:pointer;flex:0 0 auto}.play-btn.playing,.metro-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}.nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);font-size:.9rem;cursor:pointer}.nav-btn:disabled{opacity:.4;cursor:default}.loop-group{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--border);border-radius:8px}.loop-group.on{border-color:var(--accent)}.loop-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);cursor:pointer}.loop-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}.loop-group input[type=range]{width:72px}.loop-count{min-width:14px;text-align:center;color:var(--muted);font-weight:600}.play-mode{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);white-space:nowrap}.play-mode select{padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:var(--panel-bg);color:var(--text);font-size:.8rem;height:24px}.tempo{width:150px;flex:0 0 auto;display:flex;flex-direction:column;gap:2px}.tempo label{font-size:.8rem;color:var(--muted)}.tempo input[type=range]{width:100%}.beat-row{display:flex;justify-content:center;padding:4px 0 6px}.beat-dots{display:flex;gap:8px}.beat-dot{width:14px;height:14px;border-radius:50%;background:var(--border);transition:background-color .1s ease}.beat-dot.active{background:var(--accent);box-shadow:0 0 8px var(--accent)}.card{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:24px;text-align:center}.upcoming{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:10px 16px;background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap}.up-next{display:flex;align-items:center;gap:12px}.up-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.up-chord{font-size:1.2rem;font-weight:600;color:var(--text)}.next-key{font-size:.9rem;color:var(--muted)}.chord-result{font-size:1.6rem;font-weight:700;line-height:1;min-width:1.6rem;text-align:right}.chord-result.correct{color:#16a34a}.chord-result.wrong{color:#dc2626}.chord-result.partial{color:var(--muted)}.card .mode-label{font-size:.85rem;color:var(--muted);margin-bottom:8px}.card .chord-symbol{font-size:3.5rem;font-weight:600;line-height:1.1;margin:4px 0 12px}.sequence{display:flex;justify-content:center;gap:12px;font-size:1.4rem;color:var(--muted);margin-bottom:16px}.sequence .step.active{color:var(--accent);font-weight:600}.formula{font-size:.95rem;color:var(--muted);margin-bottom:12px}.staff{display:flex;justify-content:center;margin:8px 0 16px}.staff svg{max-width:100%}.voicing{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.voicing .note{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg)}.voicing .note .interval{color:var(--muted);margin-left:4px}.keyboard-wrapper{background:#000;padding:12px 14px 10px;border-radius:0;position:relative;margin-top:10px}.keyboard{display:flex;position:relative;background:#000;width:100%;height:170px}.white-key{flex:1;background:#faf9f6;border:1px solid #222;border-bottom-left-radius:4px;border-bottom-right-radius:4px;position:relative;height:100%;z-index:1;box-shadow:inset 2px 0 2px #0000000d,inset -2px 0 2px #0000000d,inset 0 -5px 5px #00000026}.black-key{position:absolute;background:#1a1a1a;width:2.6%;height:60%;z-index:2;border-bottom-left-radius:3px;border-bottom-right-radius:3px;transform:translate(-50%);box-shadow:inset 1px 0 2px #fff3,inset -1px 0 2px #fff3,inset 0 -4px 4px #fff3,2px 3px 4px #0006}.white-key.active{background-color:var(--accent)!important}.black-key.active{background-color:var(--accent)!important;border:1px solid #1d4ed8}.white-key.active.left-hand{background-color:#1e40af!important}.black-key.active.left-hand{background-color:#1e40af!important;border-color:#1e3a8a}.white-key.pressed{background-color:#bcd0f7}.black-key.pressed{background-color:#4a5a7a}.white-key.key-correct,.black-key.key-correct{background-color:#8fe0a8!important}.white-key.key-wrong,.black-key.key-wrong{background-color:#f3a3a3!important}.white-key.key-correct .key-label,.black-key.key-correct .key-label,.white-key.key-wrong .key-label,.black-key.key-wrong .key-label{color:#1f2937}.key-label{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:700;pointer-events:none;display:none;color:#fff;z-index:10}.white-key.active .key-label,.black-key.active .key-label{display:block}.root-annotation{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:700;pointer-events:none;display:none;z-index:8}.white-key .root-annotation{color:#00000038}.black-key .root-annotation{color:#ffffff52}.root-annotation.visible{display:block}.white-key.active .root-annotation,.black-key.active .root-annotation{display:none}.octave-labels{display:flex;position:relative;margin-top:8px;height:20px;color:var(--muted);font-size:.85rem;font-weight:600}.octave-label{position:absolute;transform:translate(-50%)}.chord-info-card{width:560px;max-width:calc(100% - 48px);max-height:calc(100% - 64px);overflow-y:auto;background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:18px 22px;box-shadow:0 18px 50px #0000004d}.chord-info-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.chord-info-context{font-size:1.05rem;font-weight:600;color:var(--text)}.chord-info-close{border:none;background:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--muted);padding:0 4px}.chord-info-close:hover{color:var(--text)}.chord-info-alternates{font-size:.85rem;color:var(--muted);margin-bottom:12px}.chord-info-alternates strong{color:var(--text)}.chord-info-section-label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.chord-info-subtitle{font-size:.85rem;color:var(--muted);margin-bottom:10px}.chord-info-subtitle strong{color:var(--text)}.chord-info-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-top:1px solid var(--border)}.chord-info-row.home{background:#2563eb0f;border-radius:8px}.chord-info-play{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--panel-bg);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.chord-info-play:hover{background:var(--accent);color:#fff}.chord-info-text{flex:1;min-width:0}.chord-info-name{font-size:1.05rem;font-weight:600;color:var(--text)}.chord-info-name sup{font-size:.62em}.chord-info-aswritten{font-size:.7rem;color:var(--muted);font-weight:500}.chord-info-degrees{font-size:.78rem;color:var(--muted);margin-top:2px}.chord-info-bass{flex:none;font-size:.8rem;color:var(--muted);white-space:nowrap}.chord-info-footer{font-size:.75rem;color:var(--muted);margin-top:14px;line-height:1.45}