@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(assets/bodoni-moda-0.ttf) format('truetype');
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/dm-mono-0.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/dm-mono-1.ttf) format('truetype');
}

@font-face {
  font-family: 'Italiana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/italiana-0.ttf) format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/manrope-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/manrope-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/manrope-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/manrope-3.ttf) format('truetype');
}


:root {
  --ink: #10110f;
  --paper: #f4f0e5;
  --soft-paper: rgba(244, 240, 229, 0.78);
  --line: rgba(16, 17, 15, 0.18);
  --green: #c8f43d;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.experience {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.experience::before {
  position: absolute;
  inset: 88px 37vw 0 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 30% 20%, rgba(16, 17, 15, 0.1), transparent 28%),
    linear-gradient(90deg, rgba(244, 240, 229, 0.62), rgba(244, 240, 229, 0));
}

.agent-film,
.reactor-stage,
.film-wash,
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reactor-stage {
  z-index: -4;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: #1a1a18;
  transition: opacity 0.7s ease, inset 0.9s var(--ease), width 0.9s var(--ease);
}

.reactor-reference,
.reactor-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) contrast(1.04) brightness(0.9);
  transform: scale(1.02);
  transition: opacity 1.1s ease, transform 8s ease;
}

.reactor-reference {
  opacity: 1;
}

.reactor-film {
  opacity: 0;
}

.reactor-film.is-live {
  opacity: 1;
  transform: scale(1);
}

[data-reactor-ready="true"] .reactor-reference {
  opacity: 0;
}

.reactor-warmup {
  position: absolute;
  right: 34px;
  bottom: 30px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 240, 229, 0.5);
  background: rgba(16, 17, 15, 0.62);
  color: var(--paper);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.reactor-warmup span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.3s ease infinite;
}

.reactor-warmup p {
  margin: 0;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.12em;
}

[data-reactor-ready="true"] .reactor-warmup {
  opacity: 0;
}

[data-mode="reactor"][data-state="listening"] .reactor-stage,
[data-mode="reactor"][data-state="connected"] .reactor-stage,
[data-mode="longlive1"][data-state="listening"] .reactor-stage,
[data-mode="longlive1"][data-state="connected"] .reactor-stage,
[data-mode="longlive2"][data-state="listening"] .reactor-stage,
[data-mode="longlive2"][data-state="connected"] .reactor-stage {
  opacity: 1;
}

[data-mode="reactor"] .agent-film,
[data-mode="longlive1"] .agent-film,
[data-mode="longlive2"] .agent-film {
  opacity: 0 !important;
  visibility: hidden;
}

.agent-film {
  z-index: -4;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.68) contrast(1.02) brightness(0.9);
  transform: scale(1.07);
  transition: opacity 0.42s ease, transform 8s ease, clip-path 0.9s var(--ease);
}

.agent-film-echo {
  z-index: -3;
  pointer-events: none;
}

.film-wash {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(247, 247, 242, 0.98) 0%, rgba(247, 247, 242, 0.94) 34%, rgba(247, 247, 242, 0.45) 64%, rgba(247, 247, 242, 0.12) 100%),
    linear-gradient(0deg, rgba(247, 247, 242, 0.76), rgba(247, 247, 242, 0) 32%);
  transition: background 1s var(--ease);
}

.experience::after {
  position: absolute;
  inset: 88px 50% 0 auto;
  z-index: 1;
  display: none;
  width: 1px;
  content: "";
  background: rgba(16, 17, 15, 0.42);
}

.grain,
.film-scratches {
  z-index: 6;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.film-leader {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #b7b5ae;
  color: #171713;
  filter: grayscale(1) contrast(1.08);
}

.film-leader::before,
.film-leader::after {
  position: absolute;
  content: "";
}

.film-leader::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #272721 calc(50% - 1px), #272721 calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), #272721 calc(50% - 1px), #272721 calc(50% + 1px), transparent calc(50% + 1px));
}

.film-leader::after {
  width: 125vmax;
  height: 125vmax;
  left: 50%;
  top: 50%;
  background: conic-gradient(from -36deg, rgba(33, 33, 29, 0.42) 0deg 38deg, transparent 38deg 360deg);
  transform-origin: 0 0;
  animation: leader-sweep 1s linear infinite;
}

.leader-circle {
  z-index: 1;
  display: grid;
  width: min(43vw, 390px);
  height: min(43vw, 390px);
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 0 0 7px #b7b5ae, 0 0 0 10px rgba(255, 255, 255, 0.86);
}

.leader-number {
  font: 400 min(32vw, 300px)/1 "Italiana", Georgia, serif;
}

.film-leader p {
  position: absolute;
  bottom: 6vh;
  z-index: 1;
  margin: 0;
  font: 500 11px/1 "DM Mono", monospace;
  letter-spacing: 0.22em;
}

[data-state="intro"] .film-leader {
  display: grid;
  animation: leader-flicker 0.14s steps(2) infinite;
}

.opening-title {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: none;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, #272721 0%, #12120f 58%, #080806 100%);
  color: var(--paper);
}

.opening-title::before {
  position: absolute;
  inset: -20%;
  content: "";
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: title-grain 0.16s steps(2) infinite;
}

.opening-title h1 {
  position: relative;
  z-index: 1;
  width: min(92vw, 1200px);
  margin: 0;
  font: italic 700 clamp(86px, 15vw, 220px)/0.72 "Bodoni Moda", "Times New Roman", serif;
  letter-spacing: -0.085em;
  text-align: center;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.08), 0 12px 34px rgba(0, 0, 0, 0.65);
  transform: rotate(-2deg);
  animation: title-settle 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.opening-title h1 span {
  display: block;
}

.opening-title h1 span:last-child {
  margin-left: 0.3em;
}

[data-state="title"] .opening-title {
  display: grid;
  animation: title-card 2.4s ease-in-out both;
}

.film-scratches {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, transparent 8%, rgba(16, 17, 15, 0.22) 8.08%, transparent 8.18%),
    linear-gradient(90deg, transparent 72%, rgba(16, 17, 15, 0.13) 72.08%, transparent 72.16%);
  animation: scratches 7s steps(1) infinite, projector 0.18s steps(2) infinite;
}

.footer {
  position: absolute;
  left: 0;
  width: 100%;
  display: grid;
  align-items: center;
  padding: 28px 36px;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.edition,
.footer p {
  margin: 0;
}

.eyebrow,
.label,
.camera-label,
.camera-state {
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.15em;
}

.pulse-dot,
.connected-dot,
.camera-label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.call-panel {
  position: absolute;
  right: 3vw;
  bottom: 12vh;
  width: min(440px, 36vw);
  min-height: 350px;
  padding: 18px;
  border: 1px solid rgba(16, 17, 15, 0.72);
  outline: 1px solid rgba(16, 17, 15, 0.35);
  outline-offset: -8px;
  background: rgba(244, 240, 229, 0.9);
  backdrop-filter: blur(22px);
  transform-origin: center;
  transition: transform 0.8s var(--ease), background 0.8s ease, box-shadow 0.8s ease;
  z-index: 4;
}

.call-panel::before,
.call-panel::after {
  position: absolute;
  top: 13px;
  bottom: 13px;
  width: 5px;
  content: "";
  opacity: 0.42;
  background: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 7px,
    transparent 7px 15px
  );
}

.call-panel::before { left: 9px; }
.call-panel::after { right: 9px; }

.panel-meta,
.connected-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  margin: 0;
}

.state-view {
  display: none;
  padding: 32px 14px 10px;
}

.state-connected {
  padding: 28px 26px 22px;
}

[data-state="idle"] .state-idle,
[data-state="listening"] .state-listening,
[data-state="connected"] .state-connected {
  display: block;
  animation: arrive 0.7s var(--ease) both;
}

.step-number {
  position: absolute;
  right: 20px;
  bottom: 14px;
  margin: 0;
  color: rgba(16, 17, 15, 0.1);
  font: 124px/0.8 "Italiana", serif;
}

h2 {
  margin: 0;
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.08em;
  line-height: 0.95;
  text-wrap: balance;
}

.state-connected h2 {
  max-width: 420px;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 0.92;
}

.film-credit {
  min-height: 12px;
  margin: 14px 0 0 !important;
  font: 600 11px/1.1 "DM Mono", monospace !important;
  letter-spacing: 0.15em;
}

.intent-kicker {
  margin: 0 0 6px !important;
  font: 600 10px/1 "DM Mono", monospace !important;
  letter-spacing: 0.16em;
  color: rgba(16, 17, 15, 0.55);
}

.intent-trace {
  display: grid;
  gap: 0;
}

.trace-step {
  position: relative;
  padding: 0 0 24px 24px;
  transition: opacity 0.45s ease, transform 0.6s var(--ease);
}

.trace-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: -2px;
  left: 4px;
  width: 1px;
  background: rgba(16, 17, 15, 0.3);
}

.trace-step::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.trace-copy {
  margin: 0 !important;
  color: #7d3524;
  font-size: 23px;
  line-height: 1.28;
}

.trace-conclusion {
  padding-bottom: 0;
}

.trace-conclusion::after {
  background: var(--ink);
}

.state-listening .intent-guess {
  margin: 0;
  padding: 14px 16px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.phone-intent-detected .call-panel {
  z-index: 10;
  background: rgba(244, 240, 229, 0.98);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  transform: scale(1.14);
}

.phone-intent-detected .trace-step:not(.trace-conclusion) {
  opacity: 0.34;
  transform: translateX(-4px) scale(0.97);
}

.phone-intent-detected .trace-conclusion .intent-kicker {
  color: var(--ink);
  font-size: 11px !important;
  letter-spacing: 0.12em;
}

.phone-intent-detected .state-listening .intent-guess {
  background: var(--green);
  color: var(--ink);
  font-size: clamp(42px, 4.4vw, 62px);
  box-shadow: 0 0 0 1px var(--ink), 0 12px 34px rgba(16, 17, 15, 0.2);
  animation: phone-intent-zoom 2.4s var(--ease) both;
}

.phone-intent-detected .state-listening .other-side::before {
  content: "TRIGGERS NEXT";
  color: #7d3524;
}

#intentContext:empty {
  display: none;
}

.other-side {
  margin-top: 24px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: rgba(16, 17, 15, 0.68);
}

.state-view > p:not(.step-number) {
  max-width: none;
  margin: 22px 0 24px;
  font-size: 18px;
  line-height: 1.35;
  text-wrap: pretty;
}

.state-listening .other-side {
  position: relative;
  color: rgba(16, 17, 15, 0.62);
  font-size: 17px;
}

.state-listening .other-side::before {
  content: "INSIDE THE FILM";
  display: block;
  margin-bottom: 8px;
  font: 600 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
  color: rgba(16, 17, 15, 0.48);
}

.panel-meta .label {
  font-size: 11px;
}

.response-pair {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 54px 1.3fr;
  align-items: center;
  gap: 20px;
  margin: 18px 0 18px;
  max-width: none;
}

.response-pair p {
  position: relative;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.response-pair p::before {
  display: block;
  margin-bottom: 9px;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
  color: rgba(16, 17, 15, 0.52);
}

.intent-line::before {
  content: "AMR";
}

.experience[data-mode="reactor"] .intent-line::before,
.experience[data-mode="longlive1"] .intent-line::before,
.experience[data-mode="longlive2"] .intent-line::before {
  content: "CALLER";
}

.response-line::before {
  content: attr(data-character-label);
}

.intent-line {
  font-size: clamp(24px, 2.9vw, 42px);
  color: var(--ink);
}

.response-line {
  font-size: clamp(24px, 2.9vw, 42px);
  color: rgba(16, 17, 15, 0.66);
}

.response-arrow {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(16, 17, 15, 0.5);
}

.response-arrow::after {
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 1px solid rgba(16, 17, 15, 0.5);
  border-right: 1px solid rgba(16, 17, 15, 0.5);
  transform: translateY(-50%) rotate(45deg);
}

.primary-action {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.12em;
  transition: background 0.3s ease, color 0.3s ease;
}

.character-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0 10px;
  padding: 0;
  border: 0;
  transition: opacity 0.3s ease;
}

.character-selector legend {
  width: 100%;
  margin-bottom: 9px;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
}

.character-selector label {
  position: relative;
  display: grid;
  min-height: 56px;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(16, 17, 15, 0.25);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.character-selector label:has(input:checked) {
  border-color: var(--ink);
  background: rgba(16, 17, 15, 0.055);
}

.character-selector input {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: var(--ink);
}

.character-selector img {
  width: 48px;
  height: 42px;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(1) contrast(1.08);
}

.character-selector strong,
.character-selector small {
  display: block;
}

.character-selector strong {
  font: 600 12px/1.1 "Manrope", sans-serif;
}

.character-selector small {
  margin-top: 4px;
  color: rgba(16, 17, 15, 0.56);
  font: 400 8px/1.2 "DM Mono", monospace;
}

.mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0 12px;
  padding: 0;
  border: 0;
  transition: opacity 0.3s ease;
}

.mode-selector legend {
  width: 100%;
  margin-bottom: 9px;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
}

.mode-selector label {
  position: relative;
  display: flex;
  min-height: 64px;
  align-items: center;
  padding: 11px 12px 11px 34px;
  border: 1px solid rgba(16, 17, 15, 0.25);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.mode-selector label:has(input:checked) {
  border-color: var(--ink);
  background: rgba(16, 17, 15, 0.055);
}

.mode-selector input {
  position: absolute;
  left: 12px;
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--ink);
}

.mode-selector strong,
.mode-selector small {
  display: block;
}

.mode-selector strong {
  font: 600 11px/1.2 "Manrope", sans-serif;
}

.mode-selector small {
  margin-top: 5px;
  color: rgba(16, 17, 15, 0.56);
  font: 400 8px/1.2 "DM Mono", monospace;
  letter-spacing: 0.04em;
}

.mode-selector.is-locked,
.character-selector.is-locked {
  opacity: 0.5;
  pointer-events: none;
}

.mode-selector .is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
}

.mode-selector .is-character-incompatible {
  opacity: 0.42;
  cursor: not-allowed;
}

.primary-action:hover {
  background: transparent;
  color: var(--ink);
}

.action-icon {
  font-size: 16px;
}

.connected-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.1em;
}

.text-action {
  position: relative;
  z-index: 1;
  margin-top: 25px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: 500 9px/1.5 "DM Mono", monospace;
  letter-spacing: 0.12em;
}

.connected-status {
  gap: 8px;
  justify-content: flex-start;
  max-width: none;
  margin-top: 0;
  padding: 10px 0 0;
  border-bottom: 0;
  font-size: 10px;
}

.connected-status span:last-child {
  margin-left: auto;
}

.connected-dot {
  width: 7px;
  height: 7px;
  background: #a8d329;
  animation: pulse 1.6s ease infinite;
}

.presence-card {
  position: absolute;
  left: 36px;
  bottom: 34px;
  width: clamp(180px, 21vw, 280px);
  height: clamp(126px, 14.8vw, 196px);
  overflow: hidden;
  border: 1px solid rgba(16, 17, 15, 0.76);
  outline: 1px solid rgba(16, 17, 15, 0.35);
  outline-offset: -8px;
  background: #d6d2c7;
  transition:
    inset 1s var(--ease),
    width 1s var(--ease),
    height 1s var(--ease),
    border-color 0.6s ease;
  z-index: 3;
}

#cameraFeed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scaleX(-1);
  transition: opacity 0.6s ease;
}

#motionCanvas {
  display: none;
}

.presence-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 58%, rgba(16, 17, 15, 0.4)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.camera-label,
.camera-state {
  position: absolute;
  left: 9px;
  z-index: 1;
  margin: 0;
  color: white;
  font-size: 9px;
}

.camera-label {
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.camera-label span {
  width: 5px;
  height: 5px;
  background: white;
}

.camera-state {
  left: 18px;
  bottom: 18px;
}

.footer {
  bottom: 0;
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--line);
}

.footer span {
  font-weight: 700;
}

[data-state="listening"] #cameraFeed,
[data-state="connected"] #cameraFeed {
  opacity: 1;
}

[data-state="connected"] .agent-film {
  inset: 88px 0 0 50%;
  width: 50%;
  height: calc(100% - 88px);
  z-index: 0;
  opacity: 1;
  clip-path: none;
  object-position: 62% 34%;
  transform: scale(1);
}

[data-mode="reactor"][data-state="connected"] .reactor-stage,
[data-mode="longlive1"][data-state="connected"] .reactor-stage,
[data-mode="longlive2"][data-state="connected"] .reactor-stage {
  inset: 88px 0 0 50%;
  width: 50%;
  height: calc(100% - 88px);
  z-index: 0;
}

[data-mode="reactor"][data-state="connected"] .reactor-warmup,
[data-mode="longlive1"][data-state="connected"] .reactor-warmup,
[data-mode="longlive2"][data-state="connected"] .reactor-warmup {
  display: none;
}

[data-state="connected"] .agent-film-echo {
  opacity: 0;
  visibility: hidden;
}

[data-state="listening"] .agent-film.is-loop-active {
  opacity: 1;
  transform: scale(1);
}

[data-state="connected"] .film-wash {
  background:
    linear-gradient(90deg, rgba(244, 240, 229, 0.1) 0%, rgba(244, 240, 229, 0.04) 47%, rgba(244, 240, 229, 0.26) 50%, rgba(244, 240, 229, 0.02) 100%),
    linear-gradient(0deg, rgba(244, 240, 229, 0.2), rgba(244, 240, 229, 0) 40%);
}

[data-state="connected"] .call-panel {
  background: rgba(244, 240, 229, 0.82);
  right: 50%;
  bottom: 28px;
  width: min(980px, 78vw);
  min-height: 0;
  padding: 18px 24px 20px;
  transform: translateX(50%) translateY(-8px);
}

[data-state="connected"] .call-panel::before,
[data-state="connected"] .call-panel::after {
  top: 12px;
  bottom: 12px;
  opacity: 0.32;
}

[data-state="connected"] .step-number {
  right: 36px;
  bottom: 18px;
  font-size: 96px;
}

[data-state="connected"] .presence-card {
  top: 88px;
  right: 50%;
  bottom: 0;
  left: 0;
  width: 50%;
  height: auto;
  border-color: rgba(16, 17, 15, 0.42);
}

[data-state="connected"] .experience::after {
  display: block;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  50% { opacity: 0.32; transform: scale(0.72); }
}

@keyframes projector {
  0% { opacity: 0.1; }
  100% { opacity: 0.18; }
}

@keyframes scratches {
  0%, 18%, 43%, 100% { transform: translateX(0); }
  19% { transform: translateX(10vw); }
  44% { transform: translateX(-14vw); }
}

@keyframes leader-sweep {
  to { transform: rotate(360deg); }
}

@keyframes leader-flicker {
  0% { filter: grayscale(1) contrast(1.08) brightness(0.94); }
  100% { filter: grayscale(1) contrast(1.08) brightness(1.04); }
}

@keyframes title-card {
  0% { opacity: 0; filter: contrast(1.15) brightness(0.65); }
  10%, 76% { opacity: 1; filter: contrast(1.08) brightness(1); }
  80% { opacity: 0.92; filter: contrast(1.18) brightness(0.84); }
  84% { opacity: 1; filter: contrast(1.05) brightness(1.05); }
  100% { opacity: 0; filter: contrast(1.12) brightness(0.58); }
}

@keyframes title-settle {
  0% { opacity: 0; transform: rotate(-2deg) scale(1.12); }
  13% { opacity: 1; }
  76% { opacity: 1; transform: rotate(-2deg) scale(1); }
  100% { opacity: 0; transform: rotate(-2deg) scale(0.985); }
}

@keyframes title-grain {
  0% { transform: translate3d(-2%, -1%, 0); }
  50% { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(-1%, 2%, 0); }
}

@keyframes phone-intent-zoom {
  0% { opacity: 0.55; transform: scale(0.88); }
  24% { opacity: 1; transform: scale(1.03); }
  62% { transform: scale(1); }
  82% { transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  .experience {
    min-height: 900px;
  }

  .footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  .edition {
    display: none;
  }

  .presence-card {
    position: absolute;
    left: 18px;
    top: auto;
    right: auto;
    bottom: 24px;
    width: 178px;
    height: 124px;
    margin: 0;
  }

  .call-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 36px);
    min-height: 390px;
    margin: 112px 18px 76px;
  }

  [data-state="connected"] .presence-card {
    position: absolute;
    inset: 88px 50% auto 0;
    width: 50%;
    height: 52vh;
    margin: 0;
  }

  [data-state="connected"] .agent-film {
    position: absolute;
    inset: 88px 0 auto 50%;
    display: block;
    width: 50%;
    height: 52vh;
    margin: 0;
    clip-path: none;
    border: 1px solid rgba(16, 17, 15, 0.76);
  }

  [data-state="connected"] .call-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 36px);
    min-height: 0;
    transform: none;
    margin: calc(52vh + 112px) 18px 76px;
  }

  .state-connected h2 {
    font-size: clamp(38px, 10vw, 54px);
  }

  .response-pair {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }

  .response-arrow {
    width: 42px;
  }

  .intent-line,
  .response-line {
    font-size: clamp(25px, 7vw, 34px);
  }

  .state-view {
    padding-top: 42px;
  }

}

[data-state="connected"] .call-panel {
  left: 50%;
  right: auto;
  bottom: 22px;
  width: min(980px, calc(100% - 72px));
  min-height: 0;
  padding: 14px 24px 16px;
  transform: translateX(-50%);
  background: rgba(244, 240, 229, 0.78);
}

[data-state="connected"] .state-connected {
  padding: 22px 30px 18px;
}

[data-state="connected"] .state-connected h2 {
  max-width: 420px;
  font-size: clamp(22px, 2.15vw, 34px);
  line-height: 0.94;
}

[data-state="connected"] .response-pair {
  grid-template-columns: 0.9fr 42px 1.35fr;
  gap: 16px;
  margin: 14px 0 12px;
}

[data-state="connected"] .response-pair p::before {
  margin-bottom: 7px;
}

[data-state="connected"] .intent-line,
[data-state="connected"] .response-line {
  font-size: clamp(21px, 2.2vw, 34px);
}

[data-state="connected"] .connected-status {
  margin-top: 0;
  padding: 8px 0 0;
  border-bottom: 0;
  font-size: 10px;
}

[data-state="connected"] .step-number {
  right: 36px;
  bottom: 18px;
  font-size: 72px;
}

@media (max-width: 760px) {
  [data-state="connected"] .call-panel {
    position: absolute;
    left: 16px;
    right: auto;
    bottom: 16px;
    width: calc(100% - 32px);
    margin: 0;
    transform: none;
  }

  [data-state="connected"] .state-connected h2 {
    font-size: clamp(22px, 5vw, 30px);
  }

  [data-state="connected"] .response-pair {
    grid-template-columns: 0.9fr 34px 1.35fr;
    gap: 12px;
  }

  [data-state="connected"] .intent-line,
  [data-state="connected"] .response-line {
    font-size: clamp(20px, 4.5vw, 28px);
  }

  [data-state="connected"] .step-number {
    font-size: 56px;
  }
}

@media (max-width: 500px) {
  [data-state="connected"] .response-pair {
    grid-template-columns: 1fr;
  }

  [data-state="connected"] .response-arrow {
    width: 34px;
  }
}

/* Final connected-state composition: keep the split-screen dominant. */
[data-state="connected"] .call-panel {
  left: 50%;
  right: auto;
  bottom: 18px;
  width: min(1080px, calc(100% - 84px));
  padding: 13px 26px 14px;
  transform: translateX(-50%);
  background: rgba(244, 240, 229, 0.7);
}

[data-state="connected"] .call-panel::before,
[data-state="connected"] .call-panel::after {
  opacity: 0;
}

[data-state="connected"] .state-connected {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 22px 0;
}

[data-state="connected"] .state-connected h2 {
  max-width: none;
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 0.96;
}

[data-state="connected"] .response-pair {
  grid-template-columns: minmax(260px, 0.95fr) 56px minmax(340px, 1.2fr);
  gap: 20px;
  align-items: center;
  margin: 0;
}

[data-state="connected"] .response-pair p::before {
  margin-bottom: 6px;
  font-size: 8px;
}

[data-state="connected"] .intent-line,
[data-state="connected"] .response-line {
  font-size: clamp(28px, 2.45vw, 42px);
  line-height: 1;
}

[data-state="connected"] .connected-status {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-bottom: 0;
  font-size: 9px;
}

@media (max-width: 900px) {
  [data-state="connected"] .call-panel {
    left: 18px;
    bottom: 18px;
    width: calc(100% - 36px);
    transform: none;
  }

  [data-state="connected"] .state-connected {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  [data-state="connected"] .state-connected h2 {
    max-width: none;
    font-size: clamp(22px, 5vw, 34px);
  }

  [data-state="connected"] .response-pair {
    grid-template-columns: minmax(180px, 0.9fr) 34px minmax(220px, 1.15fr);
    gap: 12px;
    align-items: center;
  }

  [data-state="connected"] .intent-line,
  [data-state="connected"] .response-line {
    font-size: clamp(20px, 4vw, 28px);
  }
}

@media (max-width: 560px) {
  [data-state="connected"] .response-pair {
    grid-template-columns: 1fr;
  }

  [data-state="connected"] .response-arrow {
    width: 34px;
  }
}

.quality-selector {
  margin: 22px 0 12px;
  padding: 0;
  border: 0;
}

.quality-selector legend {
  margin-bottom: 10px;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
}

.quality-selector input[type="range"] {
  --quality-progress: 100%;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--ink);
}

.quality-selector input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ink) var(--quality-progress), var(--line) var(--quality-progress));
}

.quality-selector input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--green);
  -webkit-appearance: none;
}

.quality-selector input::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}

.quality-selector input::-moz-range-progress {
  height: 3px;
  background: var(--ink);
}

.quality-selector input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--green);
}

.quality-selector input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 3px;
}

.quality-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  color: rgba(16, 17, 15, 0.5);
  font: 500 10px/1.5 "DM Mono", monospace;
}

.quality-labels .is-selected { color: var(--ink); }

.quality-status {
  margin: 10px 0 0;
  font: 400 10px/1.5 "Manrope", sans-serif;
}

.quality-selector.is-locked { opacity: 0.5; }
.quality-selector input:disabled { cursor: not-allowed; }
.primary-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* The entrance is self-contained; the live picture keeps its existing layout. */
.experience[data-state="idle"] {
  min-height: 100svh;
  background: #11130f;
}

.experience[data-state="idle"]::before {
  inset: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(103, 98, 72, 0.3), transparent 68%);
}

[data-state="idle"] .film-wash { background: none; }
[data-state="idle"] .grain { opacity: 0.035; mix-blend-mode: screen; }
[data-state="idle"] .presence-card,
[data-state="idle"] .panel-meta,
[data-state="idle"] .call-panel::before,
[data-state="idle"] .call-panel::after { display: none; }

[data-state="idle"] .call-panel {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(1000px, calc(100% - 80px));
  min-height: 0;
  max-height: none;
  margin: 44px auto 30px;
  padding: 0;
  overflow: visible;
  border: 0;
  outline: 0;
  background: none;
  backdrop-filter: none;
}

[data-state="idle"] .state-idle { padding: 0; animation: none; }
.entrance-heading { margin-bottom: 112px; text-align: center; }

.entrance-heading h2 {
  color: #ead7a1;
  font: 400 clamp(48px, 5.5vw, 76px)/1.08 "Italiana", Georgia, serif;
  letter-spacing: -0.035em;
}

.vintage-tv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px;
  gap: 12px 20px;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 22px 22px 12px;
  border: 1px solid #736958;
  border-radius: 26px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(78, 66, 47, 0.035) 3px 4px),
    linear-gradient(135deg, #d9d0bb, #b4ab95 62%, #a39a84);
  box-shadow: inset 0 2px 2px #eee7d6, inset 0 -4px 3px #867c68,
    0 7px 0 #746c5c, 0 11px 0 -1px #5c574b, 0 24px 32px -14px rgba(62, 53, 35, 0.45);
}

.vintage-tv::before,
.vintage-tv::after {
  position: absolute;
  bottom: -17px;
  z-index: -1;
  width: 55px;
  height: 16px;
  border-radius: 0 0 4px 4px;
  background: #38372f;
  content: "";
}
.vintage-tv::before { left: 60px; transform: skewX(-12deg); }
.vintage-tv::after { right: 60px; transform: skewX(12deg); }

.tv-antenna {
  position: absolute;
  bottom: calc(100% - 5px);
  left: 50%;
  width: 230px;
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
  filter: drop-shadow(1px 2px 1px rgba(68, 60, 40, 0.16));
  pointer-events: none;
}

.tv-bezel {
  min-width: 0;
  padding: 11px;
  border: 1px solid #6b6658;
  border-radius: 45px / 36px;
  background: linear-gradient(145deg, #4a493f, #272923 60%, #3d3e34);
  box-shadow: 0 1px 1px #eee6d1, inset 0 3px 7px #191b16;
}

.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid #151712;
  border-radius: 36px / 28px;
  background: #141611;
  isolation: isolate;
  box-shadow: 0 0 0 1px #78796b;
}

.tv-program { position: absolute; inset: 0; animation: tune-in 240ms ease-out; }
.tv-program[hidden] { display: none; }
.tv-intro { position: absolute; inset: 0; background: #141611; }
.tv-intro[hidden] { display: none; }
.tv-static {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  background: #777;
  pointer-events: none;
}
.tv-static canvas { display: block; width: 100%; height: 100%; }
.tv-static::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25); }
.entrance-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) sepia(0.08) contrast(1.04);
}

.tv-program::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 45%, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.tv-character-title {
  position: absolute;
  top: 7%;
  left: 8%;
  z-index: 1;
  color: #ffe078;
  font: italic 900 clamp(36px, 6vw, 72px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -0.055em;
  text-shadow: 1px 1px 0 #9c642b, 2px 3px 0 #684020, 0 4px 14px rgba(0, 0, 0, 0.65);
  transform: rotate(-4deg);
  pointer-events: none;
}

.tv-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.1) 3px 4px),
    linear-gradient(125deg, rgba(255, 255, 241, 0.13), transparent 35%);
  box-shadow: inset 0 0 24px 5px rgba(0, 0, 0, 0.38);
}
[data-tv-preview="static"] .tv-glass { background: linear-gradient(125deg, rgba(255, 255, 241, 0.07), transparent 35%); }

.tv-tuner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 9px 8px 0 12px;
  border-left: 1px solid rgba(71, 66, 49, 0.2);
}

.tv-channels { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; margin: 0; }
.tv-channels legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tv-channels label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 9px;
  min-height: 70px;
  padding: 10px 8px;
  border: 1px solid #6e582c;
  border-radius: 9px;
  background: linear-gradient(#f4dfa0, #d7b765);
  box-shadow: inset 0 1px 0 #fff0bc, 0 4px 0 #77603c, 0 6px 8px rgba(42, 34, 19, 0.25);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.tv-channels label:has(input:checked) {
  border-color: #33372a;
  background: linear-gradient(#383c2c, #25291e);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 #7c795f;
  transform: translateY(3px);
}
.tv-channels input { width: 1px; height: 1px; opacity: 0; }
.tv-channel-dial {
  display: grid;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #9b803e;
  border-radius: 50%;
  background: rgba(255, 246, 205, 0.35);
  color: #42371e;
  font: 500 12px/1 "DM Mono", monospace;
}
.tv-channel-name { color: #282417; font: 700 15px/1.3 "Manrope", sans-serif; }
.tv-channels label:hover:not(:has(input:checked)) { transform: translateY(-2px); background: linear-gradient(#ffecb6, #e6c576); }
.tv-channels input:checked ~ .tv-channel-dial { color: #f2d67b; border-color: #c6ad65; background: transparent; }
.tv-channels input:checked ~ .tv-channel-name { color: #f2d67b; }
.tv-channels label:has(input:focus-visible) { outline: 2px solid #151911; outline-offset: 5px; }
.tv-channels.is-locked { opacity: 0.5; pointer-events: none; }
[data-tv-phase="selecting"] .tv-channels label::after {
  position: absolute;
  inset: -5px;
  border: 2px solid #d6b355;
  border-radius: 14px;
  box-shadow: 0 0 12px rgba(228, 189, 83, 0.5);
  opacity: 0.15;
  content: "";
  pointer-events: none;
  animation: channel-cue 3.8s ease-in-out infinite;
}
[data-tv-phase="selecting"] .tv-channels label:nth-of-type(2)::after { animation-delay: -1.9s; }
[data-motion-paused="true"] .tv-channels label::after { animation: none; opacity: 0.3; }
@keyframes channel-cue {
  0%, 30%, 70%, 100% { opacity: 0.15; }
  40% { opacity: 0.4; }
  46% { opacity: 0.22; }
  54% { opacity: 0.55; }
}
.tv-speaker {
  flex: 1;
  width: 100%;
  min-height: 32px;
  border-radius: 4px;
  background: repeating-linear-gradient(0deg, #625f50 0 2px, #c3bba5 2px 5px);
  box-shadow: inset 0 1px 3px rgba(48, 45, 33, 0.3);
}
.tv-power { display: flex; align-self: flex-end; }
.tv-power i { width: 5px; height: 5px; border-radius: 50%; background: #c8f43d; box-shadow: 0 0 4px rgba(200, 244, 61, 0.6); }
.tv-bottom { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; padding: 0 7px; }
.tv-audio-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border-top: 1px solid #8d87715c; padding-top: 12px;
}
.tv-volume-control { display: grid; justify-items: center; gap: 5px; }
.tv-control-label { color: #555242; font: 500 8px/1 "DM Mono", monospace; letter-spacing: 0.12em; }
.volume-knob {
  --knob-size: 62px;
  position: relative; display: grid; place-items: center; width: var(--knob-size); height: var(--knob-size);
  border-radius: 50%; touch-action: none; user-select: none; cursor: ns-resize;
  background: repeating-conic-gradient(from -135deg, #6d6652 0deg 2deg, transparent 2deg 27deg);
}
.volume-knob:focus-visible { outline: 2px solid #3b3e2d; outline-offset: 4px; }
.volume-knob-face {
  display: block; position: relative; width: 80%; height: 80%; border-radius: 50%;
  border: 2px solid #8a8168;
  background: repeating-conic-gradient(#36392d 0deg 3deg, #555744 3deg 6deg);
  box-shadow: 0 3px 5px #302a2359, inset 0 0 0 3px #454837;
}
.volume-knob-face::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid #d2c8a8;
  background: linear-gradient(140deg, #f6ecd0, #c2b594 55%, #9b8c69);
  box-shadow: inset 0 1px 2px #fff6de;
}
.volume-knob-face i { position: absolute; inset: 7px; transform: rotate(var(--knob-angle)); }
.volume-knob-face i::before {
  content: ""; position: absolute; top: 1px; left: calc(50% - 1.5px); width: 3px; height: 10px;
  border-radius: 2px; background: #414632; box-shadow: 1px 0 0 #fff3ce;
}
.tv-volume-scale { display: flex; justify-content: space-between; width: 56px; margin-top: -5px; color: #5b5746; font: 500 11px/1 "DM Mono", monospace; }
.music-toggle {
  display: grid; flex-shrink: 0; place-items: center; gap: 5px; width: 46px; min-height: 48px; padding: 7px 4px;
  border: 1px solid #74623e; border-radius: 5px; color: #393420;
  background: linear-gradient(#f2dda2, #c9ad68); cursor: pointer;
  box-shadow: inset 0 1px 1px #fff0bf, 0 3px 0 #7b6947, 0 4px 5px #3e392333;
}
.music-toggle span { font: 500 7px/1 "DM Mono", monospace; letter-spacing: 0.08em; }
.music-toggle[data-silent="true"] { transform: translateY(2px); background: linear-gradient(#b8ac8b, #d2c5a3); box-shadow: inset 0 2px 3px #39352440, 0 1px 0 #ede3ca; }
.music-toggle:hover { background: #ead391; border-color: #897344; }
.music-toggle:focus-visible { outline: 2px solid #28291f; outline-offset: 4px; }
.music-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle[data-silent="true"] .music-waves, .music-toggle[data-silent="false"] .music-slash { display: none; }
.motion-toggle { padding: 6px 0; border: 0; background: none; color: #444737; cursor: pointer; font: 400 8px/1.3 "DM Mono", monospace; white-space: nowrap; }
.motion-toggle:hover { color: #10110f; text-decoration: underline; }
.motion-toggle:focus-visible { outline: 2px solid #10110f; outline-offset: 3px; }
.motion-toggle:disabled { visibility: hidden; }

.entrance-settings {
  --ink: #e6e0cf;
  --line: rgba(223, 213, 184, 0.23);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  margin-top: 36px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(36, 39, 31, 0.82);
}
.entrance-settings fieldset { min-width: 0; margin: 0; }
.entrance-settings .conversation-selector { grid-column: 1 / -1; }
.entrance-settings .conversation-selector label { min-height: 58px; }
.entrance-settings .conversation-selector label:has(input:disabled) { opacity: .5; }
.entrance-settings > [hidden] { display: none; }
.entrance-settings:not(:has(> :not([hidden]))) { display: none; }
.entrance-settings legend { color: #c5c1b0; }
.entrance-settings .quality-labels { color: #b0af9f; }
.entrance-settings .quality-labels .is-selected { color: var(--ink); }
.entrance-settings .quality-status { grid-column: 1 / -1; color: #c5c1b0; font-size: 11px; }
.entrance-settings .mode-selector { gap: 6px; }
.entrance-settings .mode-selector label { min-height: 44px; padding: 8px 8px 8px 30px; border-color: var(--line); }
.entrance-settings .mode-selector label:has(input:checked) { border-color: #bbb18c; background: rgba(234, 215, 161, 0.09); }
.entrance-settings .mode-selector input { left: 10px; accent-color: var(--ink); }
.entrance-settings .mode-selector small { margin-top: 3px; color: #bcb9a8; font-size: 9px; }
.entrance-settings .mode-selector label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.entrance-settings .primary-action { min-height: 54px; grid-column: 1 / -1; color: #191b15; }
.entrance-settings .primary-action[hidden] { display: none; }
.entrance-settings .primary-action:hover:not(:disabled) { background: #30332a; color: var(--paper); }
.entrance-settings .primary-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@keyframes tune-in {
  from { opacity: 0.55; transform: scaleY(0.985); }
  to { opacity: 1; transform: scaleY(1); }
}

@media (min-width: 761px) and (max-height: 800px) {
  [data-state="idle"] .call-panel { margin-top: 32px; }
  .entrance-heading { margin-bottom: 96px; }
  .tv-antenna { width: 196px; }
  .entrance-heading h2 { font-size: 58px; }
  .vintage-tv { width: 720px; max-width: 100%; padding: 16px 18px 8px; gap: 8px 16px; grid-template-columns: minmax(0, 1fr) 124px; }
  .tv-tuner { gap: 10px; padding-right: 6px; padding-left: 10px; }
  .tv-channels { gap: 14px; }
  .tv-channels label { min-height: 65px; gap: 7px; }
  .tv-audio-controls { padding-top: 8px; gap: 6px; }
  .volume-knob { --knob-size: 52px; }
  .tv-volume-scale { width: 48px; }
  .tv-speaker { min-height: 20px; }
  .tv-channel-name { font-size: 14px; }
  .entrance-settings { margin-top: 28px; padding-top: 15px; padding-bottom: 15px; }
}

@media (max-width: 900px) {
  .entrance-settings { gap: 22px; padding: 20px; grid-template-columns: 1fr 1fr; }
  .entrance-settings .primary-action { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  [data-state="idle"] .call-panel { width: calc(100% - 40px); margin: 32px auto 28px; }
  .entrance-heading { margin-bottom: 90px; }
  .tv-antenna { width: 180px; }
  .entrance-heading h2 { margin: auto; font-size: clamp(48px, 9vw, 64px); }
  .vintage-tv { grid-template-columns: 1fr; padding: 14px 14px 10px; gap: 12px; border-radius: 20px; }
  .tv-bezel { padding: 8px; border-radius: 30px / 25px; }
  .tv-screen { aspect-ratio: 3 / 2; border-radius: 24px / 20px; }
  .tv-tuner { display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: 16px; border-left: 0; padding: 0 6px; align-items: center; }
  .tv-audio-controls { border-top: 0; border-left: 1px solid #8d87715c; padding-top: 0; padding-left: 12px; }
  .volume-knob { --knob-size: 56px; }
  .tv-channels { width: auto; flex: 1; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tv-channels label { min-height: 60px; gap: 10px; }
  .tv-channel-name { font-size: 15px; }
  .tv-speaker { display: none; }
  .tv-power { display: none; }
  .tv-bottom { padding: 0 6px; }
  .motion-toggle { font-size: 7px; }
  .entrance-settings { gap: 22px 18px; margin-top: 30px; padding: 18px 16px; }
  .entrance-settings .mode-selector label { padding-left: 23px; padding-right: 4px; }
  .entrance-settings .mode-selector input { left: 6px; width: 10px; height: 10px; }
  .entrance-settings .mode-selector small { font-size: 7px; }
}

@media (max-width: 480px) {
  .tv-tuner { grid-template-columns: 1fr; gap: 18px; }
  .tv-audio-controls { width: 136px; justify-self: center; border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-state="idle"] .state-idle,
  .tv-program { animation: none; }
  [data-tv-phase="selecting"] .tv-channels label::after { animation: none; opacity: 0.3; }
  .tv-channels label,
  .tv-static { transition: none; }
}

/* Camera readiness is independent of the generated picture and its intro. */
[data-camera-state="opening"] .presence-card,
[data-camera-state="ready"] .presence-card { display: block; }
[data-camera-state="opening"] #cameraFeed,
[data-camera-state="ready"] #cameraFeed { opacity: 1; }
.startup-notice { grid-column: 1 / -1; margin: 0; color: #ead7a1; font: 400 13px/1.5 "Manrope", sans-serif; }
[data-state="idle"][data-camera-state="ready"] .presence-card,
[data-state="idle"][data-camera-state="opening"] .presence-card {
  position: fixed; top: 16px; right: 16px; bottom: auto; left: auto;
  width: 160px; height: 112px; z-index: 8;
}
@media (max-width: 760px) {
  [data-state="idle"][data-camera-state="ready"] .presence-card,
  [data-state="idle"][data-camera-state="opening"] .presence-card { width: 120px; height: 84px; top: 8px; right: 8px; }
}

/* Telephone edition: original cinema and TV theme, essential controls only. */
.phone-edition [hidden]{display:none!important}
.phone-edition .call-panel{margin:32px auto 24px}
.phone-edition .entrance-heading{margin-bottom:100px}
.phone-edition .entrance-heading h2{margin:0}
.phone-edition .phone-controls{display:flex;flex-direction:column;align-items:center;gap:14px;margin:38px auto 0;text-align:center;max-width:420px;color:#ead7a1}
.phone-button{padding:12px 34px;border:1px solid #8d87715c;border-radius:2px;background:transparent;color:#ead7a1;font:400 13px/1.4 "DM Mono",monospace;cursor:pointer;transition:background .2s,color .2s}
.phone-button:hover:not(:disabled){background:#ead7a1;color:#11130f}
.phone-button:focus-visible{outline:2px solid #ead7a1;outline-offset:5px}
.phone-button:disabled{opacity:.45;cursor:wait}
.phone-button.secondary{padding:8px 20px;font-size:10px;color:#bbb5a3}
.phone-edition #dial{display:grid;gap:12px}
.phone-edition #number{color:#ead7a1;text-decoration:none;font:400 26px/1.3 "Italiana",Georgia,serif}
.phone-edition .screen-code{display:flex;align-items:center;justify-content:center;gap:16px}
.phone-edition .screen-code span{font:400 9px/1.4 "DM Mono",monospace;color:#a6a08e}
.phone-edition #code{font:400 18px/1.4 "DM Mono",monospace;letter-spacing:4px}
.phone-edition #status,.phone-edition #setup{margin:0;font:400 11px/1.5 "Manrope",Arial,sans-serif;color:#a6a08e}
.phone-edition #status:empty{display:none}
.phone-edition #caption{position:absolute;z-index:4;bottom:15px;left:8%;right:8%;color:#f4f0e5;font:400 13px/1.5 "Manrope",Arial,sans-serif;text-align:center;text-shadow:0 1px 5px #000;background:#0005}
.phone-edition #caption:empty{display:none}
@media(max-width:760px){.phone-edition .call-panel{width:calc(100% - 36px);margin:32px auto 24px}.phone-edition .entrance-heading{margin-bottom:92px}.phone-edition .phone-controls{margin-top:32px}.phone-edition .tv-tuner{display:block}.phone-edition .tv-channels{display:grid;grid-template-columns:1fr 1fr;gap:14px}}
.phone-edition .tv-channels{border:0;padding:0;min-width:0}
/* Channel selection opens the cinema automatically. */
.phone-edition .voice-choice{display:flex;justify-content:center;gap:22px;max-width:420px;margin:38px auto 0;padding:0;border:0;color:#bbb5a3;font:400 10px/1.5 "DM Mono",monospace}
.phone-edition .voice-choice legend{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.phone-edition .voice-choice label{display:flex;align-items:center;gap:7px;cursor:pointer}
.phone-edition .voice-choice input{accent-color:#ead7a1}
.phone-edition .voice-choice label:has(input:disabled){opacity:.4;cursor:default}
.phone-edition .phone-controls{margin-top:16px}
.phone-edition .music-control{padding:6px 12px;font-size:15px;border:0}
.phone-edition[data-cinematic=true] .call-panel{position:static;width:100%;min-height:100svh;margin:0;padding:0;border:0;outline:0;background:none;backdrop-filter:none;transform:none}
.phone-edition[data-cinematic=true] .state-idle{display:block!important;padding:0;animation:none}
.phone-edition[data-cinematic=true] .vintage-tv{position:fixed;inset:0;width:100%;height:100svh;display:block;margin:0;padding:0;border:0;border-radius:0;background:#111;box-shadow:none}
.phone-edition[data-cinematic=true] .vintage-tv::before,.phone-edition[data-cinematic=true] .vintage-tv::after,.phone-edition[data-cinematic=true] .tv-antenna,.phone-edition[data-cinematic=true] .tv-tuner,.phone-edition[data-cinematic=true] .entrance-heading,.phone-edition[data-cinematic=true] .tv-character-title,.phone-edition[data-cinematic=true] .voice-choice{display:none}
.phone-edition[data-cinematic=true] .tv-bezel{height:100%;padding:0;border:0;border-radius:0;box-shadow:none}
.phone-edition[data-cinematic=true] .tv-screen{height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.phone-edition[data-cinematic=true] .entrance-video{object-position:50% 42%}
.phone-edition[data-cinematic=true] .tv-glass{background:none;box-shadow:inset 0 0 150px #0005}
.phone-edition[data-cinematic=true] .phone-controls{position:fixed;right:28px;bottom:26px;z-index:8;width:260px;gap:10px;margin:0;padding:18px;background:#11130f70;backdrop-filter:blur(8px);border:1px solid #ead7a125}
.phone-edition[data-state=intro] .phone-controls,.phone-edition[data-state=title] .phone-controls{visibility:hidden}
.phone-edition[data-cinematic=true] #caption{bottom:28px;right:340px;left:6%;background:none}
.phone-edition .film-leader,.phone-edition .opening-title{z-index:20;pointer-events:none}
@media(max-width:760px){.phone-edition[data-cinematic=true] .phone-controls{right:14px;bottom:14px;width:220px;padding:12px}.phone-edition[data-cinematic=true] #caption{left:18px;right:18px;bottom:210px}.phone-edition[data-cinematic=true] .entrance-video{object-fit:cover}}

/* Voice routing stays available internally; the cinema has no provider controls. */
.phone-edition .voice-choice[hidden]{display:none}

.phone-edition .screen-code[hidden]{display:none}

/* One photographic composition: the movie and physical control hit areas scale with it. */
.phone-edition[data-cinematic=false]{background:#11120d}
.phone-edition[data-cinematic=false]::before{background:none}
.phone-edition[data-cinematic=false] .call-panel{position:fixed;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,150svh);height:auto;aspect-ratio:3/2;margin:0;padding:0}
.phone-edition[data-cinematic=false] .state-idle{position:relative;display:block;height:100%;padding:0}
.tv-room-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.phone-edition[data-cinematic=true] .tv-room-photo{display:none}
.phone-edition[data-cinematic=false] .vintage-tv{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;display:block;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.phone-edition[data-cinematic=false] .tv-antenna,.phone-edition[data-cinematic=false] .vintage-tv::before,.phone-edition[data-cinematic=false] .vintage-tv::after,.phone-edition[data-cinematic=false] .entrance-heading{display:none}
.phone-edition[data-cinematic=false] .tv-bezel{position:absolute;left:22%;top:31%;width:43%;height:38%;padding:0;border:0;background:none;border-radius:10% / 12%;box-shadow:none}
.phone-edition[data-cinematic=false] .tv-screen{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:inherit;box-shadow:none;background:#000}
.phone-edition[data-cinematic=false] .entrance-video{object-fit:cover;filter:sepia(.1) brightness(.88);object-position:50% 40%}
.phone-edition[data-cinematic=false] .tv-glass{background:linear-gradient(125deg,#eaffdb0a,transparent 45%);box-shadow:inset 0 0 18px #0008;border-radius:inherit}
.phone-edition[data-cinematic=false] .tv-character-title{font-size:clamp(20px,4vw,64px)}
.phone-edition[data-cinematic=false] .tv-tuner{position:absolute;inset:0;display:block;padding:0;border:0;background:none;pointer-events:none}
.phone-edition[data-cinematic=false] .tv-speaker,.phone-edition[data-cinematic=false] .tv-tuner::before{display:none}
.phone-edition[data-cinematic=false] .tv-channels{position:absolute;inset:0;display:block;width:100%;padding:0;margin:0;border:0;pointer-events:none}
.phone-edition[data-cinematic=false] .tv-channels label,.phone-edition[data-cinematic=false] .tv-channels label:has(input:checked){position:absolute;left:72%;top:55%;width:5%;height:7.5%;display:block;padding:0;min-height:0;border:0;border-radius:50%;background:none;box-shadow:none;transform:none;pointer-events:auto;cursor:pointer}
.phone-edition[data-cinematic=false] .tv-channels label:nth-of-type(2){top:65%}
.phone-edition[data-cinematic=false] .tv-channels input{position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.phone-edition[data-cinematic=false] .tv-channel-dial,.phone-edition[data-cinematic=false] .tv-channel-name{display:none}
.phone-edition[data-cinematic=false] .tv-channels label:hover{box-shadow:0 0 12px #ffe7b438}
.phone-edition[data-cinematic=false] .tv-channels label:has(input:focus-visible){outline:2px solid #f5e5bb;outline-offset:4px}
.phone-edition[data-cinematic=false] .phone-controls{position:absolute;left:74%;top:72%;right:auto;bottom:auto;width:3%;height:4.5%;margin:0;padding:0;display:block;z-index:5}
.phone-edition[data-cinematic=false] .music-control{width:100%;height:100%;padding:0;font-size:0;color:transparent;border:0;border-radius:50%;background:transparent;box-shadow:none}
.phone-edition[data-cinematic=false] .music-control:hover{background:#fff2}
.phone-edition[data-cinematic=false] #status:empty{display:none}
/* Coordinates measured against the 1536 × 1024 photograph. */
.phone-edition[data-cinematic=false] .tv-bezel{left:27.15%;top:31.15%;width:36.8%;height:40.72%;border-radius:0;clip-path:polygon(9% 2%,22% .3%,50% 0,78% .3%,91% 2%,96% 4%,98% 8%,99% 17%,100% 33%,100% 67%,99% 83%,98% 92%,96% 96%,91% 98%,78% 99.7%,50% 100%,22% 99.7%,9% 98%,4% 96%,2% 92%,1% 83%,0 67%,0 33%,1% 17%,2% 8%,4% 4%)}
.phone-edition[data-cinematic=false] .tv-channels label,.phone-edition[data-cinematic=false] .tv-channels label:has(input:checked){left:68.7%;top:48.4%;width:5.5%;height:8.2%}
.phone-edition[data-cinematic=false] .tv-channels label:nth-of-type(2){top:59.55%}
.phone-edition[data-cinematic=false] .phone-controls{left:70.2%;top:70.15%;width:2.7%;height:4.1%}
.phone-edition[data-cinematic=false] #status{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(60vw,480px);font-size:12px;color:#ead7a1}

/* Tiny particles confined to the lamp beam; no moving light or shadows. */
.room-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phone-edition[data-cinematic=true] .room-dust{display:none}
@media(prefers-reduced-motion:reduce){.room-dust{display:none!important}}

/* Real Helios lighting and hallway motion; the original central TV is preserved. */
.room-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;mask-image:linear-gradient(90deg,#000 0%,#000 15%,transparent 21%,transparent 79%,#000 85%,#000 100%)}
.phone-edition[data-cinematic=true] .room-motion{display:none}
@media(prefers-reduced-motion:reduce){.room-motion{display:none!important}}

/* Two independent glass controls sit directly in the photographed walnut cabinet. */
.tv-control-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:inset(45.5% 24.2% 30.7% 67.3%);pointer-events:none}
.phone-edition[data-cinematic=false] .tv-channels{z-index:2}
.phone-edition[data-cinematic=false] .tv-channels label,
.phone-edition[data-cinematic=false] .tv-channels label:has(input:checked){left:68.4%;width:6.2%;height:7.5%;min-height:44px;border-radius:12%;background:transparent;box-shadow:none;transform:none}
.phone-edition[data-cinematic=false] .tv-channels label:has(input[value="sally"]){top:48.1%;--channel-glow:112,189,167}
.phone-edition[data-cinematic=false] .tv-channels label:has(input[value="james"]){top:58.1%;--channel-glow:215,163,86}
.phone-edition[data-cinematic=false] .tv-channel-name{display:none}
.phone-edition[data-cinematic=false] .tv-channels label::after{content:none;animation:none}
.phone-edition[data-cinematic=false] .tv-channels label:hover:not(:has(input:disabled)){background:rgba(var(--channel-glow),.08);box-shadow:0 0 14px rgba(var(--channel-glow),.22)}
.phone-edition[data-cinematic=false] .tv-channels label:has(input:focus-visible){outline:2px solid #f5e5bb;outline-offset:4px}
.channel-invitation{position:absolute;left:50%;top:84%;transform:translateX(-50%);margin:0;color:#efdfbc;font:italic 400 clamp(12px,1.3vw,20px)/1.4 Georgia,serif;text-shadow:0 2px 5px #000;pointer-events:none}
.phone-edition[data-cinematic=true] .channel-invitation{display:none}
@media(max-width:600px){
 .phone-edition[data-cinematic=false] .tv-channels{inset:auto;left:50%;top:84%;width:auto;height:auto;display:flex;gap:14px;transform:translateX(-50%)}
 .phone-edition[data-cinematic=false] .tv-channels label:has(input[value="sally"]),
 .phone-edition[data-cinematic=false] .tv-channels label:has(input[value="james"]){position:relative;left:auto;top:auto;width:112px;height:46px;border-radius:8px}
 .phone-edition[data-cinematic=false] .tv-channel-name{position:absolute;inset:0;transform:none;display:grid;place-items:center;padding:0;pointer-events:none;border:1px solid #b7a07880;border-radius:8px;background:linear-gradient(160deg,#28564c,#17372f);color:#f2e8d4;font:400 18px/1 Georgia,serif;text-shadow:0 1px 2px #0006;box-shadow:inset 0 1px #ffffff20,0 3px 9px #0006}
 .phone-edition[data-cinematic=false] input[value="james"] ~ .tv-channel-name{background:linear-gradient(160deg,#896339,#583c22)}
 .phone-edition[data-cinematic=false] .channel-invitation{top:77.5%;font-size:12px}
}
.camera-consent{display:block;margin:1rem auto .4rem;padding:.5rem .9rem;background:#28271e;color:#e5d49f;border:1px solid #70664e;border-radius:3px;font:inherit;cursor:pointer}
.camera-note{display:block;color:#b3ad9b;font-size:.7rem;text-align:center}

/* Keep the phone, lamp and door visible in the rich story at every aspect ratio. */
.phone-edition[data-mode=rich][data-cinematic=true] .entrance-video{object-fit:contain;object-position:center;background:#080808}
.phone-edition[data-mode=rich] label:has(input:disabled){cursor:default;opacity:.45}
@font-face {
  font-family: 'Rich DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url(rich/assets/fonts/DM-Mono-normal.ttf) format('truetype');
}
@font-face {
  font-family: 'Rich Instrument Serif';
  font-style: italic;
  font-weight: 400;
  src: url(rich/assets/fonts/Instrument-Serif-italic.ttf) format('truetype');
}
@font-face {
  font-family: 'Rich Instrument Serif';
  font-style: normal;
  font-weight: 400;
  src: url(rich/assets/fonts/Instrument-Serif-normal.ttf) format('truetype');
}
@font-face {
  font-family: 'Rich Italiana';
  font-style: normal;
  font-weight: 400;
  src: url(rich/assets/fonts/Italiana-normal.ttf) format('truetype');
}
/* Rich-only cached prologue. Original TV and basic-call presentation are unchanged. */
.rich-prologue{position:fixed;inset:0;z-index:24;background:#070807;color:#eadfc9;overflow:hidden}
.rich-prologue[hidden],.rich-prologue [hidden],.audience-camera[hidden]{display:none!important}
.prologue-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse at center,#1b1b17,#080908 75%);text-align:center}
.prologue-card h2{font:italic 400 clamp(54px,9vw,135px)/1.05 "Rich Instrument Serif",Georgia,serif;margin:22px}
.prologue-card>p{font:400 10px "Rich DM Mono",monospace;letter-spacing:.26em;text-transform:uppercase;color:#b8ad98}
.prologue-film{position:absolute;width:100%;height:100%;object-fit:contain;background:#080808}
.parallel-scenes{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#b5ab8740}
.parallel-scenes figure{position:relative;margin:0;min-width:0;background:#080808;overflow:hidden}
.parallel-scenes video{width:100%;height:100%;object-fit:contain;filter:grayscale(1)}
.parallel-scenes figcaption{position:absolute;bottom:7vh;left:8%;right:8%;text-shadow:0 2px 8px #000;background:linear-gradient(transparent,#0008);padding:20px}
.parallel-scenes figcaption span{font:400 9px "Rich DM Mono",monospace;letter-spacing:.18em;text-transform:uppercase}
.parallel-scenes figcaption p{font:400 clamp(23px,3vw,44px)/1.12 "Rich Instrument Serif",Georgia,serif;margin:14px 0 0}
.prologue-retry{position:absolute;z-index:2;left:50%;bottom:12vh;transform:translateX(-50%);border:1px solid #d0bd8b66;background:#12130dcc;color:#eadfc9;padding:12px 24px;font:400 18px "Rich Instrument Serif",Georgia,serif;cursor:pointer}
.phone-edition[data-state=prologue] .phone-controls{visibility:hidden}
.audience-camera{position:fixed;left:24px;bottom:28px;z-index:10;width:clamp(125px,15vw,210px);margin:0;color:#dbc99d}
.audience-glass{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18% / 22%;border:3px solid #635e50;box-shadow:0 0 0 2px #171915,inset 0 0 24px #000;background:#060706}
.audience-glass video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:grayscale(1) sepia(.13) contrast(1.16)}
.audience-glass::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(transparent 0 2px,#0002 3px 4px);box-shadow:inset 0 0 22px #0009,inset 0 1px 6px #ffefd744}
.audience-camera figcaption{text-align:center;font:400 15px "Rich Italiana",Georgia,serif;margin-top:8px}
@media(max-width:760px){.parallel-scenes{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.parallel-scenes figcaption{bottom:12px;padding:8px;left:4%}.parallel-scenes figcaption p{font-size:25px;margin-top:8px}.audience-camera{left:14px;top:20px;bottom:auto;width:132px}}
/* An editorial dissolve, followed by a continuous split-to-full-frame handoff. */
.rich-prologue{transition:opacity .65s ease}
.rich-prologue[data-exit=true]{opacity:0!important;pointer-events:none}
.prologue-card{z-index:3;transition:opacity .7s ease}
.rich-prologue[data-phase=film] .prologue-card{opacity:0;pointer-events:none}
.parallel-scenes{display:block;background:#080808;opacity:0;transition:opacity .65s ease}
.rich-prologue:is([data-phase=james],[data-phase=parallel],[data-phase=handoff]) .parallel-scenes{opacity:1}
.parallel-scenes figure{position:absolute;inset:0 auto 0 0;width:100%;transition:width 1.35s cubic-bezier(.22,.7,.2,1),left 1.35s cubic-bezier(.22,.7,.2,1),opacity .9s ease}
.parallel-scenes .sally-scene{left:100%;width:50%;opacity:0}
.rich-prologue[data-phase=parallel] .james-scene{width:50%}
.rich-prologue[data-phase=parallel] .sally-scene{left:50%;opacity:1}
.rich-prologue[data-phase=handoff] .james-scene{width:0;opacity:0}
.rich-prologue[data-phase=handoff] .sally-scene{left:0;width:100%;opacity:1}
.parallel-scenes figcaption{bottom:9%;left:5%;right:5%;padding:12px;background:none;transition:opacity .6s ease}
.parallel-scenes figcaption p{font-size:clamp(22px,2.1vw,32px);line-height:1.2}
.parallel-scenes .sally-scene figcaption{opacity:0}
.rich-prologue[data-phase=parallel] .sally-scene figcaption{opacity:1;transition-delay:.9s}
.rich-prologue[data-phase=handoff] .sally-scene figcaption{opacity:0;transition-delay:0s}
@media(max-width:760px){
 .parallel-scenes figure{inset:0;width:100%;height:100%;transition:height 1.35s ease,top 1.35s ease,opacity .9s ease}
 .parallel-scenes .sally-scene{left:0;top:100%;width:100%;height:50%}
 .rich-prologue[data-phase=parallel] .james-scene{width:100%;height:50%}
 .rich-prologue[data-phase=parallel] .sally-scene{left:0;top:50%}
 .rich-prologue[data-phase=handoff] .james-scene{width:100%;height:0}
 .rich-prologue[data-phase=handoff] .sally-scene{left:0;top:0;width:100%;height:100%}
 .parallel-scenes figcaption{bottom:7%;left:5%;padding:4px}.parallel-scenes figcaption p{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.rich-prologue,.parallel-scenes,.parallel-scenes figure,.prologue-card{transition-duration:.1s}}
/* Both panels share one film window, instead of independently sized thumbnails. */
@media(orientation:landscape) and (min-width:761px){
 .parallel-scenes figure{top:50%;bottom:auto;height:min(100vh,56.25vw);transform:translateY(-50%)}
 .parallel-scenes video{object-fit:cover}
 .parallel-sally{object-position:35% center;transition:object-position 1.35s ease}
 .rich-prologue[data-phase=handoff] .parallel-sally{object-position:center}
 .parallel-scenes figcaption{background:linear-gradient(transparent,#000a);bottom:4%;padding:20px 12px 12px}
}
@media(orientation:portrait){
 .parallel-scenes figure{inset:0;width:100%;height:100%;transform:none;transition:height 1.35s ease,top 1.35s ease,opacity .9s ease}
 .parallel-scenes .sally-scene{left:0;top:100%;width:100%;height:50%}
 .rich-prologue[data-phase=parallel] .james-scene{width:100%;height:50%}
 .rich-prologue[data-phase=parallel] .sally-scene{left:0;top:50%;width:100%;height:50%}
 .rich-prologue[data-phase=handoff] .james-scene{width:100%;height:0}
 .rich-prologue[data-phase=handoff] .sally-scene{left:0;top:0;width:100%;height:100%}
 .parallel-scenes figcaption{bottom:4%;left:5%;padding:20px 12px 12px;background:linear-gradient(transparent,#000a)}
 .parallel-scenes figcaption p{font-size:24px}
}
/* Keep the investigation caption from reflowing as its panel closes. */
.parallel-scenes .james-scene figcaption{min-width:280px}
.rich-prologue[data-phase=handoff] .james-scene figcaption{opacity:0;transition-duration:.15s}
.fullscreen-control{position:fixed;top:16px;right:16px;z-index:100;width:36px;height:36px;display:grid;place-items:center;padding:8px;border:1px solid #ead7a130;border-radius:50%;background:#11130f55;color:#ead7a1bb;cursor:pointer;opacity:.65;transition:opacity .2s,background .2s}
.fullscreen-control:hover,.fullscreen-control:focus-visible{opacity:1;background:#11130faa}
.fullscreen-control:focus-visible{outline:2px solid #ead7a1;outline-offset:3px}
.fullscreen-control svg{width:100%;height:100%}
.fullscreen-control .contract,.fullscreen-control[data-active=true] .expand{display:none}
.fullscreen-control[data-active=true] .contract{display:block}
.fullscreen-control[hidden]{display:none}
.experience:fullscreen{width:100%;height:100%;min-height:100vh;background:#080908}
/* Sally's fictional emotional state and the server-owned call deadline. */
.story-hud{position:fixed;z-index:28;top:max(22px,env(safe-area-inset-top));left:24px;width:290px;padding:15px 18px;background:#0c0d0bc9;border:1px solid #c7b99235;color:#e9ddbd;backdrop-filter:blur(6px);font-family:'Rich DM Mono',monospace;pointer-events:none}
.story-clock{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px}
.story-kicker{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.story-clock>.story-kicker{grid-column:1/-1}
.story-time{font-size:30px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.story-tick-toggle{pointer-events:auto;width:30px;height:30px;padding:0;background:none;border:1px solid #c7b99240;border-radius:50%;color:inherit;font-size:19px;cursor:pointer}
.story-clock-hint{margin:7px 0 14px;font:italic 15px/1.3 'Rich Instrument Serif',Georgia,serif;color:#d0c4a6}
.story-emotions{display:grid;gap:8px}
.story-emotions>label{display:grid;grid-template-columns:75px 1fr 32px;align-items:center;gap:8px;font-size:10px}
.story-emotions output{text-align:right;font-size:9px;color:#bdb49f}
.story-emotions progress{appearance:none;width:100%;height:3px;border:0;background:#eee1bc18;border-radius:3px;overflow:hidden}
.story-emotions progress::-webkit-progress-bar{background:#eee1bc18}
.story-emotions progress::-webkit-progress-value{background:#b9ae87;transition:width .65s ease}
.story-emotions progress::-moz-progress-bar{background:#b9ae87}
.story-emotions [data-emotion=trust] progress::-webkit-progress-value{background:#9db9a5}
.story-emotions [data-emotion=fear] progress::-webkit-progress-value{background:#c0937f}
.story-hud[data-urgent=true] .story-time{color:#dfad8d}
.story-ending{position:fixed;inset:0;z-index:24;width:100%;height:100%;object-fit:contain;background:#080808}
.story-ending-label{position:fixed;z-index:27;left:0;right:0;bottom:28px;margin:0;text-align:center;color:#e9ddbd;font:italic 27px 'Rich Instrument Serif',Georgia,serif;text-shadow:0 2px 8px #000}
.phone-edition:has(.story-ending:not([hidden])) .phone-controls{z-index:29;background:none;backdrop-filter:none;border:0;bottom:65px}
@media(max-width:600px){.story-hud{left:14px;top:14px;width:230px;padding:12px 14px}.story-time{font-size:25px}.story-emotions>label{grid-template-columns:65px 1fr 28px;font-size:9px}.story-clock-hint{font-size:13px}.story-ending-label{bottom:18px;font-size:23px}}
@media(prefers-reduced-motion:reduce){.story-emotions progress::-webkit-progress-value{transition:none}}

.story-feedback{margin:13px 0 0;padding-top:11px;border-top:1px solid #c7b99228;color:#ead8ad;font:italic 17px/1.35 'Rich Instrument Serif',Georgia,serif;text-wrap:pretty}

.story-ending{transition:opacity .65s ease}
@media(prefers-reduced-motion:reduce){.story-ending{transition:none}}
.browser-phone{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(#34281a,#17140f);border:1px solid #8b7148;border-radius:50px;color:#e1c88a;padding:.55rem 1rem;font-family:'Italiana',serif;cursor:pointer;box-shadow:inset 0 1px #c0a16b40,0 3px 12px #0005}.browser-phone svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}.browser-phone:hover{border-color:#e1c88a;background:#3c3020}.browser-phone:focus-visible{outline:2px solid #e1c88a;outline-offset:4px}.browser-phone:disabled{opacity:.5}.browser-phone[hidden]{display:none}
/* Flash Light iris: identical aperture, keyframes, easing and duration. */
.rich-iris { position: fixed; inset: -2px; z-index: 35; pointer-events: none; overflow: hidden; opacity: 0; }
.rich-iris::before {
  content: "";
  position: absolute;
  left: 59%;
  top: 46%;
  width: 160vmax;
  height: 125vmax;
  transform: translate(-50%, -50%) rotate(-.6deg);
  border-radius: 47% 53% 49% 51% / 45% 48% 52% 55%;
  background: transparent;
  box-shadow: inset 0 0 28px 12px rgba(0,0,0,.94), 0 0 18px 10px rgba(0,0,0,.94), 0 0 0 200vmax #000;
  will-change: width, height, border-radius, transform;
}
.phone-edition[data-mode="rich"][data-cinematic="true"]:is([data-iris="closing"],[data-iris="closed"]) .rich-iris { opacity: 1; }
.phone-edition[data-mode="rich"][data-cinematic="true"]:is([data-iris="closing"],[data-iris="closed"]) .rich-iris::before { animation: irisOut 4.6s cubic-bezier(.7,.02,.34,1) forwards; }
@keyframes irisOut {
  0% {
    width: 160vmax;
    height: 125vmax;
    transform: translate(-50%, -50%) rotate(-.6deg);
    border-radius: 47% 53% 49% 51% / 45% 48% 52% 55%;
  }
  14% {
    width: 108vw;
    height: 92vh;
    transform: translate(-50%, -50%) rotate(.35deg);
    border-radius: 45% 55% 52% 48% / 49% 44% 56% 51%;
  }
  42% {
    width: 66vw;
    height: 62vh;
    transform: translate(-50%, -50%) rotate(-.45deg);
    border-radius: 43% 49% 47% 53% / 46% 43% 57% 54%;
  }
  72% {
    width: 31vw;
    height: 34vh;
    transform: translate(-50%, -50%) rotate(.5deg);
    border-radius: 48% 44% 51% 49% / 42% 49% 51% 58%;
  }
  92% {
    width: 7vw;
    height: 8vh;
    transform: translate(-50%, -50%) rotate(-.25deg);
    border-radius: 46% 54% 48% 52% / 50% 43% 57% 50%;
  }
  100% {
    width: 0;
    height: 0;
    transform: translate(-50%, -50%) rotate(0);
  }
}
.phone-edition[data-iris=closing] .story-hud,.phone-edition[data-iris=closing] .phone-controls,.phone-edition[data-iris=closed] .phone-controls{opacity:0;pointer-events:none;transition:opacity .7s}
.story-continuation{position:fixed;inset:0;z-index:40;background:#080808;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;color:#e8d8af}
.story-continuation[hidden]{display:none}
.continuation-title{font:400 clamp(36px,6vw,80px)/1.12 'Rich Italiana',Italiana,Georgia,serif;margin:0 0 24px}
.continuation-copy{max-width:550px;font:italic clamp(22px,3vw,32px)/1.5 'Rich Instrument Serif',Georgia,serif;margin:0;text-wrap:balance}
.story-continuation button{margin-top:48px;padding:10px 18px;border:1px solid #a28a5555;background:none;color:#d6c392;font:400 15px 'Rich Instrument Serif',Georgia,serif;cursor:pointer}
.story-continuation button:hover{border-color:#d6c392}
@media(prefers-reduced-motion:reduce){.rich-iris::before{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.queue-wait{display:none;position:fixed;z-index:28;left:50%;bottom:14%;transform:translateX(-50%);width:min(85vw,600px);padding:22px;text-align:center;color:#e8d8af;background:#080808ed;font-family:'Rich Instrument Serif',Georgia,serif}
.phone-edition[data-state=title][data-queue=waiting] .queue-wait{display:block}
.phone-edition[data-state=queued] .queue-wait{display:flex;inset:0;transform:none;width:auto;padding:clamp(24px,7vw,90px);flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse at center,#1b1b17,#080908 75%);animation:queue-appear .5s ease both}
.queue-heading{margin:0 0 18px;font:italic 400 clamp(32px,5vw,65px)/1.15 'Rich Instrument Serif',Georgia,serif}
.queue-position{margin:0;color:#f0d99f;font:400 clamp(20px,2.6vw,30px)/1.4 'Rich Instrument Serif',Georgia,serif}
.queue-position:empty{display:none}
.queue-detail{max-width:500px;margin:22px 0 0;color:#cabfa8;font:400 clamp(17px,2vw,23px)/1.5 'Rich Instrument Serif',Georgia,serif}
.queue-pulse{display:flex;gap:9px;margin:24px 0 0}.queue-pulse i{width:5px;height:5px;border-radius:50%;background:#d7c38d;animation:queue-breathe 1.8s ease-in-out infinite}.queue-pulse i:nth-child(2){animation-delay:.25s}.queue-pulse i:nth-child(3){animation-delay:.5s}
@keyframes queue-breathe{0%,100%{opacity:.25}50%{opacity:1}}@keyframes queue-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.queue-wait,.queue-pulse i{animation:none!important}}
/* Film overlays: an emotional score, free-floating controls and cinematic subtitles. */
.story-hud{width:360px;padding:0;background:none;border:0;backdrop-filter:none;text-shadow:0 2px 12px #000,0 1px 3px #000}
.story-clock{grid-template-columns:1fr auto;max-width:230px}.story-time{font:400 36px 'Rich Italiana',Georgia,serif}.story-clock-hint{max-width:300px;margin-bottom:22px}
.story-emotions{gap:10px}.story-emotions>.story-kicker{letter-spacing:.23em}.emotion-curve svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 1px 4px #000)}
.curve-grid{stroke:#ecdbb5;stroke-opacity:.15;stroke-width:.7}.curve-line{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.curve-trust{stroke:#b9d2bb}.curve-fear{stroke:#dcaa8d}.curve-confusion{stroke:#d6cda9;stroke-dasharray:3 4;opacity:.75}.curve-playhead{stroke:#efddb2;stroke-width:1;opacity:.45}
.curve-times{display:flex;justify-content:space-between;font:9px 'Rich DM Mono',monospace;color:#cdbf9b;opacity:.65;margin-top:5px}
.story-emotions>label{display:inline-flex;gap:6px;grid-template-columns:none;font:italic 15px 'Rich Instrument Serif',Georgia,serif}.story-emotions{display:flex;flex-wrap:wrap;column-gap:18px}.story-emotions>.story-kicker,.emotion-curve{flex-basis:100%}.story-emotions progress{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.story-emotions output{font:11px 'Rich DM Mono',monospace;opacity:.75}.story-emotions label:before{content:'';width:5px;height:5px;border-radius:50%;background:#d6cda9}.story-emotions [data-emotion=trust]:before{background:#b9d2bb}.story-emotions [data-emotion=fear]:before{background:#dcaa8d}
.story-feedback{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);width:min(65vw,880px);margin:0;padding:0;border:0;text-align:center;color:#f1e4c4;font:italic clamp(28px,3.6vw,46px)/1.22 'Rich Instrument Serif',Georgia,serif;text-shadow:0 2px 5px #000,0 4px 22px #000;text-wrap:balance;pointer-events:none}
.phone-edition[data-cinematic=true] .phone-controls{width:220px;padding:0;background:none;border:0;backdrop-filter:none;box-shadow:none;text-shadow:0 2px 8px #000}
.phone-edition[data-cinematic=true] .browser-phone{justify-content:center;flex-direction:column;gap:7px;background:none;border:0;border-radius:0;box-shadow:none;padding:10px;color:#f0d99f;text-shadow:0 2px 8px #000;font:italic 21px 'Rich Instrument Serif',Georgia,serif;filter:drop-shadow(0 2px 5px #000)}
.browser-phone svg{width:52px;height:52px;stroke-width:1.5}.phone-edition[data-cinematic=true] .browser-phone:hover{background:none;color:#fff0c4;transform:translateY(-2px)}
.phone-edition[data-cinematic=true] .camera-consent{border:0;background:none;padding:6px;margin:4px auto;color:#e7d8b4;font:italic 18px 'Rich Instrument Serif',Georgia,serif}.camera-consent:before{content:'';display:block;width:34px;height:28px;margin:0 auto 7px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='25' height='17' rx='2'/%3E%3Cpath d='M10 6l2-4h8l2 4M5 10h4'/%3E%3Ccircle cx='17' cy='14' r='6'/%3E%3Ccircle cx='17' cy='14' r='3.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}.camera-note{font:13px/1.4 'Rich Instrument Serif',Georgia,serif;opacity:.7}.phone-edition[data-cinematic=true] #number{font-size:25px}.phone-edition[data-cinematic=true] #end{border:0;background:none;color:#e0cfaa;font:italic 17px 'Rich Instrument Serif',Georgia,serif}.phone-edition[data-cinematic=true] #status{font:italic 14px 'Rich Instrument Serif',Georgia,serif;opacity:.65}
@media(max-width:760px){.story-hud{left:18px;top:20px;width:270px;padding:0}.story-clock-hint{margin-bottom:15px;font-size:14px}.story-time{font-size:30px}.phone-edition[data-cinematic=true] .phone-controls{width:160px;right:12px;bottom:20px;padding:0}.browser-phone svg{width:44px;height:44px}.story-feedback{width:86vw;bottom:190px;font-size:29px}.audience-camera{top:auto;bottom:24px;left:18px;width:110px}.camera-note{max-width:150px}.phone-edition[data-cinematic=true] #number{font-size:21px}}
@media(prefers-reduced-motion:reduce){.browser-phone{transition:none}}
@media(max-width:760px){.phone-edition[data-cinematic=true] #caption{bottom:280px;font-size:16px}}
/* Two rich-prologue additions; no interactive HUD or basic-channel changes. */
.prologue-arrival{position:absolute;inset:0;margin:0;background:#080808}
.arrival-film{width:100%;height:100%;object-fit:contain}
.prologue-arrival figcaption{position:absolute;left:6%;right:6%;bottom:8%;color:#eadfc9;text-shadow:0 2px 12px #000}
.prologue-arrival figcaption span{font:400 10px "Rich DM Mono",monospace;letter-spacing:.2em;text-transform:uppercase}
.prologue-arrival figcaption p{font:italic 400 clamp(24px,3vw,42px)/1.2 "Rich Instrument Serif",Georgia,serif;margin:10px 0 0}
.prologue-invitation{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,6vw,90px);text-align:center;background:linear-gradient(transparent,#070807d9 22%,#070807ed 75%,transparent);color:#eadfc9;text-shadow:0 2px 18px #000;animation:invitation-appear .65s ease both;pointer-events:none}
.prologue-invitation h2{max-width:1000px;font:italic 400 clamp(36px,5.7vw,80px)/1.06 "Rich Instrument Serif",Georgia,serif;margin:22px 0}
.prologue-invitation p{max-width:720px;font:400 clamp(20px,2vw,29px)/1.3 "Rich Instrument Serif",Georgia,serif;margin:0}
.prologue-invitation .invitation-context{color:#cabfa8}
.prologue-invitation .invitation-method{margin-top:25px;font-size:clamp(16px,1.5vw,22px);color:#c4b493}
@keyframes invitation-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.prologue-invitation{animation:none}}

.scene-reopen{position:fixed;z-index:45;left:50%;bottom:8%;transform:translateX(-50%);padding:12px 25px;border:1px solid #bda77588;background:#12110de8;color:#efdfbc;font:italic 26px "Rich Instrument Serif",Georgia,serif;cursor:pointer}.scene-reopen[hidden]{display:none}.scene-reopen:focus-visible{outline:2px solid #efdfbc;outline-offset:4px}

/* The two ends of an actual call; camera consent and narrative remain independent. */
.phone-edition[data-mode=rich][data-cinematic=true] .tv-screen{position:absolute;inset:0 auto auto 0;width:100%;height:100%;transition:left 1.2s cubic-bezier(.22,.7,.2,1),width 1.2s cubic-bezier(.22,.7,.2,1),top 1.2s ease,height 1.2s ease}
.phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .tv-screen{left:50%;width:50%}
.phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .audience-camera{left:0;top:0;bottom:auto;width:50%;height:100svh;background:#080808;z-index:6}
.phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .audience-glass{height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .audience-camera figcaption{position:absolute;bottom:25px;left:0;right:0;text-shadow:0 2px 8px #000}
.phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .entrance-video{object-fit:cover;object-position:50% 42%}
.phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .story-feedback{left:75%;width:45vw}
@media(max-width:760px){
 .phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .tv-screen{left:0;top:50%;width:100%;height:50%}
 .phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .audience-camera{width:100%;height:50svh}
 .phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .audience-camera figcaption{bottom:12px}
 .phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .entrance-video{object-fit:contain;object-position:center}
 .phone-edition[data-mode=rich][data-cinematic=true][data-call-split=true] .story-feedback{left:50%;width:86vw}
}
@media(prefers-reduced-motion:reduce){.phone-edition[data-mode=rich][data-cinematic=true] .tv-screen{transition:none}}