:root { --ink: #e9edf1; --muted: #9aa7b2; --night: #121a22; --panel: #1b2731; --line: #334450; --lime: #b9ee65; --red: #ff7373; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 12% 8%, #284550, transparent 30rem), radial-gradient(circle at 90% 95%, #34432b, transparent 28rem), var(--night); font-family: Georgia, "Times New Roman", serif; }
.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 70px 0; }
header { max-width: 600px; margin-bottom: 34px; }
.eyebrow, .room-link span, .video-label { color: var(--lime); font: 700 12px/1.2 monospace; letter-spacing: .12em; }
h1 { font-size: clamp(46px, 9vw, 86px); letter-spacing: -.06em; line-height: .85; margin: 10px 0 20px; }
.intro, .hint, .status { color: var(--muted); font-size: 17px; line-height: 1.5; }
.card { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); padding: 24px; border-radius: 4px; box-shadow: 12px 12px 0 #0c1218; }
.setup { max-width: 580px; }
label { display: block; margin-bottom: 9px; font: 700 14px monospace; }
.room-controls, .actions, .room-link { display: flex; gap: 10px; align-items: center; }
.room-controls { margin-bottom: 12px; }
input { width: 100%; min-width: 0; border: 1px solid var(--line); background: #111920; color: var(--ink); padding: 13px; font: 16px monospace; }
.setup input { margin-bottom: 16px; }
.setup button { width: 100%; }
button { cursor: pointer; border: 1px solid transparent; padding: 12px 16px; font: 700 14px monospace; }
button:disabled { cursor: not-allowed; opacity: .5; }
.primary { background: var(--lime); color: #18220e; } .secondary { border-color: var(--line); background: transparent; color: var(--ink); } .danger { background: transparent; color: var(--red); border-color: var(--red); }
.session { margin-top: 25px; }.room-link { justify-content: space-between; }.room-link strong { display: block; margin-top: 4px; font: 18px monospace; }.actions { margin-top: 22px; }.status { margin: 20px 0 0; }
.streams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }.streams article { background: #080c10; border: 1px solid var(--line); }.video-label { padding: 10px; } video { width: 100%; aspect-ratio: 16/9; display: block; background: #050709; object-fit: contain; }
.hidden { display: none; }
@media (max-width: 640px) { .shell { padding: 42px 0; }.room-controls, .room-link, .actions { align-items: stretch; flex-direction: column; }.streams { grid-template-columns: 1fr; } button { width: 100%; } }