:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#0b1020; color:#f8fafc; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
header { display:flex; align-items:center; justify-content:space-between; padding:16px; background:#111827; }
h1,h2,p { margin:0; } h1 { font-size:1.2rem; } h2 { font-size:1rem; margin-bottom:10px; }
#status { font-size:.85rem; color:#93c5fd; }
main { width:min(900px,100%); margin:auto; padding:12px; display:grid; gap:12px; }
.viewer { position:relative; min-height:52vh; overflow:hidden; border-radius:18px; background:#020617; }
video,canvas { position:absolute; width:100%; height:100%; object-fit:contain; inset:0; }
#hint { position:absolute; left:12px; right:12px; bottom:12px; padding:10px 12px; border-radius:10px; background:#020617cc; font-size:.9rem; }
.controls,.panel { display:flex; gap:10px; flex-wrap:wrap; padding:12px; border-radius:14px; background:#111827; }
.panel { display:block; } button,label,.node { min-height:44px; border:0; border-radius:10px; padding:10px 14px; }
button { color:#07111f; background:#38bdf8; font-weight:700; } button.secondary { color:#e2e8f0; background:#334155; }
button:disabled { opacity:.45; } label { background:#1e293b; } input { max-width:180px; }
#nodes { display:grid; gap:8px; } .node { background:#1e293b; color:#e2e8f0; text-decoration:none; }
@media (orientation:landscape) { .viewer { min-height:68vh; } }