body { margin: 16px; font: 16px Arial, sans-serif; }
main { max-width: 960px; margin: 0 auto; }
form, .file-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#url { flex: 1; min-width: 180px; }
input, button, select { font: inherit; }
button { cursor: pointer; }
#player { position: relative; background: #000; color: #fff; aspect-ratio: 16 / 9; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
#title { position: absolute; top: 16px; left: 16px; right: 16px; text-shadow: 0 1px 3px #000; pointer-events: none; }
#big-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; border-radius: 12px; width: 72px; height: 50px; color: #fff; background: #f00; font-size: 26px; }
#controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 12px 8px; background: linear-gradient(transparent, #000c); }
#seek { display: block; width: 100%; margin: 0; accent-color: #f00; }
.buttons { display: flex; align-items: center; gap: 12px; }
.buttons button { border: 0; background: transparent; color: #fff; min-width: 32px; min-height: 36px; font-size: 24px; }
#volume { width: 70px; accent-color: #fff; }
#time { font-size: 14px; }
#fullscreen { margin-left: auto; }
#status { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
[hidden] { display: none !important; }