body{font-family:sans-serif;margin:0;background:#1a1a1a;color:#fff}#root{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}.stage-wrapper{display:flex;justify-content:center;overflow:hidden;width:100%}.stage{display:flex;align-items:center;transition:transform .35s cubic-bezier(.4,0,.2,1)}.chord-card{flex:0 0 clamp(140px,30vw,280px);min-width:0;text-align:center;padding:1.5rem 1rem;visibility:hidden;min-height:160px}.chord-card .chord-name{font-size:clamp(28px,5vw,44px);font-weight:500;color:#fff;line-height:1}.chord-card .chord-label{font-size:13px;color:#666;margin-top:8px}#card-prev{opacity:.3}#card-next{opacity:.45}#card-current{border:1px solid #333;border-radius:16px;opacity:1;visibility:visible}#card-current .chord-name{font-size:clamp(56px,11vw,96px);color:#ef9f27}#card-current .chord-label{font-size:16px;color:#aaa;margin-top:12px}.timer-bar-bg{width:min(200px,70%);height:5px;background:#333;border-radius:2px;overflow:hidden;margin:1.5rem auto 0}.timer-bar{height:100%;width:100%;background:#ef9f27;border-radius:2px}.controls{display:flex;align-items:center;gap:10px;margin-top:1.5rem}.btn-pill{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:100px;border:1px solid #3a3a3a;background:transparent;color:#888;font-size:13px;font-family:sans-serif;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}.btn-pill:hover{border-color:#666;color:#ccc}.btn-pill-main{border:none;background:#ef9f27;color:#1a1a1a;font-weight:600;padding:9px 0;width:100px;justify-content:center;transition:opacity .15s}.btn-pill-main:hover{opacity:.88}.count{font-size:14px;color:#888;margin-top:12px}.mode-control{display:flex;gap:6px;margin-top:20px;margin-bottom:4px}.mode-btn{padding:5px 14px;border-radius:100px;border:1px solid #2e2e2e;background:transparent;color:#555;font-size:12px;font-family:sans-serif;cursor:pointer;transition:border-color .15s,color .15s}.mode-btn:hover{border-color:#555;color:#999}.mode-btn.active{border-color:#ef9f27;color:#ef9f27}.speed-control{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.speed-bpm{font-size:13px;color:#888}.speed-bpm span{color:#ef9f27;font-weight:500}.speed-slider-row{display:flex;align-items:center;gap:10px}.speed-side{font-size:11px;color:#444}.bpm-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.bpm-preset{padding:3px 9px;border-radius:100px;border:1px solid #333;background:transparent;color:#555;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s}.bpm-preset:hover{border-color:#666;color:#aaa}.bpm-preset.active{border-color:#ef9f27;color:#ef9f27}.metro-btn{margin-left:8px;padding:2px 9px;border-radius:100px;border:1px solid #333;background:transparent;color:#555;font-size:13px;font-family:sans-serif;cursor:pointer;transition:border-color .15s,color .15s;vertical-align:middle}.metro-btn:hover{border-color:#666;color:#aaa}.metro-btn.active{border-color:#ef9f27;color:#ef9f27}input[type=range]{-webkit-appearance:none;width:clamp(120px,40vw,160px);height:4px;background:#2e2e2e;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#ef9f27;cursor:pointer}