:root {
  --scale: 1.5;
  --bg: #121212;
  --fg: #f2f2f2;
  --muted: #a3a3a3;
  --bar-bg: #1d1d1d;
  --accent: #7cc4ff;
  --live: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --idle: #9ca3af;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #5b5b5b;
  --bar-bg: #f1f1f1;
  --accent: #0b5cad;
  --live: #15803d;
  --warn: #a16207;
  --bad: #b91c1c;
  --idle: #4b5563;
  color-scheme: light;
}
:root[data-theme="contrast"] {
  --bg: #000000;
  --fg: #ffff00;
  --muted: #ffffff;
  --bar-bg: #000000;
  --accent: #00ffff;
  --live: #00ff00;
  --warn: #ffff00;
  --bad: #ff6060;
  --idle: #ffffff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* rem-based so the phone's own font scaling still applies */
  font-size: calc(1rem * var(--scale));
  line-height: 1.45;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 1rem; padding-top: max(0.5rem, env(safe-area-inset-top));
  background: var(--bar-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  font-size: 1rem;
}
:root[data-theme="contrast"] .bar { border-bottom: 2px solid var(--fg); }
.status { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.05rem; }
.status .dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--idle); flex: none; }
.status[data-state="live"] .dot { background: var(--live); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--live) 25%, transparent); }
.status[data-state="paused"] .dot { background: var(--warn); }
.status[data-state="reconnecting"] .dot { background: var(--bad); animation: pulse 1s infinite alternate; }
.status[data-state="connecting"] .dot { background: var(--accent); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 1 } to { opacity: 0.3 } }
@media (prefers-reduced-motion: reduce) { .status .dot { animation: none !important; } }
.icon-btn {
  min-width: 3rem; min-height: 3rem; border-radius: 0.6rem;
  border: 2px solid var(--muted); background: transparent; color: var(--fg);
  font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer;
}
.icon-btn:focus-visible, .jump:focus-visible, .done:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main { padding: 1rem 1rem 6rem; max-width: 60rem; margin: 0 auto; }
.captions p, .interim { margin: 0 0 0.6em; overflow-wrap: anywhere; }
.interim { color: var(--muted); font-style: italic; min-height: 1.45em; }
:root[data-theme="contrast"] .interim { color: #ffffff; }
.waiting { text-align: center; padding: 3rem 0.5rem; font-size: 1rem; }
.waiting h1 { font-size: 1.4rem; margin: 0 0 0.75rem; }
.waiting p { color: var(--muted); font-size: 1.1rem; }
.jump {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  padding: 0.85rem 1.4rem; border-radius: 999px; border: none;
  background: var(--accent); color: var(--bg); font: inherit; font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35); cursor: pointer; z-index: 3;
}
dialog {
  border: 2px solid var(--muted); border-radius: 1rem; padding: 1.25rem;
  background: var(--bar-bg); color: var(--fg); width: min(26rem, calc(100vw - 2rem));
  font-size: 1.05rem;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog h2 { margin: 0 0 1rem; font-size: 1.3rem; }
.size-row { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1.25rem; }
.size-row input { flex: 1; min-height: 2.75rem; accent-color: var(--accent); }
.small-a { font-size: 0.9rem; } .big-a { font-size: 1.8rem; }
fieldset { border: 1px solid var(--muted); border-radius: 0.6rem; margin: 0 0 1.25rem; padding: 0.5rem 0.9rem 0.75rem; }
fieldset label { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
fieldset input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent); }
.done {
  width: 100%; min-height: 3rem; border-radius: 0.6rem; border: none;
  background: var(--accent); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer;
}