*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-app:#0f1117;--bg-surface:#1a1d27;--bg-surface2:#22263a;--border:#2e3245;--text-primary:#e8eaf0;--text-secondary:#7b80a0;--accent:#f5a623;--accent-dim:#f5a62326;--accent-glow:#f5a62359;--radius-sm:6px;--radius-md:12px;color:var(--text-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5}body{min-height:100dvh;overflow-x:hidden}#app{flex-direction:column;min-height:100dvh;display:flex}button{cursor:pointer;color:inherit;font:inherit;background:0 0;border:none}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]::-webkit-slider-runnable-track{background:var(--border);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);width:28px;height:28px;box-shadow:0 0 0 4px var(--accent-dim);border-radius:50%;margin-top:-12px;transition:box-shadow .15s}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--accent-glow)}input[type=range]::-moz-range-track{background:var(--border);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--accent);width:28px;height:28px;box-shadow:0 0 0 4px var(--accent-dim);border:none;border-radius:50%}.app-shell{flex-direction:column;width:100%;min-height:100dvh;display:flex;overflow-x:hidden}.app-header{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;height:48px;display:flex}.app-header h1{letter-spacing:.02em;color:var(--accent);font-size:18px;font-weight:600}.song-library{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow-y:auto}.song-library-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);padding:0 4px 8px;font-size:13px;font-weight:600}.song-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 16px;transition:border-color .15s,background .15s;display:flex}.song-card:active{background:var(--bg-surface2)}.song-card.active{border-color:var(--accent);background:var(--accent-dim)}.song-card-title{color:var(--text-primary);font-size:17px;font-weight:600}.song-card-meta{color:var(--text-secondary);margin-top:2px;font-size:13px}.song-card-badge{color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0;padding:4px 10px;font-size:13px;font-weight:700}.player-view{flex-direction:column;flex:1;display:flex;overflow:hidden}.player-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:12px 16px;display:flex}.player-back-btn{background:var(--bg-surface2);width:36px;height:36px;color:var(--text-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex}.player-song-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:18px;font-weight:700;overflow:hidden}.player-key-badge{color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);border-radius:var(--radius-sm);white-space:nowrap;padding:4px 10px;font-size:13px;font-weight:700}.player-key-select{color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);border-radius:var(--radius-sm);appearance:none;cursor:pointer;text-align:center;flex-shrink:0;min-width:44px;min-height:32px;padding:4px 10px;font-size:13px;font-weight:700}.player-key-select option{background:var(--bg-surface);color:var(--text-primary)}.chord-chart{flex-direction:column;flex:1;align-items:center;gap:20px;padding:16px 16px 140px;display:flex;overflow-y:auto}.chord-section{flex-direction:column;gap:8px;width:100%;max-width:560px;display:flex}.chord-section-header{align-items:center;gap:8px;display:flex}.chord-section-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);font-size:11px;font-weight:700}.chord-repeat-badge{color:var(--accent);letter-spacing:.05em;font-size:11px;font-weight:700}.chord-grid{grid-template-columns:repeat(4,1fr);gap:6px;min-width:0;display:grid}.chord-cell-split{gap:3px;display:flex}.chord-cell-split .chord-cell{flex:1;min-width:0}.chord-cell{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;min-width:0;min-height:52px;padding:12px 4px;font-size:20px;font-weight:700;transition:border-color .1s,background .1s,color .1s;display:flex;overflow:hidden}.chord-cell:active{background:var(--bg-surface2)}.chord-cell-split{cursor:pointer}.chord-cell.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.chord-cell.split{font-size:15px}@keyframes chord-count-pulse{0%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);color:var(--accent)}to{border-color:var(--border);box-shadow:none;color:var(--text-secondary)}}.chord-cell.count-in-target{animation:.45s ease-out forwards chord-count-pulse}@keyframes count-in-pulse{0%{box-shadow:0 0 0 0px var(--accent-glow)}60%{box-shadow:0 0 0 10px #0000}to{box-shadow:0 0 #0000}}.transport-play-btn.counting-in{animation:.5s ease-out infinite count-in-pulse}.transport-bar{background:var(--bg-surface);border-top:1px solid var(--border);z-index:100;flex-direction:column;gap:12px;padding:12px 20px 20px;display:flex;position:fixed;bottom:0;left:0;right:0}.transport-controls{align-items:center;gap:16px;display:flex}.transport-play-btn{background:var(--accent);color:#0f1117;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:22px;transition:transform .1s,opacity .1s;display:flex}.transport-play-btn:active{opacity:.85;transform:scale(.94)}.bpm-control{flex-direction:column;flex:1;gap:4px;display:flex}.bpm-label{justify-content:space-between;align-items:baseline;display:flex}.bpm-text{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-size:12px}.bpm-value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}@media (width>=600px){.song-library{width:100%;max-width:600px;margin:0 auto}}