:root{--ring-a:#42f7ec;--ring-b:#9077ff;--ring-c:#fd64bc}body[data-ring=cyan]{--ring-a:#b1f8ff;--ring-b:#17b9ff;--ring-c:#32ffe1}body[data-ring=party]{--ring-a:#c7ff48;--ring-b:#ff489f;--ring-c:#7f5eff}body[data-ring=warm]{--ring-a:#fff1ac;--ring-b:#ffb633;--ring-c:#ff7134}.radioBadge{font:800 clamp(12px,1.15vw,20px)/1.2 system-ui;letter-spacing:.08em;display:flex;align-items:center;gap:9px}.radioBadge b{font:8px monospace;letter-spacing:.05em}.radioBadge #retroFullscreen{margin-left:auto;min-width:32px;min-height:28px;padding:2px 7px;color:#b9d5d9;background:#1d3038;border:1px solid #5b737d;border-radius:4px;font-size:18px}.radioBadge .powerLed{order:1}.radioBody{background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(125deg,#62696c,#252e33 30%,#121c22 65%,#4b555b);box-shadow:inset 0 3px 2px #d1d9de,inset 0 -7px 4px #080f15,0 0 0 2px #02090e,0 25px 75px #000c}.speaker{overflow:hidden;background:radial-gradient(circle,#040a0e 1px,transparent 1.6px) 0 0/4px 4px,linear-gradient(120deg,#34434a,#17262c);box-shadow:inset 0 0 25px #000c,inset 0 1px 1px #a4b3bc55}.woofer,.tweeter{position:relative;isolation:isolate}.woofer:after{content:'';position:absolute;inset:2%;border:3px solid transparent;border-radius:50%;background:conic-gradient(from 20deg,var(--ring-a),var(--ring-b),var(--ring-c),var(--ring-a)) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.4;filter:brightness(.7);transition:opacity .2s}.woofer:before{content:'';position:absolute;inset:1%;border-radius:50%;box-shadow:inset 0 0 9px var(--ring-a),0 0 9px var(--ring-b);opacity:.25;pointer-events:none}.isPlaying .woofer:after{opacity:calc(.62 + var(--bass-energy,0)*.38);filter:brightness(1.35)}.isPlaying .woofer:before{opacity:calc(.3 + var(--bass-energy,0)*.6);box-shadow:inset 0 0 12px var(--ring-a),0 0 17px var(--ring-b)}.tweeter:after{content:'';position:absolute;inset:7%;border:2px solid var(--ring-a);border-radius:50%;opacity:.3;box-shadow:0 0 7px var(--ring-a)}.isPlaying .tweeter:after{opacity:.8}body[data-ring=off] .woofer:before,body[data-ring=off] .woofer:after,body[data-ring=off] .tweeter:after{display:none}.eqScreen{padding:8px 10px 6px;margin-top:8px;background:radial-gradient(ellipse at 50% 90%,#173843,#071015 70%);border:2px solid #061015;border-radius:5px;box-shadow:inset 0 2px 10px #000,0 1px #708d9255}.eqScreenTop{display:flex;justify-content:space-between;font:7px monospace;letter-spacing:.12em;color:#8ce0da}.eqSpectrum{height:48px;display:flex;align-items:end;gap:3px;margin:6px 0 3px;background:repeating-linear-gradient(to top,#7793a315 0 1px,transparent 1px 10px)}.eqSpectrum i{flex:1;height:3%;background:linear-gradient(to top,#32cfd2,#70f3ab 55%,#e7ff59 80%,#ff9164);box-shadow:0 0 6px #54e5ca44;border-radius:1px;transition:height 60ms linear;max-height:100%}.eqFrequencyScale{display:flex;justify-content:space-between;color:#668b9c;font:7px monospace}.vuRow{display:flex;align-items:center;gap:5px;margin-top:6px;font:7px monospace;color:#93c7c9}.vuRow>div{height:4px;flex:1;background:#23383f;border-radius:1px;overflow:hidden}.vuRow i{display:block;height:100%;width:0;background:linear-gradient(90deg,#40d5c1,#baff4c 75%,#ff9463)}#vuValue{min-width:40px;text-align:right}.eqDeck .eqSliders{margin-top:8px!important}.eqDeck .eqSliders label{padding:4px 3px!important;gap:3px}.eqDeck .eqSliders input{height:36px!important;min-height:36px!important}.eqDeck .eqSliders input::-webkit-slider-runnable-track{height:100%;background:linear-gradient(#a4c7b4,#28483e);width:7px}.eqDeck .eqSliders input::-moz-range-track{height:100%}.eqDeck #eqStatus{max-height:23px;overflow:hidden}.lightingControls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:14px}.lightingControls label{font:12px system-ui;display:grid;gap:5px;flex:1;min-width:150px}.lightingControls button{min-height:42px;font-size:12px}.lightingControls select{min-height:42px}.radioStage{width:100%;position:relative}.radioStage>.retroRadio{transform-origin:center center}.radioBody{border-radius:20px}.radioFocus .radioStage{height:calc(100dvh - 58px)}
@media(min-width:901px){body.retroMode{height:100dvh;overflow:hidden;display:flex;flex-direction:column}body.retroMode>header{flex:0 0 48px;box-sizing:border-box;padding:7px 24px;min-height:48px}body.retroMode header .brand{font-size:22px}body.retroMode header nav a{padding:8px 12px;font-size:12px}body.retroMode main{flex:1;min-height:0;max-width:none;width:100%;padding:0 18px;box-sizing:border-box;display:flex;flex-direction:column}body.retroMode .viewTabs,body.retroMode .roomCaption{display:none}body.retroMode #retroRoom{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}body.retroMode #retroRoom[hidden]{display:none}body.retroMode .radioStage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:visible;padding-top:28px;box-sizing:border-box}body.retroMode .radioStage>.retroRadio{width:100%;max-width:1600px;flex:none;margin:0;transform-origin:center center}body.retroMode #retroHint{flex:0 0 20px;margin:0;text-align:center;font:10px system-ui;color:#bdd889;align-content:center}body.retroMode .retroHint+ .retroHint{display:none}body.retroMode .radioBadge{font-size:18px}.radioBody{grid-template-columns:minmax(0,1.05fr) minmax(0,1.7fr) minmax(0,1.05fr)}.radioFace{gap:7px}.speaker span{font-size:9px;letter-spacing:.18em}.woofer{max-width:340px!important}.radioBadge b{font-size:8px}#retroRoom:fullscreen .radioStage{height:calc(100dvh - 50px);flex:1}#retroRoom:fullscreen{padding:25px 20px 8px!important;display:flex!important}body.retroMode .moreOptions[open]{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(800px,90vw);max-height:80vh;overflow:auto;z-index:80;margin:0;padding:20px;background:#10242e;border:1px solid #8cb6ba;border-radius:12px;box-shadow:0 0 0 100vmax #030a10dd,0 20px 90px #000b;box-sizing:border-box}body.retroMode .moreOptions[open]>summary{font-size:15px;min-height:38px;color:#e4f5f5}body.retroMode .moreOptions[open]>summary:after{content:'✕ Luk';float:right;font-size:12px;color:#d9ff65}body.retroMode .moreOptions[open]>summary span{display:none}}
@media(max-width:900px){.radioStage>.retroRadio{transform:none!important}.radioBadge{font-size:14px}.radioBadge b{display:none}.eqSpectrum{height:58px}.woofer:after{border-width:2px}.radioBody{border-radius:13px}.eqDeck .eqSliders input{height:52px!important;min-height:52px!important}}@media(max-width:600px){header nav a{font-size:11px}main,.retroMode main{padding:10px}.roomCaption{padding-bottom:24px}.viewTabs{margin-bottom:8px}.radioBody>.speaker{min-height:112px;gap:12px;justify-content:center}.speaker .woofer{width:94px!important;max-width:40vw!important}.speaker .tweeter{width:38px}.radioBadge{font-size:16px!important;letter-spacing:.03em}.radioBadge b{display:none}.radioBadge #retroFullscreen{min-width:40px;min-height:36px}.eqScreenTop{font-size:8px}.eqSpectrum{height:70px}.eqFrequencyScale{font-size:8px}.eqDeck .eqSliders input{height:70px!important;min-height:70px!important}.eqDeck .eqSliders label{padding:7px 3px!important}.eqDeck .eqTitle strong{font-size:10px!important}.radioBody{box-shadow:inset 0 2px 2px #c9d5da,inset 0 -5px 3px #050c12,0 15px 35px #0009}.lightingControls{display:grid;grid-template-columns:1fr}.lightingControls label{font-size:13px}.eqScreen{padding:9px}.vuRow{font-size:8px}.presetViews button{min-height:44px}.presetsHeading{gap:8px}.eqSliders output{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.eqSpectrum i,.woofer:after{transition:none}}