#viewer-panel{display:contents}
#mobile-playback{display:none}
@media(max-width:950px){
 header{min-height:58px;padding:10px 4vw;gap:12px}
 header .sequence-bar{display:none}
 header>a{font-size:12px}
 main{display:flex;flex-direction:column;gap:18px}
 #viewer-panel{display:block;position:sticky;top:env(safe-area-inset-top,0px);z-index:12;width:100%;background:#111f28;padding-bottom:8px;flex:none;isolation:isolate}
 #stage{position:relative;top:auto;width:100%;height:clamp(180px,52svh,540px);min-height:180px;border-radius:14px}
 #mobile-playback{display:block;padding:8px 10px 6px;border:1px solid #42616e;border-top:0;border-radius:0 0 12px 12px;background:#192e39}
 .mobile-transport-row{display:flex;gap:12px;align-items:center;margin-bottom:3px;min-width:0}
 #mobile-play{width:80px;min-height:44px;margin:0;flex:none;text-align:center;background:#365966}
 .mobile-transport-row>div{min-width:0}
 #mobile-file-name{display:block;font-size:13px;line-height:1.3}
 #mobile-canal-name{display:block;font-size:11px;line-height:1.3;color:#bfd4dd}
 .mobile-progress-label{display:flex;justify-content:space-between;gap:8px;font-size:10px;margin:3px 0 0}
 #mobile-timeline{display:block;min-height:24px;margin:0 0 3px;touch-action:pan-x}
 #mobile-file-sequence{display:flex;gap:5px}
 #mobile-file-sequence button{min-height:44px;min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px;margin:0;font-size:13px}
 #mobile-file-sequence i{width:5px;height:23px;border-radius:2px;background:var(--file-colour)}
 #mobile-file-sequence button.active{outline:1px solid var(--file-colour);outline-offset:-3px}
 #mobile-file-sequence button.done{border-bottom:3px solid var(--file-colour)}
 #mobile-load-status{font-size:11px;line-height:1.3;margin:5px 0 0;color:#c7e6e6}
 #mobile-load-status button{width:auto;min-height:44px;margin:0;padding:6px 12px}
 aside{width:100%}
 aside #play,aside label[for=timeline],aside #timeline,aside #clock{display:none}
 aside button,aside select,aside input,aside summary{scroll-margin-top:calc(52svh + 180px)}
 #stage .tag{font-size:10px;top:12px;left:12px;max-width:calc(100% - 24px)}
 #stage .overview{font-size:9px;width:90px;top:42px;right:10px}
 #stage .hint{font-size:9px;bottom:10px;left:12px}
}
@media(max-width:950px) and (max-height:500px){
 header{min-height:44px;padding:6px 4vw}
 main{padding-top:10px}
 #stage{height:180px}
 #mobile-canal-name{font-size:10px}
 aside button,aside select,aside input,aside summary{scroll-margin-top:345px}
}