:root{color-scheme:dark;--bg:#10191e;--panel:#1c2b32;--orange:#ee962d;--light:#eff4ed;--muted:#9eadb4;--steel:#768991;--green:#7acc91}*{box-sizing:border-box}body{margin:0;padding:42px 20px;background:radial-gradient(ellipse at 15% 15%,#293b40 0,transparent 55%),radial-gradient(ellipse at 85% 75%,#32241b 0,transparent 50%),#0b1217;color:var(--light);font:15px/1.6 system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.frame{max-width:1040px;margin:auto;border:3px solid var(--orange);outline:3px solid #080c0e;box-shadow:inset 0 0 0 2px #63431f,0 20px 75px #0009;background:linear-gradient(135deg,#1d2c32,#152127);padding:0 32px;position:relative}.frame:before,.frame:after{content:"";position:absolute;width:15px;height:15px;background:linear-gradient(135deg,#d4dcd7,#657981);border:3px solid #172127;box-shadow:0 0 0 3px var(--orange);top:-5px}.frame:before{left:-5px}.frame:after{right:-5px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid #65778055;padding:24px 0}.brand{font-size:25px;font-weight:950;letter-spacing:3px;text-shadow:2px 3px #000}.brand span{display:inline-block;color:var(--orange);font-size:13px;letter-spacing:4px;margin-left:8px}.connection{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}#lamp{width:8px;height:8px;border-radius:50%;background:#818a90}#lamp.on{background:var(--green);box-shadow:0 0 10px #7acc9155}.welcome{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:32px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--orange);font-weight:700;margin:0 0 6px}h1{font-size:30px;line-height:1.2;margin:0 0 12px;letter-spacing:-.5px}h2{font-size:19px;line-height:1.3;margin:0}p{margin:0}.welcome>div>p:last-child{color:var(--muted);max-width:560px}.columns{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.panel{border:2px solid var(--steel);box-shadow:inset 0 0 0 3px #0c171e,0 3px 0 #0006;background:linear-gradient(150deg,#24363c,#17272d);padding:25px;min-width:0}.section-heading{display:flex;align-items:center;gap:13px;margin-bottom:22px}.symbol{display:grid;place-items:center;width:45px;height:45px;flex:none;background:#142127;border:1px solid #5e727a;box-shadow:inset 0 0 0 3px #0b151a;color:var(--orange);font-size:26px}.badge{font-size:10px;padding:3px 7px;border:1px solid #647981;color:var(--muted);margin-left:auto;font-weight:700}.badge.on{color:var(--green);border-color:#7acc9166}.tracks{min-height:112px;border-block:1px solid #65778044;padding:15px 0;display:flex;flex-direction:column;gap:10px}.track{display:flex;align-items:center;gap:12px}.track-mark{font-size:20px;color:var(--orange)}.track-title{font-size:14px;font-weight:650;overflow-wrap:anywhere}.track-channel{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}.empty,.muted{color:var(--muted);font-size:13px}.sliders{display:grid;gap:8px;margin:20px 0}.sliders label{display:flex;justify-content:space-between;font-size:12px;font-weight:600}.sliders output{color:var(--orange);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--orange);margin:0 0 10px;cursor:pointer}button{font:inherit;font-size:12px;font-weight:750;letter-spacing:.2px;padding:11px 16px;cursor:pointer;min-height:43px;border-radius:2px;transition:filter .15s,background .15s}button:hover{filter:brightness(1.15)}button:focus-visible,input:focus-visible{outline:3px solid #fbd1a0;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.primary{background:linear-gradient(#f6ad49,#df8324);color:#172127;border:1px solid #ffce79;box-shadow:0 3px 0 #6f3e13}.secondary{background:#20323b;border:1px solid #687d86;color:#d6e0e4;box-shadow:0 2px 0 #0c171e}.secondary[aria-pressed=true]{border-color:var(--orange);color:#ffd099}.voice-buttons{display:flex;gap:10px;margin-top:14px}.voice-buttons button{flex:1}.voice-panel .sliders{margin-bottom:10px}.channel-label{font-size:10px;letter-spacing:1.6px;color:var(--muted);border-top:1px solid #65778044;padding-top:15px}#peers{list-style:none;margin:10px 0 0;padding:0}#peers li{padding:6px 0;font-size:13px;display:flex;justify-content:space-between;gap:12px}#peers .peer-status{color:var(--green);font-size:11px}footer{padding:22px 0;display:flex;justify-content:space-between;gap:10px;color:#8a9ba2;font-size:11px}#notice{border-left:3px solid var(--orange);padding:12px 16px;background:#3c3022;color:#ffdbad;font-size:13px;margin-bottom:22px}[hidden]{display:none!important}@media(max-width:780px){body{padding:18px 12px}.frame{padding:0 18px}.columns{grid-template-columns:1fr}.welcome{align-items:flex-start}.welcome .primary{min-width:125px}header{flex-wrap:wrap}.panel{padding:20px}.brand{font-size:22px}h1{font-size:26px}footer{flex-direction:column}}@media(max-width:480px){.welcome{flex-direction:column;gap:18px}.welcome .primary{width:100%}.voice-buttons{flex-wrap:wrap}.voice-buttons button{min-width:110px}}
select{width:100%;padding:11px;border:1px solid #67767b;background:#172329;color:#f5f5ed;border-radius:4px;font:inherit}