#player{position:relative;height:auto;min-height:100vh;container-type:inline-size}
#screen{flex:none;width:100%;aspect-ratio:16/9}
#screen::after{content:"";position:absolute;bottom:0;left:0;right:0;height:10.65%;background:#062d60;pointer-events:none}
#captions{bottom:48px;height:calc(56.25cqw * .1065);z-index:2}
@media(max-width:640px){
 #captions{position:relative;bottom:auto;flex:none;height:64px;padding:6px 12px;gap:5px 8px;font-size:18px;line-height:1.3;flex-wrap:wrap;align-content:center}
 #controls{height:100px;display:grid;grid-template-columns:auto auto 1fr auto;grid-template-rows:48px 44px;gap:4px;padding:2px 8px}
 #seek{grid-row:1;grid-column:1/-1;width:100%;height:44px;margin:0}
 #play{grid-row:2;grid-column:1}#sound{grid-row:2;grid-column:2}#fullscreen{display:block;grid-row:2;grid-column:4}
 #controls button{font-size:13px;min-width:44px;padding:0 8px}
 #sound-start{top:8px;right:8px;min-height:44px;font-size:13px;padding:0 12px}
 #sound-check{top:8px;left:8px;max-width:110px;min-height:44px;font-size:11px;line-height:1.2;padding:4px 6px}
}
#player:fullscreen{height:100dvh;justify-content:center}
#player:fullscreen #screen{max-height:calc(100dvh - 48px)}
@media(max-width:640px){#player:fullscreen #screen{max-height:calc(100dvh - 164px)}}