* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { line-height: 1.6; background: #0f172a; color: #e2e8f0; }

.site-header, .site-footer { text-align: center; padding: 1rem; background: #0b1220; }
.site-header h1 { margin: .25rem 0; font-size: clamp(1.25rem, 2.5vw, 2rem); }
.tagline { color: #94a3b8; margin: 0; }

main { max-width: 980px; margin: 0 auto; padding: 1rem; }

.video-section figure { margin: 0; }
video { width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #000; }
figcaption { font-size: .95rem; color: #9aa7bd; margin-top: .5rem; }

.controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.seek-btn { padding: .5rem .75rem; border-radius: .6rem; border: 1px solid #334155; background: #111827; color: #e5e7eb; cursor: pointer; }
.seek-btn:hover { background: #1f2937; }

.status { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .95rem; color: #cbd5e1; }
.status select { background: #0b1220; color: #e2e8f0; border: 1px solid #334155; border-radius: .4rem; padding: .25rem .4rem; }

.instructions { background: #0b1220; padding: 1rem; border-radius: .75rem; border: 1px solid #1e293b; margin-top: 1rem; }
.instructions .note { color: #a1a7b7; }