/* Match the usable browser area; preserve every pixel of the 16:9 source. */
:root{--scene-ratio:16/9}
.screen{aspect-ratio:var(--scene-ratio)}
.screen video{object-fit:contain;object-position:center}
.screen:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}
.after img{aspect-ratio:var(--scene-ratio);object-fit:contain;background:#152b37}

/* Covers 4:3 and 5:4 displays, including space occupied by browser toolbars.
   Portrait/mobile keeps the existing stacked layout. Resizing never reloads video. */
@media (orientation:landscape) and (max-aspect-ratio:8/5){
 :root{--scene-ratio:4/3}
 header{padding:14px 24px 10px;gap:16px}
 .code{font-size:36px;padding-right:18px}
 h1{font-size:20px}
 main{padding:0 24px 24px}
 .languagebar{flex-direction:row;align-items:center;padding:8px 12px;margin-bottom:14px;gap:12px}
 .language-picker{flex-wrap:nowrap;width:auto;gap:10px}
 .language-picker select{flex:initial;padding:5px 28px 5px 10px}
 .workspace,html[data-japanese=true] .workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,34%);gap:16px}
 .workspace>section,.workspace>aside{min-width:0}
 aside{margin-top:0;padding:16px;min-height:0}
 .viewbar{margin-top:10px;gap:8px}
 .viewbuttons button{padding:6px 10px}
 .toolbar{margin-top:10px;gap:6px}
 .toolbar .button{font-size:12px;padding:6px 10px}
 .time{font-size:11px}
 .track{margin-top:12px}
 .undertext{font-size:12px;margin-top:8px;min-height:0}
 .after{grid-template-columns:1fr 1fr;gap:20px;padding:20px}
}
@media (orientation:landscape) and (max-aspect-ratio:8/5) and (max-width:900px){
 header{padding:10px 16px 8px}
 main{padding:0 16px 20px}
 .languagebar{padding:7px 10px;margin-bottom:12px}
 .language-picker label{font-size:11px;min-width:0}
 .instructor-switch small,#viewhint{display:none}
 .workspace,html[data-japanese=true] .workspace{grid-template-columns:minmax(0,1fr) 280px;gap:12px}
 aside{padding:13px}
 h2{font-size:16px;margin-bottom:12px}
 .phase{margin-bottom:10px}
 .option{padding:9px;font-size:13px}
 .after{grid-template-columns:1fr;gap:16px}
}
/* Very small windows need a single column regardless of monitor shape. */
@media (max-width:639px){
 .workspace,html[data-japanese=true] .workspace{display:block}
 aside{margin-top:18px}
 .languagebar{flex-direction:column;align-items:flex-start}
 .language-picker{flex-wrap:wrap;width:100%}
 .language-picker select{flex:1}
 .after{grid-template-columns:1fr}
}