:root{--bg-deep: #16161e;--bg-card: #1e1e28;--bg-elevated: #262630;--bg-input: #2a2a36;--accent-primary: #9d8ec7;--accent-secondary: #c9a0b8;--accent-tertiary: #7eb5c4;--text-primary: #e8e6f0;--text-secondary: #b8b4c8;--text-muted: #8a8698;--success: #8ec7a8;--warning: #c7b88e;--error: #c78e8e;--border-subtle: rgba(157, 142, 199, .12);--border-focus: rgba(157, 142, 199, .4);--surface-300: rgba(157, 142, 199, .18);--radius-sm: .45rem;--radius-md: .7rem;--radius-lg: 1rem;--elev-1: 0 1px 2px rgba(0, 0, 0, .24);--elev-2: 0 6px 16px rgba(0, 0, 0, .3);--focus-ring: 0 0 0 2px rgba(157, 142, 199, .24);--theme-primary: var(--accent-primary);--theme-primary-hover: var(--accent-secondary);--theme-accent: var(--accent-tertiary);--theme-bg: var(--bg-deep);--theme-surface: var(--bg-card);--theme-surface-elevated: var(--bg-elevated);--theme-text: var(--text-primary);--theme-text-secondary: var(--text-secondary);--theme-text-muted: var(--text-muted);--theme-border: var(--border-subtle);--theme-border-strong: var(--border-focus);--theme-focus-ring: var(--focus-ring);--theme-shadow-sm: var(--elev-1);--theme-shadow-lg: var(--elev-2);--theme-radius-sm: var(--radius-sm);--theme-radius-md: var(--radius-md);--theme-radius-lg: var(--radius-lg);--control-height-compact: 32px;--control-height-comfortable: 38px;--control-height-touch: 44px;--control-height: var(--control-height-comfortable);--control-radius: var(--radius-md);--finder-control-height: var(--control-height);--finder-control-height-compact: calc(var(--control-height) - 8px)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-deep);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.5;min-height:100vh;overflow-x:hidden}.beat-app{min-height:100vh;width:100%;max-width:1200px;margin:0 auto;padding:1.5rem 1.25rem}.beat-header{text-align:center;padding:.5rem 0 1rem}.beat-header h1{font-size:1.1rem;font-weight:500;color:var(--accent-primary);letter-spacing:.02em}.beat-header h1:before{content:""}.beat-main{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.upload-section{background:transparent;border:none;border-radius:0;padding:.9rem 0 1.2rem;min-width:0}.media-uploader{width:100%;max-width:980px;margin:0 auto;min-width:0}.landing-info{text-align:center;margin-bottom:1.55rem;max-width:760px;margin-left:auto;margin-right:auto}.landing-description{font-size:1.05rem;line-height:1.5;color:var(--text-primary);margin-bottom:0;font-weight:600}.landing-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:.7rem;margin-top:0;max-width:920px;margin-left:auto;margin-right:auto;align-items:start}.landing-feature-card{text-align:center;padding:.7rem .4rem;min-width:0;display:grid;grid-template-rows:auto auto 1fr;align-items:start;justify-items:center}.landing-feature-card .material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;color:var(--accent-primary);font-size:1.3rem;margin-bottom:.2rem;display:block}.landing-feature-custom-icon{color:var(--accent-primary);font-size:1.45rem;margin-bottom:.2rem;line-height:1;display:block;font-weight:700}.landing-feature-icon-accidental{font-family:Noto Music,Times New Roman,serif;transform:translateY(-.02rem);text-transform:none}.landing-feature-card h3{font-size:.84rem;margin-bottom:.3rem}.landing-feature-card p{font-size:.75rem;color:var(--text-muted);line-height:1.4;max-width:210px;margin:0 auto;overflow-wrap:anywhere}.landing-feature-zone{margin-top:3.4rem;margin-bottom:4rem}.landing-feature-card:nth-child(1),.landing-feature-card:nth-child(4){transform:translateY(7px)}.landing-feature-card:nth-child(2),.landing-feature-card:nth-child(3){transform:translateY(-7px)}.upload-area{border:2px dashed var(--border-subtle);border-radius:.75rem;padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:all .2s ease}.upload-area:hover,.upload-area.drag-over{border-color:var(--accent-primary);background:#9d8ec70d}.upload-area .material-symbols-outlined{font-size:2.5rem;color:var(--accent-primary);opacity:.7;margin-bottom:.5rem}.upload-area p{color:var(--text-secondary);font-size:.9rem}.upload-area .file-types{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}.url-separator{display:flex;align-items:center;margin:1rem 0;color:var(--text-muted);font-size:.8rem}.url-separator:before,.url-separator:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.url-separator span{padding:0 .75rem}.url-input-row{display:flex;gap:.5rem;min-width:0}.url-input{flex:1;min-width:0;min-height:2.35rem;padding:.52rem .72rem;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-card);color:var(--text-primary);font-size:.9rem}.url-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.url-input .MuiInputBase-root{min-height:2.35rem;border-radius:.5rem;background:var(--bg-card);color:var(--text-primary)}.url-input .MuiOutlinedInput-notchedOutline{border-color:var(--border-subtle)}.url-input .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline{border-color:var(--border-focus)}.url-input .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:var(--accent-primary)}.url-load-btn{padding:.75rem 1rem;border:none;border-radius:.5rem;background:var(--accent-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.url-load-btn.icon-only{width:2.35rem;min-width:2.35rem;padding:0}.url-load-btn:hover:not(:disabled){background:var(--accent-secondary)}.url-load-btn:disabled{opacity:.5;cursor:not-allowed}.url-load-btn .material-symbols-outlined{font-size:1.25rem}.error-text{color:var(--error);font-size:.8rem;margin-top:.75rem;text-align:center}.tempo-warning-banner{display:flex;align-items:flex-start;gap:.5rem;padding:.6rem .75rem;margin-bottom:.5rem;background:#ffb74d1a;border:1px solid rgba(255,183,77,.3);border-radius:.45rem;font-size:.75rem;line-height:1.4;color:#ffcc80}.tempo-warning-banner>.material-symbols-outlined{font-size:1.1rem;color:#ffb74d;flex-shrink:0;margin-top:.05rem}.tempo-warning-text{flex:1}.tempo-warning-dismiss{background:none;border:none;color:#ffcc80;cursor:pointer;padding:0;opacity:.6;transition:opacity .15s;flex-shrink:0}.tempo-warning-dismiss:hover{opacity:1}.tempo-warning-dismiss .material-symbols-outlined{font-size:1rem}.analyzing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem}.analyzing-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--bg-elevated);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}.analyzing p{color:var(--text-secondary);font-size:.9rem}.analysis-progress{width:200px;height:6px;background:var(--bg-elevated);border-radius:3px;overflow:hidden;margin-top:.5rem}.analysis-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary, #818cf8));border-radius:3px;transition:width .3s ease-out}.analysis-progress-bar.indeterminate{width:30%!important;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}50%{transform:translate(250%)}to{transform:translate(-100%)}}@keyframes spin{to{transform:rotate(360deg)}}.player-layout{display:grid;grid-template-columns:1fr 360px;gap:1.25rem;align-items:start}.viz-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.now-playing-title-bar{display:flex;align-items:center;min-width:0;padding:.15rem 0}.now-playing-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default}.now-playing-title-input{font-size:1rem;font-weight:600;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--accent-primary);border-radius:var(--radius-sm);padding:.15rem .4rem;width:100%;outline:none}.video-container{border-radius:.5rem;overflow:hidden;background:#000}.video-player{position:relative;cursor:pointer}.video-element{width:100%;display:block}.video-play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;background:#0009;border-radius:50%;transition:opacity .2s ease;pointer-events:none}.video-play-overlay .material-symbols-outlined{font-size:2.5rem;color:#fff;margin-left:.2rem}.video-player:hover .video-play-overlay{background:#000000bf}.beat-viz-container{display:flex;flex-direction:column;align-items:center;padding:1rem .5rem}.beat-visualizer{text-align:center}.beat-counts{display:flex;justify-content:center;gap:.5rem;margin-bottom:.75rem}.beat-count{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;border-radius:50%;background:var(--bg-elevated);color:var(--text-muted);transition:all .1s ease}.beat-count.active{background:var(--accent-primary);color:var(--bg-deep);transform:scale(1.1)}.beat-count.downbeat.active{background:var(--accent-secondary)}.beat-visualizer.compact .beat-counts{gap:.35rem;margin-bottom:0}.beat-visualizer.compact .beat-count{width:1.75rem;height:1.75rem;font-size:.8rem}.beat-progress{height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden}.beat-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:2px;transition:width .05s linear}.playback-bar-wrapper{display:flex;flex-direction:column;gap:.5rem;position:relative}.playback-bar-sections{--lane-label-width: 96px;--lane-gap: .42rem;flex:1;display:flex;flex-direction:column}.section-labels-row{position:relative;height:1.75rem;margin-top:.25rem}.section-labels-row.section-labels-reference{height:1.35rem;margin-top:.15rem}.section-label-btn.reference{font-size:.62rem;opacity:.72}.section-label-btn.reference.selected{background:#8ec7a857;color:var(--text-primary);opacity:1}.practice-track-toggle{margin-top:.3rem;padding:.2rem .45rem;border:1px solid var(--border-subtle);background:var(--bg-elevated);border-radius:.35rem;color:var(--text-muted);font-size:.68rem;cursor:pointer}.practice-track-toggle:hover{border-color:var(--accent-primary);color:var(--text-primary)}.section-label-btn{position:absolute;height:1.45rem;display:flex;align-items:center;justify-content:center;padding:0 .25rem;font-size:.7rem;font-weight:500;color:var(--text-muted);background:#ffffff0a;border:1px solid rgba(255,255,255,.11);border-radius:.28rem;cursor:pointer;transition:all .15s ease;overflow:hidden;box-sizing:border-box}.section-label-btn:hover{color:var(--text-primary);background:#9d8ec730;border-color:#9d8ec773}.section-label-btn.playing{color:var(--text-secondary);background:#ffffff1a;border-color:#fff3}.section-label-btn.selected{color:var(--text-primary);background:#9d8ec74d;border-color:#9d8ec7a6;font-weight:600}.section-label-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-drag-handle{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;opacity:0;transition:opacity .15s ease}.section-drag-handle:after{content:"";position:absolute;top:20%;bottom:20%;width:2px;border-radius:1px;background:var(--accent-primary, #9d8ec7)}.section-drag-handle.left{left:-1px}.section-drag-handle.left:after{left:1px}.section-drag-handle.right{right:-1px}.section-drag-handle.right:after{right:1px}.section-label-btn:hover .section-drag-handle,.section-label-btn.selected .section-drag-handle{opacity:1}.section-divider{position:absolute;top:0;height:calc(100% + 2.5rem);width:1px;background:var(--text-muted);transform:translate(-50%);pointer-events:none;z-index:20}.section-detecting{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem;font-size:.7rem;color:var(--text-muted)}.section-hover-card{position:fixed;transform:translate(-50%);padding:.65rem .85rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.5rem;box-shadow:0 4px 16px #0006;z-index:1000;pointer-events:auto;min-width:19rem;max-width:min(26rem,calc(100vw - 1.5rem));color:var(--text-secondary)}.section-hover-name-input{margin-bottom:.38rem}.section-hover-name-input .MuiInputBase-root{min-height:2rem;font-size:.82rem;background:color-mix(in srgb,var(--bg-input) 92%,black)}.section-hover-name-input .MuiOutlinedInput-notchedOutline{border-color:var(--border-subtle)}.section-hover-title{font-size:.85rem;font-weight:600;color:var(--text-primary);margin-bottom:.35rem}.section-hover-times{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-family:SF Mono,Monaco,monospace;color:var(--text-secondary);margin-top:.1rem}.section-hover-arrow{color:var(--text-muted)}.section-hover-duration{font-size:.7rem;color:var(--text-muted);margin-top:.3rem}.section-hover-chords{display:flex;flex-direction:column;gap:.2rem;margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--surface-300)}.section-hover-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.section-hover-key-change,.section-hover-tempo{margin-top:.45rem;padding:.26rem .42rem;border-radius:.4rem;background:color-mix(in srgb,var(--bg-elevated) 82%,transparent)}.section-hover-hint{margin-top:.45rem;padding-top:.35rem;border-top:1px solid var(--surface-300);font-size:.74rem;color:var(--text-muted)}.section-chord-list{font-size:.8rem;color:var(--primary);font-weight:600;font-family:var(--font-mono, monospace)}.section-hover-key-change{display:flex;align-items:center;gap:.3rem;margin-top:.4rem;padding:.3rem .4rem;background:#ffc1071a;border-radius:4px;font-size:.75rem;color:#ffc107}.key-change-icon{font-size:1rem}.section-hover-tempo{display:flex;align-items:center;gap:.3rem;margin-top:.4rem;padding:.3rem .4rem;background:#f59e0b1a;border-radius:4px;font-size:.75rem;color:#f59e0b}.tempo-icon{font-size:1rem}.section-hover-hint{font-size:.65rem;color:var(--text-muted);margin-top:.4rem;padding-top:.3rem;border-top:1px solid var(--border-subtle);opacity:.8}.loop-options{display:flex;align-items:center;gap:.125rem;background:var(--bg-elevated);border-radius:.5rem;padding:.125rem;margin-left:.5rem}.loop-option{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--text-muted);background:transparent;border-radius:.375rem;cursor:pointer;transition:all .15s ease}.loop-option input[type=radio]{display:none}.loop-option .material-symbols-outlined{font-size:1.1rem}.loop-option:hover{color:var(--text-secondary);background:#ffffff0d}.loop-option.active{background:color-mix(in srgb,#22c55e 14%,var(--bg-elevated));color:#4ade80;border-color:#22c55e59}.loop-option.active .material-symbols-outlined{color:#4ade80}.section-controls-row{display:flex;align-items:center;justify-content:center;min-height:2rem;padding:.25rem 0}.section-controls-row:empty:before{content:"";height:1.5rem}.section-actions{display:flex;align-items:center;gap:.5rem}.section-actions-label{font-size:.75rem;color:var(--text-secondary);font-weight:500}.section-action-btn{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.7rem;background:transparent;border:none;border-radius:.375rem;color:var(--text-muted);cursor:pointer;transition:all .15s ease}.section-action-btn:hover:not(:disabled){color:var(--text-primary);background:#9d8ec726}.section-action-btn:disabled{opacity:.4;cursor:not-allowed}.section-action-btn .material-symbols-outlined{font-size:.9rem}.section-action-btn.icon-only{width:2.15rem;height:2.15rem;padding:0;justify-content:center}.section-action-btn.danger:hover:not(:disabled){color:#f0b3bb;background:#e39ca624}.section-action-btn.deselect:hover{border-color:var(--text-secondary);color:var(--text-primary)}.section-nudge-controls{display:flex;align-items:center;gap:.25rem;margin-left:.5rem;padding-left:.5rem;border-left:1px solid var(--border-subtle)}.section-nudge-controls .nudge-label{font-size:.65rem;color:var(--text-muted);margin-right:.25rem}.nudge-unit-toggle{display:flex;align-items:center;border:1px solid var(--border-subtle);border-radius:.35rem;overflow:hidden;margin-right:.25rem}.nudge-unit-btn{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:.2rem .45rem;border:none;background:transparent;color:var(--text-muted);cursor:pointer;line-height:1}.nudge-unit-btn:not(:last-child){border-right:1px solid var(--border-subtle)}.nudge-unit-btn:hover{background:#ffffff0f;color:var(--text-secondary)}.nudge-unit-btn.active{background:color-mix(in srgb,var(--accent-primary) 18%,var(--bg-elevated));color:var(--accent-primary)}.section-nudge-controls .nudge-divider{font-size:.65rem;color:var(--border-subtle);margin:0 .15rem}.section-nudge-controls .nudge-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:.25rem;color:var(--text-muted);cursor:pointer;transition:all .15s ease}.section-nudge-controls .nudge-btn:hover{background:#9d8ec726;border-color:var(--accent-primary);color:var(--text-primary)}.section-nudge-controls .nudge-btn .material-symbols-outlined{font-size:1.1rem}.section-checkbox-row.inline.compact{margin-left:.45rem}.section-checkbox-row.inline.compact.mui{margin-left:.45rem;margin-right:0}.section-checkbox-row.inline.compact.mui .MuiFormControlLabel-label{margin-left:-.2rem}.section-checkbox-row.inline.compact.mui .MuiCheckbox-root,.section-checkbox-row.inline.compact.mui .MuiCheckbox-root.Mui-checked{color:var(--accent-primary)}.section-checkbox-row.inline.compact.mui .MuiCheckbox-root:hover{background:#9d8ec724}.playback-bar-container{display:flex;align-items:stretch;gap:.14rem;padding:.2rem 0}.playback-ruler-row{display:grid;grid-template-columns:1fr;align-items:center;margin-bottom:.08rem}.playback-ruler-row.has-lanes{grid-template-columns:calc(var(--lane-label-width) + var(--lane-gap)) 1fr}.playback-ruler-spacer{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:1.75rem}.playback-ruler-time-readout{font-size:.7rem;font-family:SF Mono,Monaco,monospace;color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}.playback-ruler-track-wrap{position:relative;width:100%;min-height:1.75rem}.time-display{font-size:.7rem;font-family:SF Mono,Monaco,monospace;color:var(--text-muted);width:3.5rem;min-width:3.5rem;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;min-height:1.75rem}.time-display.current{text-align:left;justify-content:flex-start;padding-right:0}.time-display.duration{justify-content:flex-end;padding-left:0;text-align:right}.playback-bar{flex:1;height:32px;display:flex;align-items:center;cursor:pointer;width:100%}.playback-track{position:relative;width:100%;height:8px;background:var(--bg-elevated);border-radius:4px;overflow:visible}.playback-progress{position:absolute;left:0;top:0;height:100%;background:var(--accent-primary);border-radius:4px;pointer-events:none;z-index:2}.playhead{position:absolute;top:50%;width:14px;height:14px;background:var(--text-primary);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 2px 6px #0006;z-index:15}.pre-sync-region{position:absolute;top:0;height:100%;background:#0000004d;border-radius:2px 0 0 2px;pointer-events:none}.sync-handle{position:absolute;top:-8px;width:3px;height:20px;background:var(--accent-primary);border-radius:2px;transform:translate(-50%);cursor:ew-resize;z-index:10;transition:background .15s ease,width .15s ease}.sync-handle:hover,.sync-handle.dragging{background:var(--accent-secondary);width:5px}.music-end-marker{position:absolute;top:-8px;width:3px;height:20px;background:#888;border-radius:2px;transform:translate(-50%);cursor:default;z-index:8;opacity:.7;transition:opacity .15s ease}.music-end-marker:hover{opacity:1}.post-music-region{position:absolute;top:0;height:100%;background:#0003;border-radius:0 2px 2px 0;pointer-events:none}.playback-progress.dimmed{opacity:.4}.playback-bar.dragging{cursor:ew-resize}.play-indicator{font-size:.7rem;color:var(--text-muted);opacity:.5}.play-indicator.playing{color:var(--accent-primary);opacity:1}.file-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-elevated);border-radius:.5rem;font-size:.8rem}.file-icon{font-size:1rem;color:var(--accent-primary)}.file-name{flex:1;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.125rem;display:flex;border-radius:.25rem;transition:all .15s ease}.remove-btn:hover{background:#c78e8e26;color:var(--error)}.remove-btn .material-symbols-outlined{font-size:.9rem}.transport-controls{background:var(--bg-elevated);border-radius:.75rem;padding:.58rem .78rem;margin-top:.25rem}.transport-row{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;flex-wrap:wrap}.volume-mixer.horizontal{margin-top:0;padding-top:0;border-top:0}.volume-mixer.horizontal .mixer-row{display:flex;align-items:center;gap:.25rem;padding:0;border:none;margin:0}.volume-mixer.horizontal .mixer-label{min-width:auto}.volume-mixer.horizontal .mixer-slider{width:84px}.bpm-section{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-subtle)}.effective-bpm,.effective-key{font-size:.85rem;font-weight:600;color:var(--accent-tertiary);cursor:default}.controls-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:.9rem}.control-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.control-row.secondary{justify-content:center}.change-file-btn{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.7rem;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:.375rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.change-file-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.change-file-btn .material-symbols-outlined{font-size:.9rem}.play-btn{width:2.75rem;height:2.75rem;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px #a855f74d}.play-btn .material-symbols-outlined{font-size:1.5rem}.play-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #a855f766}.play-btn.playing{background:#ec4899;background:var(--accent-secondary)}.stop-btn{background:var(--bg-elevated);color:var(--text-secondary)}.stop-btn:hover{background:var(--bg-input)}.control-row.nav-row{gap:.25rem;justify-content:center}.nav-btn{width:2rem;height:2rem;border:1px solid var(--border-subtle);border-radius:.375rem;background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.nav-btn:hover{border-color:var(--border-focus);color:var(--text-primary);background:var(--bg-input)}.nav-btn:active{transform:scale(.95)}.nav-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.nav-btn .material-symbols-outlined{font-size:1.1rem}.bpm-control{flex:1}.bpm-display{display:flex;align-items:center;gap:.25rem}.bpm-controls{display:flex;align-items:center;gap:.125rem}.bpm-controls button{width:var(--finder-control-height-compact);height:var(--finder-control-height-compact);border:none;background:var(--bg-elevated);color:var(--text-muted);border-radius:var(--control-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.bpm-controls button:hover{background:var(--bg-input);color:var(--text-secondary)}.bpm-controls button .material-symbols-outlined{font-size:.9rem}.bpm-input{width:4rem;min-height:var(--finder-control-height);padding:0 .375rem;font-size:1rem;font-weight:600;text-align:center;border:1px solid var(--border-subtle);border-radius:var(--control-radius);background:var(--bg-input);color:var(--accent-primary);outline:none;transition:border-color .15s ease}.bpm-input:focus{border-color:var(--border-focus)}.bpm-label{font-size:.7rem;color:var(--text-muted);margin-left:.125rem}.time-sig{display:flex;flex-direction:column;align-items:center;font-size:.85rem;font-weight:600;color:var(--text-muted);line-height:1;padding:.25rem .375rem;background:var(--bg-elevated);border-radius:.25rem}.time-sig span:last-child{border-top:1px solid var(--text-muted);padding-top:1px}.confidence-indicator{display:flex;align-items:center;gap:.375rem;font-size:.7rem;padding:.25rem .5rem;background:var(--bg-elevated);border-radius:.25rem}.confidence-dot{width:6px;height:6px;border-radius:50%}.confidence-indicator.high .confidence-dot{background:var(--success)}.confidence-indicator.medium .confidence-dot{background:var(--warning)}.confidence-indicator.low .confidence-dot{background:var(--error)}.confidence-text{color:var(--text-muted)}.status-indicators{display:flex;align-items:center;gap:.375rem;padding:.25rem 0}.status-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;cursor:help;transition:all .15s ease}.status-icon .material-symbols-outlined{font-size:.9rem}.status-icon.confidence.high{background:#8ec7a826;color:var(--success)}.status-icon.confidence.medium{background:#c7b88e26;color:var(--warning)}.status-icon.confidence.low{background:#c78e8e26;color:var(--error)}.status-icon.warning{background:#c7b88e26;color:var(--warning)}.status-icon:hover{transform:scale(1.1)}.warnings{font-size:.7rem;color:var(--text-muted);padding:.25rem .5rem;background:#c7b88e14;border-radius:.25rem;border-left:2px solid var(--warning)}.toggle-btn{display:flex;align-items:center;gap:.25rem;min-height:var(--finder-control-height);padding:0 .625rem;font-size:.75rem;font-weight:500;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:1rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.toggle-btn:hover{border-color:var(--border-focus)}.toggle-btn.active{background:#9d8ec726;border-color:var(--accent-primary);color:var(--accent-primary)}.toggle-btn.wide{justify-content:center;width:100%}.toggle-btn .material-symbols-outlined{font-size:1rem}.toggle-btn .btn-label{margin-left:.1rem}.toggle-btn.metronome-btn{min-width:70px;justify-content:center}.toggle-btn.metronome-btn.active{background:#8ec7a833;border-color:var(--success);color:var(--success)}.speed-control{display:flex;align-items:center}.speed-select{min-height:var(--finder-control-height);padding:0 1.5rem 0 .5rem;font-size:.75rem;font-weight:500;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:1rem;color:var(--text-secondary);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a4b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .4rem center;transition:all .15s ease}.speed-select:hover{border-color:var(--border-focus)}.speed-select:focus{outline:none;border-color:var(--accent-primary)}.speed-select option{background:var(--bg-card);color:var(--text-primary)}.tap-tempo-section{display:flex;align-items:center;gap:.35rem}.tap-tempo-btn{min-height:var(--finder-control-height);padding:0 .625rem;font-size:.75rem;font-weight:500;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:1rem;color:var(--text-secondary);cursor:pointer;transition:all .1s ease;display:flex;align-items:center;gap:.25rem}.tap-tempo-btn:hover{border-color:var(--border-focus)}.tap-tempo-btn:active,.tap-tempo-btn.tapped{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-deep);transform:scale(.95)}.tap-tempo-btn .material-symbols-outlined{font-size:.9rem}.tap-tempo-hint{font-size:.65rem;color:var(--text-muted)}.mini-beat-display{display:flex;align-items:center;gap:.5rem;padding:0;background:transparent;border-radius:0}.measure-num{font-size:.7rem;font-weight:600;color:var(--text-muted)}.measure-num.large{font-size:1.25rem;margin-top:.75rem;color:var(--text-secondary)}.drum-section-inline{border-top:1px solid var(--border-subtle);padding-top:.75rem;margin-top:.5rem}.drum-checkbox-row{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.375rem 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.drum-checkbox-row input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent-primary);cursor:pointer;margin:0}.drum-checkbox-label{font-size:.8rem;font-weight:500;color:var(--text-secondary)}.drum-checkbox-row:hover .drum-checkbox-label{color:var(--text-primary)}.drum-checkbox-row input[type=checkbox]:checked+.drum-checkbox-label{color:var(--accent-primary)}.drum-section-inline .drum-accompaniment{margin-top:.5rem;animation:expandDrums .2s ease-out}@keyframes expandDrums{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.drum-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.drum-label{font-size:.75rem;font-weight:500;color:var(--text-secondary)}.toggle-btn.mini{padding:.2rem .5rem;font-size:.65rem}.drum-accompaniment{padding:0}.drum-presets{display:flex;gap:.2rem;flex-wrap:wrap;margin-bottom:.35rem}.preset-btn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:.2rem .55rem;font-size:.65rem;line-height:1;white-space:nowrap;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-elevated);color:var(--text-muted);cursor:pointer;transition:all .15s ease}.preset-btn:hover{border-color:var(--border-focus);color:var(--text-secondary)}.preset-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-deep)}.preset-btn.preset-btn-icon{width:28px;min-width:28px;height:28px;min-height:28px;padding:0}.drum-pattern-input{display:flex;gap:.35rem;align-items:center;margin-bottom:.35rem}.drum-pattern-input input[type=text]{flex:1;padding:.3rem .4rem;font-size:.7rem;font-family:SF Mono,Monaco,monospace;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:.375rem;color:var(--text-primary);outline:none;min-width:0}.drum-pattern-input input[type=text]:focus{border-color:var(--border-focus)}.drum-pattern-input input::-moz-placeholder{color:var(--text-muted)}.drum-pattern-input input::placeholder{color:var(--text-muted)}.drum-volume{display:flex;align-items:center;flex-shrink:0;gap:.2rem}.drum-volume .volume-icon{font-size:.85rem;color:var(--text-muted)}.drum-volume input[type=range]{width:40px;accent-color:var(--accent-primary);height:4px}.drum-edit-link{--drum-mini-link-size: .65rem;--drum-mini-link-color: var(--text-secondary);--drum-mini-link-padding: 0;--drum-mini-link-border: 0;--drum-mini-link-bg: transparent;--drum-mini-link-radius: 0;--drum-mini-link-text-decoration: none;display:inline-flex;align-items:center;gap:.25rem;margin-top:.35rem;padding:0;font-size:.65rem;background:transparent;border:0;border-radius:0;color:var(--text-secondary);cursor:pointer;transition:color .15s ease}.drum-edit-link:hover{--drum-mini-link-color: var(--text-primary)}.drum-edit-link:focus{outline:2px solid var(--accent-primary)}.volume-mixer{margin-top:.75rem;padding:.5rem;background:var(--bg-elevated);border-radius:.5rem;border:1px solid var(--border-subtle)}.mixer-row{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}.mixer-row:not(:last-child){border-bottom:1px solid var(--border-subtle);padding-bottom:.35rem;margin-bottom:.1rem}.mixer-label{display:flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--text-secondary);min-width:60px}.mixer-label .material-symbols-outlined{font-size:.9rem;opacity:.7}.mixer-slider{flex:1;height:4px;accent-color:var(--accent-primary);cursor:pointer}.mixer-slider:disabled{opacity:.4;cursor:not-allowed}.mixer-value{font-size:.65rem;color:var(--text-muted);min-width:30px;text-align:right;outline-offset:2px}.drum-edit-link .material-symbols-outlined{font-size:.8rem}.drum-display-error{padding:.5rem;background:var(--bg-elevated);border-radius:.375rem;text-align:center}.drum-display-error p{font-size:.7rem;color:var(--text-muted);margin:0}.drum-display-error .error-detail{display:block;font-size:.6rem;color:var(--error);margin-top:.2rem}.vexflow-mini-container{background:var(--bg-elevated);border-radius:.375rem;padding:.25rem;overflow:hidden;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.metronome-dots{display:flex;gap:.5rem;padding:.25rem .5rem;justify-content:center}.beat-dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted);opacity:.3;transition:background .08s ease,opacity .08s ease,box-shadow .08s ease}.beat-dot.active{background:var(--success);opacity:1;transform:scale(1.3);box-shadow:0 0 8px var(--success)}.beat-dot:not(.active){transform:scale(1)}.beat-dot.downbeat{width:12px;height:12px}.beat-dot.downbeat.active{background:var(--accent-primary);box-shadow:0 0 10px var(--accent-primary)}.measure-indicator{display:flex;gap:.35rem;padding:.15rem .5rem}.measure-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:.4;transition:all .2s ease}.measure-dot.active{background:var(--accent-secondary);opacity:1;transform:scale(1.2)}.vexflow-mini-container svg{display:block;color:#c8c4d8;fill:#c8c4d8;stroke:#c8c4d8}.drum-notation-mini{display:flex;align-items:center;justify-content:center}@media(max-width:750px){.player-layout{grid-template-columns:1fr}.viz-section{order:1}.sidebar-column{order:2}.drum-section-inline{border-top:none;padding-top:0;margin-top:0}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-elevated)}::-webkit-scrollbar-thumb{background:var(--bg-input);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.section-panel{border-top:1px solid var(--border-subtle);padding-top:.75rem;margin-top:.5rem}.section-checkbox-row{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.375rem 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.section-checkbox-row input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent-primary);cursor:pointer;margin:0}.section-checkbox-label{font-size:.8rem;font-weight:500;color:var(--text-secondary);flex:1}.section-checkbox-row:hover .section-checkbox-label{color:var(--text-primary)}.section-checkbox-row input[type=checkbox]:checked+.section-checkbox-label{color:var(--accent-primary)}.section-loop-badge{font-size:.85rem;color:var(--success)}.section-panel-header{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;color:var(--text-muted);font-size:.8rem}.section-icon{font-size:1rem;opacity:.7}.section-panel-label{flex:1}.section-panel-content{margin-top:.5rem;animation:expandSections .2s ease-out}@keyframes expandSections{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.section-loop-toggle{display:flex;align-items:center;gap:.375rem;font-size:.7rem;color:var(--text-secondary);cursor:pointer}.section-loop-toggle input[type=checkbox]{display:none}.section-loop-toggle .material-symbols-outlined{font-size:.9rem;color:var(--text-muted)}.section-loop-toggle:has(input:checked){color:var(--success)}.section-loop-toggle:has(input:checked) .material-symbols-outlined{color:var(--success)}.section-loop-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}.section-clear-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.125rem;display:flex;border-radius:.25rem;transition:all .15s ease}.section-clear-btn:hover{background:#c78e8e26;color:var(--error)}.section-clear-btn .material-symbols-outlined{font-size:.85rem}.section-items{display:flex;flex-direction:column;gap:.2rem;max-height:180px;overflow-y:auto}.section-item-row{position:relative}.section-item{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;background:var(--bg-elevated);border:1px solid transparent;border-radius:.375rem;cursor:pointer;transition:all .15s ease;text-align:left;width:100%;font-size:.75rem}.section-item:hover{background:var(--bg-input);border-color:var(--border-subtle)}.section-item.selected{background:#9d8ec726;border-color:var(--accent-primary)}.section-item.current{background:#8ec7a814}.section-item.current.selected{background:#9d8ec733}.section-color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.section-info{flex:1;display:flex;flex-direction:column;gap:.0625rem;min-width:0}.section-name{font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-duration{font-size:.65rem;color:var(--text-muted);font-family:SF Mono,Monaco,monospace}.section-item-loop,.section-item-playing{font-size:.85rem;flex-shrink:0}.section-item-loop{color:var(--success)}.section-item-playing{color:var(--accent-primary);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.section-label-input{width:100%;padding:.125rem .25rem;font-size:.75rem;font-weight:500;background:var(--bg-input);border:1px solid var(--accent-primary);border-radius:.25rem;color:var(--text-primary);outline:none}.section-merge-hint{position:absolute;left:50%;bottom:-6px;transform:translate(-50%);width:18px;height:14px;padding:0;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.25rem;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;transition:all .15s ease}.section-item-row:hover .section-merge-hint{opacity:1}.section-merge-hint:hover{background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--accent-primary)}.section-merge-hint .material-symbols-outlined{font-size:.7rem}.section-split-btn{display:flex;align-items:center;justify-content:center;gap:.25rem;margin-top:.5rem;padding:.3rem .5rem;font-size:.65rem;font-weight:500;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:.375rem;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.section-split-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.section-split-btn .material-symbols-outlined{font-size:.8rem}.section-hint{display:flex;align-items:center;gap:.25rem;padding:.2rem .4rem;font-size:.6rem;color:var(--text-muted);opacity:.7}.section-hint .material-symbols-outlined{font-size:.7rem}.section-combine-btn{display:flex;align-items:center;justify-content:center;gap:.25rem;margin-top:.25rem;padding:.35rem .5rem;font-size:.65rem;font-weight:500;background:#9d8ec71a;border:1px solid var(--accent-primary);border-radius:.375rem;color:var(--accent-primary);cursor:pointer;transition:all .15s ease}.section-combine-btn:hover{background:#9d8ec733}.section-combine-btn .material-symbols-outlined{font-size:.8rem}.analyzing-spinner.small{width:.9rem;height:.9rem;border-width:1.5px}.section-markers{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:1}.section-marker{position:absolute;top:0;height:100%;border-radius:4px;transition:opacity .15s ease}.section-marker.selected,.section-marker.selected.reference{background:#9d8ec733;border:1px solid rgba(157,142,199,.55)}.selection-region-overlay{position:absolute;top:-4px;height:calc(100% + 8px);border:2px solid rgba(171,178,196,.9);border-radius:4px;box-shadow:inset 0 0 0 1px #242734a6;pointer-events:none;z-index:3;transition:left .12s ease,width .12s ease,border-color .12s ease}.selection-region-overlay.looping{border-color:#5af29b;box-shadow:0 0 0 1px #5af29b47,inset 0 0 0 1px #1b322266}.loop-region-overlay{position:absolute;top:-4px;height:calc(100% + 8px);background:#8ec7a833;border:1px solid var(--success);border-radius:4px;pointer-events:none}.loop-region-overlay:before,.loop-region-overlay:after{content:"";position:absolute;top:0;width:3px;height:100%;background:var(--success);border-radius:2px}.loop-region-overlay:before{left:-1px}.loop-region-overlay:after{right:-1px}.tempo-region-markers{position:absolute;inset:0;pointer-events:none}.tempo-region-marker{position:absolute;top:-2px;height:calc(100% + 4px);border-radius:3px;pointer-events:auto;cursor:help}.tempo-region-marker.tempo-fermata{background:repeating-linear-gradient(90deg,#f59e0b4d 0px 3px,#f59e0b26 3px 6px);border:1px solid rgba(245,158,11,.6)}.tempo-region-marker.tempo-rubato{background:repeating-linear-gradient(90deg,#3b82f640 0px 4px,#3b82f61a 4px 8px);border:1px solid rgba(59,130,246,.5)}.tempo-region-marker.tempo-accelerando{background:linear-gradient(90deg,#22c55e1a,#22c55e59);border:1px solid rgba(34,197,94,.5)}.tempo-region-marker.tempo-ritardando{background:linear-gradient(90deg,#a855f759,#a855f71a);border:1px solid rgba(168,85,247,.5)}.tempo-region-marker:hover{filter:brightness(1.2)}.chord-display{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.75rem;padding:.75rem 1rem;margin-top:.5rem}.chord-display-loading,.chord-display-empty{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.8rem}.chord-display-empty .material-symbols-outlined{font-size:1rem;opacity:.6}.chord-info-row{display:flex;align-items:center;gap:1.5rem;margin-bottom:.75rem}.key-display{display:flex;align-items:center;gap:.5rem}.key-label,.chord-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.key-value{font-size:1.1rem;font-weight:600;color:var(--accent-primary)}.low-confidence-indicator{font-size:.75rem;color:var(--warning);margin-left:.25rem}.current-chord-display{display:flex;align-items:center;gap:.5rem}.chord-value{font-size:1.5rem;font-weight:700;color:var(--text-primary);font-family:Menlo,Monaco,Consolas,monospace;min-width:3rem}.chord-value.no-chord{color:var(--text-muted)}.chord-overlay-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding-top:.5rem;border-top:1px solid var(--border-subtle)}.chord-overlay-btn{padding:.4rem .75rem!important;font-size:.75rem!important}.instrument-selector{display:flex;background:var(--bg-input);border-radius:.375rem;padding:.125rem}.instrument-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:1.75rem;border:none;background:transparent;color:var(--text-muted);border-radius:.25rem;cursor:pointer;transition:all .15s ease}.instrument-btn:hover{color:var(--text-secondary);background:#ffffff0d}.instrument-btn.active{background:var(--accent-primary);color:var(--bg-deep)}.instrument-btn .material-symbols-outlined{font-size:1rem}.chord-volume-control{display:flex;align-items:center;gap:.5rem;color:var(--text-muted)}.chord-volume-control .material-symbols-outlined{font-size:1rem}.chord-volume-slider{width:60px;height:4px;-webkit-appearance:none;background:var(--bg-input);border-radius:2px;cursor:pointer}.chord-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent-primary);border-radius:50%;cursor:pointer}.chord-volume-slider::-moz-range-thumb{width:12px;height:12px;background:var(--accent-primary);border:none;border-radius:50%;cursor:pointer}.chord-volume-value{font-size:.7rem;color:var(--text-muted);min-width:2.5rem}.chord-progression-preview{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--border-subtle);overflow-x:auto}.progression-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);flex-shrink:0}.progression-chords{display:flex;gap:.375rem;flex-wrap:nowrap}.progression-chord{padding:.2rem .5rem;font-size:.75rem;font-weight:500;font-family:Menlo,Monaco,Consolas,monospace;background:var(--bg-input);border-radius:.25rem;color:var(--text-secondary);transition:all .15s ease;white-space:nowrap}.progression-chord.active{background:var(--accent-primary);color:var(--bg-deep)}.progression-more{font-size:.7rem;color:var(--text-muted);font-style:italic;white-space:nowrap}.chord-warnings{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-subtle)}.chord-warning{display:flex;align-items:center;gap:.375rem;font-size:.7rem;color:var(--warning)}.chord-warning .material-symbols-outlined{font-size:.9rem}.lead-sheet{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.75rem;padding:1rem;margin-top:.75rem}.lead-sheet-empty{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:2rem;color:var(--text-muted);font-size:.85rem}.lead-sheet-empty .material-symbols-outlined{font-size:1.25rem;opacity:.5}.lead-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1px solid var(--border-subtle)}.lead-sheet-key{display:flex;align-items:center;gap:.5rem}.key-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;padding:.25rem .625rem;font-size:1rem;font-weight:600;font-family:Menlo,Monaco,Consolas,monospace;background:var(--accent-primary);color:var(--bg-deep);border-radius:.375rem}.lead-sheet-key .key-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.lead-sheet-chords-used{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.chords-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.chords-list{font-size:.8rem;font-family:Menlo,Monaco,Consolas,monospace;color:var(--text-secondary)}.lead-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}@media(max-width:768px){.lead-sheet-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.lead-sheet-grid{grid-template-columns:1fr}}.lead-sheet-measure{display:flex;flex-direction:column;gap:.25rem;padding:.5rem;background:var(--bg-elevated);border-radius:.5rem;border:1px solid transparent;transition:all .15s ease}.lead-sheet-measure.current{border-color:var(--accent-primary);background:#9d8ec71a}.measure-number{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.125rem}.measure-chords{display:flex;flex-wrap:wrap;gap:.25rem;min-height:1.75rem;align-items:center}.measure-rest{color:var(--text-muted);font-size:1rem;opacity:.5}.measure-chord{display:inline-flex;flex-direction:column;align-items:center;padding:.25rem .5rem;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:.375rem;font-family:Menlo,Monaco,Consolas,monospace;cursor:pointer;transition:all .15s ease}.measure-chord:hover{background:var(--bg-card);border-color:var(--accent-primary)}.measure-chord.active{background:var(--accent-primary);border-color:var(--accent-primary)}.measure-chord.active .chord-name{color:var(--text-primary)}.measure-chord.active .chord-detail{color:color-mix(in srgb,var(--text-primary) 72%,var(--text-muted))}.chord-name{font-size:.9rem;font-weight:600;color:var(--text-primary)}.chord-detail{font-size:.6rem;color:var(--text-muted);margin-top:-.125rem}.lead-sheet-pattern{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-subtle)}.pattern-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);flex-shrink:0}.pattern-numerals{font-size:.85rem;font-family:Menlo,Monaco,Consolas,monospace;color:var(--accent-secondary)}.chord-confidence-banner{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.75rem;margin-bottom:.75rem}.chord-confidence-banner.high{background:#8ec7a826;color:var(--success)}.chord-confidence-banner.medium{background:#c7b88e26;color:var(--warning)}.chord-confidence-banner.low{background:#c78e8e26;color:var(--error)}.chord-confidence-banner .material-symbols-outlined{font-size:1rem}.confidence-text{display:flex;flex-wrap:wrap;gap:.25rem}.confidence-hint{opacity:.8}.chord-controls{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.chord-chart{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.75rem;padding:1rem;margin-top:.5rem}.chord-chart-empty{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:2rem;color:var(--text-muted)}.chord-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle)}.chord-chart-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--text-primary)}.chord-chart-title .material-symbols-outlined{font-size:1.25rem;color:var(--accent-primary)}.chord-chart-subtitle{font-size:.75rem;font-weight:400;color:var(--text-muted);margin-left:.5rem}.chord-chart-key{display:flex;align-items:center;gap:.5rem}.chord-chart-key .key-badge{background:var(--accent-primary);color:var(--bg-deep);padding:.25rem .5rem;border-radius:.25rem;font-weight:600;font-size:.85rem}.chord-chart-key .key-confidence{font-size:.7rem;color:var(--text-muted)}.chord-chart-grid{display:flex;flex-direction:column;gap:2px;max-height:400px;overflow-y:auto;padding-right:.5rem}.chord-chart-row{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.chord-chart-measure{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:.25rem;padding:.25rem;cursor:pointer;transition:all .15s ease;min-height:40px}.chord-chart-measure:hover{border-color:var(--accent-primary);background:#9d8ec71a}.chord-chart-measure.current{border-color:var(--accent-primary);background:#9d8ec726;box-shadow:0 0 12px #9d8ec74d}.chord-chart-measure.empty{background:transparent;border-color:transparent;cursor:default}.measure-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.15rem}.measure-number{font-size:.6rem;font-weight:600;color:var(--text-muted)}.chord-chart-measure.current .measure-number{color:var(--accent-primary)}.beat-indicator{font-size:.6rem;color:var(--accent-secondary);background:#c9a0b833;padding:.1rem .3rem;border-radius:.2rem}.measure-content{display:flex;flex-direction:column;gap:.15rem}.beat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;height:3px}.beat-slot{background:var(--border-subtle);border-radius:1px;transition:background .1s}.beat-slot.active{background:var(--accent-primary)}.measure-chords{display:grid;grid-template-columns:repeat(4,1fr);gap:.15rem;min-height:18px;align-items:center}.measure-chords .chord-name{font-size:.75rem;font-weight:600;color:var(--text-primary);text-align:center;transition:color .15s}.measure-chords .chord-name.active{color:var(--accent-secondary)}.measure-chords .no-chord{grid-column:1 / -1;text-align:center;color:var(--text-muted);font-size:.8rem}.chord-chart-disclaimer{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.75rem;padding:.5rem .75rem;background:#c7b88e1a;border-radius:.5rem;font-size:.75rem;color:var(--warning)}.chord-chart-disclaimer .material-symbols-outlined{font-size:1rem;flex-shrink:0}.chord-chart-experimental{display:flex;align-items:center;gap:.35rem;margin-bottom:.5rem;padding:.35rem .6rem;background:#7eb5c426;border:1px solid rgba(126,181,196,.3);border-radius:.375rem;font-size:.7rem;font-weight:600;color:var(--accent-tertiary);width:-moz-fit-content;width:fit-content}.chord-chart-experimental .material-symbols-outlined{font-size:.9rem}.chord-chart-section{margin-top:1rem}.chord-chart-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.5rem;color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease}.chord-chart-toggle:hover,.chord-chart-toggle.active{background:var(--bg-elevated);border-color:var(--accent-primary)}.chord-chart-toggle .material-symbols-outlined{font-size:1.25rem;color:var(--accent-primary)}.chord-chart-toggle .toggle-label{flex:1;text-align:left}.chord-chart-toggle .toggle-hint{font-size:.75rem;color:var(--text-muted);font-weight:400}.confidence-badge{display:flex;align-items:center;gap:.2rem;padding:.15rem .35rem;border-radius:.25rem;font-size:.65rem;font-weight:600;cursor:help}.confidence-badge .material-symbols-outlined{font-size:.8rem}.confidence-badge .confidence-label{text-transform:uppercase;letter-spacing:.02em}.confidence-badge.high{background:#4caf5033;color:#4caf50}.confidence-badge.medium{background:#ffc10733;color:#ffc107}.confidence-badge.low{background:#f4433633;color:#f44336}.confidence-badge.small{padding:.1rem .25rem;font-size:.55rem}.confidence-badge.small .material-symbols-outlined{font-size:.7rem}.confidence-badge.small .confidence-label{display:none}.key-section{display:grid;gap:.35rem;padding:.35rem 0;border-bottom:1px solid var(--border-subtle)}.key-section.dual{gap:.5rem}.key-section.dual .key-input-group:first-child .shared-key-input{max-width:270px}.key-input-group{display:grid;gap:.28rem}.playback-key-row{display:flex;align-items:center;gap:.35rem}.key-section .key-label{color:var(--text-muted);font-size:.62rem;letter-spacing:.01em;width:-moz-fit-content;width:fit-content;cursor:help}.key-section .key-value{color:var(--accent-primary);font-weight:600;font-size:.95rem}.transpose-controls{display:flex;align-items:center;gap:.25rem}.transpose-btn{display:flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border:1px solid var(--border-subtle);border-radius:.25rem;background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.transpose-btn:hover:not(:disabled){background:var(--bg-card);border-color:var(--accent-primary);color:var(--accent-primary)}.transpose-btn:disabled{opacity:.4;cursor:not-allowed}.transpose-btn .material-symbols-outlined{font-size:.9rem}.transpose-value{font-size:.72rem;color:var(--text-muted);min-width:1.5rem;text-align:center;cursor:default}.transpose-value.active{color:var(--accent-primary);font-weight:600}.measure-section-label{position:absolute;top:-.5rem;left:.5rem;background:var(--accent-secondary);color:var(--bg-deep);font-size:.6rem;font-weight:600;padding:.1rem .35rem;border-radius:.25rem;text-transform:uppercase}.chord-chart-measure{position:relative}.chord-chart-measure.in-section{background:#9d8ec714;border-color:#9d8ec733}.chord-chart-measure.in-section.section-color-0{background:#9d8ec71a;border-color:#9d8ec740}.chord-chart-measure.in-section.section-color-1{background:#7eb5c41a;border-color:#7eb5c440}.chord-chart-measure.in-section.section-color-2{background:#c9a0b81a;border-color:#c9a0b840}.chord-chart-measure.in-section.section-color-3{background:#8ec7a81a;border-color:#8ec7a840}.chord-chart-measure.in-section.section-color-4{background:#c7b88e1a;border-color:#c7b88e40}.chord-chart-measure.section-start:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--accent-secondary);border-radius:.25rem .25rem 0 0}.chord-chart-measure.section-start.section-color-0:before{background:var(--accent-primary)}.chord-chart-measure.section-start.section-color-1:before{background:var(--accent-tertiary)}.chord-chart-measure.section-start.section-color-2:before{background:var(--accent-secondary)}.chord-chart-measure.section-start.section-color-3:before{background:var(--success)}.chord-chart-measure.section-start.section-color-4:before{background:var(--warning)}.measure-key-change{display:flex;align-items:center;gap:.25rem;font-size:.65rem;color:var(--warning);margin-bottom:.25rem}.measure-key-change .material-symbols-outlined{font-size:.8rem}.chord-display-compact{padding:.5rem;background:var(--bg-elevated);border-radius:.5rem}.chord-display-compact .current-chord-display{display:flex;align-items:center;gap:.5rem}.chord-display-compact .chord-label{font-size:.7rem;color:var(--text-muted)}.chord-display-compact .chord-value{font-size:1rem;font-weight:600;color:var(--accent-primary)}.chord-display-compact .chord-value.no-chord{color:var(--text-muted)}@media(max-width:640px){.chord-chart-row{grid-template-columns:repeat(4,1fr)}.chord-chart-grid{max-height:300px}}.youtube-iframe{width:100%;min-height:360px;border:0}.library-toolbar{display:flex;gap:.5rem;align-items:center}.library-search-input{width:100%;min-width:0;min-height:2.2rem;padding:.5rem .7rem;border:1px solid var(--border-subtle);border-radius:.5rem;background:color-mix(in srgb,var(--bg-input) 88%,black);color:var(--text-primary);font-size:.9rem}.library-search-input::-moz-placeholder{color:var(--text-muted)}.library-search-input::placeholder{color:var(--text-muted)}.library-search-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.library-shell{border:none;background:transparent;border-radius:0;padding:.2rem 0;display:grid;gap:.6rem}.library-shell.compact{margin-top:2.8rem}@media(max-width:980px){.landing-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.landing-feature-card:nth-child(1),.landing-feature-card:nth-child(2),.landing-feature-card:nth-child(3),.landing-feature-card:nth-child(4){transform:none}}@media(max-width:640px){.landing-feature-grid{grid-template-columns:1fr}.landing-feature-zone{margin-top:1.2rem;margin-bottom:1.4rem}.url-input-row{flex-direction:column}.url-load-btn{width:100%}}.library-header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;overflow:hidden}.library-header-actions{display:flex;flex-shrink:0;align-items:center;gap:.35rem}.library-header-row h3{font-size:.82rem;font-weight:600}.library-now-playing{display:flex;align-items:center;gap:.5rem;min-width:0}.library-grid{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));align-items:start;max-height:280px;overflow:auto}.library-card{border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);border-radius:.5rem;padding:.4rem;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;text-align:left;min-width:0;overflow:hidden}.library-card:hover{border-color:var(--accent-primary)}.library-card.active{border-color:var(--accent-primary);background:#9d8ec724}.library-thumb{width:100%;aspect-ratio:16 / 9;flex-shrink:0;border-radius:.35rem;background:#0c0c11;overflow:hidden;position:relative}.library-thumb img,.library-thumb video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.library-thumb .material-symbols-outlined{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.library-card-meta{display:flex;justify-content:space-between;gap:.4rem;align-items:center}.library-card-title{font-size:.75rem;color:var(--text-secondary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.library-status{font-size:.65rem}.library-status.stale{color:var(--warning)}.library-status.fresh{color:var(--success)}.floating-upload-tasks{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.35rem;z-index:1200}.upload-task{min-width:220px;border:1px solid var(--border-subtle);background:var(--bg-card);border-radius:.5rem;padding:.5rem .75rem;font-size:.75rem;display:flex;justify-content:space-between;gap:.5rem}.upload-task.processing{border-color:var(--accent-primary)}.upload-task.done{border-color:var(--success-color, #4caf50)}.upload-task.error{border-color:var(--error-color, #ef5350)}.stale-banner,.youtube-capability-note{border:1px solid var(--border-subtle);background:var(--bg-elevated);border-radius:.5rem;padding:.5rem;font-size:.8rem;display:grid;gap:.4rem}.manual-section-inputs{display:grid;grid-template-columns:1fr 1fr auto;gap:.35rem}.manual-section-inputs input{border:1px solid var(--border-subtle);border-radius:.4rem;background:var(--bg-input);color:var(--text-primary);padding:.35rem .5rem}.analysis-sections-list{display:grid;gap:.3rem}.practice-panel{border-top:1px solid var(--border-subtle);padding-top:.75rem;display:grid;gap:.5rem}.practice-panel h3{font-size:.85rem;font-weight:600}.analysis-sections-help{border-top:1px solid var(--border-subtle);padding-top:.6rem}.analysis-sections-help p{color:var(--text-muted);font-size:.72rem}.timeline-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.1rem}.section-checkbox-row.inline{padding:0}.url-load-btn.small{padding:.4rem .7rem;font-size:.72rem}.url-load-btn.small.secondary{background:var(--bg-input);border:1px solid var(--border-subtle);color:var(--text-secondary)}.url-load-btn.small.secondary.danger{color:#e39ca6;border-color:#e39ca666}.inline-icon-btn{width:1.85rem;height:1.85rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);border-radius:.35rem;background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer}.inline-icon-btn .material-symbols-outlined{font-size:1rem}.inline-icon-btn:disabled{opacity:.45;cursor:default}.shared-bpm-input{width:100%;max-width:20.5rem;--bpm-dropdown-offset-y: 8px;--bpm-dropdown-min-width: 280px;--bpm-value-padding: .3rem .52rem .3rem .62rem}.shared-key-input{width:100%;max-width:17rem;--key-shell-height: 38px;--key-radius: .375rem;--key-bg: var(--bg-input);--key-border: var(--border-subtle);--key-text: var(--text-primary);--key-muted: var(--text-secondary);--key-focus: var(--border-focus);--key-focus-ring: 0 0 0 3px rgba(157, 142, 199, .2);--key-divider: var(--border-subtle);--key-control-hover-bg: var(--bg-elevated);--key-dropdown-bg: var(--bg-elevated);--key-dropdown-border: var(--border-subtle);--key-dropdown-padding: .74rem;--key-grid-gap: .52rem;--key-chip-min-height: 2.46rem;--key-chip-font-size: .94rem;--key-chip-font-weight: 600}.beat-app .shared-bpm-input .shared-bpm-main-row{display:flex;align-items:flex-start;gap:.4rem}.beat-app .shared-bpm-shell,.beat-app .shared-key-shell{display:flex;align-items:center;gap:.08rem;min-height:2.35rem;border:1px solid var(--border-subtle);background:var(--bg-input);border-radius:.55rem;overflow:hidden;width:100%}.beat-app .shared-key-input .shared-key-value-btn{padding:.42rem .72rem;font-size:.875rem;font-weight:600;color:var(--text-primary)}.beat-app .shared-key-input .shared-key-value-btn .material-symbols-outlined{color:var(--text-muted)}.beat-key-dropdown.shared-key-dropdown{--key-dropdown-bg: var(--bg-elevated);--key-dropdown-border: var(--border-subtle);--key-chip-bg: var(--bg-input);--key-chip-border: var(--border-subtle);--key-chip-hover-border: var(--accent-primary);--key-chip-hover-bg: color-mix(in srgb, var(--bg-elevated) 86%, #0b1224);--key-chip-hover-shadow: 0 8px 18px rgba(0, 0, 0, .28);--key-chip-hover-transform: translateY(-1px);--key-chip-active-border: #60a5fa;--key-chip-active-bg: rgba(37, 99, 235, .18);--key-chip-active-text: #bfdbfe;--key-chip-active-shadow: 0 0 0 1px rgba(96, 165, 250, .24);border-radius:.55rem;border:1px solid var(--border-subtle);background:var(--bg-elevated);box-shadow:var(--shadow-lg)}.beat-key-dropdown .shared-key-grid-item{min-height:2.46rem;padding:.34rem .5rem;border-radius:.45rem;border-color:var(--border-subtle);background:var(--bg-input);color:var(--text-primary);font-size:.94rem;font-weight:600}.beat-app .shared-key-shell{gap:.12rem;min-height:var(--key-shell-height, 2.375rem);border-radius:var(--key-radius, .375rem)}.beat-app .shared-bpm-shell:focus-within,.beat-app .shared-key-shell:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 1px #9d8ec733}.shared-bpm-inline-action,.shared-key-inline-action{border:0;border-right:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg-elevated) 65%,transparent);color:var(--text-secondary);min-height:100%;min-width:2.2rem;padding:0 .62rem;cursor:pointer;transition:background .15s ease,color .15s ease}.shared-bpm-inline-action:hover,.shared-key-inline-action:hover{background:var(--bg-elevated);color:var(--text-primary)}.shared-bpm-stepper{display:flex;align-items:stretch;flex:1;min-width:0}.shared-bpm-value{min-width:0;flex:1;border:0;background:transparent;color:var(--text-primary);padding:.3rem .52rem;font-size:1.02rem;font-weight:600;max-width:5.2rem;min-width:4.2rem;text-align:left;padding:var(--bpm-value-padding);border-right:1px solid var(--border-subtle);font-variant-numeric:tabular-nums}.shared-bpm-value:focus,.shared-key-value-btn:focus{outline:none}.shared-bpm-arrows{display:flex;flex-direction:column;width:1.6rem;min-width:1.6rem}.shared-bpm-arrow{display:flex;align-items:center;justify-content:center;flex:1 1 50%;border:0;background:color-mix(in srgb,var(--bg-elevated) 68%,transparent);color:var(--text-secondary);cursor:pointer;line-height:1;transition:background .15s ease,color .15s ease}.shared-bpm-arrow+.shared-bpm-arrow{border-top:1px solid var(--border-subtle)}.shared-bpm-arrow .material-symbols-outlined{font-size:1rem}.shared-bpm-arrow:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.shared-bpm-arrow:disabled{opacity:.35;cursor:default}.shared-bpm-shell .inline-icon-btn,.shared-key-shell .inline-icon-btn{border:0;border-left:1px solid var(--border-subtle);border-radius:0;width:2.15rem;height:2.15rem;background:color-mix(in srgb,var(--bg-elevated) 65%,transparent)}.shared-bpm-rate-actions{display:flex;align-items:center;gap:.3rem;padding-top:.01rem}.shared-bpm-rate-btn{min-width:3.1rem;min-height:2.35rem;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-elevated);color:var(--text-secondary);font-weight:600;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.shared-bpm-rate-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.shared-bpm-dropdown{margin-top:.38rem;width:100%;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-elevated);overflow:hidden}.key-label-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.sync-start-editor{display:grid;gap:.25rem}.sync-start-editor label{display:grid;gap:.14rem}.sync-start-editor label span{font-size:.64rem;color:var(--text-muted);letter-spacing:.01em}.sync-start-header{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.sync-start-header .inline-icon-btn{width:1.65rem;height:1.65rem}.sync-start-editor input{background:var(--bg-input);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:.4rem;min-height:2.05rem;padding:.24rem .42rem;font-size:.92rem;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.sync-start-editor input::-webkit-outer-spin-button,.sync-start-editor input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.youtube-upgrade-modal-backdrop{position:fixed;inset:0;background:#00000085;backdrop-filter:blur(2px);z-index:3000;display:flex;align-items:center;justify-content:center}.youtube-upgrade-modal{width:min(520px,calc(100vw - 2rem));background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:.8rem;padding:1rem;display:grid;gap:.6rem}.youtube-upgrade-modal p{color:var(--text-secondary);font-size:.85rem}.youtube-upgrade-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}.icon-btn.subtle{width:1.9rem;height:1.9rem;border-radius:.4rem;border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.icon-btn.subtle:hover{border-color:var(--accent-primary);color:var(--text-primary)}.icon-btn.subtle .material-symbols-outlined{font-size:1rem}.youtube-player{width:100%}.beat-app{max-width:1240px;padding:1.25rem 1.1rem 2rem}@media(max-width:768px){.beat-app{width:100%;padding:1rem .75rem 1.5rem}.beat-main{gap:1rem}}.beat-header{padding:.3rem 0 .95rem}.beat-header h1{color:var(--text-primary);font-size:1.12rem;font-weight:650;letter-spacing:.01em}.viz-section,.controls-section,.library-shell,.transport-controls,.stale-banner,.youtube-capability-note{border-color:var(--surface-300);border-radius:var(--radius-lg);box-shadow:var(--elev-1)}.viz-section,.controls-section,.library-shell{background:color-mix(in srgb,var(--bg-card) 92%,black)}.library-shell{padding:.55rem;gap:.55rem}.library-shell.compact{margin-top:2rem}.library-header-row h3{color:var(--text-primary);font-size:.9rem;letter-spacing:.01em}.library-grid{gap:.68rem;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}.library-card{border-radius:var(--radius-md);padding:.45rem;transition:border-color .18s ease,transform .16s ease,box-shadow .2s ease}.library-card:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}.library-card.active{box-shadow:inset 0 0 0 1px #9d8ec759}.library-thumb{border-radius:calc(var(--radius-md) - .2rem)}.library-card-title{font-size:.76rem;color:var(--text-primary)}.library-status{font-size:.67rem;font-weight:600}.transport-controls{border:1px solid var(--surface-300);border-radius:var(--radius-lg);padding:.8rem 1rem}.transport-row{gap:.45rem}.bpm-section{align-items:flex-start;gap:.6rem;flex-wrap:wrap}.bpm-side-meta{display:flex;align-items:center;gap:.38rem;margin-left:auto;padding-top:.02rem}.play-btn,.nav-btn,.change-file-btn,.icon-btn.subtle,.url-load-btn.small,.url-load-btn.small.secondary{border-radius:var(--radius-sm)}.play-btn{border-radius:999px;box-shadow:var(--elev-1)}.nav-btn,.change-file-btn,.icon-btn.subtle,.loop-option,.speed-select,.url-load-btn.small,.url-load-btn.small.secondary{border:1px solid var(--surface-300);background:color-mix(in srgb,var(--bg-elevated) 88%,black)}.nav-btn:hover,.change-file-btn:hover,.icon-btn.subtle:hover,.loop-option:hover,.speed-select:hover,.url-load-btn.small.secondary:hover{background:var(--bg-input)}.url-load-btn.small{border:1px solid transparent;box-shadow:var(--elev-1)}.url-input,.sync-start-editor input{border:1px solid var(--surface-300);border-radius:var(--radius-md);min-height:2.35rem}.sync-start-editor .url-load-btn.small.secondary{min-height:2.1rem}.key-section{border-bottom-color:var(--surface-300)}.key-label-row .confidence-badge.small{border:0;border-radius:999px;padding:0;letter-spacing:.02em}.timeline-actions{gap:.42rem;margin-top:.2rem}.timeline-actions .url-load-btn.small{min-height:2rem;font-size:.7rem}.section-checkbox-row.inline{min-height:2rem;border:1px solid transparent;border-radius:var(--radius-sm);padding:0 .42rem}.section-checkbox-row.inline:hover{border-color:var(--surface-300);background:color-mix(in srgb,var(--bg-elevated) 70%,transparent)}.stale-banner,.youtube-capability-note{border-radius:var(--radius-md);padding:.56rem .62rem}.youtube-capability-note p{line-height:1.45}@media(max-width:1180px){.bpm-side-meta{margin-left:0}}button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline:none;box-shadow:var(--focus-ring)}button{transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .14s ease}button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:940px){.controls-section,.viz-section{border-radius:var(--radius-md)}.library-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}}.landing-feature-zone{margin-top:2.8rem;margin-bottom:3.3rem}.landing-feature-card:nth-child(1),.landing-feature-card:nth-child(2),.landing-feature-card:nth-child(3),.landing-feature-card:nth-child(4){transform:none}.upload-section .library-shell.compact{width:100%;max-width:980px;margin-left:auto;margin-right:auto}.section-nudge-controls .nudge-btn:active{transform:translateY(1px);background:#9d8ec73d}.section-nudge-controls .nudge-btn:focus-visible{box-shadow:0 0 0 2px #9d8ec740}.icon-btn.subtle.danger{color:#e39ca6;border-color:#e39ca659}.shared-bpm-shell,.shared-key-shell{width:auto;flex:1}.shared-bpm-stepper{flex:0 0 auto}.shared-bpm-value{max-width:4.6rem;min-width:3.8rem}.sync-start-editor{display:flex;align-items:flex-end;gap:.5rem}.sync-start-editor label{max-width:140px}.sync-start-editor input{width:100%}.sync-start-actions{display:flex;align-items:center;gap:.3rem;padding-bottom:.08rem}.sync-start-actions .inline-icon-btn{width:1.95rem;height:1.95rem}.playback-key-row{gap:.22rem}.playback-key-row .shared-key-input{flex:0 1 280px}.key-section .key-label{width:100%}.transpose-controls{gap:0}.transpose-btn{border-radius:0}.transpose-btn:first-child{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.transpose-btn:last-child{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.confidence-badge.compact{padding:.16rem .38rem;border-radius:999px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;gap:.2rem}.confidence-badge.compact .material-symbols-outlined{font-size:.82rem}.timeline-actions .icon-btn.subtle{width:2rem;height:2rem}.beat-header h1{color:var(--accent-primary)}.beat-header h1:before{content:"🌙 ";font-size:.95em}@media(max-width:940px){.sync-start-editor{flex-wrap:wrap}.sync-start-editor label{max-width:100%;flex:1;min-width:140px}}.tempo-sync-group{border:1px solid var(--surface-300);border-radius:var(--radius-md);padding:.5rem .55rem .4rem;display:grid;gap:.48rem}.tempo-sync-group .bpm-section{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;border-bottom:1px solid var(--surface-300);padding-bottom:.45rem}.tempo-sync-group .sync-start-editor{padding-top:.02rem}.shared-bpm-dropdown-anchor{position:relative}.shared-bpm-dropdown{position:absolute;top:calc(100% + .28rem);left:0;z-index:45;min-width:11rem;max-width:14rem;border:1px solid var(--surface-300);border-radius:.5rem;background:color-mix(in srgb,var(--bg-elevated) 93%,black);box-shadow:var(--elev-2);overflow:hidden}.shared-bpm-dropdown-trigger{width:100%;border:0;border-bottom:1px solid var(--surface-300);background:transparent;color:var(--text-muted);padding:.26rem .45rem;font-size:.65rem;display:flex;align-items:center;justify-content:space-between;letter-spacing:.01em}.shared-bpm-dropdown-trigger .material-symbols-outlined{font-size:1rem}.shared-key-steps{display:flex;align-items:center;border-left:1px solid var(--border-subtle)}.shared-key-step-btn{width:2.05rem;height:calc(var(--key-shell-height, 2.375rem) - .1rem);border:0;background:color-mix(in srgb,var(--bg-elevated) 65%,transparent);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center}.shared-key-step-btn+.shared-key-step-btn{border-left:1px solid var(--border-subtle)}.shared-key-step-btn .material-symbols-outlined{font-size:1rem}.shared-key-step-btn:hover{color:var(--text-primary);background:var(--bg-elevated)}.transpose-editor-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.transpose-stepper-shell{display:flex;align-items:stretch;border:1px solid var(--border-subtle);border-radius:.55rem;overflow:hidden;background:var(--bg-input);min-height:2.15rem;width:-moz-fit-content;width:fit-content}.transpose-number-input{width:4rem;border:0;border-right:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);font-size:1rem;font-weight:600;text-align:center}.transpose-number-input:focus{outline:none}.transpose-stepper-shell .inline-icon-btn{border:0;border-left:1px solid var(--border-subtle);border-radius:0;width:2.1rem;height:2.1rem}.playback-key-chip{font-size:.72rem;color:var(--text-secondary);border:1px solid var(--surface-300);border-radius:999px;padding:.22rem .48rem;white-space:nowrap}.transport-controls-sticky{position:static;top:auto;z-index:auto;backdrop-filter:none;order:2}.video-container,.beat-viz-container{order:1}.playback-bar-wrapper{order:3;margin-top:.15rem}.sidebar-column{display:flex;flex-direction:column;gap:.75rem}.sidebar-library{background:var(--bg-card);border:1px solid var(--surface-300);border-radius:var(--radius-lg);padding:.75rem;min-width:0;overflow:hidden}.sidebar-library .library-grid{max-height:300px;overflow-y:auto;overflow-x:hidden;padding-right:.12rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-content:start}.sidebar-library .library-card{min-width:0;width:100%}.sidebar-library .library-thumb{aspect-ratio:16 / 9;flex-shrink:0;overflow:hidden;position:relative}.sidebar-library .library-thumb img,.sidebar-library .library-thumb video{position:absolute;inset:0;width:100%!important;height:100%!important;-o-object-fit:cover;object-fit:cover}.library-card-title-input{font-size:.76rem;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--accent-primary);border-radius:.25rem;padding:.15rem .3rem;width:100%;min-width:0;outline:none;font-family:inherit}@media(max-width:980px){.sidebar-library .library-grid{max-height:240px}}.lane-stack{position:relative;display:grid;gap:.3rem;margin-top:.2rem}.lane-row{display:grid;grid-template-columns:var(--lane-label-width) minmax(0,1fr);gap:var(--lane-gap);align-items:start}.lane-label-cell{display:grid;min-height:1.75rem;align-content:stretch}.lane-label-cell.generated{align-content:start;padding-top:.1rem}.lane-label-top{display:flex;align-items:stretch;gap:.22rem;min-height:1.75rem}.lane-label-text{font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-weight:600}.lane-info-icon{font-size:.9rem;color:var(--text-muted)}.lane-label-actions{display:flex;align-items:center;gap:.25rem}.lane-menu-shell{position:relative;margin-left:auto}.lane-menu-trigger{width:1.6rem;height:1.6rem;border:0;border-radius:.34rem;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;opacity:.72}.lane-menu-trigger:hover{background:transparent;color:var(--text-secondary);opacity:1}.lane-menu-paper{border:1px solid var(--border-subtle);border-radius:.44rem!important;background:var(--bg-card)!important;box-shadow:var(--elev-2)!important}.lane-menu-trigger .material-symbols-outlined{font-size:1rem}.lane-menu-item{border:0;border-radius:.3rem;background:transparent;color:var(--text-secondary);min-height:1.95rem;padding:0 .42rem;display:flex;align-items:center;gap:.28rem;font-size:.72rem}.lane-menu-item:hover{background:var(--bg-elevated);color:var(--text-primary)}.lane-menu-item.danger:hover{color:#efb0b9}.lane-create-btn{justify-self:stretch;width:100%;margin-left:0;border:1px dashed var(--border-subtle);border-radius:.36rem;background:transparent;color:var(--text-muted);min-height:1.9rem;padding:0 .5rem;display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;cursor:pointer}.lane-row-create .lane-track-create{visibility:hidden}.lane-create-btn:hover{border-color:var(--accent-primary);color:var(--text-primary);background:color-mix(in srgb,var(--bg-elevated) 70%,transparent)}.lane-action-btn{width:1.7rem;height:1.7rem;border:1px solid var(--border-subtle);border-radius:.35rem;background:var(--bg-elevated);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center}.lane-action-btn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.lane-action-btn.danger:hover{border-color:#e39ca680;color:#efb0b9}.lane-action-btn .material-symbols-outlined{font-size:1rem}.lane-name-input{width:100%;min-height:1.75rem;border:1px solid var(--border-subtle);border-radius:.35rem;background:var(--bg-input);color:var(--text-primary);padding:0 .4rem;font-size:.72rem;font-weight:600;margin-right:.12rem}.lane-track-cell{position:relative}.lane-track-cell.section-labels-row{margin-top:0;height:1.75rem}.lane-playhead-line{position:absolute;top:-.22rem;bottom:-.1rem;width:1px;background:#ececf6b3;transform:translate(-50%);pointer-events:none;z-index:11}.lane-playhead-track-overlay{position:absolute;top:0;bottom:0;left:calc(var(--lane-label-width) + var(--lane-gap));width:calc(100% - (var(--lane-label-width) + var(--lane-gap)));pointer-events:none}.lane-playhead-cap{position:absolute;top:-.34rem;left:50%;width:0;height:0;border-left:.34rem solid transparent;border-right:.34rem solid transparent;border-top:.42rem solid rgba(236,236,246,.9);transform:translate(-50%)}.mixer-anchor{margin-left:auto;flex-shrink:0}.transport-controls .transport-row{min-width:0;margin-right:0}.mixer-popover{background:var(--bg-elevated, #1a1a2e)!important;border:1px solid var(--border-subtle, rgba(255, 255, 255, .1))!important;border-radius:var(--radius-md)!important;box-shadow:0 8px 32px #0006!important;overflow:visible!important}.mixer-popover .volume-mixer.vertical{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;min-width:260px;background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;overflow:visible}.mixer-popover .mixer-row{min-width:0;display:grid;grid-template-columns:5.5rem minmax(0,1fr) 2.5rem;align-items:center;gap:.5rem;padding:0;margin:0;border:0}.mixer-popover .mixer-label{display:flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:500;color:var(--text-secondary, #aaa);white-space:nowrap}.mixer-popover .mixer-label .material-symbols-outlined{font-size:1rem;opacity:.7;color:var(--text-secondary, #aaa)}.mixer-popover .mixer-slider{width:100%}.mixer-popover .mixer-slider.MuiSlider-root{color:var(--accent-primary);height:3px;padding:6px 0}.mixer-popover .mixer-slider .MuiSlider-track{border:0;background:var(--accent-primary)}.mixer-popover .mixer-slider .MuiSlider-rail{opacity:1;background:#ffffff59}.mixer-popover .mixer-slider .MuiSlider-thumb{width:.85rem;height:.85rem;background:color-mix(in srgb,var(--accent-primary) 88%,white);border:2px solid color-mix(in srgb,var(--accent-primary) 76%,white);box-shadow:none}.mixer-popover .mixer-value{min-width:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-secondary, #aaa);font-size:.7rem}.tempo-sync-group.light{border:0;background:transparent;border-radius:0;padding:0}.tempo-sync-group.light .bpm-section{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;border-bottom:0;padding-bottom:.24rem}.tempo-sync-group.light .sync-start-editor{border-bottom:1px solid var(--surface-300);padding-bottom:.46rem}.bpm-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.12rem;gap:.4rem}.bpm-label{font-size:.64rem;color:var(--text-muted);letter-spacing:.01em}.bpm-row-meta{display:flex;align-items:center;gap:.35rem}.bpm-control-row{display:flex;align-items:center;gap:.36rem}.bpm-control-row .shared-bpm-input{max-width:20.4rem}.bpm-control-row .bpm-side-meta,.bpm-control-row .time-sig{margin-left:0}.playback-speed-row{margin-top:.24rem;display:flex;flex-direction:column;align-items:flex-start;gap:.24rem;width:100%;margin-left:0!important;padding-left:0!important}.playback-speed-controls{display:flex;align-items:center;gap:.42rem;flex-wrap:wrap;justify-content:flex-start;width:100%;margin-left:0!important;padding-left:0!important;margin-inline-start:0!important;padding-inline-start:0!important;align-self:flex-start}.speed-control.sidebar{min-width:6.6rem;margin-left:0!important;margin-inline-start:0!important;inset-inline-start:0!important;align-self:flex-start}.playback-speed-controls .MuiFormControl-root,.playback-speed-controls .speed-control.sidebar.MuiFormControl-root{margin:0!important;margin-inline-start:0!important;align-self:flex-start}.playback-bpm-chip{min-height:2.15rem;font-size:.82rem}.key-label-row .confidence-badge.compact,.bpm-label-row .confidence-badge.compact{min-width:5.1rem;justify-content:center}.playback-key-chip{min-height:2.15rem;padding:.35rem .62rem;display:inline-flex;align-items:center;font-size:.84rem}.metronome-strip{border:1px solid var(--border-subtle);border-radius:.9rem;min-height:2.5rem;padding:.34rem .56rem;display:flex;align-items:center;justify-content:space-between;gap:.55rem}.metronome-strip.active{border-color:#8ec7a8b3;background:transparent}.metronome-strip-toggle{display:inline-flex;align-items:center;gap:.28rem}.metronome-toggle-tooltip-wrap{display:inline-flex}.toggle-btn.metronome-btn.icon-only{width:2rem;height:2rem;min-width:2rem;border-radius:.48rem;padding:0;justify-content:center}.toggle-btn.metronome-btn.icon-only .material-symbols-outlined{font-size:1rem}.metronome-strip-placeholder{font-size:.78rem;color:var(--text-muted)}.shared-bpm-shell{min-width:0}.shared-bpm-dropdown-trigger{justify-content:flex-start}.shared-bpm-dropdown-trigger .material-symbols-outlined{display:none}.controls-section{--beat-control-height: 2.15rem}.bpm-label,.key-label,.sync-start-label{font-size:.64rem;color:var(--text-muted);letter-spacing:.01em;text-transform:uppercase}.sync-start-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;-moz-column-gap:.4rem;column-gap:.4rem;row-gap:.28rem;align-items:end}.sync-start-label{grid-column:1 / -1}.sync-start-input{min-height:var(--beat-control-height);height:var(--beat-control-height);padding:.24rem .5rem;border:1px solid var(--border-subtle);border-radius:.45rem;background:var(--bg-input);color:var(--text-primary);font-size:.98rem;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.sync-start-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.sync-start-input::-webkit-outer-spin-button,.sync-start-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sync-start-actions{display:inline-flex;align-items:center;gap:.3rem}.sync-start-actions .inline-icon-btn{width:var(--beat-control-height);height:var(--beat-control-height)}.speed-control .MuiInputBase-root{min-height:var(--beat-control-height);border:1px solid var(--border-subtle);border-radius:.85rem;background:var(--bg-elevated);color:var(--text-secondary);font-size:.8rem}.speed-control.sidebar .MuiInputBase-root{border-radius:.55rem;border:0;box-shadow:none!important}.speed-control.sidebar .MuiOutlinedInput-notchedOutline{border:1px solid var(--border-subtle)!important}.speed-select .MuiSelect-select{padding:.3rem 1.45rem .3rem .62rem!important;text-align:left}.speed-menu-paper{background:var(--bg-card)!important;color:var(--text-primary)!important;border:1px solid var(--border-subtle);border-radius:.5rem!important;box-shadow:var(--elev-2)!important}.speed-menu-list{padding:.2rem!important}.speed-menu-paper .MuiMenuItem-root{min-height:2rem;border-radius:.35rem;color:var(--text-primary);font-size:.88rem}.speed-menu-paper .MuiMenuItem-root:hover{background:var(--bg-elevated)}.speed-menu-paper .MuiMenuItem-root.Mui-selected{background:color-mix(in srgb,var(--accent-primary) 22%,transparent)}.shared-bpm-shell,.shared-key-shell,.transpose-stepper-shell,.playback-key-chip{min-height:var(--beat-control-height)}.shared-bpm-rate-inline{display:inline-flex;align-items:stretch;min-height:100%}.shared-bpm-rate-btn.inline{min-width:2.3rem;min-height:100%;border:0;border-left:1px solid var(--border-subtle);border-radius:0;background:color-mix(in srgb,var(--bg-elevated) 65%,transparent);color:var(--text-secondary);font-weight:700;font-size:.95rem;padding:0 .4rem}.shared-bpm-rate-btn.inline:hover{color:var(--text-primary);background:var(--bg-elevated)}.playback-key-chip{border-radius:999px}.beat-app input,.beat-app select,.beat-app textarea{color:var(--text-primary)}.beat-app input::-moz-placeholder,.beat-app textarea::-moz-placeholder{color:var(--text-muted)}.beat-app input::placeholder,.beat-app textarea::placeholder{color:var(--text-muted)}.speed-control .MuiOutlinedInput-notchedOutline{border-color:var(--border-subtle)!important}.speed-control .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:var(--accent-primary)!important}.speed-control .MuiSelect-icon{color:var(--text-muted)}.section-hover-name-input .MuiInputBase-input{color:var(--text-primary)!important}.lane-menu-paper .MuiMenuItem-root{color:var(--text-primary)}@media(max-width:1180px){.transport-controls .volume-mixer.horizontal{min-width:0;width:100%;padding-top:.36rem;border-top:1px solid var(--border-subtle)}}@media(max-width:920px){.playback-bar-sections{--lane-label-width: 0px;--lane-gap: 0rem}.playback-bar-sections.has-lanes .playback-bar{margin-left:0;width:100%}.lane-row{grid-template-columns:1fr;gap:.24rem}}.field-label-inline{display:inline-flex;align-items:center;gap:.36rem;width:-moz-max-content;width:max-content}.bpm-label-row,.key-label-row{justify-content:flex-start}.bpm-label-row .confidence-badge.compact,.key-label-row .confidence-badge.compact{min-width:0;width:auto;padding-inline:.42rem;flex-shrink:0}.bpm-control-row .shared-bpm-input{flex:0 1 clamp(13.6rem,61%,20.2rem);min-width:14rem;max-width:20.4rem}.bpm-time-sig{margin-left:.2rem}.beat-app .shared-bpm-shell{padding-right:0;align-items:stretch;overflow:hidden}.shared-bpm-rate-inline{align-self:stretch}.shared-bpm-rate-btn.inline{height:100%;min-height:100%;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:500;color:color-mix(in srgb,var(--text-secondary) 76%,#94a3b8);border-left:0!important;border-radius:0!important}.shared-bpm-rate-btn.inline+.shared-bpm-rate-btn.inline:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:color-mix(in srgb,var(--border-subtle) 72%,transparent)}.shared-bpm-trailing-actions{border-left:1px solid color-mix(in srgb,var(--border-subtle) 72%,transparent)}.shared-bpm-trailing-actions .inline-icon-btn{border-left:0!important;border-radius:.45rem!important}.playback-key-chip.shifted{border-color:color-mix(in srgb,var(--accent-primary) 55%,var(--surface-300));color:var(--text-primary);background:color-mix(in srgb,var(--accent-primary) 16%,transparent)}.playback-chip-arrow{font-size:.95rem;margin-right:.18rem}.playback-chip-arrow.up{color:#8dbdff}.playback-chip-arrow.down{color:#e1a0a8}.playback-speed-controls .speed-control.sidebar{--playback-speed-field-width: 10.25rem;min-width:var(--playback-speed-field-width);width:var(--playback-speed-field-width);max-width:var(--playback-speed-field-width)}.playback-speed-controls .speed-control.sidebar,.playback-speed-controls .speed-control.sidebar.MuiFormControl-root{grid-column:1;justify-self:start;margin:0!important}.playback-speed-controls .playback-bpm-chip{grid-column:2;justify-self:start}.playback-speed-controls{--playback-speed-field-width: 10.25rem;display:grid!important;grid-template-columns:var(--playback-speed-field-width) max-content;align-items:stretch;justify-content:start;justify-items:start;-moz-column-gap:.42rem;column-gap:.42rem;row-gap:.24rem;width:100%;margin:0!important;padding:0!important}.playback-speed-controls .playback-key-chip{min-height:var(--beat-control-height)}.playback-speed-controls .speed-control.sidebar .MuiInputBase-root{border-width:0!important;box-shadow:none!important;width:100%;box-sizing:border-box}.lane-label-cell.generated{align-content:center;padding-top:0}.lane-menu-trigger,.lane-menu-trigger .material-symbols-outlined,.lane-menu-trigger.MuiIconButton-root{color:var(--text-muted)!important}.lane-row{grid-template-columns:minmax(88px,var(--lane-label-width)) minmax(0,1fr)}.shared-bpm-shell,.shared-key-shell,.transpose-stepper-shell,.sync-start-input,.playback-speed-controls .speed-control.sidebar .MuiInputBase-root,.playback-key-chip{min-height:var(--beat-control-height);height:var(--beat-control-height)}.beat-app .shared-bpm-stepper{padding-right:0}.beat-app .shared-bpm-rate-inline{padding-left:0}.beat-bpm-dropdown{width:auto!important;min-width:18rem!important;max-width:min(24rem,calc(100vw - 20px))!important;background:var(--bg-card)!important;border:1px solid var(--border-subtle)!important;border-radius:.5rem!important;box-shadow:var(--elev-2)!important}.beat-bpm-dropdown .shared-bpm-dropdown-list{padding:.72rem .76rem 1rem!important}.beat-bpm-dropdown .shared-bpm-slider-wrap{padding:.7rem .8rem .78rem;border-color:color-mix(in srgb,var(--border-subtle) 65%,transparent);background:color-mix(in srgb,var(--bg-elevated) 70%,transparent)}.beat-bpm-dropdown .shared-bpm-milestones{color:color-mix(in srgb,var(--text-muted) 92%,#94a3b8)}.beat-bpm-dropdown .shared-bpm-presets-section{border-top-color:color-mix(in srgb,var(--border-subtle) 48%,transparent)}.beat-bpm-dropdown .shared-bpm-presets-row{padding-top:.12rem;gap:.52rem}.beat-bpm-dropdown .shared-bpm-preset-chip{border-color:color-mix(in srgb,var(--border-subtle) 52%,transparent);background:color-mix(in srgb,var(--bg-elevated) 84%,transparent);color:var(--text-secondary);box-shadow:none}.beat-bpm-dropdown .shared-bpm-preset-chip:hover{border-color:color-mix(in srgb,var(--accent-primary) 45%,var(--border-subtle));background:color-mix(in srgb,var(--accent-primary) 14%,var(--bg-elevated))}.beat-bpm-dropdown .shared-bpm-preset-chip.active{border-color:color-mix(in srgb,var(--accent-primary) 55%,var(--border-subtle));background:color-mix(in srgb,var(--accent-primary) 24%,var(--bg-elevated));color:var(--text-primary)}.beat-bpm-dropdown .shared-bpm-presets-label{color:color-mix(in srgb,var(--text-muted) 94%,#a5b4cf)}.beat-bpm-slider{--app-slider-track: var(--accent-primary);--app-slider-rail: color-mix(in srgb, var(--border-subtle) 74%, transparent);--app-slider-mark: color-mix(in srgb, var(--border-subtle) 70%, transparent)}.beat-app .shared-bpm-trailing-actions{padding-left:0;padding-right:0;border-left:1px solid var(--border-subtle);min-width:2.4rem;width:2.4rem;flex:0 0 2.4rem;overflow:hidden;position:relative}.beat-app .shared-bpm-trailing-actions>*{display:inline-flex;align-self:stretch;width:100%;min-width:0;flex:1 1 auto}.beat-app .shared-bpm-trailing-actions .bpm-reset-tooltip-anchor{display:inline-flex;align-self:stretch;width:100%;min-width:0;flex:1 1 auto}.beat-app .shared-bpm-trailing-actions .inline-icon-btn{width:100%;min-width:100%;flex:1 1 auto;max-width:100%;box-sizing:border-box;height:100%;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;border-left:0!important;border-radius:0!important;border:0;background:color-mix(in srgb,var(--bg-elevated) 65%,transparent);color:var(--text-secondary)}.beat-app .shared-bpm-trailing-actions .bpm-reset-btn{width:100%;min-width:100%;background:color-mix(in srgb,var(--bg-elevated) 78%,transparent)}.beat-app .shared-bpm-trailing-actions .bpm-reset-btn .material-symbols-outlined{font-size:1rem;width:1.15rem;height:1.15rem;line-height:1.15rem;display:inline-flex;align-items:center;justify-content:center;color:inherit}.beat-app .shared-bpm-trailing-actions .inline-icon-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.beat-app .shared-bpm-trailing-actions .inline-icon-btn:disabled{opacity:1;color:var(--text-muted);background:color-mix(in srgb,var(--bg-elevated) 60%,transparent)}.beat-app .shared-bpm-rate-inline{padding-right:0}.section-hover-card{padding:.55rem .74rem}.section-hover-times{margin-top:.2rem}.section-hover-duration{margin-top:.25rem}.shared-export-popover-beat{background:var(--bg-elevated)!important;border:1px solid var(--border-subtle)!important;box-shadow:0 8px 32px #00000073!important}.shared-export-panel-beat{background:var(--bg-elevated);color:var(--text-primary)}.shared-export-panel-beat .shared-export-format-row{border-color:var(--border-subtle);background:var(--bg-card);color:var(--text-primary)}.shared-export-panel-beat .shared-export-format-row:hover:not(.disabled){border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 12%,var(--bg-card))}.shared-export-panel-beat .shared-export-format-row:has(input[type=radio]:checked):not(.disabled){border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 16%,var(--bg-card))}.shared-export-panel-beat .shared-export-row input,.shared-export-panel-beat .shared-export-row select{background:var(--bg-input);color:var(--text-primary);border-color:var(--border-subtle)}.shared-export-panel-beat .shared-export-preview{background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-card));color:var(--text-primary)}.shared-export-panel-beat .shared-export-action{background:var(--accent-primary)}.shared-export-panel-beat .shared-export-action:hover:not(:disabled){background:var(--accent-secondary)}.shared-export-panel-beat .shared-export-subtitle{color:var(--text-muted)}.shared-export-panel-beat .shared-export-stems{border-color:var(--border-subtle);background:var(--bg-card)}.shared-export-panel-beat .shared-export-stem-row{color:var(--text-primary)}.shared-export-panel-beat .shared-export-format-row input[type=radio]{accent-color:var(--accent-primary)}