*{box-sizing:border-box}
html,body,main{width:100%;height:100%;margin:0;overflow:hidden;background:#eee}
body{font:14px/1.4 system-ui,sans-serif;color:#25262b}
main{position:relative}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px}
canvas:active{cursor:grabbing}
nav{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;gap:8px}
button{background:#fafafa;color:inherit;border:1px solid #c9c9cb;border-radius:7px;min-height:42px;padding:0 12px;font:inherit;cursor:pointer}
button[aria-pressed="true"]{background:#252a40;color:#fff;border-color:#252a40}
button:focus-visible{outline:2px solid #363e66;outline-offset:2px}
button:disabled{opacity:.55;cursor:default}
#status{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:85%;text-align:center}
@media(max-width:540px),(max-height:500px){nav{top:auto;right:50%;transform:translateX(50%);bottom:max(14px,env(safe-area-inset-bottom));white-space:nowrap}}