:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #111827; color: #f9fafb; }
main { width: min(960px, 94vw); margin: 2rem auto; }
video { width: 100%; max-height: 62vh; background: #000; border-radius: .5rem; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
button { border: 0; border-radius: .35rem; padding: .7rem 1rem; cursor: pointer; background: #22c55e; color: #052e16; font-weight: 700; }
button:hover { background: #86efac; }
#status[data-state="error"] { color: #fca5a5; }
#status[data-state="playing"] { color: #86efac; }
dl { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr); gap: .35rem 1rem; }
dt { color: #9ca3af; }
dd { margin: 0; font-variant-numeric: tabular-nums; }