html { background: #0c1321; color: #f4f6fc; font: 20px Arial, sans-serif; }
body { margin: 0; }
main { max-width: 1100px; margin: 30px auto; padding: 20px; }
h1 { font-size: 38px; margin: 0 0 15px; }
h1 span, a { color: #42c5a0; }
h2 { font-size: 26px; margin-top: 0; }
p { line-height: 1.45; }
section { background: #162236; border-radius: 12px; padding: 22px; margin: 16px 0; }
button, .button, input { display: inline-block; padding: 14px 18px; border-radius: 8px; border: 3px solid #536079; font: inherit; margin: 6px; vertical-align: middle; }
button, .button { background: #42c5a0; color: #061714; font-weight: bold; text-decoration: none; cursor: pointer; }
button:focus, .button:focus, input:focus, .remote-focus { outline: 4px solid #ffe56d; border-color: #ffe56d; }
button:disabled { background: #687780; color: #eeeeee; cursor: default; }
input { background: #0c1321; color: white; width: 180px; }
.muted { color: #b6c3d6; }
.small { font-size: 16px; }
.code { font-size: 60px; letter-spacing: 9px; color: #ffe56d; }
video { display: block; width: 100%; height: 50vh; background: #000000; margin: 12px 0; }
#preview { height: 250px; }
#status { color: #9cdbc8; margin: 0; }
.error { border: 3px solid #ff9b9b; background: #44202c; color: #fff0f0; padding: 18px; margin: 14px 0; }
.tv-mode #errorBox { position: fixed; left: 4%; right: 4%; top: 12px; z-index: 1000; margin: 0; }
.hidden, [hidden] { display: none !important; }
#diagLog { white-space: pre-wrap; word-wrap: break-word; font: 16px Consolas, monospace; }
video:fullscreen { height: 100%; }
video:-webkit-full-screen { height: 100%; }
@media (max-width: 650px) { main { margin: 10px auto; padding: 12px; } h1 { font-size: 30px; } section { padding: 14px; } .code { font-size: 44px; } }