*{box-sizing:border-box}body{margin:0;background:#f7f8fa;color:#172039;font:16px system-ui;display:flex;flex-direction:column;height:100dvh}header,footer{background:white;padding:12px max(12px,env(safe-area-inset-right));flex-shrink:0}h1{font-size:20px;margin:0}p{margin:8px 0}main{min-height:0;flex:1;padding:8px;overflow:hidden}#viewport{height:100%;overflow:auto;touch-action:pan-x pan-y;border:1px solid #ddd;border-radius:12px;background:white}#screen{display:block;width:100%;max-width:none;height:auto;user-select:none;touch-action:pan-x pan-y}button,select{min-height:44px;border:1px solid #bbc4d3;border-radius:10px;padding:8px 14px;font:inherit}button{background:#214baf;color:white;width:100%}footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}body.busy #screen{pointer-events:none}#status{min-height:24px}
#screen[hidden]{display:none}