:root{color-scheme:dark;font:16px/1.4 system-ui,sans-serif;color:#f8f0df;background:#15222b}*{box-sizing:border-box}body{margin:0;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}main{max-width:780px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}h1{font-size:18px;margin:0}header div{display:flex;gap:8px}button{font:inherit;color:inherit;background:#293e4a;border:1px solid #647d88;border-radius:10px;min-height:44px;padding:9px 12px;cursor:pointer}button:focus-visible{outline:3px solid #ffcf77;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}button.active,button:active{background:#516879;border-color:#ffcf77}.console{display:flex;flex-direction:column;align-items:center;gap:12px}.viewport{position:relative;width:min(100%,calc((100dvh - 285px)*.75));min-width:150px;aspect-ratio:3/4;background:#0c141b;box-shadow:0 6px 22px #0006}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#overlay{position:absolute;inset:0;background:#15222bf2;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;text-align:center}#overlay[hidden]{display:none}h2{font-size:22px;margin:0 0 12px}#message{font-size:14px}#start{background:#afdd49;color:#15222b;font-weight:700;border-color:#cee989}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,420px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.softkeys{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px}.softkeys button{font-size:13px;flex:1}.pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,48px);gap:5px}.pad button{padding:0}.up{grid-column:2}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:2}.right{grid-column:3;grid-row:2}.actions{display:grid;grid-template-columns:1fr;gap:8px}.actions button{font-size:14px}.jump{background:#9d3939}#status{font-size:13px;color:#ffcf77;text-align:center;margin:8px 0}.help{font-size:12px;color:#a7bbc4;text-align:center;margin:8px 0}@media(orientation:landscape) and (max-height:600px){header{margin-bottom:5px}.console{flex-direction:row;justify-content:center;gap:24px}.viewport{width:calc((100dvh - 95px)*.75);min-width:120px}.controls{width:310px}.help{display:none}}@media(min-width:800px) and (min-height:700px){.viewport{width:300px}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s}}