:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0c0e10;color:#f4f5f5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0c0e10}main{width:min(100%,980px);margin:auto;padding:16px}header{display:flex;gap:10px;align-items:baseline;padding:4px 0 22px}header strong{font-size:20px}header span{color:#9ba2a8;font-size:13px}h1{margin:0 0 12px;font-size:22px;letter-spacing:0}#capability,#status{color:#b9c0c5;font-size:14px}form{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:18px 0}input,select,button{min-height:44px;border:1px solid #343a3f;background:#171a1d;color:inherit}input,select{min-width:0;padding:0 12px}button{padding:0 16px;cursor:pointer}button:disabled{opacity:.45;cursor:default}#stage{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden}#video-canvas,#subtitle-canvas{position:absolute;inset:0;width:100%;height:100%}#subtitle-canvas{pointer-events:none}#stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}#stage:fullscreen #video-canvas,#stage:fullscreen #subtitle-canvas{inset:50% auto auto 50%;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);translate:-50% -50%}#center-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:56px;height:56px;padding:0;border-radius:50%;background:#0009;font-size:20px}#center-play.hidden{opacity:0;pointer-events:none}#controls{display:grid;grid-template-columns:48px auto 1fr 100px 48px;gap:8px;align-items:center;padding:8px 0}#controls button{width:44px;padding:0}#time{font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}#sources{display:flex;flex-wrap:wrap;gap:6px}#sources span{border:1px solid #343a3f;color:#7f888f;padding:5px 8px;font-size:12px}#sources span.active{border-color:#35b77a;color:#70dda6}@media(max-width:640px){main{padding:12px}form{grid-template-columns:1fr}form label{font-size:13px}#controls{grid-template-columns:44px 1fr 44px}#time{grid-column:2;grid-row:1;text-align:center}#seek{grid-column:1 / -1;grid-row:2}#volume{display:none}}