:root{--bar:40px}
html,body{margin:0;height:100%;background:#05060f;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#141412;z-index:2}
.back{display:inline-flex;align-items:center;min-height:44px;color:#ffd21f;font:400 16px/1 Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.back:focus-visible,#upright:focus-visible{outline:3px solid #ffd21f;outline-offset:3px}
.keys{font:10px/1 ui-monospace,monospace;color:#cfe4ff}
#wrap{position:fixed;top:var(--bar);left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;width:min(100vw,calc((100vh - var(--bar)) * 16 / 9));width:min(100vw,calc((100dvh - var(--bar)) * 16 / 9));height:auto;aspect-ratio:16/9;touch-action:none;outline:none;background:#000}
#rotate{position:fixed;inset:0;z-index:3;background:#0b1030;display:flex;flex-direction:column;color:#cfe4ff}
#rotate[hidden]{display:none}
#rotate>.back{background:#141412;padding:0 20px;min-height:64px}
.rbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 32px;text-align:center}
.rtitle{margin:0;font:16px/1.7 ui-monospace,monospace;color:#ffd21f}
.rsub{margin:0;font-size:15px;font-weight:600;line-height:1.5}
#upright{min-height:48px;padding:0 24px;border-radius:999px;border:2px solid #cfe4ff;background:transparent;color:#cfe4ff;font:800 14px system-ui,sans-serif;cursor:pointer}
.ns{color:#fff;font-family:monospace;padding:20px}
@media (max-height:500px){:root{--bar:0px}.bar{display:none}}
@media (max-width:640px){.keys{display:none}}