:root{color-scheme:dark;font-family:JetBrains Mono,Cascadia Code,Fira Code,IBM Plex Mono,monospace;font-synthesis:none;text-rendering:geometricPrecision;--bg: #03070b;--panel: rgba(6, 15, 21, .88);--panel-strong: rgba(8, 22, 30, .96);--line: rgba(63, 245, 255, .42);--line-soft: rgba(63, 245, 255, .18);--accent: #37f3ff;--accent-2: #8af7d3;--warn: #ffb454;--danger: #ff5c7a;--text: #defbff;--muted: #729aa3;--shadow: 0 0 22px rgba(55, 243, 255, .13)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 20% 20%,rgba(55,243,255,.08),transparent 24rem),radial-gradient(circle at 80% 15%,rgba(138,247,211,.05),transparent 22rem),linear-gradient(135deg,rgba(55,243,255,.035) 1px,transparent 1px),linear-gradient(#03070b,#010306 72%);background-size:auto,auto,26px 26px,auto;color:var(--text)}button,input,textarea{font:inherit}button,.file-button{align-items:center;background:#37f3ff0f;border:1px solid rgba(55,243,255,.45);border-radius:4px;color:var(--text);cursor:pointer;display:inline-flex;gap:.5rem;justify-content:center;min-height:2.35rem;padding:.62rem .8rem;text-transform:uppercase;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}button:hover,.file-button:hover{background:#37f3ff1f;border-color:#37f3ffdb;box-shadow:0 0 16px #37f3ff2e}button:active,.file-button:active{animation:btn-click-glow .5s ease-out}@keyframes btn-click-glow{0%{box-shadow:0 0 #37f3ff80;border-color:#37f3ffdb}30%{box-shadow:0 0 18px 4px #37f3ff59;border-color:#8af7d3e6}to{box-shadow:0 0 #37f3ff00;border-color:#37f3ff73}}input,textarea{background:#02080cd1;border:1px solid rgba(55,243,255,.28);border-radius:4px;color:var(--text);outline:none}input:focus,textarea:focus{border-color:#37f3ffcc;box-shadow:0 0 0 2px #37f3ff14}textarea{min-height:6.6rem;padding:.65rem;resize:vertical}.deck{height:100vh;max-height:100vh;overflow:hidden;padding:1rem;position:relative;display:flex;flex-direction:column}.scanlines{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025),rgba(255,255,255,.025) 1px,transparent 1px,transparent 5px);inset:0;mix-blend-mode:screen;opacity:.35;pointer-events:none;position:fixed;z-index:4}.topbar{align-items:center;border:1px solid var(--line);background:#040b10d1;box-shadow:var(--shadow);display:flex;justify-content:space-between;min-height:3.9rem;padding:.62rem .9rem;position:relative;z-index:2}.brand,.topbar__status,.topbar__status span{align-items:center;display:flex}.brand{gap:.8rem}.brand--button{background:transparent;border:0;box-shadow:none;justify-content:flex-start;min-height:0;padding:0;text-align:left;text-transform:none}.brand--button:hover{background:transparent;border-color:transparent;box-shadow:none}.brand__mark{align-items:center;border:1px solid rgba(55,243,255,.7);display:grid;height:2.45rem;justify-items:center;place-items:center;width:2.45rem}.brand strong{display:block;font-size:1.06rem;letter-spacing:.08em;text-transform:uppercase}.brand span,.topbar__status span{color:var(--muted);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}.topbar__status{gap:.75rem}.topbar__status span{border-left:1px solid var(--line-soft);gap:.4rem;padding-left:.75rem}.warning-band{background:#ffb4541a;border:1px solid rgba(255,180,84,.42);color:var(--warn);font-size:.78rem;letter-spacing:.04em;margin-top:.85rem;padding:.7rem .85rem}.deck__grid{display:grid;gap:.5rem;grid-template-columns:minmax(14rem,.78fr) minmax(20rem,2fr) minmax(16rem,1fr);min-height:0;padding:.45rem 0;flex:1;overflow:hidden}.left-rail,.right-rail,.main-stage{display:flex;flex-direction:column;gap:.5rem;min-width:0;overflow:hidden}.left-rail>.panel:last-child,.right-rail>.panel:last-child{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow),inset 0 0 20px #37f3ff0b;min-width:0;min-height:0;padding:.5rem;position:relative}.panel:before,.panel:after{border-color:var(--accent);border-style:solid;content:"";height:.56rem;opacity:.82;position:absolute;width:.56rem}.panel:before{border-width:1px 0 0 1px;left:-1px;top:-1px}.panel:after{border-width:0 1px 1px 0;bottom:-1px;right:-1px}.panel__header{align-items:center;display:flex;gap:.75rem;margin-bottom:.4rem}.panel__title{align-items:center;color:var(--accent);display:inline-flex;flex:0 0 auto;font-size:.72rem;gap:.42rem;letter-spacing:.1em;text-transform:uppercase}.panel__rail{background:linear-gradient(90deg,var(--line),transparent);height:1px;width:100%}.metrics-grid{display:grid;gap:.45rem;grid-template-columns:repeat(2,minmax(0,1fr))}.metrics-grid--wide{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{background:#37f3ff0b;border:1px solid rgba(55,243,255,.15);min-height:2.5rem;padding:.35rem .48rem}.metric span{color:var(--muted);display:block;font-size:.66rem;letter-spacing:.08em;margin-bottom:.24rem;text-transform:uppercase}.metric strong{display:block;font-size:.8rem;line-height:1.25;overflow-wrap:anywhere}.metric--ok strong{color:var(--accent-2)}.metric--warn strong{color:var(--warn)}.identity-block{border:1px solid rgba(55,243,255,.14);margin-bottom:.45rem;padding:.5rem}.identity-block strong,.identity-block span{display:block;overflow-wrap:anywhere}.identity-block strong{margin-bottom:.24rem}.identity-block span{color:var(--muted);font-size:.68rem;line-height:1.2}.sync-meter{align-items:center;display:flex;gap:.9rem}.sync-meter__ring{align-items:center;aspect-ratio:1;border:1px solid rgba(55,243,255,.65);border-radius:50%;display:grid;min-width:4.45rem;place-items:center;position:relative}.sync-meter__ring:after{border:1px dashed rgba(138,247,211,.48);border-radius:50%;content:"";inset:.38rem;position:absolute}.sync-meter__ring span{font-size:1.25rem;line-height:1}.sync-meter__ring small{color:var(--muted);font-size:.62rem}.status-pill{border:1px solid var(--line);display:inline-block;font-size:.7rem;letter-spacing:.1em;margin-bottom:.5rem;padding:.3rem .45rem}.status-pill--ok{color:var(--accent-2)}.status-pill--warn{color:var(--warn)}.sync-meter p{color:var(--muted);font-size:.78rem;margin:0}.player-panel{flex:1;min-height:0;max-height:none}.player-shell{align-items:center;background:linear-gradient(135deg,rgba(55,243,255,.08),transparent 38%),#010508e0;border:1px solid rgba(55,243,255,.2);display:flex;height:calc(100% - 1.6rem);justify-content:center;min-height:10rem;overflow:hidden;position:relative}.player-shell:after{background:linear-gradient(180deg,#000 0% 62%,#0000);content:"";height:clamp(3rem,12%,4.8rem);inset:0 0 auto;pointer-events:none;position:absolute;z-index:2}.player-shell video{background:#000;height:100%;object-fit:contain;width:100%}.artplayer-container{width:100%;height:100%}.audio-stage,.empty-player{align-items:center;color:var(--muted);display:flex;flex-direction:column;gap:.6rem;justify-content:center;min-height:8rem;padding:1rem;text-align:center;width:100%}.audio-stage strong,.empty-player strong{color:var(--text);font-size:1rem;letter-spacing:.05em;text-transform:uppercase}.audio-stage audio{width:min(38rem,100%)}.control-strip{align-items:center;background:var(--panel-strong);border:1px solid var(--line);display:grid;gap:.65rem;grid-template-columns:auto minmax(20rem,1fr) auto;padding:.55rem;position:relative;z-index:3}.file-button input{display:none}.url-loader{align-items:center;border:1px solid rgba(55,243,255,.22);display:flex;gap:.5rem;min-width:0;padding:.35rem}.url-loader input{border:0;flex:1;min-height:2rem;min-width:0;padding:0 .55rem}.url-loader button{min-height:2rem;padding:.35rem .7rem;white-space:nowrap}.share-flow{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:.55rem}.primary-action{background:#8af7d31a;border-color:#8af7d394;color:var(--accent-2)}.helper-copy{background:#37f3ff0b;border:1px solid rgba(55,243,255,.16);color:var(--muted);font-size:.76rem;line-height:1.45;margin-bottom:.55rem;padding:.58rem}.helper-copy strong{color:var(--text);display:block;font-size:.76rem;letter-spacing:.08em;margin-bottom:.35rem;text-transform:uppercase}.helper-copy p{margin:0}.helper-copy--warn{border-color:#ffb45466;color:var(--warn)}.relay-settings{border:1px solid rgba(55,243,255,.16);display:grid;gap:.45rem;margin-bottom:.55rem;padding:.58rem}.relay-settings__grid,.relay-settings__actions{display:grid;gap:.45rem;grid-template-columns:repeat(2,minmax(0,1fr))}.relay-settings__toggle{align-items:center;color:var(--muted);display:inline-flex;font-size:.72rem;gap:.45rem;letter-spacing:.06em;text-transform:uppercase}.relay-settings__toggle input{accent-color:var(--accent-2)}.relay-settings__actions button{min-height:2rem;padding:.4rem .55rem}.signal-box{color:var(--muted);display:grid;font-size:.7rem;gap:.45rem;letter-spacing:.08em;margin-top:.65rem;text-transform:uppercase}.signal-box--compact{margin-top:.55rem}.signal-box textarea{font-size:.68rem;letter-spacing:0;min-height:4.6rem;text-transform:none}.signal-box input{font-size:.72rem;letter-spacing:0;min-height:2.55rem;overflow-wrap:anywhere;padding:0 .65rem;text-transform:none}.bottom-console{display:grid;gap:.5rem;grid-template-columns:minmax(0,1.7fr) minmax(16rem,.8fr);flex-shrink:0;min-height:6.5rem;max-height:8rem;overflow:hidden;margin-top:.2rem}.bottom-console>.panel{overflow:hidden;display:flex;flex-direction:column;min-height:0}.log-list{display:flex;flex-direction:column-reverse;gap:.2rem;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}.log-entry{align-items:baseline;border-left:2px solid var(--line);display:grid;gap:.25rem;grid-template-columns:4rem 5rem minmax(0,1fr);padding:.15rem .4rem;font-size:.72rem;flex-shrink:0}.log-entry span{color:var(--muted);font-size:.68rem}.log-entry strong{color:var(--accent);font-size:.72rem;letter-spacing:.07em}.log-entry p{color:var(--text);font-size:.76rem;margin:0;overflow-wrap:anywhere}.log-entry--ok{border-color:var(--accent-2)}.log-entry--warn{border-color:var(--warn)}.log-entry--error{border-color:var(--danger)}@media(max-width:960px){.deck{height:auto;min-height:100vh;overflow:auto;padding:.5rem}.deck__grid{flex:none;overflow:visible;display:flex;flex-direction:column;gap:.5rem}.main-stage{order:1;overflow:visible}.right-rail{order:2;overflow:visible;display:flex;flex-direction:column;gap:.5rem}.left-rail{order:3;overflow:visible;display:flex;flex-direction:column;gap:.5rem}.left-rail>.panel:last-child,.right-rail>.panel:last-child{flex:none;overflow:visible}.bottom-console{grid-template-columns:1fr;max-height:none}.player-panel{min-height:auto}.player-shell{aspect-ratio:16 / 9;width:100%;height:auto;min-height:12rem}.artplayer-container{width:100%;height:100%}.log-list{max-height:20vh}.control-strip{grid-template-columns:1fr;gap:.4rem}.metrics-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{flex-wrap:wrap;gap:.5rem;min-height:auto;padding:.4rem .6rem}.topbar__status{flex-wrap:wrap;gap:.4rem;width:100%}.topbar__status span{border-left:0;padding-left:0;font-size:.62rem}.audio-stage,.empty-player{min-height:6rem;padding:.5rem}.audio-stage audio{width:100%}.log-entry{grid-template-columns:1fr 1fr}}.status-band{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-shrink:0;padding:.55rem 1rem;border-radius:4px;font-size:.78rem;letter-spacing:.04em;line-height:1.3;transition:all .2s ease-in-out}.status-band--info{background:#37f3ff14;border:1px solid rgba(55,243,255,.45);color:var(--text);box-shadow:0 0 15px #37f3ff0d}.status-band--warn{background:#ffb45414;border:1px solid rgba(255,180,84,.45);color:var(--warn);box-shadow:0 0 15px #ffb4540d}.status-band--success{background:#8af7d314;border:1px solid rgba(138,247,211,.45);color:var(--accent-2);box-shadow:0 0 15px #8af7d30d}.status-band__content{display:flex;align-items:flex-start;gap:.85rem;flex:1}.status-band__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.12rem}.status-band__icon--pulse{animation:rtc-pulse 2s infinite ease-in-out}.status-band__text-group{display:flex;flex-direction:column;gap:.25rem}.status-band__title{font-weight:700;text-transform:uppercase;letter-spacing:.08em}.status-band__desc{opacity:.9;font-size:.76rem}.status-band__actions{display:flex;gap:.6rem;flex-shrink:0;align-items:center}.status-band__btn{font-size:.72rem;min-height:2rem;padding:.4rem .75rem}@keyframes rtc-pulse{0%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}to{opacity:.6;transform:scale(.96)}}@media(max-width:760px){.status-band{flex-direction:column;align-items:stretch;padding:.8rem}.status-band__actions{justify-content:flex-start;margin-top:.4rem}}.status-band--error{background:#ff5c7a14;border:1px solid rgba(255,92,122,.45);color:var(--danger);box-shadow:0 0 15px #ff5c7a0d}.brand__badge{display:inline-flex;align-items:center;background:#8af7d31a;border:1px solid rgba(138,247,211,.55);color:var(--accent-2);font-size:.62rem;font-weight:700;padding:.1rem .35rem;border-radius:2px;letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem}.panel__btn{background:#37f3ff0d;border:1px solid rgba(55,243,255,.25);color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;font-size:.65rem;font-weight:700;padding:.15rem .45rem;border-radius:2px;text-transform:uppercase;letter-spacing:.06em;transition:all .2s ease-in-out;white-space:nowrap}.panel__btn:hover{background:#37f3ff1f;border-color:var(--accent);box-shadow:0 0 8px #37f3ff40}.connected-peers{margin-top:1.2rem;border-top:1px solid var(--line-soft);padding-top:1rem}.connected-peers .section-title{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.6rem}.empty-peers{font-size:.72rem;color:var(--muted);font-style:italic;padding:.4rem 0}.peer-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.peer-item{display:flex;align-items:center;gap:.6rem;background:#37f3ff08;border:1px solid var(--line-soft);padding:.45rem .65rem;border-radius:3px;font-size:.72rem}.peer-status-dot{width:6px;height:6px;background:var(--accent-2);border-radius:50%;box-shadow:0 0 8px var(--accent-2);animation:rtc-pulse 2s infinite ease-in-out}.peer-id{font-weight:700;color:var(--accent)}.peer-label{margin-left:auto;color:var(--muted);font-size:.65rem}.stream-progress-wrap{padding:.6rem .75rem;margin:0 0 .5rem;background:#37f3ff0a;border:1px solid var(--line-soft);border-radius:6px;display:flex;flex-direction:column;gap:.45rem}.stream-progress-label{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--muted)}.stream-progress-label strong{color:var(--accent)}.stream-progress-bar{width:100%;height:4px;background:#37f3ff1f;border-radius:2px;overflow:hidden}.stream-progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 8px var(--accent);border-radius:2px;transition:width .3s ease;will-change:width}.room-code-display{background:#37f3ff0a;border:1px solid rgba(55,243,255,.2);border-radius:4px;display:grid;gap:.55rem;margin-bottom:.6rem;padding:.75rem;box-shadow:inset 0 0 8px #37f3ff05}.room-code-display .section-title{align-items:center;color:var(--muted);display:inline-flex;font-size:.68rem;font-weight:700;gap:.35rem;letter-spacing:.1em;text-transform:uppercase}.room-code-badge{align-items:center;background:#37f3ff0f;border:1px solid rgba(55,243,255,.32);border-radius:4px;display:flex;justify-content:center;padding:.6rem 0;box-shadow:0 0 10px #37f3ff0d}.room-code-digits{color:var(--accent);font-size:2.4rem;font-weight:700;letter-spacing:.35em;text-shadow:0 0 18px rgba(55,243,255,.45)}.room-code-copy{font-size:.72rem;min-height:2rem;padding:.38rem .7rem;width:100%}.room-code-hint{color:var(--muted);font-size:.7rem;line-height:1.4;margin:0}.join-by-code{background:#8af7d30a;border:1px solid rgba(138,247,211,.16);border-radius:4px;display:grid;gap:.55rem;margin-bottom:.6rem;padding:.75rem;box-shadow:inset 0 0 10px #8af7d305}.join-by-code .section-title{align-items:center;color:var(--accent-2);display:inline-flex;font-size:.68rem;font-weight:700;gap:.35rem;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 8px rgba(138,247,211,.3)}.code-input-row{display:grid;gap:.5rem;grid-template-columns:1fr auto;align-items:center}.room-code-input{font-size:1.35rem!important;font-weight:700;letter-spacing:.3em;min-height:2.8rem!important;padding:0 .75rem!important;text-align:center;border:1px solid rgba(138,247,211,.28)!important;background:#02080cd1!important;color:var(--accent-2)!important;border-radius:4px;transition:all .15s ease;min-width:0;width:100%}.room-code-input:focus{border-color:#8af7d3cc!important;box-shadow:0 0 0 2px #8af7d314,0 0 12px #8af7d326!important}.room-code-input::placeholder{color:#8af7d32e!important;letter-spacing:.2em}.code-input-row button{min-height:2.8rem;padding:0 1.25rem;white-space:nowrap;background:#8af7d30f;border:1px solid rgba(138,247,211,.35);color:var(--accent-2);border-radius:4px;text-transform:uppercase;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .12s ease;cursor:pointer}.code-input-row button:not(:disabled):hover{background:#8af7d326;border-color:#8af7d3d9;box-shadow:0 0 14px #8af7d340}.code-input-row button:not(:disabled):active{transform:scale(.96)}.code-input-row button:disabled{opacity:.35;background:#02080c99;border-color:#8af7d31f;color:#8af7d359;cursor:not-allowed;box-shadow:none}.qr-toggle-row{display:flex;margin-bottom:.55rem}.qr-toggle{width:100%;font-size:.72rem;min-height:2.1rem;padding:.4rem .7rem;background:#37f3ff0a;border-color:#37f3ff40;color:var(--accent)}.qr-toggle:hover{background:#37f3ff1a;border-color:#37f3ff99}.qr-overlay{position:fixed;inset:0;background:#010306d9;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.qr-modal{background:var(--panel-strong);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow),0 0 40px #37f3ff1a;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:320px;width:90%}.qr-modal__header{display:flex;align-items:center;justify-content:space-between;width:100%}.qr-modal__title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.qr-modal__close{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0;min-height:0;display:flex}.qr-modal__close:hover{color:var(--text);background:transparent;border-color:transparent;box-shadow:none}.qr-canvas{border:1px solid rgba(55,243,255,.15);border-radius:4px;padding:.5rem;background:#03070b}.qr-modal__hint{color:var(--muted);font-size:.72rem;text-align:center;margin:0;line-height:1.4}