:root{--bg-deep: #0a0c10;--bg-mid: #12151c;--bg-surface: #1a1f2b;--text: #e8ecf4;--text-muted: #8b95a8;--accent: #5eead4;--accent-dim: rgba(94, 234, 212, .15);--playhead: #fbbf24;--playhead-glow: rgba(251, 191, 36, .45);--bar-width: 140px;--bar-gap: 4px;--chart-gutter: 1rem;--app-max-height: 1028px;--controls-height: auto;--font-sans: "Outfit", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--section-v: #6366f1;--section-c: #ec4899;--section-b: #f59e0b;--section-i: #14b8a6;--section-o: #8b5cf6;--section-p: #64748b;--section-default: #475569;--border-subtle: rgba(255,255,255,.06);--surface-hover: rgba(255,255,255,.08);--border: rgba(255,255,255,.1);--border-strong: rgba(255,255,255,.12);--scrollbar-thumb: rgba(255,255,255,.15);--scrollbar-track: rgba(255,255,255,.2);--scrollbar-thumb-hover: rgba(255,255,255,.25);--beat-inactive: rgba(255,255,255,.22);--text-faint: rgba(255,255,255,.35);--text-secondary: rgba(255,255,255,.55);--text-bright: rgba(255,255,255,.9);--text-strong: rgba(255,255,255,.92);--surface-dim: rgba(255,255,255,.04);--overlay: rgba(10,12,16,.88);--card-bg: rgba(26,31,43,.92);--shadow: rgba(0,0,0,.45);--shadow-sm: rgba(0,0,0,.4);--shadow-popup: rgba(0,0,0,.5);--note-edit-bg: rgba(0,0,0,.2)}:root[data-theme=light]{--bg-deep: #f5f6f8;--bg-mid: #ebedf2;--bg-surface: #ffffff;--text: #1a1f2b;--text-muted: #5a6577;--accent: #0d9488;--accent-dim: rgba(13,148,136,.1);--playhead: #d97706;--playhead-glow: rgba(217,119,6,.3);--section-v: #4f46e5;--section-c: #db2777;--section-b: #d97706;--section-i: #0d9488;--section-o: #7c3aed;--section-p: #475569;--section-default: #64748b;--border-subtle: rgba(0,0,0,.06);--surface-hover: rgba(0,0,0,.05);--border: rgba(0,0,0,.1);--border-strong: rgba(0,0,0,.1);--scrollbar-thumb: rgba(0,0,0,.2);--scrollbar-track: rgba(0,0,0,.15);--scrollbar-thumb-hover: rgba(0,0,0,.35);--beat-inactive: rgba(0,0,0,.18);--text-faint: rgba(0,0,0,.3);--text-secondary: rgba(0,0,0,.5);--text-bright: rgba(0,0,0,.8);--text-strong: rgba(0,0,0,.85);--surface-dim: rgba(0,0,0,.03);--overlay: rgba(245,246,248,.92);--card-bg: rgba(255,255,255,.96);--shadow: rgba(0,0,0,.1);--shadow-sm: rgba(0,0,0,.08);--shadow-popup: rgba(0,0,0,.12);--note-edit-bg: rgba(0,0,0,.06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}*::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}*::-webkit-scrollbar-corner{background:transparent}html{font-size:clamp(1rem,calc(10px + .5vw),1.75rem)}html,body{width:100%;height:100%;overflow:hidden}body{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;font-family:var(--font-sans);color:var(--text);background:var(--bg-deep);-webkit-font-smoothing:antialiased}body.login-only{overflow:hidden}.session-loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.session-loading[hidden]{display:none!important}.session-loading-text{font-size:1.1rem;font-weight:600;color:var(--text)}.login-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse 120% 80% at 50% 100%,rgba(94,234,212,.12) 0%,transparent 55%),radial-gradient(ellipse 80% 50% at 20% 20%,rgba(99,102,241,.18) 0%,transparent 50%),var(--bg-deep)}.login-screen[hidden],#app-shell[hidden]{display:none!important}#app-shell{display:flex;flex-direction:column;align-self:stretch;justify-content:center;width:100%;max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;position:relative}.login-screen-card{width:min(420px,100%);padding:2.5rem 2rem;text-align:center;border:1px solid var(--border);border-radius:20px;background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 64px var(--shadow)}.login-screen-title{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;letter-spacing:-.02em}.login-screen-subtitle{margin-top:.75rem;color:var(--text-muted);font-size:1rem;line-height:1.5}.login-screen-divider{margin:1.25rem 0 1rem;color:var(--text-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.login-screen-divider:before,.login-screen-divider:after{content:"";display:inline-block;width:3rem;height:1px;margin:0 .75rem;vertical-align:middle;background:var(--border-strong)}.login-continue-btn{width:100%;justify-content:center}.login-screen-note{margin-top:1rem;color:var(--text-muted);font-size:.85rem;line-height:1.45}.login-screen-error{margin-top:1.25rem;color:#f87171;font-size:.9rem;line-height:1.45}.google-signin-slot{display:flex;justify-content:center;margin-top:1.75rem}.auth-bar{flex-shrink:0;padding:.6rem .75rem;border-top:1px solid var(--border-subtle);background:var(--bg-mid)}.left-nav.collapsed .auth-bar{opacity:0;pointer-events:none}.auth-user{display:flex;align-items:center;gap:.5rem;min-width:0}.auth-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.auth-avatar[hidden]{display:none}.auth-name{font-size:.78rem;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-user .btn--small{padding:.3rem .5rem;font-size:.7rem;flex-shrink:0}#metronome-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 140% 90% at 50% 100%,rgba(94,234,212,.14) 0%,transparent 60%),radial-gradient(ellipse 90% 60% at 15% 15%,rgba(99,102,241,.16) 0%,transparent 55%),radial-gradient(ellipse 90% 60% at 85% 25%,rgba(236,72,153,.12) 0%,transparent 55%),var(--bg-deep);transition:filter .06s ease-out,transform .06s ease-out;transform-origin:center center}body.beat-pulse #metronome-bg{filter:brightness(1.22) saturate(1.2);transform:scale(1.012)}body.bar-pulse #metronome-bg{filter:brightness(1.4) saturate(1.35);transform:scale(1.022)}.pulse-ring{position:absolute;top:50%;left:50%;width:55vmax;height:55vmax;border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none}.pulse-ring--beat{background:radial-gradient(circle,rgba(94,234,212,.55) 0%,rgba(94,234,212,.15) 40%,transparent 72%);box-shadow:0 0 80px #5eead440}.pulse-ring--bar{background:radial-gradient(circle,rgba(251,191,36,.65) 0%,rgba(251,191,36,.2) 35%,transparent 68%);box-shadow:0 0 100px #fbbf2459}.pulse-ring.animate-beat{animation:ring-beat .4s ease-out forwards}.pulse-ring.animate-bar{animation:ring-bar .65s ease-out forwards}@keyframes ring-beat{0%{transform:translate(-50%,-50%) scale(.35);opacity:.85}to{transform:translate(-50%,-50%) scale(1.35);opacity:0}}@keyframes ring-bar{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(1.65);opacity:0}}.app-layout{display:flex;flex:1;min-height:0;min-width:0;width:100%;max-height:var(--app-max-height);overflow:hidden;padding-left:240px;transition:padding-left .2s ease}.app-layout:has(.left-nav.collapsed){padding-left:0}.left-nav{position:fixed;top:0;left:0;bottom:0;z-index:10;display:flex;flex-direction:column;width:240px;background:var(--bg-mid);border-right:1px solid var(--border-subtle);overflow:hidden;transition:width .2s ease}.left-nav.collapsed{width:0;border-right:none}.left-nav-toggle{position:fixed;top:0;left:0;z-index:110;display:flex;align-items:center;justify-content:center;width:240px;height:3rem;padding-left:.75rem;justify-content:flex-start;border:none;border-radius:0;background:var(--bg-mid);color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s,width .2s ease}.left-nav.collapsed .left-nav-toggle{width:48px;background:var(--bg-deep)}.left-nav-toggle:hover{background:var(--border-subtle);color:var(--text)}.left-nav-content{display:flex;flex-direction:column;gap:1rem;padding:3.25rem .75rem .75rem;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}.left-nav.collapsed .left-nav-content{opacity:0;pointer-events:none}.left-nav-section{display:flex;flex-direction:column;gap:.25rem}.left-nav-heading-row{display:flex;align-items:center;justify-content:space-between;padding:0 .5rem}.left-nav-heading{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding:.25rem 0;margin:0;white-space:nowrap}.left-nav-add-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;border-radius:4px;background:transparent;color:var(--text-muted);font-size:.9rem;line-height:1;cursor:pointer;transition:background .12s,color .12s}.left-nav-add-btn:hover{background:var(--accent-dim);color:var(--accent)}.left-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.left-nav-list li{display:flex}.left-nav-list button{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;padding:.35rem .5rem;border:none;border-radius:6px;background:transparent;color:var(--text);font-family:var(--font-sans);font-size:.8rem;font-weight:500;cursor:pointer;overflow:hidden;transition:background .12s}.left-nav-list button:hover{background:var(--border-subtle)}.left-nav-list button.active{background:var(--accent-dim);color:var(--accent)}.nav-item-art{width:32px;height:32px;border-radius:4px;object-fit:cover;flex-shrink:0}.nav-item-art[hidden]{display:none}.nav-item-text{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}.nav-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;font-weight:600}.nav-item-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.65rem;color:var(--text-muted);font-weight:400}.nav-item-add-btn{display:none;align-items:center;justify-content:center;width:20px;height:20px;margin-left:auto;border:none;border-radius:4px;background:var(--surface-hover);color:var(--text-muted);font-size:1rem;line-height:1;cursor:pointer;flex-shrink:0;transition:background .12s,color .12s}.left-nav-list button:hover .nav-item-add-btn{display:flex}.nav-item-add-btn:hover{background:var(--accent-dim);color:var(--accent)}.left-nav-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem .5rem}.left-nav-empty p{margin:0;font-size:.75rem;color:var(--text-muted)}.left-nav-empty[hidden]{display:none}.playlist-nav-item{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;padding:.35rem .5rem;border:none;border-radius:6px;background:transparent;color:var(--text);font-family:var(--font-sans);font-size:.8rem;font-weight:500;cursor:pointer;overflow:hidden;transition:background .12s}.playlist-nav-item:hover{background:var(--border-subtle)}.playlist-nav-item .playlist-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-nav-item .playlist-count{font-size:.65rem;color:var(--text-muted);flex-shrink:0}.playlist-nav-item:hover .nav-item-add-btn{display:flex}.playlist-group{display:flex;flex-direction:column}.playlist-chevron{font-size:.6rem;color:var(--text-muted);transition:transform .15s;flex-shrink:0;width:12px;text-align:center}.playlist-group.expanded .playlist-chevron{transform:rotate(90deg)}.playlist-stacked-art{position:relative;width:28px;height:28px;flex-shrink:0}.playlist-stacked-art-img{position:absolute;width:20px;height:20px;border-radius:3px;object-fit:cover;border:1px solid var(--bg-mid)}.playlist-stacked-art-img:nth-child(1){top:0;left:0}.playlist-stacked-art-img:nth-child(2){top:4px;left:4px}.playlist-stacked-art-img:nth-child(3){top:8px;left:8px}.playlist-songs-list{list-style:none;margin:0;padding:.15rem 0 .25rem 1.5rem;display:none;flex-direction:column;gap:1px}.playlist-group.expanded .playlist-songs-list{display:flex}.playlist-popover{position:fixed;z-index:200;display:flex;flex-direction:column;gap:.25rem;padding:.5rem;min-width:160px;max-height:240px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-surface);box-shadow:0 8px 32px var(--shadow-popup);overflow-y:auto}.playlist-popover[hidden]{display:none}.playlist-popover-title{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:.1rem .35rem}.playlist-popover label{display:flex;align-items:center;gap:.4rem;padding:.3rem .35rem;border-radius:4px;font-size:.8rem;cursor:pointer;transition:background .1s}.playlist-popover label:hover{background:var(--border-subtle)}.playlist-popover input[type=checkbox]{accent-color:var(--accent)}.playlist-popover-action{width:100%;text-align:left;padding:.35rem .5rem;border:none;border-radius:4px;background:transparent;color:var(--text);font-family:var(--font-sans);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .1s}.playlist-popover-action:hover{background:var(--border-subtle)}.playlist-popover-action--danger{color:#fca5a5}.playlist-popover-action--danger:hover{background:#f871711f}.playlist-popover .playlist-popover-new{margin-top:.25rem;padding-top:.35rem;border-top:1px solid var(--surface-hover)}.playlist-popover .playlist-popover-new button{width:100%;text-align:left;padding:.3rem .35rem;border:none;border-radius:4px;background:transparent;color:var(--accent);font-family:var(--font-sans);font-size:.75rem;font-weight:600;cursor:pointer}.playlist-popover .playlist-popover-new button:hover{background:var(--accent-dim)}.app{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;overflow:hidden;isolation:isolate}.hero{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 2rem;border-bottom:1px solid var(--border-subtle);background:linear-gradient(to bottom,#0a0c10f2,#0a0c10d1);flex-shrink:0;overflow:hidden}.hero-art-wrap{width:120px;height:120px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--surface-dim);flex-shrink:1;box-shadow:0 8px 28px var(--shadow-sm)}.hero-art{width:100%;height:100%;object-fit:cover}.hero-copy{min-width:0;text-align:center}.hero-copy h1{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em;font-weight:700}.hero-copy p{margin-top:.3rem;color:var(--text-muted);font-size:clamp(1rem,2vw,1.5rem);font-weight:500}.controls{display:flex;flex-wrap:nowrap;align-items:end;gap:1rem;padding:.75rem 1.5rem;background:linear-gradient(to bottom,#0a0c10eb,#0a0c10bf);border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-shrink:0;justify-content:center}.controls>*{min-width:0}.controls-song-info{display:flex;align-items:flex-end;gap:1rem;justify-content:center;flex-wrap:nowrap;min-width:0}.controls-status{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;white-space:nowrap;min-width:0}.controls-status .position-slider{flex:1 1 120px;min-width:60px}.shared-song-banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem 1rem;padding:.65rem 1.25rem;background:#fbbf241f;border-bottom:1px solid rgba(251,191,36,.25);flex-shrink:0}.shared-song-banner[hidden]{display:none!important}.shared-song-banner-text{margin:0;font-size:.9rem;color:#fde68a;text-align:center;line-height:1.45}.shared-song-banner--error{background:#f871711a;border-bottom-color:#f8717140}.shared-song-banner--error .shared-song-banner-text{color:#fecaca}.anonymous-warning-banner{display:flex;align-items:center;justify-content:center;padding:.55rem 1.25rem;background:#6366f11f;border-bottom:1px solid rgba(99,102,241,.22);flex-shrink:0}.anonymous-warning-banner[hidden]{display:none!important}.anonymous-warning-banner p{margin:0;font-size:.85rem;color:#c7d2fe;text-align:center;line-height:1.45}.btn--small{padding:.5rem .75rem;font-size:.8rem}.btn--danger:hover:not(:disabled){background:#f8717126;border-color:#f8717166;color:#fca5a5}.input-group{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:100px;max-width:400px}.input-group--compact{flex:0 0 auto;min-width:auto;max-width:none}.input-group label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.input-group input[type=text],.input-group input[type=number],.input-group select{font-family:var(--font-mono);font-size:1rem;padding:.55rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}.input-group input:focus,.input-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input-group input:disabled,.input-group select:disabled{opacity:.5;cursor:not-allowed}.tempo-row{display:flex;align-items:center;gap:.5rem}#time-sig-select{min-width:5.5rem}.bar-ts-popover{position:fixed;z-index:100;display:flex;flex-direction:column;gap:.35rem;padding:.5rem;min-width:8rem;max-height:min(60vh,280px);border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-surface);box-shadow:0 8px 32px var(--shadow-popup)}.bar-ts-popover-title{flex-shrink:0;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:.15rem .35rem 0}.bar-ts-popover-list{display:flex;flex-direction:column;gap:.25rem;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--scrollbar-track) transparent}.bar-ts-popover-list::-webkit-scrollbar{width:5px}.bar-ts-popover-list::-webkit-scrollbar-thumb{background:var(--scrollbar-track);border-radius:3px}.bar-ts-popover button{font-family:var(--font-mono);font-size:.85rem;font-weight:600;padding:.4rem .5rem;border:1px solid var(--surface-hover);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.bar-ts-popover button:hover{background:#5eead41f;border-color:#5eead459;color:var(--accent)}.bar-ts-popover button.is-default{font-family:var(--font-sans);font-size:.78rem;font-weight:500;color:var(--text-muted)}.input-group input[type=number]{width:5rem;text-align:center}.unit{font-size:.85rem;color:var(--text-muted);font-weight:500}.transport{display:flex;gap:.4rem;flex-shrink:0}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;font-family:var(--font-sans);font-size:.9rem;font-weight:600;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-surface);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--scrollbar-track)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,#2dd4bf,#14b8a6);border-color:transparent;color:#0a0c10}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#5eead4,#2dd4bf)}.status-item{display:flex;flex-direction:column;gap:.15rem;text-align:right}.status-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.status-value{font-family:var(--font-mono);font-size:.95rem;font-weight:600}.section-badge{display:inline-block;padding:.1rem .4rem;border-radius:4px;background:var(--accent-dim);color:var(--accent);align-self:flex-end}.position-slider{width:100%;padding:.25rem 0;cursor:pointer;touch-action:none}.position-slider-track{position:relative;width:100%;height:6px;border-radius:3px;background:var(--surface-hover);overflow:visible}.position-slider-fill{position:absolute;top:0;left:0;height:100%;border-radius:3px;background:var(--accent);opacity:.6;pointer-events:none;width:0%;transition:width .05s linear}.position-slider-handle{position:absolute;top:50%;left:0%;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-deep);transform:translate(-50%,-50%);box-shadow:0 0 6px #5eead466;transition:left .05s linear,transform .12s;pointer-events:none}.position-slider:hover .position-slider-handle,.position-slider.dragging .position-slider-handle{transform:translate(-50%,-50%) scale(1.3)}.position-slider.dragging .position-slider-fill{opacity:.85}.controls-status .btn{flex-shrink:0}.chart-area{flex:1 1 0;display:flex;flex-direction:column;min-height:0;min-width:0;width:100%;max-width:100%;padding:0;position:relative;overflow:hidden}.count-in-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:#0a0c10b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;opacity:0;transition:opacity .2s ease}.count-in-overlay.visible{opacity:1}.count-in-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted)}.count-in-beat{font-family:var(--font-mono);font-size:clamp(5rem,14vw,10rem);font-weight:700;line-height:1;color:var(--accent);text-shadow:0 0 60px rgba(94,234,212,.4);transform:scale(1);transition:transform .08s ease-out}.count-in-beat.pulse{transform:scale(1.12)}.chart-scroll{position:relative;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;-webkit-overflow-scrolling:touch}.chart-track{display:flex;align-items:stretch;width:max-content;height:100%;padding-inline:var(--chart-gutter);gap:0;overflow:visible}.chart-scroll::-webkit-scrollbar{height:6px}.chart-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.section-block{display:flex;flex-direction:column;flex-shrink:0;margin-right:var(--bar-gap);align-items:stretch;overflow:visible}.section-header{align-self:stretch;width:100%;margin-bottom:.25rem;border-radius:4px 4px 0 0;color:#fff;overflow:visible}.section-label{position:sticky;left:0;z-index:8;align-self:flex-start;width:max-content;max-width:100%;flex-shrink:0;display:flex;flex-direction:column;gap:.1rem;font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.5rem .85rem;border-radius:4px 4px 0 0;text-align:left;opacity:.95;cursor:default}.section-title{pointer-events:none}.section-note{display:block;font-size:.85rem;font-weight:500;text-transform:none;letter-spacing:.02em;line-height:1.3;min-height:1em;max-width:28rem;padding:.05rem .15rem;border-radius:3px;outline:none;color:var(--text-secondary);cursor:text;transition:background .15s,color .15s;text-align:left;white-space:pre-wrap;word-break:break-word}.section-note:empty:before{content:attr(data-placeholder);color:var(--text-faint);font-style:italic;pointer-events:none}.section-note:hover,.section-note:focus{background:var(--note-edit-bg);color:var(--text-bright)}.section-note.has-note{color:var(--text-strong);font-weight:600}.section-bars{display:flex;gap:var(--bar-gap);flex:1;align-items:stretch}.bar{position:relative;width:calc(var(--bar-width) * var(--bar-width-ratio, 1));flex-shrink:0;border-radius:6px;background:var(--bg-surface);border:2px solid var(--surface-hover);display:flex;flex-direction:column;overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}.bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,var(--section-color, var(--section-default)) 0%,transparent 85%);opacity:.35;pointer-events:none}.bar-number{position:relative;z-index:1;font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:var(--text-muted);padding:.3rem .35rem .15rem;text-align:center;border-bottom:1px solid var(--border-subtle);cursor:pointer;display:flex;flex-direction:column;gap:.05rem;line-height:1.2}.bar-number:hover{color:var(--accent);background:#5eead414}.bar-ts{font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:.02em}.bar--override{border-color:#5eead459}.bar--override .bar-number{color:var(--accent)}.bar-beats{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:.25rem 0;min-height:0}.beat{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;line-height:1;color:var(--beat-inactive);cursor:pointer;transition:color .08s,transform .08s,text-shadow .08s}.beat:hover{color:var(--text-secondary)}.beat.current{color:var(--playhead);font-size:1.4rem;font-weight:700;transform:scale(1.1);text-shadow:0 0 12px var(--playhead-glow)}.beat.downbeat.current{color:#fff;text-shadow:0 0 16px var(--playhead-glow)}.bar.active .beat:not(.current){color:var(--text-faint)}.bar.active{border-color:var(--playhead);box-shadow:0 0 24px var(--playhead-glow),inset 0 0 20px #fbbf241f;transform:scaleY(1.03);z-index:2}.bar.active .bar-number{color:var(--playhead);font-weight:700}.bar.passed{opacity:.55}.bar.passed .bar-number,.bar.passed .beat{opacity:.6}.section-divider{width:2px;flex-shrink:0;align-self:stretch;background:var(--border-strong);margin:.75rem 5px 0;border-radius:1px}.chart-area .playhead{position:absolute;top:0;bottom:0;left:0;width:2px;padding:0 10px;margin-left:-10px;box-sizing:content-box;background:var(--playhead);background-clip:content-box;pointer-events:auto;cursor:grab;z-index:15;opacity:0;transition:opacity .2s;touch-action:none;will-change:left}.chart-area .playhead.dragging{cursor:grabbing}.chart-area .playhead.visible{opacity:1}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;padding:.5rem 1.5rem .65rem;border-top:1px solid var(--border-subtle);background:#0a0c1099;flex-shrink:0}.legend-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-muted)}.legend-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}.legend-name{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--text)}.parse-error{color:#f87171;font-size:.72rem}:root[data-theme=light] .session-loading{background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}:root[data-theme=light] .login-screen{background:radial-gradient(ellipse 120% 80% at 50% 100%,rgba(13,148,136,.08) 0%,transparent 55%),radial-gradient(ellipse 80% 50% at 20% 20%,rgba(79,70,229,.1) 0%,transparent 50%),var(--bg-deep)}:root[data-theme=light] .login-screen-card{border-color:var(--border);box-shadow:0 24px 64px var(--shadow)}:root[data-theme=light] .hero{background:linear-gradient(to bottom,#f5f6f8fa,#f5f6f8eb)}:root[data-theme=light] .controls{background:linear-gradient(to bottom,#f5f6f8f5,#f5f6f8e0)}:root[data-theme=light] .legend{background:#f5f6f8d9}:root[data-theme=light] .count-in-overlay{background:#f5f6f8e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:root[data-theme=light] #metronome-bg{background:radial-gradient(ellipse 140% 90% at 50% 100%,rgba(13,148,136,.06) 0%,transparent 60%),radial-gradient(ellipse 90% 60% at 15% 15%,rgba(79,70,229,.08) 0%,transparent 55%),radial-gradient(ellipse 90% 60% at 85% 25%,rgba(219,39,119,.06) 0%,transparent 55%),var(--bg-deep)}:root[data-theme=light] .pulse-ring--beat{background:radial-gradient(circle,rgba(13,148,136,.3) 0%,rgba(13,148,136,.08) 40%,transparent 72%);box-shadow:0 0 80px #0d94881f}:root[data-theme=light] .pulse-ring--bar{background:radial-gradient(circle,rgba(217,119,6,.35) 0%,rgba(217,119,6,.1) 35%,transparent 68%);box-shadow:0 0 100px #d9770626}:root[data-theme=light] .btn--primary{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff}:root[data-theme=light] .btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#2dd4bf,#14b8a6)}:root[data-theme=light] .beat.downbeat.current{color:var(--playhead);text-shadow:none}:root[data-theme=light] .count-in-beat{text-shadow:none}:root[data-theme=light] .position-slider-handle{border-color:var(--bg-surface);box-shadow:0 0 6px #0d94884d}:root[data-theme=light] .bar.active{box-shadow:0 0 24px #d9770633,inset 0 0 20px #d977060f}:root[data-theme=light] .shared-song-banner{background:#fbbf241a;border-bottom-color:#fbbf244d}:root[data-theme=light] .shared-song-banner-text{color:#92400e}:root[data-theme=light] .shared-song-banner--error{background:#ef444414;border-bottom-color:#ef444433}:root[data-theme=light] .shared-song-banner--error .shared-song-banner-text{color:#b91c1c}:root[data-theme=light] .anonymous-warning-banner{background:#4f46e50f;border-bottom-color:#4f46e526}:root[data-theme=light] .anonymous-warning-banner p{color:#3730a3}:root[data-theme=light] .login-screen-error{color:#dc2626}:root[data-theme=light] .parse-error{color:#dc2626}:root[data-theme=light] .playlist-popover-action--danger{color:#dc2626}:root[data-theme=light] .playlist-popover-action--danger:hover{background:#ef444414}:root[data-theme=light] .btn--danger:hover:not(:disabled){background:#ef444414;border-color:#ef44444d;color:#dc2626}.theme-switcher{position:fixed;top:.5rem;right:.75rem;z-index:120;display:flex;align-items:center;gap:.4rem}.theme-switcher-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);flex-shrink:0}.theme-select{width:100%;font-family:var(--font-sans);font-size:.72rem;padding:.3rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-surface);color:var(--text-muted);cursor:pointer;outline:none;transition:border-color .15s}.theme-select:focus{border-color:var(--accent)}@media(min-width:2560px){:root{--bar-width: 170px}.controls{padding:1.5rem 4rem;gap:3rem}.legend{padding:.75rem 4rem 1rem;gap:.75rem 1.5rem}.legend-item{font-size:.85rem}.legend-name{font-size:.95rem}.legend-swatch{width:16px;height:16px}}@media(max-width:1600px){.controls{flex-direction:column;align-items:stretch;gap:.5rem;padding:.75rem 1rem}.controls-song-info{justify-content:center;flex-wrap:wrap}.controls-status{min-width:auto;justify-content:center;flex-wrap:wrap}}