:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b10;
  color: #edf2f7;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
main { width: min(100vw, 1200px); height: 100vh; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 20px; gap: 14px; }
.stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid #252b36; border-radius: 18px; background: #020304; }
video { display: none; max-width: none; max-height: none; object-fit: contain; transform-origin: center; }
video.active { display: block; }
.empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 32px; }
.empty[hidden] { display: none; }
.brand-mark { width: clamp(64px, 10vw, 112px); height: auto; }
.pairing-qr { width: clamp(150px, 24vh, 220px); height: auto; border-radius: 12px; background: #fff; }
.pairing-link[hidden], .open-app[hidden] { display: none; }
.pairing-link { display: block; line-height: 0; border-radius: 12px; }
.pairing-link:focus-visible { outline: 3px solid #73e2a7; outline-offset: 4px; }
.open-app { border: 1px solid #4fbd88; border-radius: 10px; padding: 10px 16px; color: #08120d; background: #73e2a7; font-weight: 700; text-decoration: none; }
.open-app:hover { background: #8cebb8; }
h1 { margin: 0; font-size: clamp(32px, 6vw, 64px); letter-spacing: -0.05em; }
p { margin: 0; color: #9aa6b5; max-width: 44ch; line-height: 1.5; }
output { font: 700 clamp(34px, 8vw, 72px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.15em; color: #73e2a7; }
button, select { border: 1px solid #384252; border-radius: 10px; padding: 10px 15px; color: inherit; background: #171c24; font: inherit; }
button { cursor: pointer; }
button:hover { background: #222a35; }
button:disabled { cursor: wait; opacity: 0.55; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #9aa6b5; }
.controls { display: flex; align-items: center; gap: 8px; }
.controls label { font-size: 13px; }
#device { max-width: 280px; }
#orientation { min-width: 76px; }
#status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #697386; }
#status[data-state="ready"]::before { background: #73e2a7; }
#status[data-state="live"]::before { background: #5ba8ff; }
@media (max-width: 760px) {
  main { padding: 10px; }
  footer { align-items: stretch; flex-direction: column; font-size: 13px; }
  .controls { flex-wrap: wrap; }
  #device { flex: 1; min-width: 180px; }
}