/* Hosted edition controls. The illustrated sheets keep their authored geometry. */
#mobile-tools{display:none}
@media(max-width:650px){
 body{padding:env(safe-area-inset-top) env(safe-area-inset-right) max(12px,env(safe-area-inset-bottom)) env(safe-area-inset-left)}
 header{grid-template-columns:44px minmax(0,1fr) auto}
 header .brand{line-height:1.15}
 #mobile-tools{display:flex;align-items:center;justify-content:center;gap:16px}
 #mobile-tools a{display:inline-flex;align-items:center;color:inherit;min-height:44px}
 #mobile-text{border-radius:22px;padding-inline:16px;background:#fffaf0}
 #pages{display:flex;flex-direction:column;gap:2px}
 #pages::after{content:"Choose page";font:11px HarlowText,Verdana,sans-serif;color:#485d62}
 #counter{min-width:0}
 .stage{padding:8px 4px 12px}
 main.square{border-radius:2px;box-shadow:0 2px #f6ecda,0 3px #cfc1a8,0 5px #f8efd9,0 6px #d7cbb8,0 10px 20px -10px #59452770}
 .hint{display:none}
 #resume button{min-width:44px}
}
@media(orientation:landscape) and (max-height:500px) and (min-width:651px){
 header{padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
 .stage{padding:2px 0 6px}
 main:not(.textmode){max-width:calc((100svh - 125px)*2)}
 main.square:not(.textmode){max-width:calc(100svh - 125px)}
 nav{padding-block:0}nav button{min-height:44px}
 .reading-trail{margin:6px 0}.hint{display:none}
}