/* ==========================================================================
   Fangs & Ferns - /voice/  "Canopy Light"
   --------------------------------------------------------------------------
   Replaces the previous voice.css. The old page was a 41-of-44-id twin of
   arkadiasurvival.com/voice/, so the fix had to change the SHAPE of the page,
   not the palette.

   Design: the page is lit from above through a canopy. Nothing animates.
   Every control is a leaf; the microphone level is a fern frond that lights
   up leaflet by leaflet.

   Contract with voice.js (SHARED fleet fork - do not edit it):
     - #mic-meter-fill is only ever given `style.width = "<pct>%"`. The meter
       is two identical frond layers at the SAME fixed px width; the hot one
       lives inside #mic-meter-fill, which clips it. Same px width at every
       breakpoint on both layers = the leaflets stay registered with no JS.
     - .ctrl-icon / .ctrl-label have their textContent overwritten, so the
       leaf art is a SIBLING <svg>, never a background on those spans.
     - .participant-row and friends are BUILT by voice.js; they are dressed
       here.
     - .hero / .connect-hint / #connect are hidden in EMBEDDED (the in-game
       overlay loads this page in an iframe).
   ========================================================================== */

:root{
  --vx-ink:#e9ede2; --vx-ink-2:#aeb7a8; --vx-ink-3:#6f7a6a;
  --vx-hair:rgba(233,237,226,.1); --vx-hair-2:rgba(233,237,226,.06);
  --vx-pear:#c9dd85; --vx-pear-lit:#e2f2ad; --vx-pear-deep:#9db558;
  --vx-amber:#e3b264; --vx-amber-wash:rgba(227,178,100,.08);
  --vx-ok:#8fd18a; --vx-bad:#d98070;
  --vx-serif:'Fraunces',Georgia,serif;
  --vx-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vx-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --vx-slab:'Alfa Slab One',Georgia,serif;
  --vx-ease:cubic-bezier(.22,.61,.36,1);
  --vx-glow:0 0 30px rgba(201,221,133,.34);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{color:var(--vx-ink);font-family:var(--vx-sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3,p,ol,ul{margin:0;}
ol,ul{padding:0;list-style:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
a{color:inherit;}
svg{display:block;}

/* voice.js hides and shows EVERYTHING through the `hidden` attribute -
   #conn-badge, #phase-pre/#phase-live, both notices, #setup-banner,
   #windows-fix, #vad-controls, #voice-name-custom - and index.inline1.js does
   the same for the topbar chip. A component rule like `.conn-pill{display:
   inline-flex}` out-cascades the user-agent `[hidden]{display:none}`, so the
   element renders anyway and the page shows a CONNECTED pill while the script
   believes it is hidden. This one rule has to win, and it has to be
   !important because the component rules are more specific. */
[hidden]{display:none !important;}

/* ---------- the light ---------------------------------------------------- */
.vx-sun{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(44% 32% at 62% -6%,rgba(255,236,178,.2),transparent 60%),
    radial-gradient(58% 42% at 22% -10%,rgba(201,221,133,.19),transparent 62%),
    linear-gradient(180deg,rgba(227,178,100,.06),transparent 46%);}
.vx-canopy{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.3;
  width:100%;height:100%;}

/* ---------- shell -------------------------------------------------------- */
.voice-shell{max-width:1000px;margin:0 auto;padding:26px 26px 110px;
  text-align:center;}
body[data-embedded="true"] .voice-shell{padding:14px 14px 24px;
  max-width:none;}

/* ---------- hero --------------------------------------------------------- */
.hero{padding:64px 0 18px;}
.hero-eyebrow{font-family:var(--vx-mono);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:#cfe08f;}
.hero-title{font-family:var(--vx-serif);font-weight:600;
  font-size:clamp(38px,6.2vw,72px);line-height:1.02;letter-spacing:-.026em;
  margin-top:14px;text-shadow:0 0 42px rgba(201,221,133,.22);}
.hero-title i{font-style:italic;color:var(--vx-pear-lit);}
.hero-sub{margin:16px auto 0;color:var(--vx-ink-2);font-size:17.5px;
  max-width:46ch;}

/* ---------- connection pill --------------------------------------------- */
.conn-pill{display:inline-flex;align-items:center;gap:11px;margin-top:22px;
  padding:9px 20px;border-radius:999px;font-family:var(--vx-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(143,209,138,.12);border:1px solid rgba(143,209,138,.32);
  color:#d6f0cd;}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--vx-ok);
  box-shadow:0 0 12px rgba(143,209,138,.8);flex:none;}
.conn-meta{color:rgba(214,240,205,.7);letter-spacing:.1em;}
.conn-pill[data-state="connecting"]{background:var(--vx-amber-wash);
  border-color:rgba(227,178,100,.36);color:#f0d5a6;}
.conn-pill[data-state="connecting"] .conn-dot{background:var(--vx-amber);
  box-shadow:0 0 12px rgba(227,178,100,.7);}
.conn-pill[data-state="error"],.conn-pill[data-state="disconnected"]{
  background:rgba(217,128,112,.12);border-color:rgba(217,128,112,.36);
  color:#f0c3b9;}
.conn-pill[data-state="error"] .conn-dot,
.conn-pill[data-state="disconnected"] .conn-dot{background:var(--vx-bad);
  box-shadow:0 0 12px rgba(217,128,112,.6);}

/* ---------- notices ------------------------------------------------------ */
/* min() so the notice cannot outgrow a narrow shell - the in-game overlay
   dock is only a few hundred px wide and a bare `58ch` overflowed it. */
.notice{max-width:min(58ch,100%);margin:22px auto 0;padding:14px 18px;
  border-radius:14px;font-size:13.5px;text-align:left;}
.notice-error{border:1px solid rgba(217,128,112,.32);
  background:rgba(217,128,112,.1);color:#f4cfc6;}
.notice-error a{color:#fff;}

/* ---------- the light box + frond meter ---------------------------------- */
.vx-lightbox{margin:30px auto 0;max-width:min(860px,100%);
  padding:30px 24px 24px;
  border-radius:28px;overflow:hidden;border:1px solid rgba(233,237,226,.09);
  background:radial-gradient(70% 130% at 50% 0%,rgba(201,221,133,.13),
    rgba(0,0,0,.32));}
.vx-lightbox-dark{background:radial-gradient(70% 130% at 50% 0%,
  rgba(201,221,133,.05),rgba(0,0,0,.3));}
.vx-quiet{margin-top:14px;color:var(--vx-ink-3);font-size:14px;}

/* The meter. BOTH layers carry the same fixed-px frond, so leaflet N in the
   lit layer sits exactly over leaflet N in the dim layer at any width. */
/* ***.vx-frond MUST be exactly as wide as the frond layer it holds.
   voice.js writes `style.width = "<pct>%"` on the fill, and a percentage
   resolves against the CONTAINING BLOCK. If the box is 472px while the
   artwork is 360px, a 62% level clips at 293px = 81% of the frond and the
   meter silently over-reads. So the box, both layers and the svg all carry
   the SAME px width, and every breakpoint moves all of them together. */
.vx-frond{position:relative;height:150px;width:760px;max-width:100%;
  margin:0 auto;overflow:hidden;}
.vx-frond-layer{position:absolute;left:0;top:0;height:150px;width:760px;}
.vx-frondsvg{width:760px;height:150px;}
.mic-vis-fill{position:absolute;left:0;top:0;height:150px;width:0%;
  overflow:hidden;transition:width .09s linear;}
/* NO filter on the lit layer: it lives inside the overflow:hidden fill, so
   a drop-shadow gets clipped to the fill's rectangle and paints a hard-edged
   glowing box that moves with the level. The pale leaflet colour carries the
   "lit" reading on its own; the ambient glow lives on .vx-lightbox behind. */
.vx-frond-hot{filter:none;}

/* frond colours (classes emitted by the generator) */
.vx-frondsvg .bo-rachis{stroke:var(--vx-pear-deep);stroke-width:2.4;
  stroke-linecap:round;fill:none;}
.vx-frondsvg .bo-pinna{stroke:none;}
.vx-frondsvg .bo-dim{fill:rgba(201,221,133,.17);}
.vx-frondsvg .bo-lit{fill:var(--vx-pear-lit);}
.vx-frond-static{opacity:.85;}

.mic-vis-meta{display:flex;justify-content:center;gap:24px;margin-top:12px;
  font-family:var(--vx-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vx-ink-3);}
.mic-vis-mode{color:var(--vx-pear-lit);}

/* muted: voice.js toggles .is-muted on .voice-stage */
.voice-stage.is-muted .vx-frond{filter:grayscale(1);opacity:.45;}
.voice-stage.is-muted .mic-vis-mode{color:var(--vx-bad);}

/* ---------- leaf art ----------------------------------------------------- */
.vx-leafshape{display:block;}
.vx-leafshape .bo-blade{fill:currentColor;}
.vx-leafshape .bo-veins{stroke:rgba(0,0,0,.2);fill:none;}

/* ---------- the Connect leaf --------------------------------------------- */
.connect-stage{margin-top:30px;}
.btn-mega{position:relative;display:inline-block;color:var(--vx-pear-lit);
  filter:drop-shadow(0 0 26px rgba(201,221,133,.42));
  transition:transform .18s var(--vx-ease),filter .18s var(--vx-ease);}
.btn-mega:hover:not(:disabled){transform:translateY(-3px);
  filter:drop-shadow(0 0 40px rgba(201,221,133,.7));}
.btn-mega:disabled{opacity:.55;cursor:not-allowed;filter:none;}
.btn-mega-label{position:absolute;inset:0;display:grid;place-items:center;
  font-size:17px;font-weight:800;color:#141a09;letter-spacing:.005em;
  pointer-events:none;}
.connect-hint{margin-top:12px;color:var(--vx-ink-3);font-size:13px;}

/* ---------- overlay CTA -------------------------------------------------- */
.vx-overlay{margin-top:34px;}
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:999px;border:1px solid var(--vx-hair);
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:.16s var(--vx-ease);}
.btn:hover{border-color:var(--vx-pear-deep);color:var(--vx-pear-lit);}
.vx-ghost{background:rgba(0,0,0,.24);}
.vx-overlay-hint{margin-top:10px;}
.btn-soft{margin-top:16px;border:1px solid rgba(233,237,226,.16);}
.btn-primary{background:var(--vx-pear);color:#101508;font-weight:700;
  border-color:var(--vx-pear);}
.btn-primary:hover{background:var(--vx-pear-lit);color:#101508;}

/* ---------- leaf controls ------------------------------------------------ */
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:26px;}
.ctrl{position:relative;display:inline-flex;align-items:center;
  justify-content:center;color:var(--vx-pear-deep);
  filter:drop-shadow(0 0 16px rgba(201,221,133,.2));
  transition:transform .18s var(--vx-ease),color .18s var(--vx-ease),
    filter .18s var(--vx-ease);}
.ctrl:hover{color:var(--vx-pear);transform:translateY(-3px) rotate(-1.5deg);
  filter:drop-shadow(0 0 26px rgba(201,221,133,.4));}
.ctrl-in{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;pointer-events:none;}
.ctrl-icon{font-family:var(--vx-mono);font-size:9px;letter-spacing:.22em;
  color:rgba(13,17,9,.8);line-height:1;}
.ctrl-label{font-size:15.5px;font-weight:800;color:#0c1006;line-height:1;}
.ctrl-key{font-family:var(--vx-mono);font-size:9.5px;line-height:1;
  color:rgba(13,17,9,.72);}
.ctrl[data-active="true"]{color:var(--vx-amber);}
.ctrl-danger{color:#8d4a3a;filter:none;}
.ctrl-danger:hover{color:#c2714a;filter:drop-shadow(0 0 20px rgba(194,113,74,.4));}
.ctrl-danger .ctrl-icon,.ctrl-danger .ctrl-label,.ctrl-danger .ctrl-key{
  color:#f6e6df;}
.ctrl-danger .ctrl-icon,.ctrl-danger .ctrl-key{color:rgba(246,230,223,.82);}

/* ---------- audible nearby ---------------------------------------------- */
.parts{max-width:720px;margin:34px auto 0;text-align:left;}
.parts-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:11px;border-bottom:1px solid var(--vx-hair-2);}
.parts-label{font-family:var(--vx-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--vx-ink-3);}
.parts-count{font-family:var(--vx-mono);font-size:12px;
  color:var(--vx-pear-lit);}
.parts-list{display:grid;gap:9px;margin-top:12px;}

/* rows are BUILT by voice.js - these class names are its, not ours */
.participant-row{display:flex;align-items:center;gap:14px;padding:12px 15px;
  border-radius:16px;background:rgba(0,0,0,.26);
  border:1px solid var(--vx-hair-2);}
.participant-avatar{width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:700;
  color:#101508;overflow:hidden;background:radial-gradient(circle at 34% 30%,
    var(--vx-pear-lit),var(--vx-pear-deep));}
/* voice.js appends a Steam avatar <img> into this div once the persona
   resolves. Unsized, it would render at its natural width and blow the row
   apart, so the img is constrained here rather than by the script. */
.participant-avatar img{width:100%;height:100%;object-fit:cover;
  border-radius:50%;display:block;}
.participant-avatar.speaking{box-shadow:0 0 0 3px rgba(201,221,133,.28),
  0 0 20px rgba(201,221,133,.5);}
.participant-meta{flex:1;min-width:0;display:flex;flex-direction:column;}
.participant-name{font-size:15px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.participant-sub{font-family:var(--vx-mono);font-size:10.5px;
  color:var(--vx-ink-3);}
.participant-volume{width:96px;flex:none;accent-color:var(--vx-pear);}
.participant-mute{font-family:var(--vx-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vx-ink-3);
  border:1px solid var(--vx-hair-2);border-radius:999px;padding:5px 11px;}
.participant-mute:hover{color:var(--vx-pear-lit);
  border-color:var(--vx-pear-deep);}
.participant-mute[data-muted="true"]{color:#f0c3b9;
  border-color:rgba(217,128,112,.4);background:rgba(217,128,112,.12);}

.parts-empty{padding:26px 0 10px;text-align:center;color:var(--vx-ink-2);}
.parts-empty-icon{display:flex;justify-content:center;
  color:rgba(201,221,133,.3);margin-bottom:12px;}
.parts-empty-sub{margin-top:6px;font-size:13px;color:var(--vx-ink-3);}

/* ---------- connection details ------------------------------------------ */
.stats{max-width:720px;margin:26px auto 0;text-align:left;}
.stats summary{cursor:pointer;font-family:var(--vx-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--vx-ink-3);
  padding:11px 0;border-top:1px solid var(--vx-hair-2);list-style:none;}
.stats summary::-webkit-details-marker{display:none;}
.stats summary::after{content:" +";color:var(--vx-pear-deep);}
.stats[open] summary::after{content:" -";}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding-bottom:8px;}
.stat{padding:13px 15px;border-radius:14px;background:rgba(0,0,0,.26);}
.stat-wide{grid-column:1/-1;}
.stat-k{display:block;font-family:var(--vx-mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vx-ink-3);}
.stat-v{display:block;margin-top:5px;font-family:var(--vx-mono);font-size:14px;}
.stat-v.mono{font-size:12.5px;}

/* ---------- Windows audio guide ------------------------------------------ */
.setup-banner{display:flex;align-items:center;gap:14px;max-width:720px;
  margin:30px auto 0;padding:14px 18px;border-radius:16px;width:100%;
  border:1px solid rgba(227,178,100,.28);background:var(--vx-amber-wash);
  text-align:left;transition:.16s var(--vx-ease);}
.setup-banner:hover{border-color:rgba(227,178,100,.5);}
.setup-banner-icon{font-family:var(--vx-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vx-amber);
  border:1px solid rgba(227,178,100,.34);border-radius:6px;padding:4px 8px;
  flex:none;}
.setup-banner-text{flex:1;display:flex;flex-direction:column;}
.setup-banner-text strong{font-size:14px;}
.setup-banner-sub{font-size:12.5px;color:var(--vx-ink-3);}
.setup-banner-chev{color:var(--vx-ink-3);}

.setup-card{max-width:720px;margin:34px auto 0;padding:26px 26px 28px;
  border-radius:22px;text-align:left;
  border:1px solid rgba(227,178,100,.24);
  background:linear-gradient(180deg,var(--vx-amber-wash),rgba(0,0,0,.28));}
.setup-head{display:flex;align-items:center;justify-content:space-between;}
.setup-tag{font-family:var(--vx-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--vx-amber);}
.icon-btn{width:30px;height:30px;border-radius:8px;
  border:1px solid var(--vx-hair-2);color:var(--vx-ink-3);
  display:grid;place-items:center;}
.icon-btn:hover{color:var(--vx-ink);border-color:var(--vx-hair);}
.setup-title{font-family:var(--vx-serif);font-size:26px;font-weight:600;
  letter-spacing:-.014em;margin-top:10px;}
.setup-lead{margin-top:10px;color:var(--vx-ink-2);font-size:14.5px;}
.setup-lead strong{color:var(--vx-ink);}
.setup-time{display:block;margin-top:6px;color:var(--vx-amber);font-size:13px;}
.setup-steps{display:grid;gap:10px;margin-top:20px;}
.setup-step{display:flex;gap:14px;padding:14px 16px;border-radius:14px;
  background:rgba(0,0,0,.26);font-size:14px;color:var(--vx-ink-2);}
.setup-step em{font-style:normal;color:var(--vx-ink);}
.setup-step strong{color:var(--vx-ink);}
.setup-step .hl{color:var(--vx-amber);}
.setup-step-key{background:rgba(227,178,100,.12);
  box-shadow:inset 0 0 0 1px rgba(227,178,100,.3);}
.step-n{position:relative;flex:none;display:grid;place-items:center;
  color:var(--vx-pear-deep);}
.step-n b{position:absolute;font-family:var(--vx-mono);font-size:12px;
  color:#101508;font-weight:500;}
.setup-step-key .step-n{color:var(--vx-amber);}
.step-aside{display:block;margin-top:5px;color:var(--vx-amber);
  font-size:12.5px;}

/* ---------- status log + audio sinks ------------------------------------ */
.status-log{max-width:720px;margin:20px auto 0;font-family:var(--vx-mono);
  font-size:11px;color:var(--vx-ink-3);text-align:left;white-space:pre-wrap;}
.status-log:empty{display:none;}
.audio-area{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);}

/* ---------- settings dialog --------------------------------------------- */
.settings-dialog{width:min(560px,calc(100vw - 32px));padding:0;
  border:1px solid var(--vx-hair);border-radius:22px;color:var(--vx-ink);
  background:#121712;box-shadow:0 40px 90px -50px rgba(0,0,0,.95);}
.settings-dialog::backdrop{background:rgba(6,9,5,.7);
  backdrop-filter:blur(3px);}
.settings-dialog form{padding:22px 24px 24px;}
.settings-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--vx-hair-2);}
.settings-head h2{font-family:var(--vx-serif);font-size:22px;font-weight:600;}
.settings-section{padding:18px 0;border-bottom:1px solid var(--vx-hair-2);}
.settings-section h3{font-family:var(--vx-mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--vx-pear-deep);
  font-weight:500;}
.settings-hint{margin-top:10px;font-size:12.5px;color:var(--vx-ink-3);}
.settings-sub{margin-top:12px;padding-left:12px;
  border-left:2px solid var(--vx-hair-2);}
.radio-row{display:flex;gap:10px;align-items:flex-start;margin-top:11px;
  font-size:13.5px;color:var(--vx-ink-2);cursor:pointer;}
.radio-row input{margin-top:4px;accent-color:var(--vx-pear);flex:none;}
.radio-row em{font-style:normal;color:var(--vx-ink-3);}
.slider-row,.select-row{display:flex;align-items:center;gap:12px;
  margin-top:12px;font-size:13.5px;color:var(--vx-ink-2);}
.slider-row span:first-child,.select-row span:first-child{min-width:104px;}
.slider-row input[type=range]{flex:1;accent-color:var(--vx-pear);}
.slider-row input[type=text]{flex:1;padding:9px 12px;border-radius:10px;
  border:1px solid var(--vx-hair-2);background:rgba(0,0,0,.3);
  color:var(--vx-ink);}
.slider-val{font-family:var(--vx-mono);font-size:11.5px;color:var(--vx-ink-3);
  min-width:56px;text-align:right;}
.select-row select{flex:1;padding:9px 12px;border-radius:10px;
  border:1px solid var(--vx-hair-2);background:rgba(0,0,0,.3);
  color:var(--vx-ink);}
.settings-foot{display:flex;justify-content:flex-end;padding-top:18px;}

/* ---------- embedded (the in-game overlay iframe) ------------------------ */
body[data-embedded="true"] .vx-sun,
body[data-embedded="true"] .vx-canopy,
body[data-embedded="true"] .vx-overlay,
body[data-embedded="true"] .stats{display:none;}
body[data-embedded="true"] .vx-lightbox{margin-top:8px;padding:12px;
  border-radius:16px;}
body[data-embedded="true"] .voice-shell{padding:12px;}
body[data-embedded="true"] .hero-title{font-size:24px;}
/* The dock is a narrow panel, so the embedded frond is sized to fit a
   ~360px shell: 300 + 2x12 lightbox padding + 2x12 shell padding = 348. */
body[data-embedded="true"] .vx-frond,
body[data-embedded="true"] .vx-frond-layer,
body[data-embedded="true"] .vx-frondsvg{width:300px;}
body[data-embedded="true"] .vx-frond,
body[data-embedded="true"] .vx-frond-layer,
body[data-embedded="true"] .vx-frondsvg,
body[data-embedded="true"] .mic-vis-fill{height:76px;}
body[data-embedded="true"] .parts{margin-top:16px;}
body[data-embedded="true"] .controls{margin-top:16px;gap:8px;}

/* ---------- responsive ---------------------------------------------------
   Each step moves the frond BOX and both layers to the same px width, so the
   lit leaflets stay registered on the dim ones and the level stays honest.
   The widths are chosen to still fit inside the shell + lightbox padding at
   the narrow end of each band. -------------------------------------------- */
@media(max-width:1000px){
  .vx-frond,.vx-frond-layer,.vx-frondsvg{width:640px;}
  .vx-frond,.vx-frond-layer,.vx-frondsvg,.mic-vis-fill{height:136px;}
}
@media(max-width:860px){
  .voice-shell{padding:22px 18px 90px;}
  .hero{padding:44px 0 14px;}
  .vx-frond,.vx-frond-layer,.vx-frondsvg{width:520px;}
  .vx-frond,.vx-frond-layer,.vx-frondsvg,.mic-vis-fill{height:120px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:660px){
  .vx-frond,.vx-frond-layer,.vx-frondsvg{width:400px;}
  .vx-frond,.vx-frond-layer,.vx-frondsvg,.mic-vis-fill{height:104px;}
}
@media(max-width:520px){
  .vx-frond,.vx-frond-layer,.vx-frondsvg{width:320px;}
  .vx-frond,.vx-frond-layer,.vx-frondsvg,.mic-vis-fill{height:88px;}
  .vx-lightbox{padding:20px 14px 16px;border-radius:20px;}
  .controls{gap:8px;}
  .stats-grid{grid-template-columns:1fr;}
  .participant-volume{width:64px;}
}
@media(max-width:400px){
  .vx-frond,.vx-frond-layer,.vx-frondsvg{width:260px;}
  .vx-frond,.vx-frond-layer,.vx-frondsvg,.mic-vis-fill{height:76px;}
}
@media(prefers-reduced-motion:reduce){
  .mic-vis-fill{transition:none;}
  .btn-mega,.ctrl{transition:none;}
}