: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: 216px;--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}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}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:#0a0c10e0;-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;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 rgba(255,255,255,.1);border-radius:20px;background:#1a1f2beb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 64px #00000073}.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:#ffffff1f}.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{position:fixed;top:1rem;right:1.5rem;z-index:100;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;max-width:min(420px,calc(100vw - 2rem))}.auth-user{display:flex;align-items:center;gap:.65rem;padding:.35rem .5rem .35rem .35rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#1a1f2beb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}.auth-avatar[hidden]{display:none}.auth-name{font-size:.9rem;font-weight:600;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#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{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;max-height:var(--app-max-height);overflow:hidden}.hero{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 2rem;min-height:.1vh;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(to bottom,#0a0c10f2,#0a0c10d1);flex-shrink:1;overflow:hidden}.hero-art-wrap{width:120px;height:120px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;flex-shrink:1;box-shadow:0 8px 28px #0006}.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:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;padding:.75rem 1.5rem;background:linear-gradient(to bottom,#0a0c10eb,#0a0c10bf);border-bottom:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-shrink:0}.controls-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.controls-actions select{font-family:var(--font-sans);font-size:.85rem;padding:.45rem .6rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:var(--bg-surface);color:var(--text);outline:none;min-width:120px;max-width:180px}.controls-song-info{display:flex;align-items:flex-end;gap:1rem;justify-content:center;flex-wrap:wrap}.controls-status{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;min-width:220px}.status-readouts{display:flex;align-items:center;gap:1.25rem}.status-readouts .position-slider{flex:1;min-width:100px}.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 rgba(255,255,255,.1);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 rgba(255,255,255,.12);border-radius:8px;background:var(--bg-surface);box-shadow:0 8px 32px #00000080}.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:rgba(255,255,255,.2) transparent}.bar-ts-popover-list::-webkit-scrollbar{width:5px}.bar-ts-popover-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.bar-ts-popover button{font-family:var(--font-mono);font-size:.85rem;font-weight:600;padding:.4rem .5rem;border:1px solid rgba(255,255,255,.08);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 rgba(255,255,255,.12);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:#ffffff14;border-color:#fff3}.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:#ffffff14;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 .transport{display:flex;gap:.4rem}.chart-area{flex:1 0 50vh;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:rgba(255,255,255,.15) 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:#ffffff26;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:.5rem;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:.15rem;font-size:2.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:1.05rem 1.5rem;border-radius:4px 4px 0 0;text-align:left;opacity:.95;cursor:default}.section-title{pointer-events:none}.section-note{display:block;font-size:1.86rem;font-weight:500;text-transform:none;letter-spacing:.02em;line-height:1.3;min-height:1em;max-width:28rem;padding:.1rem .2rem;border-radius:3px;outline:none;color:#ffffff8c;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:#ffffff59;font-style:italic;pointer-events:none}.section-note:hover,.section-note:focus{background:#0003;color:#ffffffe6}.section-note.has-note{color:#ffffffeb;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 rgba(255,255,255,.08);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:2.25rem;font-weight:600;color:var(--text-muted);padding:.5rem .5rem .25rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;flex-direction:column;gap:.1rem;line-height:1.2}.bar-number:hover{color:var(--accent);background:#5eead414}.bar-ts{font-size:1.35rem;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:2.25rem;font-weight:600;line-height:1;color:#ffffff38;cursor:pointer;transition:color .08s,transform .08s,text-shadow .08s}.beat:hover{color:#ffffff8c}.beat.current{color:var(--playhead);font-size:3rem;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:#ffffff59}.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:#ffffff1f;margin:1.5rem 8px 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:1.25rem 2rem;padding:1rem 2.5rem 1.25rem;border-top:1px solid rgba(255,255,255,.06);background:#0a0c1099;flex-shrink:0}.legend-item{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;color:var(--text-muted)}.legend-swatch{width:28px;height:28px;border-radius:6px;flex-shrink:0}.legend-name{font-family:var(--font-mono);font-size:1.65rem;font-weight:700;color:var(--text)}.parse-error{color:#f87171;font-size:.72rem}@media(min-width:2560px){:root{--bar-width: 264px}.controls{padding:1.5rem 4rem;gap:3rem}.legend{padding:1.25rem 4rem 1.75rem;gap:1.5rem 2.5rem}.legend-item{font-size:1.75rem}.legend-name{font-size:1.9rem}.legend-swatch{width:32px;height:32px}}@media(max-width:1200px){.controls{grid-template-columns:1fr;gap:.75rem;padding:.75rem 1rem}.controls-actions,.controls-song-info{justify-content:center}.controls-status{align-items:stretch;min-width:auto}.status-readouts{justify-content:center}}