/* Watchntalk · "Gece, deri koltuk, köşe lambası"
   A living room at night. The corner lamp is the only warm light, the screen the only cool one,
   and everyone in the room has a place on one wide leather couch. */

@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: #0a0705;
  --wood: #1b130e;
  --wood-2: #251a13;
  --wood-3: #33241a;
  --line: rgba(255, 222, 180, 0.08);
  --line-strong: rgba(255, 222, 180, 0.16);
  /* Ink, warm paper under lamp light */
  --ink: #f6ead9;
  --ink-2: #cdb9a2;
  --ink-3: #a28b74;
  /* 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);
  --leather: #8a4a26;
  --leather-deep: #4f240f;
  --brass: #c9a062;
  --screen: #b8b6ff;
  --screen-glow: rgba(140, 140, 255, 0.32);
  --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: 28px; height: 24px; }

/* 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-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 TV ----------
   Scene units: 1600 × 900, anchored bottom-centre like the artwork (object-fit: cover).
   --u is one scene unit in px; scene point (X, Y) sits at left 50% + (X − 800)u, top 100% − (900 − Y)u. */
.scene { position: relative; isolation: isolate; overflow: hidden; background: #0d0907; container-type: size; height: max(780px, 100svh); max-height: 1200px; --u: max(calc(100cqw / 1600), calc(100cqh / 900)); }
.scene-room { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; user-select: none; }
.scene-couch { position: absolute; z-index: 1; left: calc(50% + (420 - 800) * var(--u)); top: calc(100% - (900 - 420) * var(--u)); width: calc(760 * var(--u)); height: calc(320 * var(--u)); }
/* The screen we stand at lights the couch from the front and flickers with the picture. */
.scene-tv { position: absolute; z-index: 2; left: calc(50% - 900 * var(--u)); width: calc(1800 * var(--u)); top: calc(100% - 520 * var(--u)); height: calc(620 * var(--u)); pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 42% 60% at 50% 100%, rgba(150, 156, 255, 0.2), rgba(150, 156, 255, 0.06) 55%, transparent 72%); 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; } }
.hero-copy { position: absolute; z-index: 3; left: 50%; translate: -50% 0; top: calc(var(--bar-h) + clamp(8px, 3cqh, 44px)); width: min(92%, 860px); text-align: center; }
.hero-title { font-size: clamp(38px, calc(68 * var(--u)), 84px); line-height: 1.02; letter-spacing: -0.018em; color: var(--ink); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.hero-title span { color: var(--lamp); }
.hero-lede { margin: clamp(8px, 1.4cqh, 16px) auto 0; max-width: 34em; color: var(--ink-2); font-size: clamp(15px, calc(18 * var(--u)), 19px); line-height: 1.55; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.hero-form { position: absolute; z-index: 3; left: 50%; translate: -50% 0; top: min(calc(100% - (900 - 760) * var(--u)), calc(100% - 132px)); width: min(calc(100% - 32px), max(760px, calc(860 * var(--u)))); }
.hero-fields { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) auto; align-items: end; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(18, 12, 9, 0.82); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.8); }
.hero-fields .field > label { padding-left: 2px; font-size: var(--fs-cap); }
.hero-fields .btn-lg { min-height: 48px; }
.hero-form .field-error { margin: 8px 4px 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.home-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; margin-top: 6px; color: var(--ink-3); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.home-alt > span[aria-hidden] { color: var(--ink-3); }
.create-meta { color: var(--ink-3); font-size: var(--fs-cap); }
.invite-form .hero-fields { grid-template-columns: minmax(0, 1fr) auto; }
.invite-form { width: min(calc(100% - 32px), 560px); }

/* ---------- Streaming services ---------- */
.service-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: clamp(10px, 2cqh, 20px); }
.service-row-label { color: var(--ink-3); font-size: var(--fs-cap); font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.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; }
.service-logo { height: 16px; width: auto; max-width: 78px; display: block; object-fit: contain; }
.service-logo-netflix { height: 20px; }
.service-logo-youtube { height: 15px; }
.service-logo-prime, .service-logo-disney { height: 18px; }
.service.large .service-logo-youtube { height: 22px; }
.service .service-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.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; }
.service.large .service-logo { height: 26px; max-width: 100px; }
.service.large .service-logo-netflix { height: 32px; }
.service.large .service-name { position: static; width: auto; height: auto; clip: auto; overflow: visible; color: var(--ink-2); font-size: var(--fs-cap); font-weight: 600; }
.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% -100%; display: inline-flex; align-items: center; gap: 5px; max-width: 128px; padding: 4px 10px; border-radius: 999px; background: rgba(18, 12, 9, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); font: 650 var(--fs-cap)/1.2 var(--ui); white-space: nowrap; box-shadow: 0 0 0 1px var(--line-strong) inset, 0 6px 16px -6px rgba(0, 0, 0, 0.8); 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: 0 6px 16px -6px rgba(0, 0, 0, 0.8); }
.couch-tag.is-self .icon { color: var(--lamp-ink); }
.couch-tag.is-talking { box-shadow: 0 0 0 1.5px var(--live) inset, 0 6px 16px -6px rgba(0, 0, 0, 0.8); }
.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(34px, calc(64 * var(--u)), 76px); }

/* ---------- Room: the TV on the wall, the couch in front of it ---------- */
.room { --room-pad: 12px; position: relative; isolation: isolate; min-height: 100dvh; padding: 0 0 24px; overflow-x: clip; }
.room-ambience { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 34% 46% at 4% 8%, rgba(255, 176, 90, 0.16), transparent 70%),
  radial-gradient(ellipse 30% 40% at 100% 0%, rgba(255, 190, 110, 0.06), transparent 70%),
  linear-gradient(180deg, #0f0a08 0%, #150f0b 62%, #110b08 62.2%, #0c0806 100%); }
.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(16, 11, 8, 0.82); 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: 2px; }
.room-heading h1 { font-size: 19px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); color: var(--ink-3); }
.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-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: -8% -6%; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--screen-glow), transparent 70%); filter: blur(40px); opacity: 0.2; transition: opacity 1200ms var(--ease-out); pointer-events: none; }
.room.is-playing .screen::before { opacity: 1; animation: tv-flicker 7s steps(1) infinite; }
.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(> .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(140, 140, 255, 0.1), 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(140, 140, 255, 0.08), 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; }

.transport { display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 4px; }
.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 8px 18px -10px rgba(0, 0, 0, 0.85); }
.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; }
.transport-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.source-tag { flex: none; padding: 4px 8px; border-radius: 6px; background: var(--lamp-tint); color: var(--lamp); font: 700 11px/1 var(--ui); letter-spacing: 0.04em; text-transform: uppercase; }
.playback-status { min-width: 0; 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 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: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; padding-top: 6px; }
.room-couch { position: relative; container-type: inline-size; justify-self: center; width: min(100%, 560px); aspect-ratio: 760 / 220; margin-top: 18px; }
.room-couch .couch-art { top: auto; height: calc(150 / 220 * 100%); }
.room-couch .couch-tag { translate: -50% -50%; background: rgba(10, 6, 4, 0.5); box-shadow: none; padding: 3px 8px; font-size: 11px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.room-couch .couch-tag.is-self { background: var(--lamp); }
.room-couch .couch-tag.is-talking { box-shadow: 0 0 0 1.5px var(--live) inset; }
.room-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); }
.room-couch .couch-tag.empty .couch-tag-name { display: none; }
.room-couch .couch-tag.empty .icon { width: 14px; height: 14px; }
.room-couch .couch-tag.empty:hover { color: var(--lamp); border-color: var(--lamp); }
.room-couch .couch-tag { max-width: 92px; }
@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; } }
.room-couch .figure .halo { stroke-width: 3.5; }
.remote { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 8px; border-radius: 20px; background: linear-gradient(180deg, rgba(37, 26, 19, 0.92), rgba(24, 17, 12, 0.92)); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 1px 0 rgba(255, 230, 200, 0.06) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.9); }
.call-btn { display: grid; justify-items: center; gap: 6px; width: 64px; padding: 4px 0 2px; border-radius: 14px; color: var(--ink-2); font: 650 11px/1.2 var(--ui); transition: color var(--duration-fast) var(--ease-out); }
.call-icon { display: grid; place-items: center; width: 48px; height: 44px; border-radius: 13px; background: var(--wood-3); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 230, 200, 0.07) 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: 21px; height: 21px; }
.call-btn:hover:not(:disabled) .call-icon { background: #45321f; }
.call-btn[data-state='on'] .call-icon { background: var(--live); color: var(--live-ink); }
.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); color: var(--lamp-ink); }
.call-btn[aria-pressed='true']:not([data-state]) { color: var(--lamp); }
.call-btn.danger .call-icon { background: var(--alert-tint); color: var(--alert); }
.call-btn.danger:hover .call-icon { background: rgba(242, 145, 138, 0.24); }
.call-btn.is-busy .call-icon { opacity: 0.6; }
#resume-audio { justify-self: center; }
.now { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 4px; min-width: 0; }
.now-copy { flex: 1; min-width: 0; }
.now h2 { font-size: var(--fs-h3); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.now p { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; overflow-wrap: anywhere; }
.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(31, 22, 16, 0.94), rgba(22, 15, 11, 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); color: var(--lamp-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); }
.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; }
.send { width: 40px; height: 40px; background: var(--lamp); color: var(--lamp-ink); border-radius: 11px; }
.send:hover:not(:disabled) { background: var(--lamp-strong); 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 h2 { font-size: 21px; margin-bottom: 14px; }
.popover .field-label { margin-bottom: 8px; }
.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; }
.floating-cameras.docked .camera-controls button:not(:last-child), .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 .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; }
.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) {
  .scene { height: auto; max-height: none; container-type: inline-size; padding-bottom: 28px; background: linear-gradient(180deg, #0d0907, var(--night) 70%); --u: calc(100cqw / 900); }
  .scene::before { content: ''; display: block; height: 100cqw; }
  .scene-room { inset: 0 0 auto 0; height: 100cqw; mask-image: linear-gradient(180deg, #000 84%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); }
  .scene-couch { top: calc(100cqw - (900 - 420) * var(--u)); }
  .scene-tv { top: calc(100cqw - 520 * var(--u)); height: calc(520 * var(--u)); }
  .hero-copy { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 4px 16px 18px; }
  .hero-title { font-size: clamp(32px, 10cqw, 46px); }
  .invite-title { font-size: clamp(28px, 8.4cqw, 40px); }
  .hero-form { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 0 16px; }
  .hero-fields { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; background: rgba(27, 19, 14, 0.92); }
  .hero-fields .btn-lg { width: 100%; justify-content: space-between; min-height: 52px; }
  .invite-form .hero-fields { grid-template-columns: minmax(0, 1fr); }
  .invite-form { width: auto; }
  .home-alt > span[aria-hidden] { display: none; }
  .service-row { flex-direction: column; }
  .service-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .service { height: 42px; }
  .service { min-width: 0; padding: 0 6px; }
  .couch-tag { font-size: 11px; padding: 3px 8px; max-width: 86px; }
  .room-couch .couch-tag { font-size: 10px; padding: 2px 6px; max-width: 64px; }
}
/* 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: 21px; }
  .stage-empty { min-height: 360px; }
  .external { padding: 36px 32px; }
  .external-option { grid-template-columns: 1fr auto; align-items: center; }
  .call-btn { width: 66px; }
  .hide-mobile { display: inline-grid !important; }
}
@media (min-width: 1100px) {
  .living { grid-template-columns: minmax(180px, 1fr) minmax(300px, 500px) auto; gap: 20px; align-items: end; }
  .now { align-self: center; flex-direction: column; align-items: flex-start; }
  .room-couch { width: 100%; margin-top: 0; }
  .remote { justify-self: end; align-self: center; flex-wrap: nowrap; }
  #resume-audio { grid-column: 3; justify-self: end; }
}
@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 .screen, .stage-col .transport { max-width: max(560px, calc((100dvh - 400px) * 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; }
  .is-shaking, .badge, .msg.arrive, .sharing .live-dot, .scene-tv, .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 .transport, .native-app .living, .native-app .side, .native-app .notice, .native-app .sharing, .native-app .floating-cameras, .native-app .skip, .native-app .room-ambience { display: none !important; }
.native-app .room { padding: 0; min-height: 0; }
.native-app .room-layout { display: block; padding: 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; }
.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); }