/* Wey.Tv fan dashboard (bottom of /live/). Art: GPT Image (art/dash/), wide on computers, tall on phones.
   Everything on top is placed in % of the art and sized in cqw (1% of the dashboard's width), so it scales with it. */
.dash{position:relative;container-type:inline-size;width:100%;max-width:1200px;margin:22px auto 4px;aspect-ratio:2688/1152;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #33175f,0 0 40px #7c3aed55,0 18px 50px #000a;text-align:left;
  --g1x:22.03%;--g1y:40.63%;--g1d:15.77%;--g2x:77.83%;--g2y:40.63%;--g2d:15.77%;
  --sx:36.01%;--sy:14.93%;--sw:27.83%;--sh:32.29%;
  --b1x:42.78%;--b1y:66.15%;--b1d:7%;--b2x:57.14%;--b2y:65.97%;--b2d:7.1%;--ly:80.5%;
  --nf:3.3cqw;--lf:1.05cqw;--bf:1.5cqw;--tf:1.12cqw}
.dash>picture,.dash>picture img{position:absolute;inset:0;width:100%;height:100%;display:block}
.dash *{box-sizing:border-box}
.dash button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* gauges: live numbers, two orbiting rings and a radar sweep */
.dash .g{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dash .g1{--x:var(--g1x);--y:var(--g1y);--d:var(--g1d);--c:#2ee6c7}
.dash .g2{--x:var(--g2x);--y:var(--g2y);--d:var(--g2d);--c:#ff4fd0}
.dash .num{font:900 var(--nf)/1 ui-rounded,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.02em;text-shadow:0 0 .35em var(--c),0 0 1em var(--c)}
.dash .lab{margin-top:.55em;font:800 var(--lf)/1 -apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.28em;color:var(--c);text-shadow:0 0 .6em var(--c)}
.dash .sub{margin-top:.5em;font:600 calc(var(--lf)*.85)/1 -apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.12em;color:#cfc3ff;opacity:.75}
.dash .orb{position:absolute;inset:-21%;border-radius:50%;border:max(1px,.12cqw) solid color-mix(in srgb,var(--c) 35%,transparent);animation:fx-spin 9s linear infinite}
.dash .orb::before,.dash .orb::after{content:"";position:absolute;width:.9cqw;height:.9cqw;min-width:5px;min-height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 .6cqw .25cqw var(--c);top:0;left:50%;transform:translate(-50%,-50%)}
.dash .orb::after{top:auto;bottom:0;transform:translate(-50%,50%);background:#fff;box-shadow:0 0 .6cqw .25cqw #fff}
.dash .o2{inset:-31%;border-style:dashed;border-color:color-mix(in srgb,var(--c) 22%,transparent);animation-duration:15s;animation-direction:reverse}
.dash .o2::before{background:#ffc93c;box-shadow:0 0 .6cqw .25cqw #ffc93c}.dash .o2::after{display:none}
.dash .sweep{position:absolute;inset:1.5%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,color-mix(in srgb,var(--c) 45%,transparent) 100%);opacity:.35;animation:fx-spin 3.2s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* screen: latest comments, opens the comment sheet */
.dash .scr{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);padding:1.2cqw 1.4cqw;border:0;background:radial-gradient(120% 90% at 50% 0,#7c3aed22,transparent 60%);display:flex;flex-direction:column;gap:.5cqw;text-align:left;border-radius:.6cqw}
.dash .cta:focus-visible,.dash .pb:focus-visible,.dash .feed:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dash .body{flex:1;min-height:0;display:flex;gap:.8cqw}
.dash .hd{display:flex;justify-content:space-between;font:800 var(--tf)/1 -apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.2em;color:#b9a6ff}
.dash .hd b{color:#2ee6c7}
.dash .feed{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;outline:0;padding-bottom:1.1em;-webkit-mask-image:linear-gradient(#000 calc(100% - 1.4em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.4em),transparent)}
.dash .feed::-webkit-scrollbar{display:none}
.dash .feed:has(.none){display:flex;align-items:center;justify-content:center}
.dash .feed p{margin:0 0 .55cqw;font:600 calc(var(--tf)*1.12)/1.3 -apple-system,"Segoe UI",Roboto,sans-serif;color:#eee9ff;overflow-wrap:anywhere;animation:fx-in .6s ease both}
.dash .feed p b{color:#ff4fd0}
.dash .feed p.none{color:#b9a6ff;text-align:center}
.dash .bot,.fx-list .bot{font:800 .72em/1 -apple-system,"Segoe UI",Roboto,sans-serif;font-style:normal;letter-spacing:.12em;color:#2ee6c7;border:1px solid #2ee6c7;border-radius:4px;padding:.12em .35em;margin-left:.3em;vertical-align:.12em}
@keyframes fx-in{from{opacity:0;transform:translateY(.6em)}}
.dash .cta{border:0;cursor:pointer;align-self:center;font:800 var(--tf)/1 -apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.18em;color:#1a0b33;background:#2ee6c7;padding:.45cqw .9cqw;border-radius:999px;box-shadow:0 0 1cqw #2ee6c7aa;animation:fx-pulse 2.4s ease-in-out infinite}
@keyframes fx-pulse{50%{box-shadow:0 0 2cqw #2ee6c7;filter:brightness(1.15)}}
/* like / love: the two domed push buttons in the art */
.dash .pb{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;color:#0b0620;transition:transform .12s,filter .2s}
.dash .b1{--x:var(--b1x);--y:var(--b1y);--d:var(--b1d);--c:#2ee6c7}.dash .b2{--x:var(--b2x);--y:var(--b2y);--d:var(--b2d);--c:#ff4fd0}
.dash .pb svg{width:38%;height:38%;fill:currentColor;filter:drop-shadow(0 1px 0 #fff8)}
.dash .pb b{font:900 var(--bf)/1 -apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #fff8}
.dash .pb:active{transform:translate(-50%,-50%) scale(.92)}
.dash .pb.on{filter:brightness(1.12) saturate(1.2)}
.dash .pb::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:max(2px,.25cqw) solid var(--c);box-shadow:0 0 1.2cqw var(--c),inset 0 0 1.2cqw var(--c);opacity:0;pointer-events:none}
.dash .pb.on::after{opacity:.55;animation:fx-ring 2.6s ease-in-out infinite}
@keyframes fx-ring{50%{opacity:.95;transform:scale(1.06)}}
.dash .pb i{position:absolute;left:50%;top:50%;width:1cqw;height:1cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 .8cqw var(--c);pointer-events:none;animation:fx-burst .8s ease-out forwards}
@keyframes fx-burst{from{transform:translate(-50%,-50%)}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}
.dash .pl{position:absolute;top:var(--ly);transform:translate(-50%,-50%);font:800 var(--lf)/1 -apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.3em;text-shadow:0 0 .7em currentColor;pointer-events:none}
.dash .l1{left:var(--b1x);color:#2ee6c7}.dash .l2{left:var(--b2x);color:#ff4fd0}
/* VU meters: a dark cover slides over the lit LEDs in the art */
.dash .vu{position:absolute;overflow:hidden;pointer-events:none}
.dash .vu::before{content:"";position:absolute;inset:0;background:#07040f;opacity:.86;transform-origin:top;transform:scaleY(var(--off,.9));transition:transform .09s linear}
.dash .w{display:block}.dash .t{display:none}
/* knobs and square keys: breathing glow */
.dash .kn,.dash .sq{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;box-shadow:0 0 1.4cqw .3cqw var(--c);opacity:.15;animation:fx-glow 3.6s ease-in-out infinite}
.dash .sq{border-radius:.4cqw;animation-duration:2.2s}
@keyframes fx-glow{50%{opacity:.7}}
.dash .kn:nth-of-type(2n){animation-delay:-1.2s}.dash .kn:nth-of-type(3n){animation-delay:-2.1s}
@media(max-width:759px){
 .dash{max-width:560px;aspect-ratio:1360/2048;border-radius:12px;
  --g1x:27.2%;--g1y:15.63%;--g1d:27.35%;--g2x:72.94%;--g2y:15.63%;--g2d:27.64%;
  --sx:6.47%;--sy:31.45%;--sw:87.06%;--sh:24.6%;
  --b1x:31.18%;--b1y:68.75%;--b1d:18.2%;--b2x:68.38%;--b2y:68.65%;--b2d:17.9%;--ly:77.6%;
  --nf:6.4cqw;--lf:2.3cqw;--bf:3.7cqw;--tf:2.6cqw}
 .dash .scr{padding:3cqw 3.4cqw;gap:1.6cqw;border-radius:1.2cqw}
 .dash .feed p{margin-bottom:1.6cqw}
 .dash .body{gap:2cqw}
 .dash .bar3{--cap:12px;width:11px}.dash .bar3 b::after{border-left-width:3px;border-right-width:3px}.dash .bar3 i{left:1.5px;right:1.5px}
 .dash .cta{padding:1.2cqw 2.4cqw}
 .dash .w{display:none}.dash .t{display:block}
 .dash .orb::before,.dash .orb::after{width:1.7cqw;height:1.7cqw}
}
@media(prefers-reduced-motion:reduce){.dash .orb,.dash .sweep,.dash .cta,.dash .kn,.dash .sq,.dash .pb.on::after{animation:none}}
/* comment sheet */
.fx-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,2,20,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fx-sheet[hidden]{display:none}
.fx-card{position:relative;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;background:linear-gradient(#1d0b3d,#12052a);border:1px solid #7c3aed;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 0 40px #7c3aed66;padding:18px 16px calc(14px + env(safe-area-inset-bottom));color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
@media(min-width:760px){.fx-sheet{align-items:center}.fx-card{border-bottom:1px solid #7c3aed;border-radius:18px}}
.fx-card h3{margin:0 40px 12px 2px;font-size:15px;letter-spacing:.22em;color:#2ee6c7;text-shadow:0 0 10px #2ee6c7aa}
.fx-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid #7c3aed;background:#12052a;color:#fff;font-size:16px;cursor:pointer}
.fx-body{flex:1;min-height:0;display:flex;gap:8px;margin:0 0 12px}
.fx-list{list-style:none;margin:0;padding:0 2px;overflow:auto;flex:1;display:grid;gap:8px;align-content:start;scrollbar-width:none;overscroll-behavior:contain;outline:0}
.fx-list::-webkit-scrollbar{display:none}
.fx-list li{background:#ffffff0d;border:1px solid #33175f;border-radius:12px;padding:9px 11px}
.fx-list li b{color:#ff4fd0;font-size:14px}.fx-list li small{color:#b9a6ff;margin-left:6px;font-size:12px}
.fx-list li p{margin:4px 0 0;font-size:15px;line-height:1.35;color:#f1edff;overflow-wrap:anywhere}
.fx-list .none{color:#b9a6ff;text-align:center;border-style:dashed}
.fx-form{display:grid;gap:8px}
.fx-form input,.fx-form textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:#0d0320;border:1px solid #33175f;border-radius:10px;padding:10px 12px;outline:0}
.fx-form input:focus,.fx-form textarea:focus{border-color:#2ee6c7;box-shadow:0 0 0 3px #2ee6c733}
.fx-form textarea{min-height:76px;resize:vertical}
.fx-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx-row span{color:#b9a6ff;font-size:13px}
.fx-row button{border:0;border-radius:999px;padding:10px 20px;font-family:inherit;font-weight:900;font-size:15px;line-height:1;letter-spacing:.12em;color:#1a0b33;background:linear-gradient(90deg,#2ee6c7,#ff4fd0);box-shadow:0 0 18px #ff4fd066;cursor:pointer}
.fx-row button:disabled{opacity:.5}
.fx-err{margin:0;min-height:1.2em;color:#ffc93c;font-size:14px}
/* the 3D scroll bar, as on OuiweyCollins.com's page previews: a groove sunk into the panel, arrow caps at both ends,
   a glossy neon capsule riding in it (fans.js bar3) */
.bar3{--neon:#2ee6c7;--glow:#2ee6c766;--cap:15px;position:relative;flex:none;width:14px;border-radius:8px;cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,#030008,#1a0a30 40%,#26113f 60%,#030008);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.9),inset 0 -2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.bar3 b{position:absolute;left:1px;right:1px;height:var(--cap);border-radius:7px;cursor:pointer;
  background:linear-gradient(90deg,#14072a,#3d2363 35%,#5d3d8a 48%,#2c1650 75%,#0e0420);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.7)}
.bar3 b:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.8)}
.bar3 .up{top:1px}.bar3 .dn{bottom:1px}
.bar3 b::after{content:"";position:absolute;left:50%;top:50%;border-left:4px solid transparent;border-right:4px solid transparent;filter:drop-shadow(0 0 2px var(--neon))}
.bar3 .up::after{border-bottom:5px solid var(--neon);transform:translate(-50%,-60%)}
.bar3 .dn::after{border-top:5px solid var(--neon);transform:translate(-50%,-40%)}
.bar3 i{position:absolute;left:2px;right:2px;top:calc(var(--cap) + 2px);height:40px;border-radius:5px;cursor:grab;touch-action:none;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 28%,rgba(255,255,255,.65) 42%,rgba(255,255,255,0) 58%,rgba(0,0,0,.55)),var(--neon);
  box-shadow:0 0 6px var(--neon),0 0 16px var(--glow),inset 0 2px 1px rgba(255,255,255,.5),inset 0 -2px 2px rgba(0,0,0,.4)}
.bar3 i::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:10px;margin-top:-5px;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.4) 0 1px,rgba(255,255,255,.45) 1px 2px,rgba(0,0,0,0) 2px 4px)}
.bar3 i:active{cursor:grabbing}