*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#000;color:#fff;touch-action:none;font:24px system-ui,sans-serif}main{height:100%;padding:5%;display:flex;flex-direction:column;gap:12px}header{display:grid;gap:5px}small,footer{font-size:17px;color:#a7c6cc}#menu{margin:auto 0;text-align:center}button{font:inherit;color:#fff;background:#153c40;border:2px solid #6ddbd7;border-radius:18px;padding:16px}button:focus-visible{outline:3px solid #fff;outline-offset:3px}#view{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}#view[hidden],#menu[hidden]{display:none}#surface{position:relative;flex:1;min-height:0;width:100%;overflow:hidden;background:#071316;border:1px solid #28535c;padding:0;touch-action:none}#target{position:absolute;left:35%;top:35%;width:35%;height:30%;display:grid;place-items:center;background:#17696c;border:2px solid #83efeb;border-radius:18px;font-size:20px;pointer-events:none}#cursor{position:absolute;left:0;top:0;font-size:36px;color:white;text-shadow:0 0 4px #000;pointer-events:none;will-change:transform}#status{font-size:20px;min-height:26px}footer{margin-top:auto}p{line-height:1.5}
