:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b1020; color: #ecf1ff; }
* { box-sizing: border-box; }
body { min-width: 20rem; margin: 0; }
button { padding: 0.65rem 0.9rem; color: #08101e; font: inherit; font-weight: 700; background: #91caff; border: 1px solid #b2d8ff; border-radius: 0.4rem; cursor: pointer; }
button:hover { background: #c1e0ff; }
button.quiet { color: #dbeafe; background: transparent; border-color: #52627c; }
button.quiet:hover { background: #24324c; }
.page-shell { display: grid; min-height: 100vh; padding: 1rem; place-items: center; }
.card { width: min(100%, 70rem); padding: clamp(1rem, 3vw, 2rem); background: #121a2c; border: 1px solid #283957; border-radius: 0.75rem; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 25%); }
.page-header, .player-heading, .player-controls { display: flex; align-items: center; gap: 1rem; }
.page-header, .player-heading { justify-content: space-between; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: 1.25rem; }
.eyebrow { margin-bottom: 0.25rem; color: #91caff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; }
.status { color: #b9cbeb; font-size: 0.9rem; }
.error { color: #ffb4ab; }
.muted, .hint { color: #b9cbeb; }
#video { display: block; width: 100%; max-height: 70vh; margin-top: 1.25rem; background: #060913; border-radius: 0.45rem; }
.hint { margin-top: 0.75rem; font-size: 0.9rem; }
.auth-error { display: grid; gap: 0.75rem; margin-top: 1rem; color: #ffb4ab; }
@media (max-width: 38rem) { .page-header, .player-heading { align-items: flex-start; flex-direction: column; } }