:root {
  --bg: #101418;
  --fg: #f2f4f6;
  --muted: #a7b0ba;
  --line: #2b333c;
  --field: #1a2027;
  --accent: #5cc8ff;
  --accent-fg: #06202e;
  --error: #ff8a80;
  --text-size: 22px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfcfd;
    --fg: #14191f;
    --muted: #55606b;
    --line: #d9dee3;
    --field: #ffffff;
    --accent: #005f8f;
    --accent-fg: #ffffff;
    --error: #b3261e;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }
header h1 { font-size: 22px; margin: 4px 0 0; }
.sub { margin: 2px 0 20px; color: var(--muted); }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, select, button {
  font: inherit; color: var(--fg); background: var(--field);
  border: 1px solid var(--line); border-radius: 10px; min-height: 44px; padding: 8px 12px;
}
input { width: 9.5em; letter-spacing: 0.2em; text-transform: uppercase; font-size: 20px; }
select { width: 100%; }
button { cursor: pointer; font-weight: 600; }
button[type=submit], #voice { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); min-width: 8em; }
#voice[aria-pressed=true] { background: var(--field); color: var(--fg); border-color: var(--line); }
button:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.controls { margin-top: 14px; }
.note { color: var(--muted); margin: 8px 0 0; }
.error { color: var(--error); }
.status { font-weight: 600; margin: 0 0 4px; }
.status.live::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #2ecc71; margin-inline-end: 8px; vertical-align: 1px;
}
#lines { margin-top: 18px; border-top: 1px solid var(--line); }
#lines p {
  font-size: var(--text-size); line-height: 1.35; margin: 0; padding: 10px 0;
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere; unicode-bidi: plaintext;
}
#lines p.old { color: var(--muted); }
.code-line { color: var(--muted); margin-top: 24px; font-size: 14px; }
#room-code { letter-spacing: 0.15em; font-weight: 600; }