:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; background:#090d18; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; }
.program-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0b1020; isolation:isolate; --camera-border-color:#fff; --ticker-bg:#111827; --ticker-color:#fff; }
.program-layer { position:absolute; inset:0; overflow:hidden; }
.program-layer video { width:100%; height:100%; display:block; background:#05070d; }
.program-screen video { object-fit:contain; }
.program-camera { z-index:4; transition:left .16s ease, top .16s ease, width .16s ease, height .16s ease, opacity .16s ease, border-radius .16s ease; border-radius:18px; overflow:hidden; box-shadow:0 16px 45px rgba(0,0,0,.45); border:2px solid var(--camera-border-color); }
.program-camera video { object-fit:cover; }
.program-camera.mirrored video { transform:scaleX(-1); }
.program-stage[data-camera-shape="rectangle"] .program-camera { border-radius:0; }
.program-stage[data-camera-shape="rounded"] .program-camera { border-radius:18px; }
.program-stage[data-camera-shape="circle"] .program-camera { border-radius:50%; }
.program-stage[data-mode="screen-only"] .program-camera { display:none; }
.program-stage[data-mode="camera-only"] .program-screen { display:none; }
.program-stage[data-mode="camera-only"] .program-camera { inset:0 !important; width:100% !important; height:100% !important; border:0; border-radius:0; box-shadow:none; }
.program-stage[data-mode="side-by-side"] { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
.program-stage[data-mode="side-by-side"] .program-layer { position:relative; inset:auto !important; width:auto !important; height:auto !important; border-radius:14px; border:1px solid rgba(255,255,255,.16); box-shadow:none; }
.program-stage[data-mode="side-by-side"] .program-screen { grid-column:1; }
.program-stage[data-mode="side-by-side"] .program-camera { grid-column:2; display:block; border:2px solid var(--camera-border-color); }
.program-stage[data-mode="side-by-side"][data-camera-shape="circle"] .program-camera { border-radius:50%; align-self:center; aspect-ratio:1/1; height:auto !important; max-height:100%; }
.program-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#66758c; font-size:clamp(13px,2vw,22px); background:linear-gradient(135deg,#0b1020,#111b2f); }
.program-audio-bin { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.program-badge { position:absolute; z-index:12; left:14px; bottom:14px; padding:6px 9px; border-radius:999px; font-size:11px; letter-spacing:.04em; color:#dce8fa; background:rgba(5,10,20,.72); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); }
.program-winner { position:absolute; z-index:18; top:7%; left:50%; transform:translate(-50%,-18px) scale(.96); min-width:min(72%,720px); max-width:88%; padding:16px 48px 18px 24px; text-align:center; border-radius:20px; background:rgba(7,11,20,.92); border:2px solid rgba(111,196,255,.86); box-shadow:0 18px 55px rgba(0,0,0,.48); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease, border-color .2s ease; }
.program-winner.visible { opacity:1; transform:translate(-50%,0) scale(1); }
.program-winner.final-winner { border-color:rgba(255,214,102,.96); box-shadow:0 18px 58px rgba(0,0,0,.5),0 0 0 4px rgba(255,214,102,.08); }
.program-winner.interactive-winner.visible { pointer-events:auto; }
.winner-label { color:#8dd4ff; font-size:clamp(11px,1.6vw,18px); font-weight:800; letter-spacing:.14em; }
.program-winner.final-winner .winner-label { color:#ffd666; }
.winner-name { margin-top:5px; color:#fff; font-size:clamp(24px,4vw,52px); font-weight:900; overflow-wrap:anywhere; }
.winner-message { margin:8px auto 0; max-width:92%; color:#dce8f7; font-size:clamp(12px,1.8vw,22px); font-weight:650; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.winner-close { position:absolute; top:8px; right:10px; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.11); color:#fff; font:700 24px/1 system-ui,sans-serif; cursor:pointer; z-index:2; }
.winner-close:hover { background:rgba(255,255,255,.22); }
.winner-close[hidden] { display:none!important; }
.program-ticker { position:absolute; z-index:20; left:0; right:0; bottom:0; height:46px; display:none; align-items:center; overflow:hidden; background:var(--ticker-bg); color:var(--ticker-color); border-top:1px solid rgba(255,255,255,.18); }
.program-ticker.visible { display:flex; }
.program-ticker-content { display:inline-block; min-width:max-content; white-space:nowrap; padding-left:100%; padding-right:100%; font-size:clamp(14px,2vw,24px); font-weight:800; letter-spacing:.02em; animation:yeti-ticker var(--ticker-duration,14s) linear infinite; }
@keyframes yeti-ticker { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.program-stage:has(.program-ticker.visible) .program-badge { bottom:58px; }
body.recorder { overflow:hidden; }

/* v0.4.2: a circle must crop to a true square, not a rounded 16:9 tile. */
.program-stage[data-camera-shape="circle"] .program-camera video{object-fit:cover!important}

/* v0.4.5 presenter identity, camera-off avatar, active-speaker pulse and broadcast logo */
.program-camera{background:linear-gradient(135deg,#0b1020,#14213b)}
.presenter-avatar{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;background:radial-gradient(circle at 50% 35%,rgba(73,111,168,.28),rgba(10,16,28,.96) 58%)}
.avatar-ring{width:min(48%,220px);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#263b5c,#17253c);border:4px solid rgba(255,255,255,.16);box-shadow:0 12px 34px rgba(0,0,0,.34);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.avatar-initials{font-size:clamp(22px,7vw,78px);line-height:1;font-weight:900;letter-spacing:.03em;color:#f5f8fc;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.avatar-camera-off{font-size:clamp(9px,1.3vw,14px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8192aa}
.presenter-nameplate{position:absolute;z-index:8;left:10px;bottom:10px;display:flex;align-items:center;gap:7px;max-width:calc(100% - 20px);padding:6px 9px;border-radius:999px;background:rgba(5,10,20,.78);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(7px);color:#f5f8fc;font-size:clamp(9px,1.25vw,14px);font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.presenter-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.speaker-pulse{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:16px;height:14px;flex:0 0 16px;opacity:.35}
.speaker-pulse i{display:block;width:3px;height:5px;border-radius:999px;background:#59e39b;transform-origin:center;animation:none}
.program-camera.speaking .speaker-pulse{opacity:1}
.program-camera.speaking .speaker-pulse i{animation:yeti-audio-pulse .55s ease-in-out infinite alternate}
.program-camera.speaking .speaker-pulse i:nth-child(2){animation-delay:.12s;height:10px}.program-camera.speaking .speaker-pulse i:nth-child(3){animation-delay:.24s;height:7px}
.program-camera.speaking .avatar-ring{border-color:#59e39b;box-shadow:0 0 0 5px rgba(89,227,155,.13),0 12px 34px rgba(0,0,0,.34);transform:scale(1.015)}
@keyframes yeti-audio-pulse{from{transform:scaleY(.55);opacity:.55}to{transform:scaleY(1.45);opacity:1}}
.program-stage[data-camera-shape="circle"] .presenter-nameplate{left:50%;transform:translateX(-50%);max-width:86%;bottom:7px}
.program-stage[data-mode="camera-only"] .presenter-avatar{border-radius:0}.program-stage[data-mode="camera-only"] .avatar-ring{width:min(28%,260px)}
.program-logo{position:absolute;z-index:17;width:var(--logo-width,12%);height:auto;max-height:28%;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.35));pointer-events:none}
.program-stage[data-logo-position="top-left"] .program-logo{top:18px;left:18px;right:auto;bottom:auto}
.program-stage[data-logo-position="top-right"] .program-logo{top:18px;right:18px;left:auto;bottom:auto}
.program-stage[data-logo-position="bottom-left"] .program-logo{bottom:18px;left:18px;right:auto;top:auto}
.program-stage[data-logo-position="bottom-right"] .program-logo{bottom:18px;right:18px;left:auto;top:auto}
.program-stage:has(.program-ticker.visible)[data-logo-position="bottom-left"] .program-logo,.program-stage:has(.program-ticker.visible)[data-logo-position="bottom-right"] .program-logo{bottom:62px}

/* v0.4.6: camera-off avatar is a first-class presenter state. */
.avatar-speaking-icon{position:absolute;right:8%;bottom:9%;display:flex;align-items:flex-end;gap:3px;height:20px;min-width:28px;padding:5px 7px;border-radius:999px;background:rgba(6,12,22,.76);border:1px solid rgba(255,255,255,.14);opacity:.28;transition:opacity .15s ease,transform .15s ease}
.avatar-speaking-icon i{display:block;width:3px;height:5px;border-radius:3px;background:#a8b7c9;transform-origin:center bottom}
.program-camera.camera-off.speaking .avatar-speaking-icon{opacity:1;transform:scale(1.06)}
.program-camera.camera-off.speaking .avatar-speaking-icon i{background:#59e39b;animation:yeti-audio-pulse .48s ease-in-out infinite alternate}
.program-camera.camera-off.speaking .avatar-speaking-icon i:nth-child(2){height:12px;animation-delay:.10s}.program-camera.camera-off.speaking .avatar-speaking-icon i:nth-child(3){height:8px;animation-delay:.20s}
.program-camera.camera-off .presenter-avatar{display:flex}
.program-camera.camera-off .avatar-ring{position:relative}

/* v0.6.0 multi-presenter stage. The outer program-camera is now a presenter group;
   shape/border/speaker styling is applied to each presenter tile. */
.program-camera{border:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}
.program-presenter-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:8px;min-width:0;min-height:0}
.program-presenter{position:relative;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(135deg,#0b1020,#14213b);border:2px solid var(--camera-border-color);border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.38)}
.program-presenter video{width:100%;height:100%;display:block;object-fit:cover;background:#05070d}
.program-camera.mirrored .program-presenter video{transform:scaleX(-1)}
.program-stage[data-camera-shape="rectangle"] .program-presenter{border-radius:0}
.program-stage[data-camera-shape="rounded"] .program-presenter{border-radius:18px}
.program-stage[data-camera-shape="circle"][data-presenter-count="1"] .program-presenter{border-radius:50%}
.program-stage[data-presenter-count="2"] .program-presenter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.program-stage[data-presenter-count="3"] .program-presenter-grid,
.program-stage[data-presenter-count="4"] .program-presenter-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.program-stage[data-mode="camera-only"] .program-camera{inset:3%!important;width:94%!important;height:94%!important;display:block}
.program-stage[data-mode="camera-only"] .program-presenter-grid{gap:12px}
.program-stage[data-mode="side-by-side"] .program-camera{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;display:block!important;border:0!important}
.program-stage[data-mode="side-by-side"] .program-presenter-grid{inset:0}
.program-stage[data-mode="screen-pip"][data-presenter-count="2"] .program-camera,
.program-stage[data-mode="screen-pip"][data-presenter-count="3"] .program-camera,
.program-stage[data-mode="screen-pip"][data-presenter-count="4"] .program-camera{border-radius:0!important}
.presenter-avatar{border-radius:inherit}
.program-presenter .presenter-nameplate{left:10px;bottom:10px;transform:none;max-width:calc(100% - 20px)}
.program-presenter.speaking .speaker-pulse{opacity:1}
.program-presenter.speaking .speaker-pulse i{animation:yeti-audio-pulse .55s ease-in-out infinite alternate}
.program-presenter.speaking .speaker-pulse i:nth-child(2){animation-delay:.12s;height:10px}
.program-presenter.speaking .speaker-pulse i:nth-child(3){animation-delay:.24s;height:7px}
.program-presenter.speaking .avatar-ring{border-color:#59e39b;box-shadow:0 0 0 5px rgba(89,227,155,.13),0 12px 34px rgba(0,0,0,.34);transform:scale(1.015)}
.program-presenter.camera-off.speaking .avatar-speaking-icon{opacity:1;transform:scale(1.06)}
.program-presenter.camera-off.speaking .avatar-speaking-icon i{background:#59e39b;animation:yeti-audio-pulse .48s ease-in-out infinite alternate}
.program-presenter.camera-off.speaking .avatar-speaking-icon i:nth-child(2){height:12px;animation-delay:.10s}
.program-presenter.camera-off.speaking .avatar-speaking-icon i:nth-child(3){height:8px;animation-delay:.20s}
.program-stage[data-mode="camera-only"] .program-presenter .avatar-ring{width:min(38%,220px)}
.program-stage[data-presenter-count="3"] .avatar-initials,
.program-stage[data-presenter-count="4"] .avatar-initials{font-size:clamp(20px,4vw,54px)}

/* v0.6.1 — Meet-style Grid view: every on-stage presenter plus every shared screen
   becomes an equal tile in the actual program/recording canvas. */
.program-grid{z-index:5;display:grid;gap:10px;padding:10px;background:#080c14}
.program-grid[hidden]{display:none!important}
.program-grid-item{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:#0b111d;box-shadow:0 10px 30px rgba(0,0,0,.32)}
.program-grid-item video{width:100%;height:100%;display:block;background:#04070c}
.program-grid-screen video{object-fit:contain}
.program-grid .program-presenter video{object-fit:cover}
.grid-item-label{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 9px;border-radius:999px;background:rgba(5,10,20,.8);border:1px solid rgba(255,255,255,.15);color:#f3f6fb;font-size:clamp(8px,1.1vw,13px);font-weight:800}
.program-stage[data-mode="grid"][data-grid-count="1"] .program-grid{grid-template-columns:1fr}
.program-stage[data-mode="grid"][data-grid-count="2"] .program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.program-stage[data-mode="grid"][data-grid-count="3"] .program-grid,
.program-stage[data-mode="grid"][data-grid-count="4"] .program-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.program-stage[data-mode="grid"][data-grid-count="5"] .program-grid,
.program-stage[data-mode="grid"][data-grid-count="6"] .program-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.program-stage[data-mode="grid"][data-grid-count="7"] .program-grid,
.program-stage[data-mode="grid"][data-grid-count="8"] .program-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.program-stage[data-mode="grid"] .program-grid .program-presenter{border:2px solid var(--camera-border-color);border-radius:18px}
.program-stage[data-mode="grid"][data-camera-shape="rectangle"] .program-grid .program-presenter{border-radius:0}
.program-stage[data-mode="grid"][data-camera-shape="rounded"] .program-grid .program-presenter{border-radius:18px}
.program-stage[data-mode="grid"][data-camera-shape="circle"] .program-grid .program-presenter{border-radius:50%;aspect-ratio:1/1;align-self:center;justify-self:center;width:min(94%,100%)}
.program-stage[data-mode="grid"] .program-grid .presenter-avatar{border-radius:inherit}

/* v0.6.5 — a host-focused item becomes the whole program canvas for viewers and recording. */
.program-stage.program-focused .program-grid{padding:0;gap:0;grid-template-columns:1fr!important;grid-template-rows:1fr!important}
.program-stage.program-focused .program-grid-item{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.program-stage.program-focused .program-grid .program-presenter{border-radius:0!important;aspect-ratio:auto!important;align-self:stretch!important;justify-self:stretch!important;width:100%!important}
.program-stage.program-focused .program-grid-item video{width:100%;height:100%}


/* v0.6.7.1 — equal Meet-style Grid composition.
   Every visible webcam/avatar and every shared screen is an equal program tile.
   The renderer sets 1-4 columns; item 5+ wraps to the next equal-height row. */
.program-stage[data-mode="grid"] .program-grid{
  grid-template-columns:repeat(var(--yeti-grid-cols,1),minmax(0,1fr))!important;
  grid-template-rows:repeat(var(--yeti-grid-rows,1),minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:10px!important;
  padding:10px!important;
}
/* renderGrid retains host/screen/guest wrappers for semantic ordering; display:contents
   makes all of their children participate in one equal parent grid. */
.program-stage[data-mode="grid"] .program-grid-zone{display:contents!important}
.program-stage[data-mode="grid"] .program-grid-zone[hidden]{display:none!important}
.program-stage[data-mode="grid"] .program-grid-zone>.program-grid-item{
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
}
.program-stage[data-mode="grid"] .program-grid-item{align-self:stretch;justify-self:stretch}
.program-stage[data-mode="grid"] .program-grid-screen video{object-fit:contain}
.program-stage[data-mode="grid"] .program-presenter video{object-fit:cover}
.program-stage.program-focused .program-grid{grid-template-columns:1fr!important;grid-template-rows:1fr!important;padding:0!important;gap:0!important}

/* v0.6.5 — program-label pill retired; Yeti branding is handled by the optional logo overlay. */
.program-badge{display:none!important}


/* v0.6.9.8 — webinar PIP: host + screen only; other on-stage participants are audio circles. */
.program-pip-audio-strip{position:absolute;z-index:16;left:18px;bottom:70px;display:flex;gap:8px;align-items:center;pointer-events:none}
.program-pip-audio-strip[hidden]{display:none!important}
.pip-audio-person{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative;background:#111a2a;border:2px solid rgba(255,255,255,.30);box-shadow:0 8px 24px rgba(0,0,0,.38)}
.pip-audio-person.speaking{border-color:#55d98a;box-shadow:0 0 0 4px rgba(85,217,138,.16),0 8px 24px rgba(0,0,0,.38)}
.pip-audio-avatar{font-size:12px;font-weight:900;color:#edf4ff;letter-spacing:.03em}
.pip-audio-mic{position:absolute;right:-5px;bottom:-4px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#172235;border:1px solid rgba(255,255,255,.24);font-size:10px}

/* In YetiWebinar, Shape belongs to the host camera only. Guest presenter tiles stay rounded. */
.program-stage[data-webinar-mode="1"][data-camera-shape="rectangle"] .program-presenter:not(.host-presenter):not(.program-grid-host),
.program-stage[data-webinar-mode="1"][data-camera-shape="circle"] .program-presenter:not(.host-presenter):not(.program-grid-host){
  border-radius:18px!important;aspect-ratio:auto!important;width:auto!important
}
.program-stage[data-webinar-mode="1"][data-camera-shape="rectangle"] .host-presenter,
.program-stage[data-webinar-mode="1"][data-camera-shape="rectangle"] .program-grid-host{border-radius:0!important}
.program-stage[data-webinar-mode="1"][data-camera-shape="rounded"] .host-presenter,
.program-stage[data-webinar-mode="1"][data-camera-shape="rounded"] .program-grid-host{border-radius:18px!important}
.program-stage[data-webinar-mode="1"][data-camera-shape="circle"] .host-presenter,
.program-stage[data-webinar-mode="1"][data-camera-shape="circle"] .program-grid-host{border-radius:50%!important}