:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0 auto; max-width: 1440px; padding: 20px; background: #14171d; color: #eee; }
h1 { font-size: 22px; margin: 0 0 8px; }
p { line-height: 1.5; }
nav, #join, #text-controls { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
button, input, textarea { font: inherit; padding: 9px 12px; border: 1px solid #515d70; border-radius: 6px; background: #252d3a; color: inherit; }
button:enabled { cursor: pointer; }
button:disabled, textarea:disabled { opacity: .45; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #8ebcff; }
#viewport { height: min(67vh, 900px); min-height: 200px; background: #08090c; border: 2px solid #354155; border-radius: 8px; overflow: hidden; touch-action: none; }
#viewport:focus { border-color: #8ebcff; outline: none; }
#viewport.controlling { border-color: #e59c40; }
video { display: block; width: 100%; height: 100%; object-fit: contain; }
textarea { flex: 1; min-width: 200px; }
.hint { color: #b2bdcf; font-size: 13px; }