@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{--ink:#f4f7ff;--ink-soft:#a7b3cc;--ink-faint:#74809a;--surface:#060914c7;--surface-solid:#050812f2;--line:#a8bef029;--line-strong:#a8bef052;--cyan:#00e5ff;--magenta:#f05;--amber:#ffd166;--radius:16px;--blur:blur(22px) saturate(140%);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--ink);font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{background:#01020a;min-width:320px;margin:0;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}.stage-canvas{z-index:1;width:100%;height:100%;display:block;position:fixed;inset:0}.concert-fallback{z-index:1;text-align:center;color:#86fad8;letter-spacing:.16em;text-transform:uppercase;background:radial-gradient(at 50% 62%,#1b2450,#04060f 62%);place-items:center;padding:2rem;font:.72rem DM Mono,monospace;display:grid;position:fixed;inset:0}.stage-ui{z-index:2;pointer-events:none;min-height:100svh;position:relative}.stage-ui>*{pointer-events:auto}.topbar{z-index:10;background:linear-gradient(#02040cb8,#0000);grid-template-columns:1fr auto 1fr;align-items:center;padding:1.1rem clamp(1rem,3vw,2.6rem);display:grid;position:fixed;inset:0 0 auto}.brand{letter-spacing:.16em;align-items:center;gap:.62rem;font:500 .68rem DM Mono,monospace;display:inline-flex}.brand-mark{border:1px solid var(--cyan);width:16px;height:16px;position:relative;transform:rotate(45deg)}.brand-mark:after{content:"";background:var(--magenta);position:absolute;inset:4px}.state-chip{border:1px solid var(--line);background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-radius:999px;align-items:center;gap:.5rem;padding:.36rem .8rem;font:.62rem DM Mono,monospace;display:inline-flex}.state-chip i{background:currentColor;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px}.state-chip[data-state=blackout] i{color:#4a5570;box-shadow:none}.state-chip[data-state=intro] i{color:#8a6bff}.state-chip[data-state=verse] i{color:var(--magenta)}.state-chip[data-state=build] i{color:#ff7a3d}.state-chip[data-state=chorus] i{color:var(--cyan)}.state-chip[data-state=climax] i{color:var(--amber);animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.topbar-actions{justify-self:end;gap:.45rem;display:flex}.pill-button,.icon-button,.ghost-button{border:1px solid var(--line);color:var(--ink);background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:border-color .18s,background .18s,transform .18s,color .18s}.pill-button:hover,.icon-button:hover,.ghost-button:hover{border-color:var(--line-strong);background:#121c34e6;transform:translateY(-1px)}.pill-button{letter-spacing:.02em;border-radius:999px;padding:.5rem .86rem;font-size:.7rem}.icon-button{border-radius:50%;place-items:center;width:34px;height:34px;padding:7px;display:grid}.icon-button.ghost{background:0 0;border-color:#0000}.icon-button svg,.primary-button svg,.ghost-button svg,.play-button svg{width:100%;height:100%}.primary-button,.ghost-button{border-radius:10px;align-items:center;gap:.55rem;min-height:46px;padding:.7rem 1.1rem;font-size:.78rem;font-weight:700;display:inline-flex}.primary-button{color:#041014;background:linear-gradient(135deg, var(--cyan), #7af7d2);border:0;transition:transform .18s,box-shadow .18s;box-shadow:0 14px 34px #00e5ff38}.primary-button:hover{transform:translateY(-2px);box-shadow:0 18px 44px #00e5ff4d}.primary-button svg,.ghost-button svg{flex:none;width:17px;height:17px}.welcome{z-index:5;width:min(640px,100vw - 2.2rem);position:fixed;top:50%;left:clamp(1.1rem,7vw,7rem);transform:translateY(-48%)}.eyebrow{color:var(--cyan);letter-spacing:.2em;text-transform:uppercase;margin:0 0 1rem;font:.64rem DM Mono,monospace}.welcome h1{letter-spacing:-.055em;margin:0;font-size:clamp(2.9rem,6.6vw,6.2rem);font-weight:800;line-height:.92}.welcome h1 em{color:#a58cff;font-style:normal;font-weight:400}.welcome-copy{max-width:30rem;color:var(--ink-soft);margin:1.5rem 0 1.8rem;font-size:clamp(.86rem,1.15vw,1rem);line-height:1.72}.welcome-actions{flex-wrap:wrap;gap:.6rem;display:flex}.supported{color:var(--ink-faint);letter-spacing:.14em;margin:1rem 0 0;font:.58rem DM Mono,monospace}.panel{z-index:14;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-solid);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);position:fixed;box-shadow:0 30px 80px #0000008c}.panel-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem;display:flex}.panel-head h2{margin:0;font-size:.86rem;font-weight:800}.panel-head-actions{align-items:center;gap:.3rem;display:flex}.text-button{border:1px solid var(--line);color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;background:0 0;border-radius:999px;padding:.3rem .6rem;font:.62rem DM Mono,monospace;transition:color .18s,border-color .18s}.text-button:hover{color:var(--ink);border-color:var(--line-strong)}.panel-copy{color:var(--ink-soft);margin:0 0 .95rem;font-size:.72rem;line-height:1.6}.source-menu{width:min(320px,100vw - 2rem);padding:.4rem;top:4.3rem;right:clamp(1rem,3vw,2.6rem)}.source-menu button{text-align:left;background:0 0;border:0;border-radius:10px;grid-template-columns:22px 1fr;align-items:center;gap:.7rem;width:100%;padding:.72rem .7rem;display:grid}.source-menu button:hover{background:#00e5ff1a}.source-menu svg{width:18px;height:18px;color:var(--cyan)}.source-menu strong{font-size:.78rem;display:block}.source-menu small{color:var(--ink-faint);margin-top:.1rem;font-size:.64rem;display:block}.youtube-panel{width:min(460px,100vw - 2rem);padding:1.15rem;top:50%;left:50%;transform:translate(-50%,-50%)}#youtube-form{gap:.5rem;display:flex}#youtube-form input{border:1px solid var(--line);background:#02050ee6;border-radius:10px;flex:1;min-width:0;padding:.7rem .8rem;font-size:.76rem}#youtube-form .primary-button{min-height:0;padding-inline:1rem}.bridge-status{color:var(--ink-faint);margin:.8rem 0 0;font:.62rem/1.5 DM Mono,monospace}.bridge-status[data-tone=ok]{color:#6ef2c4}.bridge-status[data-tone=warn]{color:var(--amber)}.fetch-progress{gap:.4rem;margin-top:.85rem;display:grid}.progress-track{background:#96aad229;border-radius:999px;height:4px;overflow:hidden}.progress-track i{background:linear-gradient(90deg, var(--cyan), var(--magenta));width:0;height:100%;transition:width .25s ease-out;display:block}.fetch-progress span,#analysis-label{color:var(--ink-faint);letter-spacing:.06em;font:.6rem DM Mono,monospace}.settings{width:min(310px,100vw - 2rem);padding:1.05rem;top:4.3rem;right:clamp(1rem,3vw,2.6rem)}.settings label{color:var(--ink-soft);font-size:.7rem;display:block}.range-row{margin-top:.95rem}.range-row:first-of-type{margin-top:0}.range-row output{float:right;color:var(--cyan);font-family:DM Mono,monospace}.range-row small{color:var(--ink-faint);margin-top:.28rem;font-size:.58rem;display:block}.settings input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer;margin-top:.6rem}.select-row,.switch-row{justify-content:space-between;align-items:center;gap:1rem;margin-top:.95rem;display:flex!important}.select-row select{border:1px solid var(--line);background:#080d1c;border-radius:8px;max-width:120px;padding:.36rem .44rem;font-size:.68rem}.switch-row strong{color:var(--ink);font-size:.71rem;display:block}.switch-row small{max-width:12rem;color:var(--ink-faint);margin-top:.14rem;font-size:.6rem;line-height:1.45;display:block}.switch-row input{accent-color:var(--cyan);width:17px;height:17px}.shortcut-list{border-top:1px solid var(--line);color:var(--ink-faint);margin:1.1rem 0 0;padding-top:.85rem;font:.58rem/1.75 DM Mono,monospace}.hud{z-index:8;opacity:.55;gap:.9rem;transition:opacity .3s;display:grid;position:fixed;top:4.6rem;left:clamp(1rem,3vw,2.6rem)}.stage-ui.dock-awake .hud{opacity:1}.hud-cell{gap:.08rem;display:grid}.hud-cell span{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font:.54rem DM Mono,monospace}.hud-cell strong{letter-spacing:-.05em;font:700 1.5rem/1 DM Mono,monospace}.hud-cell small{color:var(--cyan);letter-spacing:.06em;font:.56rem DM Mono,monospace}.dock{z-index:11;border:1px solid var(--line);background:var(--surface);width:min(1240px,100vw - 2rem);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);opacity:0;border-radius:18px;grid-template-columns:minmax(160px,1fr) auto minmax(240px,2fr) auto auto;align-items:center;gap:1.1rem;padding:.7rem .95rem;transition:transform .45s cubic-bezier(.2,.85,.2,1),opacity .3s;display:grid;position:fixed;bottom:1.1rem;left:50%;transform:translate(-50%,140%);box-shadow:0 26px 70px #00000080}.dock[data-active=true]{opacity:1;transform:translate(-50%)}.stage-ui.is-playing:not(.dock-awake) .dock{opacity:.3}.stage-ui.is-playing .dock:hover{opacity:1}.dock-track{align-items:center;gap:.7rem;min-width:0;display:flex}.track-glyph{background:linear-gradient(145deg, var(--cyan), #8a6bff 55%, var(--magenta));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 0 12px #00e5ff4d);flex:none;width:30px;height:30px}.track-glyph[data-video=true]{clip-path:none;border-radius:5px}.track-text{min-width:0}.track-text p{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.77rem;font-weight:700;overflow:hidden}.track-text span{color:var(--ink-faint);text-overflow:ellipsis;white-space:nowrap;margin-top:.1rem;font-size:.63rem;display:block;overflow:hidden}.dock-transport{align-items:center;gap:.35rem;display:flex}.play-button{color:#041014;background:#eef5ff;border:0;border-radius:50%;flex:none;width:40px;height:40px;padding:11px;transition:transform .18s,background .18s}.play-button:hover:not(:disabled){background:var(--cyan);transform:scale(1.06)}.play-button:disabled{opacity:.4;cursor:not-allowed}.dock-timeline{min-width:0}.timeline{position:relative}.timeline-canvas{cursor:pointer;background:#040812b8;border-radius:7px;width:100%;height:38px;display:block}.timeline-hover{border:1px solid var(--line);white-space:nowrap;pointer-events:none;background:#0b1224;border-radius:6px;padding:.22rem .44rem;font:.58rem DM Mono,monospace;position:absolute;bottom:calc(100% + 6px);transform:translate(-50%)}.time-row{color:var(--ink-faint);justify-content:space-between;gap:.6rem;margin-top:.2rem;font:.57rem DM Mono,monospace;display:flex}.analysis-note{color:var(--ink-faint);opacity:.75}.dock-live{align-items:center;gap:.5rem;display:flex}.bpm-readout{align-items:baseline;gap:.24rem;min-width:62px;display:flex}.bpm-readout strong{letter-spacing:-.07em;font:700 1.24rem DM Mono,monospace}.bpm-readout span{color:var(--cyan);font:.53rem DM Mono,monospace}.section-chip{border:1px solid var(--line);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:.32rem .6rem;font:.58rem DM Mono,monospace}.section-chip[data-kind=verse]{color:#ff6f9c;border-color:#f056}.section-chip[data-kind=chorus]{color:var(--cyan);border-color:#00e5ff6b}.section-chip[data-kind=build]{color:#ffa06b;border-color:#ff7a3d6b}.section-chip[data-kind=climax]{color:var(--amber);border-color:#ffd16680}.dock-tools{align-items:center;gap:.4rem;display:flex}.volume-control{align-items:center;gap:.15rem;width:106px;display:flex}.volume-control .icon-button{background:0 0;border:0;width:28px;height:28px}.volume-control input{width:100%;accent-color:var(--cyan);cursor:pointer}.analysis-strip{z-index:9;gap:.35rem;width:min(340px,100vw - 2rem);display:grid;position:fixed;bottom:6.4rem;left:50%;transform:translate(-50%)}.toast{z-index:20;border:1px solid var(--line);background:var(--surface-solid);max-width:min(30rem,100vw - 2rem);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);text-align:center;opacity:0;pointer-events:none;border-radius:999px;padding:.55rem .95rem;font-size:.7rem;transition:opacity .25s,transform .25s;position:fixed;top:4.4rem;left:50%;transform:translate(-50%,-8px)}.toast[data-visible=true]{opacity:1;transform:translate(-50%)}.toast[data-tone=error]{color:#ffb3ad;border-color:#ff786e73}.reward-backdrop{z-index:80;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto;background:#01020ac7;place-items:center;padding:1.25rem;display:grid;position:fixed;inset:0}.reward-backdrop[hidden]{display:none}.reward-dialog{width:min(460px,100%);padding:1.6rem;position:static}.reward-dialog .eyebrow{color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .65rem;font:.58rem DM Mono,monospace}.reward-dialog h2{max-width:22rem;margin:0;font-size:1.25rem;line-height:1.25}.reward-dialog>p:not(.eyebrow):not(.reward-track){color:var(--ink-soft);margin:.8rem 0 0;font-size:.74rem;line-height:1.65}.reward-track{border:1px solid var(--line);color:var(--ink);text-overflow:ellipsis;white-space:nowrap;border-radius:7px;margin:1rem 0 0;padding:.7rem .8rem;font:.68rem DM Mono,monospace;overflow:hidden}.reward-actions{gap:.65rem;margin-top:1.1rem;display:flex}.reward-actions .primary-button,.reward-actions .ghost-button{flex:1;justify-content:center}.stage-ui.reward-open>:not(.reward-backdrop){pointer-events:none}@media (max-width:1100px){.dock{grid-template-columns:1fr auto auto;grid-template-areas:"track transport tools""timeline timeline timeline""live live live"}.dock-track{grid-area:track}.dock-transport{grid-area:transport}.dock-tools{grid-area:tools}.dock-timeline{grid-area:timeline}.dock-live{grid-area:live;justify-content:space-between}}@media (max-width:720px){.topbar{grid-template-columns:1fr auto;padding-top:.9rem}.state-chip{display:none}.hud{grid-template-columns:repeat(3,auto);gap:.5rem;top:auto;bottom:12.5rem}.hud-cell strong{font-size:1.1rem}.welcome{top:46%;left:1.1rem}.welcome-actions{grid-template-columns:1fr 1fr;display:grid}.dock{gap:.65rem;padding:.65rem;bottom:.7rem}.volume-control{width:74px}.analysis-strip{bottom:11.2rem}}@media (max-width:480px){.reward-actions{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}