/* Webinar OS UI poll · the live room, drawn in three design languages.
   One set of components (room.js); a language only changes tokens and a few detail rules, so every feature exists in
   all three. The room is a fixed 1440 x 900 canvas that the poll scales to fit.

   Root attributes (set by Room from the answers):
     .dl-clean | .dl-cobalt | .dl-mac     design language
     data-mat  solid | frost | liquid | smoke      panel material
     data-tone light | dark                        ink on panels (liquid glass follows the background)
     data-bgt  light | dark                        tone of the background (ink of things that sit on it)
     data-shape crisp | soft | round               corner radii
     data-gap  tight | regular | airy              space between tiles
     data-btn  press | ripple | sheen | hold       button feedback
     data-icons line | duo | tile                  icon style
   Motion: custom ease-out curves, transform/opacity only, presses scale to .97, UI moves stay under 300 ms. */

.rm {
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --accent: #0E9F6E; --accent-ink: #fff; --live: #E5484D; --ok: #12A150; --warn: #F5A524;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --gap: 14px; --pad: 16px; --top: 60px; --dockh: 88px;
  --prim: var(--accent); --prim-ink: var(--accent-ink);
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; font: 14px/1.4 var(--font); color: var(--ink); text-align: left;
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
}
.rm *, .rm *::before, .rm *::after { box-sizing: border-box; }
.rm button, .rm input, .rm textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.rm button { cursor: pointer; }
.rm h1, .rm h2, .rm h3, .rm h4, .rm p { margin: 0; }
.rm .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rm :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- tones: ink for panels, and for things that sit straight on the background ---------- */
.rm[data-tone="light"] { --ink: #16181D; --ink-2: #4B5160; --ink-3: #7C8291; --line: rgba(16, 20, 30, .1); --sf-2: rgba(16, 20, 30, .045); --sf-3: rgba(16, 20, 30, .08); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); }
.rm[data-tone="dark"] { --ink: #F4F5F8; --ink-2: #C3C7D2; --ink-3: #8E94A3; --line: rgba(255, 255, 255, .13); --sf-2: rgba(255, 255, 255, .07); --sf-3: rgba(255, 255, 255, .12); --accent-soft: color-mix(in srgb, var(--accent) 24%, transparent); }
.rm[data-bgt="light"] { --on-bg: #16181D; --on-bg-2: rgba(22, 24, 29, .62); }
.rm[data-bgt="dark"] { --on-bg: #fff; --on-bg-2: rgba(255, 255, 255, .7); }

/* ---------- materials ---------- */
.rm[data-mat="solid"][data-tone="light"] { --sf: #fff; --bf: none; }
.rm[data-mat="solid"][data-tone="dark"] { --sf: #1D1F26; --bf: none; }
.rm[data-mat="frost"][data-tone="light"] { --sf: rgba(255, 255, 255, .62); --bf: blur(30px) saturate(180%); }
.rm[data-mat="frost"][data-tone="dark"] { --sf: rgba(132, 140, 168, .27); --bf: blur(30px) saturate(170%) brightness(1.06); }
.rm[data-mat="liquid"][data-tone="light"] { --sf: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .34)); --bf: blur(10px) saturate(210%) brightness(1.06); }
.rm[data-mat="liquid"][data-tone="dark"] { --sf: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .045) 46%, rgba(255, 255, 255, .09)); --bf: blur(9px) saturate(200%) brightness(.92); }
.rm[data-mat="smoke"] { --sf: rgba(5, 6, 9, .58); --bf: blur(20px) saturate(130%); }

.sf { position: relative; background: var(--sf); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); border: var(--sf-bd, 1px solid var(--line)); box-shadow: var(--sf-sh, 0 1px 2px rgba(16, 20, 30, .06)); border-radius: var(--r-l); color: var(--ink); }
/* Liquid glass: a clear pane with a bright rim where light catches the edge and a soft sheen across the top.
   The rim is a gradient ring (mask), the sheen an inner highlight; both ignore the pointer. */
.rm[data-mat="liquid"] .sf { border: 0; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 22px -14px rgba(255, 255, 255, .22), inset 0 18px 30px -22px rgba(255, 255, 255, .42), var(--lq-drop, 0 22px 50px -18px rgba(0, 0, 0, .55)), 0 2px 6px rgba(0, 0, 0, .14); }
.rm[data-mat="liquid"] .sf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 3;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 26%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .1) 76%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rm[data-mat="liquid"][data-tone="light"] .sf { --lq-drop: 0 22px 50px -22px rgba(20, 30, 60, .38); }
.rm[data-mat="smoke"] .sf { border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }

/* ---------- shape, spacing ---------- */
.rm[data-shape="crisp"] { --r-s: 4px; --r-m: 6px; --r-l: 8px; --r-key: 6px; }
.rm[data-shape="soft"] { --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-key: 11px; }
.rm[data-shape="round"] { --r-s: 14px; --r-m: 20px; --r-l: 30px; --r-key: 999px; }
.rm[data-gap="tight"] { --gap: 6px; --pad: 8px; }
.rm[data-gap="regular"] { --gap: 14px; --pad: 16px; }
.rm[data-gap="airy"] { --gap: 26px; --pad: 28px; }

/* ---------- the three languages ---------- */
.dl-clean { --font: "Geist", system-ui, sans-serif; --accent: #0E9F6E; --prim: #17181C; --prim-ink: #fff; --live: #E5484D; --plain: #F3F3F5; --sf-sh: 0 1px 2px rgba(16, 20, 30, .05), 0 8px 24px -16px rgba(16, 20, 30, .18); }
.dl-clean[data-tone="dark"] { --prim: #fff; --prim-ink: #17181C; }
.dl-cobalt { --font: "Plus Jakarta Sans", system-ui, sans-serif; --accent: #335AF4; --prim: #335AF4; --prim-ink: #fff; --live: #EC6464; --plain: #E6EAF0; --sf-bd: 0; --sf-sh: 0 1px 1px rgba(26, 34, 51, .04), 0 14px 34px -18px rgba(26, 34, 51, .28); letter-spacing: -.01em; }
.dl-mac { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Geist", system-ui, sans-serif; --mono: "SF Mono", "Geist Mono", ui-monospace, Menlo, monospace; --accent: #0A84FF; --prim: #0A84FF; --prim-ink: #fff; --live: #FF453A; --ok: #30D158; --warn: #FFD60A;
  --plain: radial-gradient(120% 90% at 50% 0%, #23262F, #0B0C10 70%); --top: 30px; --sf-bd: .5px solid rgba(255, 255, 255, .16); --sf-sh: 0 0 0 .5px rgba(0, 0, 0, .5), 0 28px 60px -20px rgba(0, 0, 0, .65); font-size: 13.5px; }
.dl-mac[data-tone="light"] { --sf-bd: .5px solid rgba(0, 0, 0, .12); --sf-sh: 0 0 0 .5px rgba(0, 0, 0, .12), 0 28px 60px -22px rgba(0, 0, 0, .45); }

/* ---------- backgrounds: the real thing behind the room, never an overlay ---------- */
.rm-bg { position: absolute; inset: 0; z-index: -1; background: var(--plain); background-size: cover; background-position: center; overflow: hidden; }
/* photographs: a soft vignette keeps the edges calm behind the panels */
.rm-bg:not(.bg-plain)::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .34)); }
.bg-dawn { background-image: url(bg/dawn.jpg); } .bg-dunes { background-image: url(bg/dunes.jpg); } .bg-aurora { background-image: url(bg/aurora.jpg); }
.bg-city { background-image: url(bg/city.jpg); } .bg-nebula { background-image: url(bg/nebula.jpg); } .bg-hall { background-image: url(bg/hall.jpg); }
.bg-dawn::after { background: none !important; }

/* ---------- focus: the part being judged is lit, the rest is blurred until full screen ---------- */
.z { transition: filter .32s var(--ease-out), opacity .32s var(--ease-out); }
.ov { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.ov > * { pointer-events: auto; }
.ov > .fly, .ov > .spark { pointer-events: none; }
.z.dim { filter: blur(5px) saturate(.5); opacity: .42; }
.z.dim, .z.dim * { pointer-events: none !important; }
.z.lit:not(.ov), .ov.lit > :not(.fly):not(.spark):not(.nolit) { outline: 2.5px solid #4C8DFF; outline-offset: 5px; animation: rmLit 1.1s var(--ease-out) 1; }
@keyframes rmLit { from { outline-offset: 16px; outline-color: transparent; } }

/* ---------- buttons ---------- */
.k { --kh: 38px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--kh); padding: 0 14px; border-radius: var(--r-key, 11px); border: 1px solid var(--line); background: var(--sf-2); color: var(--ink);
  font-weight: 560; font-size: 13.5px; white-space: nowrap; overflow: hidden; user-select: none; transition: transform .14s var(--ease-out), background-color .16s ease, border-color .16s ease, box-shadow .2s ease; }
.k:active { transform: scale(.97); }
.k.ic { width: var(--kh); padding: 0; flex: none; }
.k.p { background: var(--prim); color: var(--prim-ink); border-color: transparent; }
.k.d { background: var(--live); color: #fff; border-color: transparent; }
.k.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.k.off { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); border-color: color-mix(in srgb, var(--live) 34%, transparent); }
.k.raised { background: color-mix(in srgb, var(--warn) 22%, transparent); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
@media (hover: hover) and (pointer: fine) { .k:hover { background: var(--sf-3); } .k.p:hover { background: color-mix(in srgb, var(--prim) 88%, #fff); } .k.d:hover { background: color-mix(in srgb, var(--live) 88%, #000); } }
.dl-cobalt .k { border-color: transparent; }
.dl-cobalt .k.p { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
/* Glass Desktop keys: glossy capsules, lit from above */
.dl-mac .k { border: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .5), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .25); }
.dl-mac[data-tone="light"] .k { background: linear-gradient(180deg, #fff, #F1F2F5); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 1.5px rgba(0, 0, 0, .12); }
.dl-mac .k.p { background: linear-gradient(180deg, #3D9BFF, #0A6FE8); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 60, 160, .5); }
.dl-mac .k.d { background: linear-gradient(180deg, #FF6A60, #F0352B); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4), 0 1px 3px rgba(160, 20, 10, .5); }
.dl-mac .k.on { background: linear-gradient(180deg, rgba(10, 132, 255, .42), rgba(10, 132, 255, .26)); color: #fff; }
.dl-mac[data-tone="light"] .k.on { color: #0A6FE8; background: rgba(10, 132, 255, .14); }
/* feedback styles (question "Button feedback") */
.rm[data-btn="press"] .k:active { transform: scale(.94); }
.rm[data-btn="sheen"] .k.p::before, .rm[data-btn="sheen"] .k.d::before { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 46%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: rmSheen 2.6s var(--ease-io) infinite; pointer-events: none; }
@keyframes rmSheen { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(520%) skewX(-20deg); } }
.k .rip { position: absolute; border-radius: 50%; background: currentColor; opacity: .26; pointer-events: none; transform: scale(0); animation: rmRip .6s var(--ease-out) forwards; }
@keyframes rmRip { to { transform: scale(2.4); opacity: 0; } }
.k .fill { position: absolute; inset: 0; background: rgba(255, 255, 255, .32); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); pointer-events: none; }
.k > span, .k > svg { position: relative; }

/* ---------- icons ---------- */
.ico { flex: none; display: block; }
.ico .f { fill: none; }
.rm[data-icons="duo"] .ico .f { fill: color-mix(in srgb, currentColor 24%, transparent); }
.rm[data-icons="duo"] .ico { stroke-width: 2; }
/* colour tiles: a glossy rounded square per tool, like Mac app icons */
.tile-ic { --c1: #6FB6FF; --c2: #0A6FE8; width: 100%; height: 100%; border-radius: 27%; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -6px 10px -6px rgba(0, 0, 0, .28), 0 6px 12px -6px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .25); }
.tile-ic::before { content: ""; position: absolute; inset: 0 0 46% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .04)); border-radius: 27% 27% 60% 60% / 27% 27% 22% 22%; }
.tile-ic .ico { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)); stroke-width: 2; }
.tile-ic .ico .f { fill: rgba(255, 255, 255, .28); }

/* ---------- top bar (a navbar in languages 1 and 2, a menu bar in 3) ---------- */
.tb { position: absolute; left: var(--pad); right: var(--pad); top: 10px; height: calc(var(--top) - 12px); display: flex; align-items: center; gap: 14px; padding: 0 14px; z-index: 30; border-radius: var(--r-m); }
.tb-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; }
.tb-logo i { width: 24px; height: 20px; background: currentColor; -webkit-mask: url(../wos/assets/logo.png) center / contain no-repeat; mask: url(../wos/assets/logo.png) center / contain no-repeat; }
.tb-title { font-weight: 560; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--line); white-space: nowrap; }
.tb-nav { display: flex; gap: 2px; }
.tb-nav a, .tb-nav button { border: 0; background: none; padding: 7px 11px; border-radius: var(--r-s); font-weight: 540; color: var(--ink-2); display: inline-flex; gap: 7px; align-items: center; transition: background-color .16s ease, color .16s ease, transform .14s var(--ease-out); }
.tb-nav button:active { transform: scale(.97); }
.tb-nav .on { background: var(--sf-2); color: var(--ink); }
.tb-nav button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.tb-nav .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-left: -2px; }
.tb-sp { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sf-2); color: var(--ink-2); white-space: nowrap; }
.pill.live { background: var(--live); color: #fff; letter-spacing: .04em; }
.pill.live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: rmPulse 1.6s ease-in-out infinite; }
.pill.rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
@keyframes rmPulse { 50% { opacity: .35; } }
.tb .k { --kh: 32px; font-size: 13px; }
/* Glass Desktop: the same bar becomes a thin, clear menu bar; its ink follows the wallpaper */
.dl-mac .tb { left: 0; right: 0; top: 0; height: var(--top); border-radius: 0; padding: 0 14px; gap: 4px; background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; color: var(--on-bg); font-size: 13px; }
.dl-mac .tb::after { display: none; }
.dl-mac[data-bgt="light"] .tb { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.dl-mac .tb-logo { font-weight: 700; font-size: 13.5px; gap: 12px; } .dl-mac .tb-logo i { width: 17px; height: 15px; }
.dl-mac .tb-title { border: 0; padding-left: 8px; color: inherit; font-weight: 500; opacity: .86; }
.dl-mac .tb-nav a, .dl-mac .tb-nav button { color: inherit; padding: 3px 9px; border-radius: 5px; font-weight: 500; }
.dl-mac .tb-nav .on { background: rgba(255, 255, 255, .18); color: inherit; }
.dl-mac .tb-nav button[aria-pressed="true"] { background: rgba(255, 255, 255, .22); color: inherit; }
.dl-mac .tb .pill { height: 20px; background: transparent; color: inherit; padding: 0 6px; font-weight: 500; }
.dl-mac .tb .pill.live { background: var(--live); color: #fff; height: 18px; padding: 0 7px; }
.dl-mac .tb .k { --kh: 22px; padding: 0 9px; font-size: 12px; border-radius: 6px; }

/* ---------- body and layouts ---------- */
.body { position: absolute; left: var(--pad); right: calc(var(--pad) + var(--rx, 0px)); top: calc(var(--top) + var(--gap) + var(--tx, 0px)); bottom: calc(var(--pad) + var(--bx, 0px)); display: grid; gap: var(--gap); min-height: 0; transition: bottom .36s var(--ease-drawer), left .36s var(--ease-drawer); }
.rm[data-reserve="1"] .body { bottom: calc(var(--dockh) + var(--bx, 0px)); }
.rm[data-nav="rail"] .body { left: calc(var(--pad) + 96px); }
.lay-classic { grid-template-columns: minmax(0, 1fr) 344px; grid-template-rows: minmax(0, 1fr); }
.lay-classic.noside { grid-template-columns: minmax(0, 1fr); }
.lay-bento { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.lay-theatre, .lay-desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.col { display: grid; gap: var(--gap); min-height: 0; min-width: 0; grid-auto-rows: minmax(0, 1fr); }
.col.l-bento { grid-template-rows: minmax(0, 2.2fr) minmax(0, 1fr); grid-auto-rows: unset; }
.spk-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); min-height: 0; }
/* "windows keep clear of the dock only": the column above the dock stops short, the side column reaches the bottom */
.rm[data-fit="clear"] .body > .col-main { margin-bottom: calc(var(--dockh) - var(--pad)); }

/* ---------- window / panel / tile: one component, three looks ---------- */
.win { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.win-hd { flex: none; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 14px; font-weight: 620; font-size: 13.5px; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.win-hd .lights { display: none; gap: 7px; margin-right: 4px; }
.win-hd .lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .22); }
.win-hd .lights i:nth-child(2) { background: #FEBC2E; } .win-hd .lights i:nth-child(3) { background: #28C840; }
.win-hd .sub { font-weight: 480; color: var(--ink-3); }
.win-hd .sp { flex: 1; }
.win-hd .cnt { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.win-hd .x { width: 26px; height: 26px; border-radius: var(--r-s); border: 0; background: none; color: var(--ink-3); display: grid; place-items: center; transition: background-color .16s ease, transform .14s var(--ease-out); }
.win-hd .x:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .win-hd .x:hover { background: var(--sf-2); color: var(--ink); } }
.win-bd { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.win.bare > .win-hd { display: none; }
.win.float { position: absolute; z-index: 24; box-shadow: var(--sf-sh), 0 30px 70px -24px rgba(0, 0, 0, .5); }
.win.float > .win-hd { cursor: grab; } .win.float.drag > .win-hd { cursor: grabbing; }
.win.float.drag { transition: none; box-shadow: var(--sf-sh), 0 44px 90px -24px rgba(0, 0, 0, .6); }
.dl-mac .win-hd { height: 34px; justify-content: center; font-size: 13px; font-weight: 600; padding: 0 12px; border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.dl-mac .win-hd .lights { display: flex; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
.dl-mac .win-hd > .ico:first-of-type, .dl-mac .win-hd .x { display: none; }
.dl-mac .win-hd .sp { display: none; } .dl-mac .win-hd .cnt, .dl-mac .win-hd .hd-r { position: absolute; right: 12px; }
.dl-cobalt .win-hd { border-bottom: 0; height: 46px; font-size: 15px; font-weight: 700; }

/* ---------- stage ---------- */
.stage-in { flex: 1; min-height: 0; display: grid; gap: var(--gap); padding: var(--gap); position: relative; }
.win.bare > .win-bd > .stage-in { padding: 0; }
.stg-split { grid-template-columns: var(--ratio, .66fr) calc(1fr - var(--ratio, .66fr)); }
.vt { position: relative; min-height: 0; min-width: 0; border-radius: var(--r-m); overflow: hidden; background: #14161D; color: #fff; display: grid; place-items: center; isolation: isolate; }
.vt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.vt.speak { box-shadow: 0 0 0 2.5px var(--ok); }
.vt .av { width: clamp(44px, 34%, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: 22px; color: #fff; }
.vt .camoff { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.vt .st { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vt .st[data-s="speak"] { background: var(--ok); } .vt .st[data-s="muted"] { background: var(--live); }
.tag-live { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--live); color: #fff; font: 700 10.5px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; text-transform: uppercase; }
/* speaker name tags (question "Name tags") */
.ntag { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 560; color: #fff; white-space: nowrap; overflow: hidden; }
.ntag small { font-weight: 440; opacity: .78; font-size: 11px; }
.nt-chip .ntag { padding: 4px 9px; border-radius: 999px; background: rgba(12, 14, 20, .46); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.nt-chip .ntag small { display: none; }
.nt-bar .ntag { left: 0; right: 0; bottom: 0; max-width: none; padding: 20px 10px 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); display: grid; gap: 0; line-height: 1.2; }
.nt-bar .ntag::before { content: ""; position: absolute; left: 10px; bottom: 8px; width: 3px; height: 26px; border-radius: 2px; background: var(--accent); }
.nt-bar .ntag b, .nt-bar .ntag small { padding-left: 9px; } .nt-bar .ntag .ico { display: none; }
.nt-min .ntag { left: 10px; bottom: 9px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); border-bottom: 2px solid var(--accent); padding-bottom: 2px; border-radius: 0; }
.nt-min .ntag small, .nt-min .ntag .ico { display: none; }
/* slide mock */
.slide { position: absolute; inset: 0; background: #fff; color: #101623; container-type: size; display: grid; align-content: center; gap: 2.4cqh; padding: 7cqh 7cqw; z-index: -1; }
.slide .kk { font: 600 2.2cqh var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #2F6BDE; }
.slide h2 { font-size: 6.2cqh; line-height: 1.08; letter-spacing: -.02em; font-weight: 680; max-width: 22ch; }
.slide p { font-size: 2.6cqh; color: #5A6478; }
.slide .bars { display: flex; align-items: flex-end; gap: 2.2cqw; height: 34cqh; border-bottom: 1px solid #D9DEE8; }
.slide .bars i { flex: 1; background: #2B6CB8; border-radius: .8cqh .8cqh 0 0; position: relative; font-style: normal; }
.slide .bars i.hi { background: #F2A01F; }
.slide .bars i span { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font: 600 2.2cqh var(--mono); padding-bottom: .6cqh; }
.vt.slides { background: #fff; }
.tiles { display: grid; gap: var(--gap); min-height: 0; min-width: 0; grid-auto-rows: minmax(0, 1fr); }
.tiles.strip { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: unset; }
.tiles.pip { position: absolute; right: calc(var(--gap) + 12px); bottom: calc(var(--gap) + 12px); width: 22%; aspect-ratio: 16 / 10; z-index: 3; display: block; }
.tiles.pip .vt { position: absolute; inset: 0; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .7), 0 0 0 2px rgba(255, 255, 255, .7); }
.tiles.pip .vt:not(:first-child) { display: none; }
.tiles.chips { position: absolute; left: calc(var(--gap) + 12px); bottom: calc(var(--gap) + 12px); z-index: 3; display: flex; gap: 8px; }
.tiles.chips .vt { width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 18px -8px rgba(0, 0, 0, .7); }
.tiles.chips .vt .ntag, .tiles.chips .vt .st, .tiles.chips .vt .camoff { display: none; } .tiles.chips .vt .av { width: 100%; font-size: 15px; }
.stage-in.strip { grid-template-rows: minmax(0, .3fr) minmax(0, 1fr); }
.stage-in.split { grid-template-columns: minmax(0, var(--a, 66fr)) minmax(0, var(--b, 34fr)); }
.stage-in.split.hasdiv { grid-template-columns: minmax(0, var(--a, 66fr)) 0 minmax(0, var(--b, 34fr)); }
/* divider between slides and speakers */
.split-h { position: relative; width: 0; z-index: 4; cursor: col-resize; touch-action: none; }
.split-h::before { content: ""; position: absolute; inset: 0 -9px; }
.split-h .grip { position: absolute; left: -2px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: var(--ink-3); opacity: .6; transition: opacity .16s ease, height .2s var(--ease-out), margin .2s var(--ease-out); }
.split-h:hover .grip, .split-h.on .grip { opacity: 1; height: 64px; margin-top: -32px; background: var(--accent); }
.split-h .joints { position: absolute; left: -5px; top: 50%; transform: translateY(-50%); display: grid; gap: 7px; }
.split-h .joints i { width: 10px; height: 10px; border-radius: 50%; background: var(--sf-3); box-shadow: 0 0 0 1.5px var(--ink-3); transition: transform .2s var(--ease-out), background-color .16s ease; }
.split-h .joints i.on { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); transform: scale(1.3); }
.split-h .notch { position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 26px; height: 60px; border-radius: 13px; display: grid; place-items: center; background: var(--prim); color: var(--prim-ink); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); transition: transform .16s var(--ease-out); }
.split-h.on .notch { transform: translateY(-50%) scale(1.08); }
.ratio { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; padding: 4px 10px; border-radius: 999px; background: rgba(12, 14, 20, .78); color: #fff; font: 600 12px var(--mono); }
/* stage bar: mic, camera, share, captions, hand, leave */
.stage-ft { flex: none; display: flex; justify-content: center; padding: 0 var(--gap) var(--gap); }
.ctl { display: inline-flex; align-items: center; gap: 8px; padding: 7px; border-radius: calc(var(--r-key, 11px) + 7px); background: var(--sf-2); }
.ctl .k { --kh: 40px; }
.ctl.round .k { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.ctl.round .k span { display: none; }
.ctl.expand .k { padding: 0 11px; gap: 0; transition: transform .14s var(--ease-out), background-color .16s ease, gap .24s var(--ease-out), padding .24s var(--ease-out); }
.ctl.expand .k span { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .26s var(--ease-out), opacity .2s ease; }
.ctl.expand:hover .k, .ctl.expand.open .k { gap: 7px; padding: 0 13px; } .ctl.expand:hover .k span, .ctl.expand.open .k span { max-width: 110px; opacity: 1; }
.ctl.split { gap: 0; padding: 0; background: none; }
.ctl.split .seg { display: inline-flex; border-radius: var(--r-key, 11px); overflow: hidden; margin-right: 8px; box-shadow: 0 0 0 1px var(--line); }
.ctl.split .seg .k { border-radius: 0; border: 0; } .ctl.split .seg .k + .k { border-left: 1px solid var(--line); width: 26px; padding: 0; }
.rm.lay-theatre-on .stage-ft { position: absolute; left: 0; right: 0; bottom: 14px; padding: 0; z-index: 5; }
.rm.lay-theatre-on .stage-ft .ctl { background: rgba(14, 16, 22, .62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); --ink: #fff; --sf-2: rgba(255, 255, 255, .12); --sf-3: rgba(255, 255, 255, .2); --line: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- tabs, chat, composer ---------- */
.tabs { flex: none; display: flex; gap: 2px; padding: 6px; margin: 8px 10px 0; border-radius: var(--r-m); background: var(--sf-2); position: relative; }
.tabs button { flex: 1; height: 30px; border: 0; background: none; border-radius: calc(var(--r-m) - 4px); font-weight: 560; font-size: 12.5px; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; justify-content: center; position: relative; z-index: 1; transition: color .16s ease, transform .14s var(--ease-out); }
.tabs button:active { transform: scale(.97); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs .ink { position: absolute; top: 6px; bottom: 6px; left: 6px; border-radius: calc(var(--r-m) - 4px); background: var(--sf); box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px var(--line); transition: transform .28s var(--ease-out), width .28s var(--ease-out); }
.tabs .b { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--live); color: #fff; font: 700 10px/16px var(--mono); }
.pn { flex: 1; min-height: 0; overflow: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.pn::-webkit-scrollbar { display: none; }
.msg { display: grid; gap: 2px; font-size: 13.5px; animation: rmIn .26s var(--ease-out) both; }
@keyframes rmIn { from { opacity: 0; transform: translateY(6px); } }
.msg .who { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--ink-3); }
.msg .who i, .fc { width: 22px; height: 22px; border-radius: 50%; background: #8A94A6 center / cover; display: grid; place-items: center; font: 650 9px var(--font); color: #fff; font-style: normal; flex: none; }
.msg .who b { color: var(--ink); font-weight: 620; }
.msg .role { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
/* chat styles (question "Chat messages") */
.ch-bub .msg .tx { justify-self: start; max-width: 92%; padding: 8px 11px; border-radius: 4px var(--r-m) var(--r-m) var(--r-m); background: var(--sf-2); }
.ch-bub .msg.me { justify-items: end; } .ch-bub .msg.me .tx { background: var(--prim); color: var(--prim-ink); border-radius: var(--r-m) 4px var(--r-m) var(--r-m); } .ch-bub .msg.me .who { display: none; }
.ch-line .pn { gap: 5px; } .ch-line .msg { display: block; line-height: 1.45; } .ch-line .msg .who { display: inline; } .ch-line .msg .who i, .ch-line .msg .who time, .ch-line .msg .role { display: none; } .ch-line .msg .who b { margin-right: 6px; }
.ch-card .msg { grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 9px 10px; border-radius: var(--r-m); background: var(--sf-2); }
.ch-card .msg .who { display: contents; } .ch-card .msg .who i { grid-row: 1 / span 2; width: 30px; height: 30px; font-size: 11px; } .ch-card .msg .who b { align-self: end; } .ch-card .msg .who time { position: absolute; right: 10px; top: 9px; } .ch-card .msg { position: relative; } .ch-card .msg .tx { grid-column: 2; }
.ch-card .msg .role { grid-column: 2; justify-self: start; }
.composer { flex: none; display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.composer input { flex: 1; min-width: 0; height: 38px; border-radius: var(--r-key, 11px); border: 1px solid var(--line); background: var(--sf-2); padding: 0 12px; outline-offset: -1px; }
.composer input::placeholder { color: var(--ink-3); }
.empty { margin: auto; text-align: center; color: var(--ink-3); font-size: 13px; display: grid; gap: 6px; justify-items: center; padding: 20px; }

/* ---------- Q&A ---------- */
.qrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 11px; border-radius: var(--r-m); background: var(--sf-2); font-size: 13.5px; animation: rmIn .26s var(--ease-out) both; }
.qrow .who { grid-column: 1 / -1; display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--ink-3); }
.qrow .who b { color: var(--ink-2); font-weight: 600; }
.chipst { font: 600 10.5px var(--mono); letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: var(--sf-3); color: var(--ink-2); white-space: nowrap; align-self: start; }
.chipst.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.chipst.wait { background: color-mix(in srgb, var(--warn) 24%, transparent); color: color-mix(in srgb, var(--warn) 60%, var(--ink)); }
.vote { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 44px; height: 50px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--sf); display: grid; place-items: center; align-content: center; font: 650 13px var(--mono); transition: transform .14s var(--ease-out), background-color .16s ease, color .16s ease; }
.vote:active { transform: scale(.94); } .vote[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.qa-votes .qrow { grid-template-columns: 1fr 44px; } .qa-votes .qrow .who { grid-column: 1; }
.nowq { padding: 13px; border-radius: var(--r-m); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); display: grid; gap: 6px; }
.nowq .lab { color: var(--accent); display: inline-flex; gap: 7px; align-items: center; }
.nowq .lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rmPulse 1.4s ease-in-out infinite; }
.nowq p { font-size: 15px; font-weight: 600; line-height: 1.3; }
.lab { font: 600 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- poll ---------- */
.poll { display: grid; gap: 9px; align-content: start; }
.poll h4 { font-size: 15.5px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.poll .opt { position: relative; text-align: left; border: 1px solid var(--line); background: var(--sf-2); border-radius: var(--r-m); padding: 10px 12px; display: flex; gap: 10px; align-items: center; overflow: hidden; font-weight: 520; transition: transform .14s var(--ease-out), border-color .16s ease, background-color .16s ease; }
.poll .opt:active { transform: scale(.985); }
.poll .opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.poll .opt .bar { position: absolute; inset: 0; transform-origin: left; background: color-mix(in srgb, var(--accent) 22%, transparent); transform: scaleX(var(--v, 0)); transition: transform .5s var(--ease-out); }
.poll .opt > span, .poll .opt > b { position: relative; } .poll .opt .pc { margin-left: auto; font: 600 12.5px var(--mono); }
.poll .opt .lt { width: 24px; height: 24px; border-radius: 50%; background: var(--sf-3); display: grid; place-items: center; font: 650 11px var(--mono); flex: none; }
.poll .opt[aria-pressed="true"] .lt { background: var(--accent); color: var(--accent-ink); }
.poll.p-tiles .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.poll.p-tiles .opt { flex-direction: column; align-items: flex-start; min-height: 78px; justify-content: space-between; padding: 11px; }
.poll.p-tiles .opt .pc { margin: 0; font-size: 18px; }
.poll .foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.ringt { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; font: 650 12px var(--mono); color: var(--ink); }
.ringt svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.poll.p-timer .head { display: flex; gap: 12px; align-items: center; }

/* ---------- files, people ---------- */
.frow { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: var(--r-m); background: var(--sf-2); font-size: 13.5px; }
.frow .fi { width: 32px; height: 32px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.frow small { display: block; color: var(--ink-3); font-size: 11.5px; }
.prow { display: flex; gap: 10px; align-items: center; font-size: 13.5px; padding: 4px 2px; }
.prow .fc { width: 28px; height: 28px; font-size: 10px; } .prow small { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }

/* ---------- where the tools live: dock, rail, top tabs, one launcher ---------- */
.dockwrap { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: var(--dockh); display: flex; align-items: center; justify-content: center; z-index: 26; pointer-events: none; }
.dockwrap > * { pointer-events: auto; }
.dock { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-radius: calc(var(--r-l) + 4px); position: relative; transition: transform .4s var(--ease-drawer); }
.di { position: relative; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 3px; color: var(--ink-2); transition: transform .14s var(--ease-out), color .16s ease; transform-origin: 50% 100%; }
.di:active .di-ic { transform: scale(.94); }
.di-ic { width: 46px; height: 46px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--sf-2); transition: transform .14s var(--ease-out), background-color .16s ease, color .16s ease; }
.rm[data-icons="tile"] .di-ic { background: none; }
.di[aria-pressed="true"] { color: var(--accent); } .di[aria-pressed="true"] .di-ic { background: var(--accent-soft); }
.rm[data-icons="tile"] .di[aria-pressed="true"] .di-ic { background: none; }
.di::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-2); opacity: 0; transition: opacity .2s ease; }
.di[aria-pressed="true"]::after { opacity: 1; }
.di-l { font-size: 11px; font-weight: 560; white-space: nowrap; }
.di .bdg { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--live); color: #fff; font: 700 10px/17px var(--mono); text-align: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); z-index: 2; }
.tipx { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px) scale(.97); transform-origin: 50% 100%; padding: 4px 9px; border-radius: 7px; background: rgba(16, 18, 24, .92); color: #fff; font-size: 11.5px; font-weight: 560; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .13s ease, transform .13s var(--ease-out); z-index: 5; }
@media (hover: hover) and (pointer: fine) { .di:hover .tipx { opacity: 1; transform: translate(-50%, 0) scale(1); } .di:hover { color: var(--ink); } }
/* A · magnifying: icons grow under the pointer (scale is set from the pointer position) */
.dk-mag .di { transform: scale(var(--s, 1)); margin: 0 calc((var(--s, 1) - 1) * 23px); transition: transform .12s var(--ease-out), margin .12s var(--ease-out); }
.dk-mag .di-l { display: none; }
/* B · labelled */
.dk-pill { gap: 2px; padding: 8px 12px 6px; } .dk-pill .di { padding: 0 9px; } .dk-pill .di::after, .dk-pill .tipx { display: none; } .dk-pill .di-ic { width: 40px; height: 40px; }
/* C · expanding tabs */
.dk-tabs { align-items: center; gap: 4px; padding: 7px; } .dk-tabs .di { grid-auto-flow: column; align-items: center; gap: 0; padding: 0; border-radius: var(--r-m); transition: background-color .2s ease; }
.dk-tabs .di-ic { width: 42px; height: 42px; background: none; } .dk-tabs .di-l { max-width: 0; opacity: 0; overflow: hidden; font-size: 13px; transition: max-width .3s var(--ease-out), opacity .2s ease, padding .3s var(--ease-out); }
.dk-tabs .di[aria-pressed="true"] { background: var(--accent-soft); } .dk-tabs .di[aria-pressed="true"] .di-ic { background: none; } .dk-tabs .di[aria-pressed="true"] .di-l { max-width: 120px; opacity: 1; padding-right: 14px; }
.dk-tabs .di::after, .dk-tabs .tipx { display: none; }
/* D · grouped, as in Webinar OS today */
.dk-group { gap: 4px; align-items: stretch; padding: 6px 10px 8px; } .dk-group .grp { display: grid; gap: 3px; justify-items: center; padding: 0 8px; position: relative; }
.dk-group .grp + .grp::before { content: ""; position: absolute; left: -2px; top: 16px; bottom: 4px; width: 1px; background: var(--line); }
.dk-group .grp > small { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dk-group .grp > div { display: flex; gap: 5px; } .dk-group .di-ic { width: 38px; height: 38px; } .dk-group .di-l, .dk-group .di::after { display: none; }
/* dock and windows (question "Dock and windows") */
.rm[data-fit="bar"] .dock { width: 100%; justify-content: center; border-radius: var(--r-l); }
.rm[data-fit="hide"] .dock { transform: translateY(calc(100% + 4px)); }
.rm[data-fit="hide"] .dockwrap { pointer-events: auto; }
.rm[data-fit="hide"] .dockwrap:hover .dock, .rm[data-fit="hide"] .dockwrap.peek .dock { transform: none; }
.grab { position: absolute; left: 50%; bottom: 7px; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: var(--on-bg-2); opacity: .7; transition: opacity .2s ease; }
.dockwrap:hover .grab, .dockwrap.peek .grab { opacity: 0; }
/* Glass Desktop dock: a clear slab, tiles sit on it */
.dl-mac .dock { padding: 7px 9px; border-radius: 22px; gap: 5px; }
.dl-mac .di-ic { border-radius: 12px; } .dl-mac .di-l { font-size: 10.5px; }
/* rail */
.rail { position: absolute; left: var(--pad); top: calc(var(--top) + var(--gap) + var(--tx, 0px)); bottom: var(--pad); width: 82px; z-index: 26; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; }
.rail .di { width: 100%; padding: 7px 0 6px; border-radius: var(--r-m); gap: 4px; } .rail .di-ic { width: 38px; height: 38px; } .rail .di::after, .rail .tipx { display: none; }
.rail .di[aria-pressed="true"] { background: var(--accent-soft); } .rail .di[aria-pressed="true"] .di-ic { background: none; }
/* one launcher */
.bub { position: absolute; right: 34px; bottom: 30px; z-index: 27; width: 60px; height: 60px; }
.bub .fab { position: absolute; inset: 0; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--prim); color: var(--prim-ink); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55); transition: transform .3s var(--ease-out); }
.bub .fab:active { transform: scale(.94); } .bub.open .fab { transform: rotate(45deg); }
.bub .it { position: absolute; left: 50%; top: 50%; height: 44px; padding: 0 14px 0 5px; border-radius: 999px; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 560; font-size: 13px;
  opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.9); transition: transform .34s var(--ease-out), opacity .2s ease; }
.bub .it i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.bub.open .it { opacity: 1; pointer-events: auto; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }

/* ---------- reactions ---------- */
.rxb { position: absolute; display: flex; gap: 5px; padding: 6px; border-radius: 999px; z-index: 6; }
.rxb .chip { height: 36px; min-width: 36px; padding: 0 9px; border-radius: 999px; border: 0; background: var(--sf-2); display: inline-flex; gap: 5px; align-items: center; font-size: 17px; transition: transform .14s var(--ease-out), background-color .16s ease; }
.rxb .chip b { font: 600 11.5px var(--mono); color: var(--ink-2); }
.rxb .chip:active { transform: scale(.9); } .rxb .chip[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover: hover) and (pointer: fine) { .rxb .chip:hover { transform: translateY(-2px) scale(1.08); } .rxb .chip:hover:active { transform: scale(.92); } }
.fly { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.fly span { position: absolute; font-size: 30px; animation: rmFly 2.6s cubic-bezier(.2, .7, .3, 1) forwards; will-change: transform, opacity; }
@keyframes rmFly { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translate(calc(var(--dx) * .15), -40px) scale(1.15); } 100% { transform: translate(var(--dx), -460px) scale(.9) rotate(var(--rot, 12deg)); opacity: 0; } }
.spark { position: absolute; width: 0; height: 0; z-index: 7; pointer-events: none; }
.spark i { position: absolute; left: -1.5px; top: -9px; width: 3px; height: 9px; border-radius: 2px; background: var(--warn); transform: rotate(var(--r)) translateY(-10px); animation: rmSpark .45s var(--ease-out) forwards; }
@keyframes rmSpark { to { transform: rotate(var(--r)) translateY(-34px) scaleY(.3); opacity: 0; } }
.fan { position: absolute; width: 0; height: 0; z-index: 6; }
.fan .fb { position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 50%; border: 0; font-size: 20px; background: var(--sf); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transform: scale(.9); transition: transform .32s var(--ease-out), opacity .18s ease; }
.fan.open .fb { opacity: 1; pointer-events: auto; transform: translate(var(--x), var(--y)); } .fan .fb:active { transform: translate(var(--x), var(--y)) scale(.9); }
.fan .hub { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%; }

/* ---------- raise hand ---------- */
.hint { position: absolute; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 580; z-index: 8; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; animation: rmPop .26s var(--ease-out) both; }
.hint .n { width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #201400; display: grid; place-items: center; font: 700 11.5px var(--mono); }
@keyframes rmPop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.handq { position: absolute; right: 14px; top: 14px; width: 232px; padding: 12px; display: grid; gap: 8px; z-index: 7; }
.handq .r { display: flex; gap: 9px; align-items: center; font-size: 13px; animation: rmIn .26s var(--ease-out) both; }
.handq .r .mono { width: 16px; color: var(--ink-3); } .handq .r small { display: block; color: var(--ink-3); font-size: 11.5px; }
.handq .r .new { margin-left: auto; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.askbox { position: absolute; left: 50%; bottom: 76px; width: 340px; margin-left: -170px; padding: 14px; display: grid; gap: 10px; z-index: 9; transform-origin: 50% 100%; animation: rmGrow .22s var(--ease-out) both; }
@keyframes rmGrow { from { opacity: 0; transform: scale(.95) translateY(6px); } }
.askbox textarea { min-height: 64px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--sf-2); padding: 9px 10px; resize: none; }
.askbox .row { display: flex; gap: 8px; justify-content: flex-end; }
/* D · a big hand rises along the side of the stage, waves, then parks there as your marker */
.bighand { position: absolute; right: 18px; top: 50%; z-index: 9; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.bighand .e { font-size: 86px; line-height: 1; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45)); transform-origin: 70% 90%; animation: rmHandUp .9s cubic-bezier(.2, 1.3, .3, 1) both, rmWave 1.5s ease-in-out .9s 2; }
.bighand .t { pointer-events: auto; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; animation: rmPop .3s var(--ease-out) .5s both; }
.bighand .t button { border: 0; background: none; color: var(--accent); font-weight: 650; padding: 0; }
.bighand.down .e { animation: rmHandDown .32s var(--ease-io) both; } .bighand.down .t { animation: none; opacity: 0; transition: opacity .15s ease; }
@keyframes rmHandUp { from { transform: translateY(420px) rotate(-18deg) scale(.7); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(-50%) rotate(0) scale(1); opacity: 1; } }
@keyframes rmHandDown { from { transform: translateY(-50%); opacity: 1; } to { transform: translateY(260px) scale(.8); opacity: 0; } }
@keyframes rmWave { 0%, 100% { transform: translateY(-50%) rotate(0); } 25% { transform: translateY(-50%) rotate(14deg); } 75% { transform: translateY(-50%) rotate(-10deg); } }
.handrail { position: absolute; right: 22px; top: 18px; z-index: 8; display: grid; gap: 6px; justify-items: end; }
.handrail span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; font-size: 12px; font-weight: 560; animation: rmIn .26s var(--ease-out) both; }

/* ---------- highlight: the host points at a control ---------- */
.hl { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.hl .ring { position: absolute; inset: -5px; border-radius: calc(var(--r-m) + 5px); box-shadow: 0 0 0 2.5px var(--accent); animation: rmRing 1.5s var(--ease-out) infinite; }
@keyframes rmRing { 0% { box-shadow: 0 0 0 2.5px var(--accent), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 2.5px var(--accent), 0 0 0 16px transparent; } }
.hl .tip { position: absolute; left: 50%; bottom: calc(100% + 16px); width: max-content; max-width: 250px; padding: 9px 10px 9px 12px; border-radius: var(--r-m); background: #14161D; color: #fff; font-size: 12.5px; font-weight: 520; line-height: 1.35; display: flex; gap: 9px; align-items: flex-start; pointer-events: auto; text-align: left; white-space: normal;
  transform: translateX(-50%); transform-origin: 50% 100%; animation: rmTip .24s var(--ease-out) both; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7); }
.hl .tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #14161D; }
.hl .tip small { display: block; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.hl .tip button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; border-radius: 6px; height: 22px; padding: 0 7px; font-size: 11.5px; font-weight: 600; flex: none; }
@keyframes rmTip { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.96); } }
[data-side="right"] > .hl .tip { left: calc(100% + 16px); bottom: auto; top: 50%; transform: translateY(-50%); transform-origin: 0 50%; animation-name: rmTipR; }
[data-side="right"] > .hl .tip::after { left: auto; right: 100%; top: 50%; margin: -6px 0 0; border-color: transparent; border-right-color: #14161D; }
@keyframes rmTipR { from { opacity: 0; transform: translateY(-50%) translateX(-6px) scale(.96); } }
[data-side="bottom"] > .hl .tip { bottom: auto; top: calc(100% + 16px); transform-origin: 50% 0; }
[data-side="bottom"] > .hl .tip::after { top: auto; bottom: 100%; border-color: transparent; border-bottom-color: #14161D; }
/* B · spotlight: the room dims, only the control stays lit */
.hl-spot .ring { animation: none; box-shadow: 0 0 0 3px #fff, 0 0 0 3000px rgba(6, 8, 14, .62); }
.hl-spot .tip { background: #fff; color: #14161D; max-width: 270px; padding: 12px; font-size: 13px; } .hl-spot .tip::after { border-top-color: #fff; }
[data-side="right"] > .hl-spot .tip::after { border-top-color: transparent; border-right-color: #fff; } [data-side="bottom"] > .hl-spot .tip::after { border-top-color: transparent; border-bottom-color: #fff; }
.hl-spot .tip button { background: #14161D; height: 26px; padding: 0 10px; }
/* C · beacon: a bouncing arrow and a ping */
.hl-beacon .ring { inset: auto; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: rmPing 1.3s var(--ease-out) infinite; }
@keyframes rmPing { to { box-shadow: 0 0 0 14px transparent; } }
.hl-beacon .tip { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 7px 8px 7px 13px; align-items: center; animation: rmTip .24s var(--ease-out) both, rmBob 1.1s ease-in-out .3s infinite; } .hl-beacon .tip::after { border-top-color: var(--accent); }
.hl-beacon .tip small { display: none; }
@keyframes rmBob { 50% { margin-bottom: 7px; } }
[data-side="right"] > .hl-beacon .tip::after { border-top-color: transparent; border-right-color: var(--accent); } [data-side="bottom"] > .hl-beacon .tip::after { border-top-color: transparent; border-bottom-color: var(--accent); }
/* D · glow: the control lifts and shines, the tip is a badge */
.hl-glow .ring { inset: -3px; animation: rmGlow 2.2s ease-in-out infinite; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, #fff), 0 0 22px 2px color-mix(in srgb, var(--accent) 70%, transparent); overflow: hidden; }
.hl-glow .ring::after { content: ""; position: absolute; inset: 0 auto 0 -80%; width: 60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: rmSheen 2.2s var(--ease-io) infinite; }
@keyframes rmGlow { 50% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, #fff), 0 0 34px 8px color-mix(in srgb, var(--accent) 70%, transparent); } }
.hl-glow .tip { background: var(--sf, #fff); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 16px 34px -14px rgba(0, 0, 0, .5); } .hl-glow .tip::after { display: none; }
.hl-glow .tip button { background: var(--sf-3); color: var(--ink); }
.di.hl-on.glow { transform: translateY(-8px) scale(1.12); }

/* ---------- notice from the host ---------- */
.note-strip { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--top) + var(--gap)); height: 40px; z-index: 22; }
.marq { height: 100%; display: flex; align-items: center; overflow: hidden; border-radius: var(--r-m); font-size: 13px; }
.marq .tl { flex: none; align-self: stretch; display: inline-flex; gap: 7px; align-items: center; padding: 0 13px; background: var(--prim); color: var(--prim-ink); font: 650 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.marq .track { display: flex; gap: 54px; padding-left: 26px; white-space: nowrap; animation: rmMarq 26s linear infinite; }
.marq:hover .track { animation-play-state: paused; } .marq .track b { color: var(--accent); }
@keyframes rmMarq { to { transform: translateX(-50%); } }
.sticky { height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-radius: var(--r-m); font-size: 13.5px; }
.sticky .sp { flex: 1; } .sticky .k { --kh: 28px; font-size: 12.5px; }
.island { position: absolute; left: 50%; top: calc(var(--top) + 4px); z-index: 34; height: 36px; max-width: 36px; min-width: 190px; padding: 0 14px 0 6px; border-radius: 20px; display: flex; align-items: center; gap: 9px; overflow: hidden; white-space: nowrap; background: #0C0D11; color: #fff; font-size: 13px; font-weight: 580; cursor: pointer;
  transform: translateX(-50%); transition: max-width .5s var(--ease-drawer), height .4s var(--ease-drawer), border-radius .4s var(--ease-drawer); max-width: 230px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.island .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--live); display: grid; place-items: center; flex: none; }
.island .more { display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity .25s ease .12s; font-weight: 440; }
.island.open { max-width: 640px; height: 54px; border-radius: 27px; } .island.open .more { opacity: 1; }
.island .k { --kh: 30px; background: #fff; color: #0C0D11; border: 0; box-shadow: none; }
.dl-mac .island { top: 4px; }

/* ---------- up next ---------- */
.un { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; z-index: 6; max-width: 360px; }
.un .ring2 { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; font: 650 12.5px var(--mono); }
.un .ring2 svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.un b { display: block; font-size: 14px; line-height: 1.25; } .un small { color: var(--ink-3); font-size: 12px; }
.rot { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 999px; z-index: 6; font-size: 13.5px; white-space: nowrap; }
.rot .w { color: var(--accent); font-weight: 650; display: inline-block; animation: rmWord .4s var(--ease-out) both; }
@keyframes rmWord { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.flap { position: absolute; left: 14px; bottom: 14px; padding: 10px 12px; display: grid; gap: 6px; z-index: 6; }
.flap .row { display: flex; gap: 3px; }
.flap .c { width: 19px; height: 28px; border-radius: 3px; background: #0D0E12; color: #F4E9C8; display: grid; place-items: center; font: 650 15px var(--mono); position: relative; }
.flap .c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .14); }
.flap .c.flip { animation: rmFlip .22s ease-in-out; }
@keyframes rmFlip { 50% { transform: scaleY(.1); } }

/* ---------- who is here ---------- */
.att { position: absolute; right: 14px; top: 14px; display: inline-flex; gap: 9px; align-items: center; padding: 6px 13px 6px 7px; border-radius: 999px; z-index: 6; font-size: 13px; font-weight: 520; }
.avs { display: inline-flex; } .avs .fc { width: 26px; height: 26px; margin-left: -8px; box-shadow: 0 0 0 2px var(--avring, rgba(255, 255, 255, .9)); } .avs .fc:first-child { margin-left: 0; }
.mem { position: absolute; right: 14px; top: 14px; width: 232px; padding: 10px 12px 12px; display: grid; gap: 4px; z-index: 6; }
.mem .head { display: flex; gap: 9px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; font-weight: 620; }
.feed { position: absolute; right: 14px; top: 14px; display: grid; gap: 6px; justify-items: end; z-index: 6; }
.feed .att { position: static; }
.feed .row { display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 12.5px; animation: rmJoin .36s var(--ease-out) both; }
@keyframes rmJoin { from { opacity: 0; transform: translateX(16px) scale(.96); } }

/* ---------- captions ---------- */
.cap-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 76%; padding: 8px 14px; border-radius: var(--r-s); background: rgba(8, 9, 12, .78); color: #fff; font-size: 16px; line-height: 1.35; text-align: center; z-index: 6; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cap-bar b { color: #9CC4FF; font-weight: 600; margin-right: 6px; }
.cap-bub { position: absolute; left: 22px; bottom: 22px; max-width: 46%; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px 10px 10px; border-radius: 18px 18px 18px 4px; z-index: 6; font-size: 14.5px; line-height: 1.35; }
.cap-bub .fc { width: 30px; height: 30px; }
.cap-pan { position: absolute; right: 14px; bottom: 14px; width: 270px; max-height: 210px; padding: 10px 12px; display: grid; gap: 6px; z-index: 6; font-size: 13px; overflow: hidden; }
.cap-pan .ln { display: grid; grid-template-columns: 38px 1fr; gap: 8px; color: var(--ink-2); } .cap-pan .ln time { font: 500 11px var(--mono); color: var(--ink-3); padding-top: 2px; } .cap-pan .ln.now { color: var(--ink); font-weight: 560; }
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 2px; animation: rmPulse 1s steps(2) infinite; }

/* ---------- offers ---------- */
.offer { position: absolute; right: calc(var(--pad) + 8px); bottom: calc(var(--dockh) + 10px); width: 286px; padding: 10px; display: grid; gap: 9px; z-index: 28; transform-origin: 100% 100%; animation: rmOffer .42s var(--ease-drawer) both; }
@keyframes rmOffer { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.offer .img { height: 96px; border-radius: var(--r-m); background: linear-gradient(135deg, #17325E, #2F7AD6 60%, #7FD4F5); display: grid; align-content: end; padding: 10px; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.offer p { font-size: 12.5px; color: var(--ink-2); } .offer .row { display: flex; gap: 8px; } .offer .row .k { flex: 1; }
.offer .x { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .4); color: #fff; display: grid; place-items: center; }
.offer-strip { position: absolute; left: 50%; bottom: calc(var(--dockh) + 6px); transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 7px 8px 7px 16px; border-radius: 999px; z-index: 28; font-size: 13.5px; white-space: nowrap; animation: rmPop .3s var(--ease-out) both; }
.offer-strip .k { --kh: 30px; }
.offer-pop { position: absolute; right: 150px; top: calc(var(--top) + 6px); width: 270px; padding: 12px; display: grid; gap: 8px; z-index: 36; transform-origin: 80% 0; animation: rmGrow .22s var(--ease-out) both; font-size: 13px; }

/* ---------- things that pop up: a poll the host just launched ---------- */
.pop-enter { animation: rmGrow .26s var(--ease-out) both; }
.tile-enter { animation: rmTile .42s var(--ease-drawer) both; }
@keyframes rmTile { from { opacity: 0; transform: scale(.9); } }
.pop-island { position: absolute; left: 50%; top: calc(var(--top) + 4px); z-index: 35; width: 330px; margin-left: -165px; border-radius: 22px; overflow: hidden; background: #0C0D11; color: #fff; --ink: #fff; --ink-2: #C3C7D2; --ink-3: #8E94A3; --line: rgba(255, 255, 255, .14); --sf-2: rgba(255, 255, 255, .08); --sf-3: rgba(255, 255, 255, .14); --sf: #1B1D24;
  max-height: 42px; transition: max-height .5s var(--ease-drawer), border-radius .4s var(--ease-drawer); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75); animation: rmDrop .5s var(--ease-drawer) both; }
.pop-island.open { max-height: 380px; }
.pop-island .hd { height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 9px; font-size: 13px; font-weight: 580; cursor: pointer; }
.pop-island .hd .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #fff; }
.pop-island .hd .k { --kh: 26px; margin-left: auto; background: #fff; color: #0C0D11; border: 0; font-size: 12px; box-shadow: none; }
.pop-island .bdy { padding: 4px 14px 14px; }
@keyframes rmDrop { from { transform: translateY(-60px); opacity: 0; } }
.dl-mac .pop-island { top: 4px; }
.drawer { position: absolute; right: 14px; top: 14px; bottom: 14px; width: 330px; z-index: 10; animation: rmDrawer .38s var(--ease-drawer) both; box-shadow: var(--sf-sh), -24px 0 60px -30px rgba(0, 0, 0, .6); }
@keyframes rmDrawer { from { transform: translateX(calc(100% + 20px)); } }

/* ---------- numbered pins ("Your UI") ---------- */
.pin { position: absolute; z-index: 60; width: 28px; height: 28px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #fff; background: #2F6BFF; color: #fff; font: 700 12px/1 var(--font); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); transition: transform .14s var(--ease-out), background-color .16s ease; pointer-events: auto !important; padding: 0; }
.pin:active { transform: scale(.92); } .pin.nopick { background: #7D8494; } .pin.on { background: #12A150; transform: scale(1.14); }
@media (hover: hover) and (pointer: fine) { .pin:hover { transform: scale(1.14); } }

/* ---------- demo cards (buttons, motion) ---------- */
.demo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 26px; display: grid; gap: 18px; min-width: 560px; z-index: 30; }
.demo .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.demo .k { --kh: 46px; font-size: 15px; padding: 0 20px; } .demo .k.ic { padding: 0; }
.demo .say { color: var(--ink-3); font-size: 13px; min-height: 18px; }

/* ---------- waiting room ---------- */
.lobby { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; }
.lobby .card { padding: 34px; display: grid; gap: 18px; }
.lobby h2 { font-size: 34px; line-height: 1.08; letter-spacing: -.025em; font-weight: 680; max-width: 16ch; }
.cd { display: flex; gap: 10px; } .cd div { min-width: 74px; padding: 12px 10px; border-radius: var(--r-m); background: var(--sf-2); text-align: center; } .cd b { display: block; font: 650 32px/1 var(--mono); } .cd small { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.lobby.l-a .card { width: 880px; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; }
.lobby .ag { display: grid; gap: 8px; } .lobby .ag div { display: flex; gap: 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--sf-2); font-size: 14px; } .lobby .ag time { font: 600 12px var(--mono); color: var(--ink-3); width: 44px; padding-top: 2px; }
.lobby.l-b .card { width: 940px; } .lobby .spk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .lobby .spk .vt { aspect-ratio: 4 / 3; }
.lobby.l-b .top { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.lobby.l-c { color: var(--on-bg); text-align: center; } .lobby.l-c .big { font: 650 150px/1 var(--mono); letter-spacing: -.04em; } .lobby.l-c p { font-size: 18px; opacity: .8; } .lobby.l-c .tb-logo { justify-content: center; font-size: 20px; margin-bottom: 26px; } .lobby.l-c .tb-logo i { width: 36px; height: 30px; }

/* ---------- speaker view ---------- */
.self { position: absolute; left: 14px; top: 14px; width: 190px; aspect-ratio: 16 / 10; z-index: 6; box-shadow: 0 0 0 2px var(--ok), 0 14px 30px -12px rgba(0, 0, 0, .6); }
.onair { display: inline-flex; gap: 7px; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; background: var(--live); color: #fff; font: 700 11px var(--mono); letter-spacing: .1em; }
.back-strip { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: var(--gap); height: 150px; flex: none; }
.back-strip .win-bd { padding: 10px 12px; gap: 7px; font-size: 13px; }
.bigt { font: 650 40px/1 var(--mono); letter-spacing: -.02em; }
.thumbs { display: flex; gap: 8px; } .thumbs .vt { flex: 1; aspect-ratio: 16 / 10; } .thumbs .vt.cur { box-shadow: 0 0 0 2.5px var(--accent); }

/* ---------- host view ---------- */
.hp { padding: 14px; display: grid; gap: 9px; align-content: start; font-size: 13.5px; }
.hp h5 { margin: 6px 0 0; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hp .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sw { width: 36px; height: 21px; border-radius: 11px; border: 0; background: var(--sf-3); position: relative; flex: none; transition: background-color .2s ease; padding: 0; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .22s var(--ease-out); }
.sw[aria-checked="true"] { background: var(--ok); } .sw[aria-checked="true"]::after { transform: translateX(15px); }
.sw:active::after { width: 21px; }
.mini { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 46px 30px; gap: 5px; padding: 6px; border-radius: var(--r-m); background: var(--sf-2); }
.mini i { border-radius: 6px; background: var(--sf-3); display: grid; place-items: center; font: 600 10px var(--mono); font-style: normal; color: var(--ink-2); cursor: grab; transition: transform .14s var(--ease-out), background-color .16s ease; }
.mini i.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); } .mini i:active { transform: scale(.95); }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .presets button { border: 1px solid var(--line); background: var(--sf-2); border-radius: var(--r-m); padding: 8px 4px; display: grid; gap: 5px; justify-items: center; font-size: 11.5px; font-weight: 600; transition: transform .14s var(--ease-out), border-color .16s ease; }
.presets button:active { transform: scale(.96); } .presets button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.presets .dots { display: flex; gap: 3px; } .presets .dots i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .5; }
.tline { padding: 10px 12px; display: grid; gap: 8px; font-size: 13px; flex: none; }
.tline .tr { position: relative; display: flex; gap: 3px; height: 30px; }
.tline .sg { border: 0; border-radius: 6px; background: var(--sf-2); font-size: 11.5px; font-weight: 560; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 6px; transition: background-color .16s ease; }
.tline .sg.done { background: color-mix(in srgb, var(--ok) 20%, transparent); } .tline .sg.now { background: var(--accent); color: var(--accent-ink); }
.tline .ph { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 2px; transition: left 1s linear; }

@media (prefers-reduced-motion: reduce) {
  .rm *, .rm *::before, .rm *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  .rm .marq .track, .rm .bg-space::after { animation: none !important; }
  .rm .fly span { animation: rmFade .8s ease forwards !important; }
}
@keyframes rmFade { from { opacity: 1; } to { opacity: 0; } }

/* ---------- fixes and additions found while assembling the room ---------- */
.col { display: flex; flex-direction: column; grid-auto-rows: unset; }
.col > * { flex: 1 1 0; min-height: 0; }
.col > .fixh { flex: none; }
.col.l-bento > .spk-row { flex: .46 1 0; }
.spk-row .vt { border-radius: var(--r-l); }
.body.lay-desk { display: block; }
.win.bare > .win-bd > .stage-in { padding: var(--gap); }
.dl-clean .side:not(.float):not(.drawer) > .win-hd { display: none; }
.un { top: 46px; bottom: auto; } .flap { top: 46px; bottom: auto; } .rot { top: 14px; bottom: auto; }
.hint { left: 50%; bottom: 14px; translate: -50% 0; }
.offer-strip { transform: none; translate: -50% 0; }
.di.hl-on { z-index: 5; } .di.hl-on .tipx { display: none; }
.tb-nav button { position: relative; } .tb-nav button.hl-on { z-index: 5; }
.hl .tip .k { background: rgba(255, 255, 255, .16); color: inherit; border: 0; box-shadow: none; }
.hl-spot .tip .k { background: #14161D; color: #fff; } .hl-glow .tip .k { background: var(--sf-3); color: var(--ink); } .hl-beacon .tip .k { background: rgba(255, 255, 255, .24); }
.onair { flex: none; }
.dl-mac .tb .k.d { background: none; }
.rm[data-tone="dark"] .avs .fc { --avring: rgba(20, 22, 28, .9); }
.self .ntag { left: 6px; bottom: 6px; position: absolute; }

/* the lit outline hugs the dock itself, not the band it sits in */
.dockwrap.z.lit:not(.ov) { outline: 0; animation: none; }
.dockwrap.lit > .dock { outline: 2.5px solid #4C8DFF; outline-offset: 5px; animation: rmLit 1.1s var(--ease-out) 1; }
.see.lit { border-radius: var(--r-m); outline-offset: 7px; }
/* glass that floats over video or slides is thicker, so text on it stays readable whatever is behind */
.rm[data-mat="liquid"][data-tone="dark"], .rm[data-mat="frost"][data-tone="dark"] { --sf-over: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), rgba(16, 18, 26, .62); --bf-over: blur(22px) saturate(190%); }
.rm[data-mat="liquid"][data-tone="light"], .rm[data-mat="frost"][data-tone="light"] { --sf-over: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .34)), rgba(255, 255, 255, .5); --bf-over: blur(22px) saturate(200%); }
.rm[data-mat="smoke"] { --sf-over: rgba(5, 6, 9, .76); }
.ov .sf, .sf.over { background: var(--sf-over, var(--sf)); -webkit-backdrop-filter: var(--bf-over, var(--bf)); backdrop-filter: var(--bf-over, var(--bf)); }
/* windows under the dock: the frame runs behind it, the controls stay clear of it */
.rm[data-fit="under"]:not(.lay-theatre-on) .col-main .stage-ft { padding-bottom: calc(var(--dockh) - var(--pad)); }
.handrail { top: calc(50% - 150px); }
.cap-pan { right: auto; left: 14px; }
.self { top: auto; bottom: 14px; }
.ctl.expand .k { border-radius: var(--r-key, 11px); }

/* B · one joined capsule; labels slide out when you point at it (it also opens by itself while it is the subject) */
.ctl.expand { gap: 0; padding: 5px; border-radius: calc(var(--r-key, 11px) + 6px); }
.ctl.expand .k { background: none; border: 0; box-shadow: none; border-radius: var(--r-key, 11px); }
.ctl.expand .k + .k { margin-left: 1px; }
.ctl.expand .k + .k::after { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
.ctl.expand .k.off { color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); } .ctl.expand .k.d { background: var(--live); color: #fff; }
.ctl.expand .k.d::after, .ctl.expand .k.off + .k::after { display: none; }
@media (hover: hover) and (pointer: fine) { .ctl.expand .k:hover { background: var(--sf-3); } .ctl.expand .k.d:hover { background: color-mix(in srgb, var(--live) 88%, #000); } }

.dl-mac .k.off { background: linear-gradient(180deg, rgba(255, 69, 58, .34), rgba(255, 69, 58, .2)); color: #FF8A82; }
.dl-mac[data-tone="light"] .k.off { background: rgba(255, 59, 48, .14); color: #D92D20; }
.dl-mac .k.raised { background: linear-gradient(180deg, rgba(255, 214, 10, .42), rgba(255, 214, 10, .24)); color: #FFE680; }
.dl-mac[data-tone="light"] .k.raised { background: rgba(255, 204, 0, .3); color: #6B4E00; }

/* captions along the bottom: reactions step up so the two never overlap */
.has-capbar .rxb { bottom: 62px !important; } .has-capbar .fan { bottom: 104px !important; }
.cap-bar { max-width: 62%; }
.offer { bottom: calc(var(--dockh) + 62px); }

/* raise hand: the last tool, set apart; amber when up */
.dsep { align-self: stretch; width: 1px; margin: 6px 4px; background: var(--line); flex: none; }
.dk-mag .dsep { margin: 8px 6px; }
.di.act[aria-pressed="true"] { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); } .di.act[aria-pressed="true"] .di-ic { background: color-mix(in srgb, var(--warn) 26%, transparent); }
.di.act[aria-pressed="true"]::after { background: var(--warn); }
.rm[data-icons="tile"] .di.act[aria-pressed="true"] .tile-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 2.5px var(--warn), 0 8px 18px -6px rgba(245, 154, 11, .8); }
.rail .di.act[aria-pressed="true"] { background: color-mix(in srgb, var(--warn) 20%, transparent); }
.tb-nav button.act[aria-pressed="true"] { background: color-mix(in srgb, var(--warn) 26%, transparent); color: inherit; }
.bub .it[aria-pressed="true"] i { background: var(--warn); color: #201400; }
/* tools arrive one after another (decorative, never blocks a click) */
.dock .di { animation: rmDi .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes rmDi { from { opacity: 0; translate: 0 10px; } }
/* liquid glass: a soft light from the top-left corner */
.rm[data-mat="liquid"][data-tone="dark"] { --sf: radial-gradient(120% 70% at 6% 0%, rgba(255, 255, 255, .17), transparent 58%), linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 46%, rgba(255, 255, 255, .08)); }
.rm[data-mat="liquid"][data-tone="light"] { --sf: radial-gradient(120% 70% at 6% 0%, rgba(255, 255, 255, .5), transparent 58%), linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, .3)); }

/* liquid glass on a dark picture: a thin dark tint under the sheen keeps white text readable over bright patches */
.rm[data-mat="liquid"][data-tone="dark"] { --sf: radial-gradient(120% 70% at 6% 0%, rgba(255, 255, 255, .17), transparent 58%), linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 46%, rgba(255, 255, 255, .08)), linear-gradient(rgba(8, 10, 18, .34), rgba(8, 10, 18, .34)); --bf: blur(10px) saturate(190%) brightness(.84); }
.rm[data-mat="frost"][data-tone="dark"] { --sf: linear-gradient(rgba(132, 140, 168, .27), rgba(132, 140, 168, .27)), linear-gradient(rgba(8, 10, 18, .3), rgba(8, 10, 18, .3)); }

/* ---------- sponsor banners (Webinar OS: a banner image with a link on any side of the stage) ---------- */
.ban { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); background: #0B2D45; color: #fff; isolation: isolate; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); cursor: pointer; }
.ban-slide { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 16px; background-size: cover; background-position: center; animation: rmBan .5s var(--ease-out) both; }
@keyframes rmBan { from { opacity: 0; transform: translateY(8px); } }
.ban-slide b { font-size: 15px; font-weight: 680; letter-spacing: -.01em; white-space: nowrap; } .ban-slide span { font-size: 13px; opacity: .86; }
.ban-slide .go { margin-left: auto; height: 30px; padding: 0 14px; border-radius: 999px; background: #fff; color: #0B1420; font-size: 12.5px; font-weight: 650; display: inline-flex; align-items: center; white-space: nowrap; opacity: 1; flex: none; }
.ban-tag { position: absolute; left: 8px; top: 6px; z-index: 2; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .42); color: rgba(255, 255, 255, .86); }
.ban-dots { position: absolute; right: 10px; bottom: 6px; z-index: 2; display: flex; gap: 4px; } .ban-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background-color .2s ease, transform .2s var(--ease-out); } .ban-dots i.on { background: #fff; transform: scale(1.3); }
.ban-x { position: absolute; right: 6px; top: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; display: grid; place-items: center; padding: 0; transition: transform .14s var(--ease-out); } .ban-x:active { transform: scale(.9); }
.ban-tick { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 22px; display: flex; align-items: center; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 11.5px; white-space: nowrap; }
.ban-tick .track { display: flex; gap: 40px; padding-left: 20px; animation: rmMarq 22s linear infinite; }
.ban-chip { border: 0; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.ban-top, .ban-bottom { position: absolute; left: var(--pad); right: calc(var(--pad) + var(--rx, 0px)); height: 60px; z-index: 21; }
.ban-top { top: calc(var(--top) + var(--gap) + var(--nx, 0px)); }
.ban-side { position: absolute; right: var(--pad); width: 150px; top: calc(var(--top) + var(--gap) + var(--tx, 0px)); z-index: 21; }
.ban-side .ban-slide { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 34px 14px 16px; gap: 8px; } .ban-side .ban-slide b { white-space: normal; font-size: 17px; line-height: 1.15; } .ban-side .ban-slide .go { margin: auto 0 0; }
.ban-side .ban-tick { height: 26px; }
.ban-tile { flex: none !important; height: 168px; } .ban-tile .ban-slide { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 14px; gap: 4px; } .ban-tile .ban-slide .go { margin: 6px 0 0; } .ban-tile.float { position: absolute; left: 14px; bottom: 76px; width: 280px; z-index: 9; }
.ban-top .ban-slide.img b, .ban-top .ban-slide.img span, .ban-bottom .ban-slide.img b, .ban-bottom .ban-slide.img span, .ban-side .ban-slide.img > *, .ban-tile .ban-slide.img > * { display: none; }
.ban-wrap-chip { position: absolute; z-index: 21; }