* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0b1020; color: #e6ecf2; }
.container { max-width: 960px; margin: 24px auto; padding: 0 16px; }
h1 { font-weight: 700; letter-spacing: 0.3px; margin: 0 0 16px; }
.video-wrapper { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16/9; background: #111827; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; }
video, canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alert { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(0,0,0,0.7); border-bottom: 1px solid rgba(255,255,255,0.12); }
.alert-text { color: #ff6363; font-weight: 700; }
.alert-icon { color: #ff6363; font-weight: 900; font-size: 28px; }
.hidden { display: none; }
.controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
button { background: #2563eb; color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
button:hover { background: #1d4ed8; }
#status { color: #93c5fd; }
.hint { color: #9ca3af; font-size: 12px; }