/* Watchntalk · "Gece, deri koltuk, köşe lambası"
   A living room at night, seen from the couch. The TV is the main light, the corner lamp the
   warm one, and everyone in the room has a place on one wide leather couch. Surfaces climb in even
   steps from the night; only one control per view is filled with lamp amber. */

@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/young-serif-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/young-serif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  /* The room at night */
  --night: #120d0a;
  --night-deep: #0c0907;
  --wood: #1a140f;
  --wood-2: #241b15;
  --wood-3: #30251c;
  --line: rgba(255, 226, 190, 0.08);
  --line-strong: rgba(255, 226, 190, 0.14);
  /* Ink, warm paper under lamp light */
  --ink: #f3e7d8;
  --ink-2: #cbb9a4;
  --ink-3: #a08b77;
  /* Light sources: the lamp acts, the screen glows, a speaking voice is green */
  --lamp: #f2b45a;
  --lamp-strong: #f8c87e;
  --lamp-ink: #2a1806;
  --lamp-tint: rgba(242, 180, 90, 0.13);
  --lamp-ring: rgba(242, 180, 90, 0.3);
  /* Your own chat bubble: lamp light on wood, not the lamp itself */
  --lamp-wood: #4a3720;
  --leather: #8a4a26;
  --leather-deep: #4f240f;
  --brass: #c9a062;
  --screen: #ffd9a8;
  --screen-glow: rgba(255, 190, 110, 0.3);
  --live: #9fd8a6;
  --live-ink: #10261a;
  --live-tint: rgba(159, 216, 166, 0.14);
  --alert: #f2918a;
  --alert-tint: rgba(242, 145, 138, 0.14);
  /* Type */
  --display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-cap: 12px; --fs-sm: 13px; --fs-ui: 14px; --fs-body: 15px; --fs-lg: 17px; --fs-h3: 19px; --fs-h2: 26px;
  /* Shape: furniture radii */
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 22px 56px rgba(0, 0, 0, 0.55);
  /* Motion tokens (transitions.dev scale) */
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out;
  --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out;
  --tabs-dur: 250ms; --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toast-open: 350ms; --toast-close: 250ms; --toast-distance: 16px; --toast-blur: 2px; --toast-scale: 0.97; --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms; --modal-close-dur: 150ms; --modal-scale: 0.96; --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: 16px;
  --bar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--wood-3) transparent; }
body { margin: 0; min-height: 100dvh; background: var(--night); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; caret-color: var(--lamp); }
::selection { background: rgba(242, 180, 90, 0.34); color: #fff8ee; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; margin: 0; line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: 0.42; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: var(--r-xs); }
input::placeholder { color: var(--ink-3); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.solid { fill: currentColor; stroke: none; }
.glyph-text { font: 700 7px/1 var(--ui); fill: currentColor; stroke: none; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--lamp); color: var(--lamp-ink); border-radius: var(--r-sm); font-weight: 650; }
.skip:focus-visible { top: 12px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--wood-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 22px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.wordmark b, .footer-brand b { color: var(--lamp); font-weight: inherit; }
.mark { display: block; width: 30px; height: 21px; }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-md); font: 650 var(--fs-ui)/1 var(--ui); letter-spacing: 0; white-space: nowrap; transition-property: background-color, color, box-shadow, scale; transition-duration: var(--duration-quick); transition-timing-function: var(--ease-out); }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .call-btn:active:not(:disabled) .call-icon, .chip:active:not(:disabled) { scale: 0.96; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--lamp); color: var(--lamp-ink); box-shadow: 0 1px 0 rgba(255, 240, 210, 0.55) inset, 0 -2px 0 rgba(120, 60, 10, 0.25) inset, 0 8px 18px -10px rgba(0, 0, 0, 0.8); }
.btn-primary:hover:not(:disabled) { background: var(--lamp-strong); }
.btn-secondary { background: var(--wood-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.btn-secondary:hover:not(:disabled) { background: var(--wood-3); }
.btn-tonal { background: var(--lamp-tint); color: var(--lamp-strong); box-shadow: 0 0 0 1px var(--lamp-ring) inset; }
.btn-tonal:hover:not(:disabled) { background: rgba(242, 180, 90, 0.2); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--wood-2); }
.btn-lamp { background: var(--lamp); color: var(--lamp-ink); }
.btn-lamp:hover { background: var(--lamp-strong); }
.btn-lg { min-height: 52px; font-size: var(--fs-body); border-radius: 14px; padding: 0 22px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-block { width: 100%; justify-content: space-between; padding: 0 18px 0 20px; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.btn.is-busy .icon { display: none; }
@keyframes spin { to { rotate: 360deg; } }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--ink-2); transition-property: background-color, color, scale; transition-duration: var(--duration-quick); transition-timing-function: var(--ease-out); }
.icon-btn:hover:not(:disabled) { background: var(--wood-2); color: var(--ink); }
.icon-btn.small { width: 32px; height: 32px; }
.icon-btn.small::before { content: ''; position: absolute; inset: -6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; background: var(--wood-3); color: var(--ink-2); font: 650 var(--fs-cap)/1 var(--ui); white-space: nowrap; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), scale var(--duration-quick) var(--ease-out); }
.chip .icon { width: 15px; height: 15px; }
.chip:hover { background: #423024; color: var(--ink); }
.link-btn { min-height: 40px; padding: 0 2px; color: var(--lamp); font: 550 var(--fs-ui)/1.3 var(--ui); text-underline-offset: 4px; }
.link-btn:hover { text-decoration: underline; text-decoration-color: rgba(242, 180, 90, 0.5); }
.text-link { color: var(--lamp); text-decoration: underline; text-decoration-color: rgba(242, 180, 90, 0.4); text-underline-offset: 3px; }
.text-link:hover { text-decoration-color: var(--lamp); }

/* Fields */
.field { display: grid; gap: 7px; }
.field > label, .field-label { font: 650 var(--fs-sm)/1.3 var(--ui); color: var(--ink-2); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.optional { font-weight: 450; color: var(--ink-3); font-size: var(--fs-cap); }
.input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-md); background: var(--night-deep); border: 1px solid var(--line-strong); color: var(--ink); font-size: 16px; transition: border-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
.input:focus { border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(242, 180, 90, 0.18); }
.input-group { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 14px; border-radius: var(--r-md); background: var(--night-deep); border: 1px solid var(--line-strong); transition: border-color 150ms ease-out, box-shadow var(--duration-quick) var(--ease-out); will-change: transform; }
.input-group:focus-within { border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(242, 180, 90, 0.18); }
.input-group > .icon { color: var(--ink-3); width: 18px; height: 18px; }
.input-group input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: none; font-size: 16px; color: var(--ink); }
.input-group.is-error, .input.is-error { border-color: var(--alert); transition: border-color 280ms ease-out; }
.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}
.field-error { min-height: 0; color: var(--alert); font-size: var(--fs-sm); line-height: 1.45; }
.field-error:empty { display: none; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap .icon { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; pointer-events: none; color: var(--ink-3); }
.switch { appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 99px; background: var(--wood-3); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-2); box-shadow: var(--shadow-1); transition: translate var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast); }
.switch:checked { background: var(--live); }
.switch:checked::after { translate: 18px 0; background: var(--live-ink); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 4px; cursor: pointer; }
.switch-row strong { display: block; font-weight: 650; font-size: var(--fs-ui); }
.switch-row small { display: block; color: var(--ink-3); font-size: var(--fs-cap); line-height: 1.45; margin-top: 2px; }

/* Site bar */
.site-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--bar-h); padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.site-nav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 559px) { .site-nav .nav-how, .site-nav .nav-extension { display: none; } }
.nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 11px; border-radius: var(--r-sm); color: var(--ink-2); font: 550 var(--fs-sm)/1 var(--ui); transition: color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out); }
.nav-link:hover { color: var(--ink); background: rgba(255, 222, 180, 0.06); }
.avatar-btn { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 6px; border-radius: 50%; background: rgba(37, 26, 19, 0.8); color: var(--lamp); font: 400 16px/1 var(--display); box-shadow: 0 0 0 1px var(--line-strong) inset; transition: background-color var(--duration-quick) var(--ease-out), scale var(--duration-quick) var(--ease-out); }
.avatar-btn:hover { background: var(--wood-3); }
.avatar-btn:active { scale: 0.96; }
body.in-room .site-bar, body.in-room .site-footer { display: none; }
body.on-scene .site-bar { position: absolute; left: 0; right: 0; top: 0; max-width: none; padding-top: env(safe-area-inset-top); }

/* ---------- The scene: the living room seen from the couch ----------
   Units come from home.svg (x −400…2000, y 0…900); the TV is x 420–1180, y 76–514. --u is one unit
   in px and --top0 is where y 0 lands, so point (X, Y) sits at left 50% + (X − 800)u, top
   --top0 + Y·u. Wide screens: the room fills the viewport and the headline and the form are on the
   TV. Phones and tall screens: the room is a band, the headline stays on the TV, the form follows. */
/* The TV is a size container (its contents adapt to its height), so inside it --u would measure the
   TV instead of the room: --unit carries the room's unit in, resolved where it is set. */
@property --unit { syntax: '<length>'; inherits: true; initial-value: 1px; }
.scene { --u: min(calc(100cqh / 900), calc((100cqw - 48px) / 800)); --top0: calc(100cqh - 900 * var(--u)); position: relative; isolation: isolate; overflow: hidden; container-type: size; height: clamp(620px, 100svh, 1120px); background: #100b08; }
.scene-room { position: absolute; z-index: -2; left: calc(50% - 1200 * var(--u)); top: var(--top0); width: calc(2400 * var(--u)); height: calc(900 * var(--u)); max-width: none; user-select: none; }
.scene-tv { position: absolute; z-index: 1; left: calc(50% - 380 * var(--u)); top: calc(var(--top0) + 76 * var(--u)); width: calc(760 * var(--u)); height: calc(438 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(20 * var(--u)); background: linear-gradient(180deg, #1e1915, #090706); box-shadow: 0 0 0 1px rgba(255, 230, 200, 0.07) inset, 0 1px 0 rgba(255, 236, 210, 0.1) inset, 0 calc(26 * var(--u)) calc(60 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, 0.85), 0 0 calc(160 * var(--u)) calc(10 * var(--u)) rgba(255, 205, 140, 0.08); }
.tv-glass { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(14 * var(--u)); background: #140f0b; }
/* What is on: warm film light drifting slowly over the screen; the type sits on it. */
.tv-glass::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse 46% 52% at 28% 38%, rgba(214, 138, 70, 0.3), transparent 70%), radial-gradient(ellipse 44% 56% at 76% 66%, rgba(150, 82, 52, 0.34), transparent 70%), radial-gradient(ellipse 36% 30% at 58% 18%, rgba(255, 214, 160, 0.1), transparent 70%), linear-gradient(180deg, #20160f, #100b08); animation: tv-film 26s var(--ease-in-out) infinite alternate; }
.tv-glass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(158deg, rgba(255, 244, 228, 0.05), transparent 36%), radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.42)); }
@keyframes tv-film { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -3%) scale(1.06); } 100% { transform: translate(-3%, 2%) scale(1.03); } }
.scene-couch { position: absolute; z-index: 2; left: calc(50% - 500 * var(--u)); top: calc(var(--top0) + 604 * var(--u)); width: calc(1000 * var(--u)); height: calc(1000 * 220 / 760 * var(--u)); }
.tv-content { position: absolute; z-index: 3; left: calc(50% - 374 * var(--u)); top: calc(var(--top0) + 82 * var(--u)); width: calc(748 * var(--u)); height: calc(426 * var(--u)); --unit: var(--u); container: tv / size; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, calc(22 * var(--u)), 24px); padding: calc(28 * var(--u)) calc(56 * var(--u)); text-align: center; }
.hero-title { font-size: clamp(30px, calc(52 * var(--unit)), 70px); line-height: 1.02; letter-spacing: -0.018em; color: var(--ink); }
.hero-title span { color: var(--lamp); }
.hero-lede { margin: clamp(8px, calc(12 * var(--unit)), 14px) auto 0; max-width: 36em; color: var(--ink-2); font-size: clamp(14px, calc(17 * var(--unit)), 18px); line-height: 1.5; }
.hero-form { width: min(100%, 520px); margin: 0 auto; }
.hero-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; text-align: left; }
.hero-fields .field > label { padding-left: 2px; font-size: var(--fs-cap); }
.hero-fields .input { background: rgba(8, 6, 4, 0.6); }
.hero-fields .btn-lg { min-height: 48px; }
.hero-form .field-error { margin: 8px 4px 0; }
.home-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; margin-top: 6px; color: var(--ink-3); }
/* Most people arrive with an invite: joining is the second big button, the demo a quiet link. */
.btn-join { width: 100%; margin-top: 10px; }
.btn-join .icon { color: var(--lamp); }
.home-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin-top: 6px; color: var(--ink-3); font-size: var(--fs-cap); }
.home-meta .link-btn { min-height: 36px; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(255, 226, 190, 0.25); text-underline-offset: 4px; }
.home-meta .link-btn:hover { color: var(--lamp); text-decoration-color: currentColor; }
/* Heights are the TV's content box (its padding already taken off). */
@container tv (max-height: 340px) { .home-meta .meta-text { display: none; } }
@container tv (max-height: 300px) { .hero-lede { display: none; } }
.scene-couch .couch-tag { font-size: clamp(11px, calc(14 * var(--u)), 13px); padding: 4px 10px; max-width: 132px; }

/* ---------- Streaming services ---------- */
.service-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.service { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 48px; padding: 0 11px; border-radius: 12px; background: rgba(24, 17, 12, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 8px 20px -10px rgba(0, 0, 0, 0.8); transition: background-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out), scale var(--duration-quick) var(--ease-out); }
.service:hover { background: rgba(51, 36, 26, 0.95); box-shadow: 0 0 0 1px rgba(242, 180, 90, 0.45) inset, 0 8px 20px -10px rgba(0, 0, 0, 0.8); }
.service:active { scale: 0.96; }
/* Names as text only: no service logos are shown (they belong to their owners; see service-note). */
.service .service-name { color: var(--ink-2); font-size: var(--fs-cap); font-weight: 600; white-space: nowrap; }
.service-note { margin: 8px 0 0; color: var(--ink-3, var(--ink-2)); font-size: var(--fs-cap); text-align: center; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 4px 0 18px; }
.service.large { flex-direction: column; gap: 10px; height: 92px; padding: 14px 10px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.stage-services { margin-top: 6px; }

/* ---------- The couch and the people on it ---------- */
.couch-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.couch-people { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.couch-tags { position: absolute; inset: 0; pointer-events: none; }
.couch-tag { position: absolute; z-index: 2; translate: -50% -50%; display: inline-flex; align-items: center; gap: 5px; max-width: 128px; padding: 4px 10px; border-radius: 999px; background: rgba(12, 8, 6, 0.62); color: var(--ink); font: 650 var(--fs-cap)/1.2 var(--ui); white-space: nowrap; box-shadow: 0 0 0 1px var(--line) inset; pointer-events: auto; transition: box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
button.couch-tag:hover { background: rgba(37, 26, 19, 0.92); }
.couch-tag-name { overflow: hidden; text-overflow: ellipsis; }
.couch-tag-flags { display: inline-flex; align-items: center; gap: 3px; }
.couch-tag-flags:empty { display: none; }
.couch-tag-flags .icon { width: 12px; height: 12px; stroke-width: 2; color: var(--ink-2); }
.couch-tag .talk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.couch-tag.is-self { background: var(--lamp); color: var(--lamp-ink); box-shadow: none; }
.couch-tag.is-self .icon { color: var(--lamp-ink); }
.couch-tag.is-talking { box-shadow: 0 0 0 1.5px var(--live) inset; }
.couch-tag.is-muted .icon:first-child { color: var(--alert); }
.couch-tag.is-self.is-muted .icon:first-child { color: #7a1d16; }
.couch-tag.ghost { background: transparent; color: var(--lamp); box-shadow: 0 0 0 1.5px rgba(242, 180, 90, 0.7) inset; animation: ghost-breathe 2.6s var(--ease-in-out) infinite; }
@keyframes ghost-breathe { 50% { box-shadow: 0 0 0 1.5px rgba(242, 180, 90, 0.35) inset; } }
.figure { transform-box: fill-box; transform-origin: 50% 100%; }
.figure .halo { stroke: var(--live); stroke-width: 3; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.figure.is-talking .halo { opacity: 1; filter: drop-shadow(0 0 8px rgba(159, 216, 166, 0.8)); }
.figure.is-talking .head { animation: talk 1.4s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes talk { 0%, 100% { translate: 0 0; } 30% { translate: 0 -2px; } 60% { translate: 0 0.5px; } }
.figure.arriving { animation: sit-down 820ms var(--ease-smooth-out) both; }
@keyframes sit-down { 0% { translate: 0 -48px; opacity: 0; } 55% { translate: 0 4px; opacity: 1; scale: 1.02 0.96; } 80% { translate: 0 -1px; scale: 0.99 1.01; } 100% { translate: 0 0; scale: 1 1; } }
.figure.ghost { animation: ghost-fade 2.6s var(--ease-in-out) infinite; }
@keyframes ghost-fade { 50% { opacity: 0.55; } }

/* ---------- Sections under the hero ---------- */
.home { position: relative; }
.ways { max-width: 1120px; margin: 0 auto; padding: 96px var(--gutter) 0; display: grid; gap: 40px; }
.ways-head h2 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; max-width: 14ch; }
.ways-head p { margin-top: 14px; color: var(--ink-2); max-width: 42ch; font-size: var(--fs-lg); line-height: 1.6; }
.ways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ways-list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line-strong); }
.ways-list li:last-child { border-bottom: 1px solid var(--line-strong); }
.way-icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; color: var(--lamp); background: var(--lamp-tint); box-shadow: 0 0 0 1px rgba(242, 180, 90, 0.2) inset; }
.ways-list h3 { font-size: 22px; margin-bottom: 8px; }
.ways-list p { color: var(--ink-2); line-height: 1.65; max-width: 60ch; }
.ways-list.compact li { padding: 16px 0; grid-template-columns: 44px 1fr; gap: 14px; }
.ways-list.compact .way-icon { width: 34px; height: 34px; padding: 7px; }
.ways-list.compact h3 { font-size: var(--fs-lg); font-family: var(--ui); font-weight: 700; letter-spacing: 0; }
.ways-list.compact .text-link { display: inline-block; margin-top: 8px; font-size: var(--fs-sm); }
.ways-note { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.6; max-width: 70ch; }
.extension-band { position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center; max-width: 1120px; margin: 88px auto 0; padding: 32px 24px; border-radius: 24px; background: radial-gradient(ellipse 60% 90% at 0% 0%, rgba(242, 180, 90, 0.16), transparent 60%), linear-gradient(180deg, var(--wood-2), var(--wood)); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.guides-band { max-width: 1120px; margin: 0 auto; padding: 96px var(--gutter) 0; display: grid; gap: 8px; }
.guides-band .guide-list { margin-top: 24px; }
.guides-band .guide-list strong { font-size: clamp(20px, 2.4vw, 24px); }
.guides-band .guide-list span { max-width: 62ch; }
.guides-more { justify-self: start; margin-top: 24px; }
.extension-band h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.08; max-width: 18ch; }
.extension-band p { margin: 12px 0 22px; color: var(--ink-2); max-width: 46ch; line-height: 1.6; }
.extension-demo { border-radius: 14px; overflow: hidden; background: #0c0907; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2); }
.demo-tab { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #1d1611; }
.demo-tab span { width: 9px; height: 9px; border-radius: 50%; background: #3a2c21; }
.demo-tab i { margin-left: 10px; flex: 1; padding: 4px 10px; border-radius: 7px; background: #0f0b08; color: var(--ink-3); font: 500 11px/1 var(--ui); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-player { position: relative; aspect-ratio: 16 / 8; background: linear-gradient(180deg, #1d2238 0%, #3a2c3e 46%, #6b3f2a 58%, #1a120d 59%, #0e0a08 100%); }
.demo-progress { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.demo-progress b { display: block; width: 38%; height: 100%; border-radius: inherit; background: #e44; }
.demo-badge { position: absolute; right: 12px; bottom: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px; background: rgba(24, 17, 12, 0.9); color: var(--ink); font: 650 12px/1.2 var(--ui); box-shadow: 0 0 0 1px rgba(255, 214, 160, 0.14), 0 12px 32px rgba(0, 0, 0, 0.45); }
.demo-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }


/* ---------- Invite lobby ---------- */
.invite-title { font-size: clamp(28px, calc(50 * var(--unit)), 64px); }

/* ---------- Room: film night. The TV on the wall is the light; the couch is in front of it ---------- */
/* The picture's colour (ambient.mjs), carried to the glow, the couch rim and the heads. */
@property --screen-light { syntax: '<color>'; inherits: true; initial-value: #ffcf8f; }
.room { --room-pad: 12px; --lights-down: 1.6s; position: relative; isolation: isolate; min-height: 100dvh; padding: 0 0 24px; overflow-x: clip; transition: --screen-light 900ms var(--ease-out); }
/* A dark room: a dim corner lamp while the film is paused, almost nothing but the screen while it plays. */
.room-ambience { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 110% 90% at 42% 34%, transparent 40%, rgba(0, 0, 0, 0.42) 100%),
  linear-gradient(180deg, #120e0b 0%, #0f0b09 60%, #0b0807 100%); }
.room-ambience::before, .room-ambience::after { content: ''; position: absolute; inset: 0; transition: opacity var(--lights-down) var(--ease-in-out); }
.room-ambience::before { background: radial-gradient(ellipse 30% 44% at 2% 4%, rgba(255, 172, 84, 0.15), transparent 70%), radial-gradient(ellipse 22% 18% at 6% 100%, rgba(255, 172, 84, 0.05), transparent 70%); }
.room-ambience::after { background: radial-gradient(ellipse 52% 50% at 38% 32%, color-mix(in srgb, var(--screen-light) 12%, transparent), transparent 72%); opacity: 0.35; }
.room.is-playing .room-ambience::before { opacity: 0.3; }
.room.is-playing .room-ambience::after { opacity: 1; }
.room-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px; padding-top: env(safe-area-inset-top); box-sizing: content-box; background: rgba(17, 13, 10, 0.84); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); }
.room-heading { flex: 1; min-width: 0; display: grid; gap: 1px; }
.room-heading h1 { font-size: 18px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-cap); color: var(--ink-3); }
.room-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-detail:empty { display: none; }
.room-detail::before { content: '·'; margin-right: 8px; }
.conn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1.5px var(--lamp) inset; }
.conn.connected i { background: var(--live); box-shadow: none; }
.conn.offline i { background: var(--alert); box-shadow: none; }
.room-bar-actions { display: flex; align-items: center; gap: 4px; }
.room-bar .btn { min-height: 40px; padding: 0 14px; }
.room-bar .btn-ghost { padding: 0 10px; }
#change-source .label-short, #copy-invite .label-short { display: none; }
@media (max-width: 719px) { .hide-narrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .room-bar .btn-ghost { width: 40px; padding: 0; } #change-source, #copy-invite { padding: 0 10px; gap: 6px; } :is(#change-source, #copy-invite) .label-long { display: none; } :is(#change-source, #copy-invite) .label-short { display: inline; } }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px var(--room-pad) 0; }
.stage-col { position: relative; isolation: isolate; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
/* The TV: a dark bezel on the wall, throwing the picture's cool light around it while it plays. */
.screen { position: relative; padding: 5px; border-radius: 18px; background: linear-gradient(180deg, #1c1714, #070504); box-shadow: 0 0 0 1px rgba(255, 222, 180, 0.07) inset, 0 1px 0 rgba(255, 230, 200, 0.08) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.9); }
.screen::before { content: ''; position: absolute; z-index: -1; inset: -12% -9%; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--screen-light) 34%, transparent), transparent 70%); filter: blur(40px); opacity: 0.25; transition: opacity var(--lights-down) var(--ease-in-out); pointer-events: none; }
.room.is-playing .screen::before { opacity: 1; animation: tv-flicker 7s steps(1) infinite; }
@keyframes tv-flicker { 0% { opacity: .9; } 9% { opacity: .65; } 13% { opacity: 1; } 31% { opacity: .78; } 47% { opacity: .95; } 52% { opacity: .6; } 58% { opacity: .88; } 77% { opacity: 1; } 89% { opacity: .72; } }
/* Ambient mode: a tiny copy of the frame, blown up and blurred behind the TV. */
.ambient { position: absolute; z-index: -1; left: -7%; top: -9%; width: 114%; height: 118%; border-radius: 40px; filter: blur(56px) saturate(1.5) brightness(1.3); opacity: 0; transition: opacity var(--lights-down) var(--ease-in-out); pointer-events: none; }
.ambient.is-live { opacity: 0.35; }
.room.is-playing .ambient.is-live { opacity: 0.7; }
/* Lights down: while the film plays, everything that is not the screen steps back; a hand on it brings it up. */
.room-bar, .side, .remote, .sharing, .room-couch .couch-tag { transition: opacity var(--lights-down) var(--ease-in-out); }
.room.is-playing :is(.room-bar, .remote) { opacity: 0.74; }
.room.is-playing .side { opacity: 0.86; }
.room.is-playing .room-couch .couch-tag:not(.is-talking, .is-self) { opacity: 0.75; }
.room.is-playing :is(.room-bar, .side, .remote):is(:hover, :focus-within), .room.is-playing .side.is-awake { opacity: 1; transition-duration: var(--duration-fast); }
.stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 13px; background: var(--night-deep); }
.stage > video, .embedded-player, .embedded-player > iframe, .embedded-player > div, .screen-layer, .screen-layer > video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.stage:has(> .stage-empty:not([hidden])), .stage:has(> .external:not([hidden])) { aspect-ratio: auto; min-height: 300px; }
.stage:has(> .screen-layer:not([hidden])) { aspect-ratio: 16 / 9; min-height: 0; }
.stage:has(> .site-frame:not([hidden])) { aspect-ratio: auto; height: min(78dvh, 920px); min-height: 420px; }
.stage-empty { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 300px; height: 100%; padding: 28px 20px; text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 190, 110, 0.08), transparent 70%), var(--night-deep); }
.stage-empty-icon { width: 34px; height: 34px; color: var(--screen); stroke-width: 1.5; }
.stage-empty h2 { font-size: clamp(24px, 5vw, 34px); }
.stage-empty p { color: var(--ink-2); max-width: 34em; }
.stage-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.site-frame { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; }
.site-frame iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.site-frame-bar { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 6px 6px 14px; background: var(--night-deep); border-bottom: 1px solid var(--line); }
.site-frame-status { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-cap); color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-frame-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--lamp) inset; }
.site-frame-status.connected i { background: var(--live); box-shadow: none; }
.external { display: grid; gap: 16px; padding: 24px 18px; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 190, 110, 0.06), transparent 70%), var(--night-deep); }
.external h2 { font-size: clamp(22px, 4.6vw, 30px); overflow-wrap: anywhere; }
.external-lede { color: var(--ink-2); }
.external-options { display: grid; gap: 0; border-top: 1px solid var(--line); }
.external-option { display: grid; gap: 14px; padding: 18px 2px; border-bottom: 1px solid var(--line); }
.external-option h3 { font-size: var(--fs-lg); font-family: var(--ui); font-weight: 700; letter-spacing: 0; margin-bottom: 4px; }
.external-option p { color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.55; }
.external-option.is-ready h3 { color: var(--lamp); }
.option-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.external-note { color: var(--ink-3); font-size: var(--fs-cap); line-height: 1.55; }
.screen-layer { position: absolute; inset: 0; z-index: 3; }
.live-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(10, 7, 5, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); font: 650 var(--fs-cap)/1 var(--ui); pointer-events: none; }
.live-badge i, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }
.unlock { position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; box-shadow: var(--shadow-2); }
.unlock:active { scale: 0.96; }

.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 2px 2px 0; }
.transport { flex: 1 1 300px; display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 52px; }
.transport .icon-btn { width: 44px; height: 44px; color: var(--ink); }
.transport .icon-btn .icon { width: 22px; height: 22px; }
.transport .play-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--lamp); color: var(--lamp-ink); margin-right: 4px; box-shadow: 0 1px 0 rgba(255, 240, 210, 0.45) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
.transport .play-btn:hover:not(:disabled) { background: var(--lamp-strong); color: var(--lamp-ink); }
.transport .play-btn:disabled { background: var(--wood-3); color: var(--ink-3); box-shadow: none; opacity: 1; }
.controls.is-live :is(#toggle-play, #seek-back, #seek-forward, #resync) { display: none; }
.controls.is-live .playback-status { padding-left: 4px; color: var(--live); }
.playback-status { flex: 1; min-width: 0; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hide-mobile { display: none !important; }

.sharing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: 14px; background: rgba(159, 216, 166, 0.07); box-shadow: 0 0 0 1px rgba(159, 216, 166, 0.2) inset; }
.sharing .live-dot { animation: pulse-dot 2s var(--ease-in-out) infinite; }
@keyframes pulse-dot { 50% { opacity: 0.35; } }
.sharing-copy { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.sharing-copy strong { font-size: var(--fs-ui); }
.sharing-copy span { color: var(--ink-2); font-size: var(--fs-sm); }
.inline-volume { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.inline-volume-label { white-space: nowrap; }
.inline-volume input, .people-volume input { width: 120px; accent-color: var(--lamp); }
.inline-volume output, .people-volume output { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: var(--fs-cap); }

/* The living area under the TV: what is on, the couch from behind, the remote. */
.living { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 calc(40 / 760 * min(86vw, 560px)); overflow-x: clip; }
/* The couch from behind, in the screen's light: the wall above the backrest catches the picture,
   the backrest and the heads get a rim of it, and the front falls into the dark of the room. */
.room-couch { position: relative; container-type: inline-size; width: min(86%, 560px); aspect-ratio: 760 / 220; margin-top: 22px; }
.room-couch::before { content: ''; position: absolute; z-index: -1; inset: -40% -18% 10%; background: radial-gradient(ellipse 50% 55% at 50% 38%, color-mix(in srgb, var(--screen-light) 22%, transparent), transparent 72%); opacity: 0.4; transition: opacity var(--lights-down) var(--ease-in-out); pointer-events: none; }
.room.is-playing .room-couch::before { opacity: 1; }
.couch .couch-art { top: auto; height: calc(150 / 220 * 100%); }
.couch-table { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
/* The floor, side table and plant around the couch: couch units x −420…1180, y −120…190. */
.couch-room { position: absolute; z-index: -2; left: calc(-420 / 760 * 100%); top: calc(-50 / 220 * 100%); width: calc(1600 / 760 * 100%); height: calc(310 / 220 * 100%); max-width: none; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 26%, #000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 26%, #000 82%, transparent); mask-composite: intersect; }
.couch :is(.couch-art, .couch-people, .couch-light, .couch-table) { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.couch-light { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.couch-light .rim, .couch-people .rim { stroke: var(--screen-light); }
.couch-light .rim { opacity: 0.5; transition: opacity var(--lights-down) var(--ease-in-out); }
.room.is-playing .couch-light .rim { opacity: 0.9; }
.scene .couch-light .rim { opacity: 0.55; }
.couch-light .sheen { fill: var(--screen-light); opacity: 0.08; }
.room-couch .couch-tag { padding: 3px 8px; font-size: 11px; max-width: 92px; }
.couch .couch-tag.empty { width: 26px; height: 26px; padding: 0; justify-content: center; color: var(--ink-2); background: rgba(10, 6, 4, 0.4); border: 1px dashed rgba(255, 222, 180, 0.3); box-shadow: none; }
.couch .couch-tag.empty .couch-tag-name { display: none; }
.couch .couch-tag.empty .icon { width: 14px; height: 14px; }
.couch .couch-tag.empty:hover { color: var(--lamp); border-color: var(--lamp); }
@container (max-width: 440px) { .room-couch .couch-tag { max-width: 46px; padding: 2px 5px; font-size: 10px; gap: 3px; } .room-couch .couch-tag .icon { display: none; } }
.couch .figure .halo { stroke-width: 3.5; }
.remote { display: flex; align-items: flex-start; gap: 2px; }
.call-btn { display: grid; justify-items: center; gap: 4px; min-width: 60px; padding: 2px 4px; border-radius: 12px; color: var(--ink-2); font: 600 11px/1.2 var(--ui); white-space: nowrap; transition: color var(--duration-fast) var(--ease-out); }
.call-icon { display: grid; place-items: center; width: 44px; height: 36px; border-radius: 11px; background: rgba(255, 226, 190, 0.04); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), scale var(--duration-quick) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.call-icon .icon { width: 20px; height: 20px; }
.call-btn:hover:not(:disabled) { color: var(--ink); }
.call-btn:hover:not(:disabled) .call-icon { background: var(--wood-3); }
.call-btn[data-state='on'] .call-icon { background: var(--live-tint); color: var(--live); box-shadow: 0 0 0 1px rgba(159, 216, 166, 0.36) inset; }
.call-btn[data-state='on'] { color: var(--live); }
.call-btn[data-state='muted'] .call-icon { background: var(--alert-tint); color: var(--alert); box-shadow: 0 0 0 1.5px rgba(242, 145, 138, 0.5) inset; }
.call-btn[data-state='muted'] { color: var(--alert); }
.call-btn[aria-pressed='true']:not([data-state]) .call-icon { background: var(--lamp-tint); color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp-ring) inset; }
.call-btn[aria-pressed='true']:not([data-state]) { color: var(--lamp); }
.call-btn.danger .call-icon { background: transparent; color: var(--alert); box-shadow: 0 0 0 1px rgba(242, 145, 138, 0.3) inset; }
.call-btn.danger:hover:not(:disabled) .call-icon { background: var(--alert-tint); }
.call-btn.is-busy .call-icon { opacity: 0.6; }
#resume-audio { align-self: center; }
.notice { padding: 12px 14px; border-radius: 12px; background: var(--lamp-tint); color: #f6d6a8; font-size: var(--fs-sm); line-height: 1.55; box-shadow: 0 0 0 1px rgba(242, 180, 90, 0.24) inset; }

/* Side panel: chat and people */
.side { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(29, 22, 17, 0.94), rgba(23, 18, 14, 0.94)); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-1); overflow: hidden; }
.t-tabs { position: relative; display: flex; align-items: center; gap: 3px; padding: 4px; margin: 10px; border-radius: 12px; background: var(--night-deep); }
.t-tab { position: relative; z-index: 1; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--ink-3); font: 650 var(--fs-ui)/1 var(--ui); transition: color var(--tabs-dur) var(--tabs-ease); }
.t-tab:not([aria-selected='true']):hover, .t-tab[aria-selected='true'] { color: var(--ink); }
.t-tabs-pill { position: absolute; top: 4px; left: 0; height: 38px; width: 0; border-radius: 9px; background: var(--wood-3); box-shadow: var(--shadow-1); transform: translateX(0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease); will-change: transform, width; pointer-events: none; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--lamp); color: var(--lamp-ink); font: 750 11px/1 var(--ui); font-variant-numeric: tabular-nums; animation: badge-in var(--duration-fast) var(--ease-smooth-out); }
@keyframes badge-in { from { scale: 0.4; opacity: 0; } }
.count { color: var(--ink-3); font-weight: 550; font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.panel { min-height: 0; display: flex; flex-direction: column; }
.chat { position: relative; height: min(62dvh, 560px); }
.messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; }
.messages:focus-visible { outline-offset: -2px; }
.messages-empty { margin: auto; padding: 32px 12px; text-align: center; color: var(--ink-3); font: 400 17px/1.4 var(--display); }
.msg { display: grid; justify-items: start; max-width: 88%; margin-top: 10px; }
.msg.cont { margin-top: 2px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 4px; font-size: var(--fs-cap); }
.msg-head strong { font-weight: 700; color: var(--ink-2); }
.msg-head time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.msg-body { position: relative; display: flex; align-items: flex-end; gap: 4px; }
.msg-text { padding: 9px 13px; border-radius: 16px 16px 16px 6px; background: var(--wood-3); color: var(--ink); font-size: var(--fs-ui); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.cont .msg-text { border-top-left-radius: 6px; }
.msg.self { justify-self: end; align-self: flex-end; justify-items: end; }
.msg.self .msg-head { display: none; }
.msg.self .msg-text { background: var(--lamp-wood); color: var(--ink); border-radius: 16px 16px 6px 16px; }
.msg.self.cont .msg-text { border-top-right-radius: 6px; }
.msg-menu { opacity: 0; width: 28px; height: 28px; transition: opacity var(--duration-quick) var(--ease-out); }
.msg:hover .msg-menu, .msg-menu:focus-visible { opacity: 1; }
.msg-menu .icon { width: 16px; height: 16px; }
.msg.arrive { animation: msg-in var(--duration-fast) var(--ease-smooth-out); }
@keyframes msg-in { from { opacity: 0; translate: 0 6px; filter: blur(2px); } }
.sys { align-self: center; margin: 10px 0 2px; padding: 5px 12px; border-radius: 99px; color: var(--ink-3); font-size: var(--fs-cap); text-align: center; transition: background-color 1200ms var(--ease-out), color 1200ms var(--ease-out); }
.sys.fresh { background: var(--lamp-tint); color: var(--lamp-strong); }
.new-messages { position: absolute; left: 50%; bottom: 74px; translate: -50% 0; padding: 8px 14px; border-radius: 99px; background: var(--lamp); color: var(--lamp-ink); font: 650 var(--fs-cap)/1 var(--ui); box-shadow: var(--shadow-2); }
.composer { display: flex; align-items: center; gap: 6px; margin: 0 10px 10px; padding: 4px 4px 4px 14px; border-radius: 14px; background: var(--night-deep); border: 1px solid var(--line-strong); transition: border-color var(--duration-quick) var(--ease-out); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
.composer:focus-within { border-color: rgba(242, 180, 90, 0.6); }
.composer-input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; font-size: 16px; }
.composer-input:focus-visible { outline: none; }
.send { width: 40px; height: 40px; background: var(--lamp-tint); color: var(--lamp); border-radius: 11px; transition-property: background-color, color, scale; }
.send:hover:not(:disabled) { background: rgba(242, 180, 90, 0.2); color: var(--lamp-strong); }
/* Something to send: the button lights up. */
.composer:has(.composer-input:not(:placeholder-shown)) .send { background: var(--lamp); color: var(--lamp-ink); }
.send .icon { width: 18px; height: 18px; }
.people { padding: 0 10px 14px; max-height: min(62dvh, 560px); overflow-y: auto; }
.people-list { list-style: none; margin: 0; padding: 0; }
.person { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.person-avatar { --ring: transparent; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff7ea; font: 400 16px/1 var(--display); box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--ring); transition: box-shadow var(--duration-fast) var(--ease-out); }
.person-avatar.is-voice { --ring: rgba(159, 216, 166, 0.45); }
.person-avatar.is-speaking { --ring: var(--live); }
.person-avatar.is-muted { --ring: rgba(242, 145, 138, 0.5); }
.person-name { min-width: 0; }
.person-name strong { display: block; font-weight: 650; font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-name span { display: block; color: var(--ink-3); font-size: var(--fs-cap); }
.person-name span.active { color: var(--live); }
.people-volume { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--fs-cap); }
.people-volume input { flex: 1; width: auto; min-width: 0; }
.person-menu { position: relative; }
.person-menu summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--ink-3); cursor: pointer; }
.person-menu summary::-webkit-details-marker { display: none; }
.person-menu summary:hover { background: var(--wood-2); color: var(--ink); }
.person-menu .menu { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 190px; padding: 6px; border-radius: 12px; background: var(--wood-3); box-shadow: var(--shadow-2); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: var(--fs-ui); color: var(--ink); text-align: left; }
.menu button:hover { background: rgba(255, 222, 180, 0.07); }
.menu button.danger { color: var(--alert); }
.menu .icon { width: 16px; height: 16px; }
.person.blocked { grid-template-columns: 1fr auto; color: var(--ink-3); }
.people-note { margin: 14px 4px 0; color: var(--ink-3); font-size: var(--fs-cap); line-height: 1.55; }

/* Popover, dialogs, toast */
.popover { width: min(92vw, 340px); margin: 0; padding: 18px; border: 0; border-radius: 18px; background: var(--wood-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset, var(--shadow-2); inset: auto 50% 16px auto; translate: 50% 0; position: fixed; opacity: 1; scale: 1; transition: opacity var(--modal-close-dur) var(--modal-ease), scale var(--modal-close-dur) var(--modal-ease), display var(--modal-close-dur) allow-discrete, overlay var(--modal-close-dur) allow-discrete; }
.popover:not(:popover-open) { opacity: 0; scale: var(--modal-scale); }
.popover:popover-open { transition-duration: var(--modal-open-dur); }
@starting-style { .popover:popover-open { opacity: 0; scale: var(--modal-scale); } }
.popover { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.popover h2 { font-size: 21px; margin-bottom: 14px; }
.popover .field-label { margin-bottom: 8px; }
.quality-field { margin: 0 0 6px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); min-inline-size: 0; }
.quality-field legend { padding: 0; }
.quality-option { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.quality-option input { margin: 3px 0 0; accent-color: var(--lamp); flex: none; }
.quality-option strong { display: block; font-weight: 650; font-size: var(--fs-ui); }
.quality-option small { display: block; color: var(--ink-3); font-size: var(--fs-cap); line-height: 1.45; margin-top: 1px; }
.share-quality.is-info { color: var(--ink-3); }
.popover-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-cap); line-height: 1.5; }
.dialog { width: min(calc(100vw - 24px), 440px); max-height: min(88dvh, 720px); margin: auto; padding: 28px 24px 24px; border: 0; border-radius: 22px; background: linear-gradient(180deg, var(--wood-2), var(--wood)); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset, var(--shadow-2); overflow: auto; opacity: 1; scale: 1; transition: opacity var(--modal-close-dur) var(--modal-ease), scale var(--modal-close-dur) var(--modal-ease), display var(--modal-close-dur) allow-discrete, overlay var(--modal-close-dur) allow-discrete; }
.dialog:not([open]) { opacity: 0; scale: var(--modal-scale); }
.dialog[open] { transition-duration: var(--modal-open-dur); }
@starting-style { .dialog[open] { opacity: 0; scale: var(--modal-scale); } }
.dialog::backdrop { background: rgba(6, 4, 3, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 1; transition: opacity var(--modal-open-dur) var(--ease-out), display var(--modal-open-dur) allow-discrete, overlay var(--modal-open-dur) allow-discrete; }
@starting-style { .dialog[open]::backdrop { opacity: 0; } }
.dialog.wide { width: min(calc(100vw - 24px), 600px); }
.dialog h2 { font-size: 28px; padding-right: 40px; margin-bottom: 10px; }
.dialog > p { color: var(--ink-2); margin-bottom: 20px; line-height: 1.6; }
.dialog form:not(.dialog-close-form) { display: grid; gap: 16px; }
.dialog-close-form { position: absolute; top: 12px; right: 12px; }
.dialog-note { margin-top: 16px; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; }
.install-list { display: grid; gap: 4px; margin: 16px 0 0; }
.install-list dt { font-weight: 700; margin-top: 12px; }
.install-list dd { margin: 0; color: var(--ink-2); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #1c120b; font-size: var(--fs-ui); font-weight: 600; box-shadow: var(--shadow-2); pointer-events: none; translate: -50% 0; }
.t-toast { opacity: 0; transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); filter: blur(var(--toast-blur)); will-change: transform, opacity, filter; transition: opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease); }
.t-toast.is-open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease); }

/* Icon swap */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon { grid-area: 1 / 1; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease); will-change: opacity, filter, transform; }
.t-icon-swap[data-state='a'] .t-icon[data-icon='a'], .t-icon-swap[data-state='b'] .t-icon[data-icon='b'] { opacity: 1; filter: blur(0); transform: scale(1); }
.t-icon-swap[data-state='a'] .t-icon[data-icon='b'], .t-icon-swap[data-state='b'] .t-icon[data-icon='a'] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
.call-icon.t-icon-swap { display: grid; }

/* Floating cameras on the page (the shared window is drawn by floating-camera.mjs) */
.floating-cameras { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.floating-camera { position: absolute; pointer-events: auto; overflow: hidden; isolation: isolate; border-radius: 16px; background: var(--night-deep); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2); }
.floating-camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #080605; }
.floating-camera.self video { transform: scaleX(-1); }
.camera-titlebar { position: absolute; z-index: 1; left: 0; right: 0; top: 0; display: flex; align-items: center; height: 34px; gap: 4px; padding: 0 4px 0 10px; background: linear-gradient(180deg, rgba(10, 7, 5, 0.78), transparent); color: var(--ink); user-select: none; opacity: 0.85; transition: opacity var(--duration-fast) var(--ease-out); }
.floating-camera:hover .camera-titlebar, .floating-camera:focus-within .camera-titlebar, .floating-camera.moving .camera-titlebar { opacity: 1; }
.camera-drag { flex: 1; min-width: 0; height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 650 var(--fs-cap)/34px var(--ui); color: inherit; cursor: grab; touch-action: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.camera-controls { display: flex; gap: 2px; }
.camera-controls button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink); background: rgba(10, 7, 5, 0.5); }
.camera-controls button:hover { background: rgba(51, 36, 26, 0.9); }
.camera-controls .icon { width: 15px; height: 15px; }
.camera-resize { position: absolute; right: 0; bottom: 0; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px 0 0 0; background: rgba(10, 7, 5, 0.6); color: var(--ink-2); cursor: nwse-resize; touch-action: none; }
.camera-resize .icon { width: 14px; height: 14px; rotate: 90deg; }
.floating-camera.moving { box-shadow: 0 0 0 2px var(--lamp), var(--shadow-2); }
.camera-dock { margin: 2px 0 0; }
.floating-cameras.docked { position: static; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; padding: 2px; }
.floating-cameras.docked .floating-camera { position: relative; flex: none; left: auto !important; top: auto !important; width: 132px !important; height: 92px !important; z-index: auto !important; }
/* In the strip a tile has a fixed size: only the separate-window control is offered there. */
.floating-cameras.docked .camera-controls button:not([data-role="pip"]), .floating-cameras.docked .camera-resize { display: none; }
.floating-cameras.docked .camera-drag { cursor: default; }
.floating-camera.moving .camera-drag { cursor: grabbing; }

/* Footer */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: 1120px; margin: 64px auto 0; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); }
.footer-brand { font: 400 17px/1 var(--display); letter-spacing: -0.01em; color: var(--ink-2); }
.footer-links { display: flex; gap: 4px; margin-left: auto; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 8px; }
.footer-links a:hover { color: var(--ink); }

/* Documents: support, privacy, extension guide */
.doc { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.doc h1 { font-size: clamp(36px, 7vw, 56px); line-height: 1.04; margin: 28px 0 16px; }
.doc .doc-lede { color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.6; }
.doc h2 { font-size: 26px; margin: 48px 0 12px; }
.doc h3 { font-size: var(--fs-lg); font-family: var(--ui); font-weight: 700; letter-spacing: 0; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-2); line-height: 1.75; }
.doc p + p { margin-top: 12px; }
.doc ol, .doc ul { padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc a:not(.btn) { color: var(--lamp); text-decoration: underline; text-decoration-color: rgba(242, 180, 90, 0.4); text-underline-offset: 3px; }
.doc .table-wrap { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.doc table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }
.doc th { color: var(--ink); font-weight: 700; }
.doc .callout { margin: 24px 0; padding: 16px 18px; border-radius: 14px; background: var(--wood); box-shadow: 0 0 0 1px var(--line) inset; }
.doc .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.doc .muted { color: var(--ink-3); font-size: var(--fs-sm); }
.doc .steps { list-style: none; padding: 0; counter-reset: step; }
.doc .steps li { position: relative; padding: 0 0 18px 44px; counter-increment: step; }
.doc .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lamp-tint); color: var(--lamp); font: 750 13px/1 var(--ui); }
.doc .steps strong { color: var(--ink); }
.doc kbd, .doc code { padding: 2px 7px; border-radius: 6px; background: var(--wood-2); color: var(--ink); font: 600 0.92em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 0 0 1px var(--line-strong) inset; }
/* Guides: long reading on the wood panel, ads folded into the text only where enabled. */
.doc.article { max-width: 700px; }
.crumbs { margin-top: 20px; font-size: var(--fs-sm); }
.crumbs a { color: var(--ink-3); text-decoration: none !important; }
.crumbs a::before { content: "← "; }
.crumbs a:hover { color: var(--lamp); }
.article h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.08; margin-top: 12px; text-wrap: balance; }
.article-meta { margin: 0 0 18px; color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.article-meta span { white-space: nowrap; }
.article h2 { text-wrap: balance; }
.article p, .article li { font-size: 17px; line-height: 1.78; }
.article ul li::marker { color: var(--lamp); }
.ad-slot { margin: 36px 0; padding: 14px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 120px; }
.ad-slot[hidden] { display: none; }
.home-ad { width: min(100% - 2 * var(--gutter), 1120px - 2 * var(--gutter)); margin: 64px auto 0; }
.ad-slot > span { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.article-cta { margin: 56px 0 0; padding: 24px; border-radius: 20px; background: var(--wood); box-shadow: 0 0 0 1px var(--line) inset; }
.article-cta h2 { margin: 0 0 8px; font-size: 24px; }
.article-cta p { margin: 0 0 16px; font-size: var(--fs-body); }
.related h2 { font-size: 22px; margin-top: 48px; }
.guide-list { list-style: none; padding: 0 !important; margin: 32px 0 0; display: grid; gap: 0; }
.guide-list li + li { margin-top: 0 !important; }
.guide-list a { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line-strong); text-decoration: none !important; }
.guide-list li:last-child a { border-bottom: 1px solid var(--line-strong); }
.guide-list strong { font: 400 22px/1.2 var(--display); color: var(--ink); letter-spacing: -0.01em; transition: color var(--duration-quick) var(--ease-smooth-out); }
.guide-list span { color: var(--ink-2); line-height: 1.6; }
.guide-list small { color: var(--ink-3); font-size: var(--fs-sm); }
.guide-list a:hover strong { color: var(--lamp); }
.guide-list.compact a { padding: 16px 0; }
.guide-list.compact strong { font-size: 19px; }
.guide-list.compact span { font-size: var(--fs-sm); }

/* Theater */
body.theater .room-layout { grid-template-columns: 1fr !important; }
body.theater .side { display: none; }
body.theater .stage-col { max-width: min(100%, calc((100dvh - 260px) * 16 / 9)); margin: 0 auto; width: 100%; }

/* Phones: the scene becomes a band at the top; copy and form follow in the page. */
@media (max-width: 719px) {
  .service-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .service { height: 42px; }
  .service { min-width: 0; padding: 0 6px; }
  .room-couch .couch-tag { font-size: 10px; padding: 2px 6px; max-width: 64px; }
  .controls { gap: 2px; }
  .transport { flex-basis: 100%; }
  .remote { width: 100%; justify-content: space-around; }
  .call-btn { min-width: 0; flex: 1; }
}
/* Phones and tall screens: the room becomes a band (y 40–830), the headline stays on the TV,
   the lede and the form follow under it. */
@media (max-width: 719px), (max-aspect-ratio: 10/9) {
  .scene { --u: calc(100cqw / 960); --top0: calc(-40 * var(--u)); height: auto; container-type: inline-size; padding-bottom: 28px; background: var(--night); }
  .scene::before { content: ''; display: block; height: calc(790 * var(--u)); }
  .scene-room { -webkit-mask-image: linear-gradient(180deg, #000 83%, transparent 92%); mask-image: linear-gradient(180deg, #000 83%, transparent 92%); }
  .scene-couch { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 78%); mask-image: linear-gradient(180deg, #000 62%, transparent 78%); }
  body.on-scene .site-bar { position: relative; }
  .tv-content { position: static; width: auto; height: auto; container-type: normal; display: grid; justify-items: center; gap: 18px; margin: -6px auto 0; padding: 0 var(--gutter); max-width: 520px; }
  .hero-title { position: absolute; z-index: 3; left: calc(50% - 374 * var(--unit)); top: calc(42 * var(--unit)); width: calc(748 * var(--unit)); height: calc(426 * var(--unit)); display: flex; flex-direction: column; justify-content: center; padding: 0 calc(40 * var(--unit)); font-size: clamp(27px, calc(72 * var(--unit)), 64px); }
  .invite-title { font-size: clamp(24px, calc(60 * var(--unit)), 54px); }
  .hero-lede { margin-top: 0; font-size: var(--fs-body); }
  .hero-form { width: 100%; }
  .hero-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-fields .input { background: var(--night-deep); }
  .hero-fields .btn-lg { width: 100%; justify-content: space-between; min-height: 52px; }
  .home-alt { margin-top: 10px; }
  .home-alt > span[aria-hidden] { display: none; }
  .btn-join { min-height: 52px; }
  .home-meta { margin-top: 4px; flex-direction: column; }
  .home-meta .meta-text > span[aria-hidden] { display: none; }
}
@media (max-width: 1039px) and (min-height: 560px) {
  .stage-col { display: contents; }
  .room-layout { gap: 10px; }
  .room.has-media .screen { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 15; box-shadow: 0 0 0 var(--room-pad) #100c0a, 0 18px 24px -6px #100c0a; }
}
@media (min-width: 720px) and (max-width: 1039px) and (min-height: 560px) { .room.has-media .screen { top: calc(64px + env(safe-area-inset-top)); } }
/* Tablet and up */
@media (min-width: 720px) {
  :root { --gutter: 28px; --bar-h: 76px; }
  .ways { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
  .ways-head { position: sticky; top: 40px; }
  .ways-note { grid-column: 2; }
  .extension-band { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); padding: 44px; gap: 44px; }
  .room { --room-pad: 20px; }
  .room-bar { padding: 0 14px; height: 64px; }
  .room-heading h1 { font-size: 20px; }
  .stage-empty { min-height: 360px; }
  .external { padding: 36px 32px; }
  .external-option { grid-template-columns: 1fr auto; align-items: center; }
  .hide-mobile { display: inline-grid !important; }
}
@media (min-width: 1040px) {
  .room-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; max-width: 1680px; margin: 0 auto; }
  .side { position: sticky; top: 84px; height: calc(100dvh - 104px); }
  .chat { height: auto; }
  .people { max-height: none; }
  .stage-col :is(.screen, .controls, .sharing, .camera-dock) { max-width: max(560px, calc((100dvh - 356px) * 16 / 9 + 10px)); width: 100%; justify-self: center; }
}
@media (hover: none) { .msg-menu { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .t-icon-swap .t-icon, .t-tabs-pill, .t-tab, .t-toast, .dialog, .dialog::backdrop, .popover, .switch::after, .screen::before { transition: none !important; }
  .room { --lights-down: 1ms; }
  .is-shaking, .badge, .msg.arrive, .sharing .live-dot, .tv-glass::before, .room.is-playing .screen::before, .figure.arriving, .figure.is-talking .head, .figure.ghost, .couch-tag.ghost { animation: none !important; }
}

/* iOS app: SwiftUI renders navigation, controls and chat. The WebView shows only the stage. */
body.native-app { background: var(--night-deep); overflow: hidden; }
.native-app .site-bar, .native-app .site-footer, .native-app #home-view, .native-app #invite-view, .native-app .room-bar, .native-app .controls, .native-app .living, .native-app .side, .native-app .notice, .native-app .sharing, .native-app .floating-cameras, .native-app .skip, .native-app .room-ambience, .native-app .ambient { display: none !important; }
.native-app .room { padding: 0; min-height: 0; }
.native-app .room-layout { display: block; padding: 0; }
.native-app .stage-col { gap: 0; }
.native-app .screen { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.native-app .screen::before { display: none; }
.native-app .stage, .native-app .stage:has(> .stage-empty:not([hidden])), .native-app .stage:has(> .external:not([hidden])) { height: 100dvh; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.native-app .stage-empty { min-height: 0; gap: 8px; padding: 10px 12px; }
/* The app's TV is a 16:9 strip: the empty state keeps to one heading, one line and one row of services. */
.native-app .stage-empty-icon { display: none; }
.native-app .stage-empty h2 { font-size: clamp(19px, 6vw, 40px); }
.native-app .stage-empty p { font-size: clamp(12px, 3.4vw, 18px); line-height: 1.4; }
.native-app .stage-empty .service-strip { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; width: 100%; margin-top: 2px; }
.native-app .stage-empty .service { flex: 1 1 0; min-width: 0; max-width: 96px; height: clamp(30px, 9.4vw, 56px); padding: 0 4px; }
/* The camera strip under the video: the app grows the web view by its height while cameras are on. */
.native-app.has-cameras .stage, .native-app.has-cameras .stage:has(> .stage-empty:not([hidden])), .native-app.has-cameras .stage:has(> .external:not([hidden])) { height: calc(100dvh - 104px); }
.native-app .camera-dock:not([hidden]) { display: block !important; height: 104px; margin: 0; padding: 6px 6px 0; }
.native-app .camera-dock .floating-cameras.docked { display: flex !important; }
.native-app .stage-empty .stage-actions { display: none; }
.native-app .external { min-height: 100dvh; align-content: center; }
.native-app .external-options, .native-app .external-note { display: none; }
.native-app .unlock { font-size: var(--fs-sm); }

/* Streaming services cannot be opened on a phone or in the iOS app: their buttons are not shown there. */
.native-app .stage-services, .native-app .stage-empty .service-note, .is-phone .stage-services, .is-phone .stage-empty .service-note, .is-phone #source-dialog .service-grid, .is-phone #source-dialog .service-note { display: none; }
.share-quality { display: block; margin-top: 2px; color: var(--lamp, #f2b45a); font-size: var(--fs-cap); }
.rules-list { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 6px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* iOS app camera window: tiles float over the video (not YouTube or Vimeo, see app.js), draggable by touch. */
.native-app.camera-window .floating-cameras:not(.docked) { display: block !important; }
.native-app.camera-window .camera-dock { display: none !important; }
.native-app.camera-window.has-cameras .stage, .native-app.camera-window.has-cameras .stage:has(> .stage-empty:not([hidden])), .native-app.camera-window.has-cameras .stage:has(> .external:not([hidden])) { height: 100dvh; }
.native-app .floating-cameras:not(.docked) .floating-camera { border-radius: 12px; touch-action: none; }
.native-app .floating-cameras:not(.docked) .camera-titlebar { opacity: 1; }
/* The iOS app offers no system picture-in-picture yet (needs a device-tested background mode). */
.native-app .camera-controls [data-role="pip"] { display: none !important; }

.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; }
.check-row input { margin-top: 3px; accent-color: var(--lamp); }