:root { color-scheme: dark; --bg: #111; --fg: #eee; --muted: #999; --accent: #3a7; --danger: #c33; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 18px/1.4 system-ui, sans-serif; }
section { min-height: 100%; padding: 24px 16px; display: flex; flex-direction: column; gap: 16px; }
section[hidden] { display: none; }
h1 { margin: 0; font-size: 28px; }
.status { color: var(--muted); margin: 0; }
.device { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px;
  border: 0; border-radius: 16px; background: #222; color: var(--fg); font: inherit; text-align: left; }
.device span { color: var(--muted); font-size: 15px; }
#call { padding: 0; position: relative; }
#remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#local { position: absolute; right: 12px; top: 12px; width: 28%; max-width: 180px; border-radius: 12px; }
.overlay { position: absolute; left: 0; right: 0; top: 40%; text-align: center; }
.hangup { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); padding: 16px 32px;
  border: 0; border-radius: 999px; background: var(--danger); color: #fff; font: inherit; }
#incoming { align-items: center; justify-content: center; position: relative; }
.who { font-size: 32px; margin: 0; text-align: center; }
.countdown { font-size: 96px; margin: 0; }
.activate { padding: 16px 32px; border: 0; border-radius: 999px; background: var(--accent); color: #fff;
  font: inherit; }