.library-wordmark{display:block;width:155px;height:auto;max-height:46px;object-fit:contain}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 1 auto}
@media(max-width:700px){
  body{height:100dvh;min-width:0;overflow:hidden}
  header{min-width:0;padding:max(10px,env(safe-area-inset-top)) 10px 10px;gap:10px;flex-wrap:wrap}
  .brand{max-width:110px;min-width:0}.library-wordmark{width:110px;max-width:100%;height:auto}
  .brand span{font-size:8px}.heading{min-width:0;flex:1}.heading h1{font-size:15px;overflow-wrap:break-word}
  header button{margin-left:auto;min-width:44px;min-height:44px}
  footer{flex:none;padding:10px 10px max(10px,env(safe-area-inset-bottom));gap:8px}
  button,.button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  input{font-size:16px;min-height:44px}
  .paging,.actions{flex-wrap:wrap;justify-content:center;max-width:100%;gap:6px}
  .actions{width:100%}.actions button,.actions a{padding:8px;font-size:12px}
  main,#stage,.reader{min-height:0;min-width:0}
  aside{width:min(330px,100%);box-sizing:border-box}
  dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-width:none;max-height:none}
  .zoomToolbar{padding:8px;gap:5px}.zoomToolbar button{padding:6px}
}