.m-hint,.m-nav{display:none}
@media (max-width:900px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  .top{height:48px;gap:6px;padding:0 8px}
  .brand,.pf-top,.theme-btn,.lock-btn{display:none!important}
  .tabs{margin-left:auto}
  .tabs button{font-size:14px;padding:8px 10px}
  .lec{display:flex;flex-direction:column;height:calc(100dvh - 48px);min-height:0}
  .main{flex:none;display:block;height:auto;min-height:0;width:100%}
  .stagewrap{width:100%;aspect-ratio:16/9;height:auto;padding:0;flex:none}
  .stage{border-radius:0;border:0}
  .ctrl{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:nowrap}
  .ctrl button{flex:1;min-height:44px;font-size:15px;white-space:nowrap}
  .ctrl .info{flex:none;font-size:14px;white-space:nowrap}
  .ctrl .sp,.ctrl .qbox,#noteBtn,#presBtn{display:none!important}
  .m-hint{display:block;margin:0;padding:6px 12px;font-size:13px;line-height:1.4;color:var(--sub);background:var(--panel);border-block:1px solid var(--line)}
  .notes{position:static!important;display:block!important;flex:1 1 0;width:auto!important;min-height:0;overflow-y:auto;font-size:16px;line-height:1.65;padding:12px 14px 28px;border:0;-webkit-overflow-scrolling:touch}
  .toc{top:48px}
}
@media (max-height:500px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  .top,.ctrl,.notes,.m-hint{display:none!important}
  .lec{height:100dvh;display:block}
  .main{height:100%}
  .stagewrap{width:100%;height:100%;padding:0}
  .stage{border-radius:0;border:0}
  .m-nav{display:flex;position:fixed;right:max(10px,env(safe-area-inset-right,0px));bottom:8px;z-index:50;align-items:center;gap:6px;background:rgba(20,20,22,.72);color:#fff;border-radius:99px;padding:3px 6px;font-size:13px}
  .m-nav button{min-width:40px;min-height:36px;background:transparent;border:0;color:#fff;font-size:18px}
  .m-nav button.m-menu{font-size:16px}
  .lec.showtoc .toc{display:block;top:0;z-index:60}
}