:root{color-scheme:dark;font-family:Inter,ui-rounded,system-ui,sans-serif;background:#000;color:#fff;--green: #7dff5a;--cyan: #7fe8ff;--yellow: #ffe45e}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#000;overflow:hidden}body{display:grid;place-items:center}#app{width:600px;height:600px;position:relative;background:#020806;border:2px solid var(--cyan);overflow:hidden}header{height:50px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #0e5f8a;letter-spacing:.06em}header div{display:flex;gap:12px;align-items:center}header strong{color:var(--cyan);font-size:22px}header span{font-size:13px}#instruction{position:absolute;z-index:3;top:54px;left:50%;margin:0;padding:5px 12px;transform:translate(-50%);border-radius:999px;background:#000c;color:var(--yellow);font-weight:800}#lake{display:block;width:600px;height:470px;background:#001428}.controls{height:80px;padding:14px 12px;display:flex;align-items:center;justify-content:center;gap:12px;background:#020806}button{border:1px solid #0e5f8a;border-radius:8px;background:#10261a;color:#fff;font:inherit;font-weight:800;cursor:pointer}.focusable{outline:none}.focusable:focus{outline:3px solid var(--yellow);outline-offset:2px;box-shadow:0 0 14px var(--yellow)}.confirm{width:140px;height:52px;background:#214f2d;color:var(--green);font-size:18px}@media (max-width: 600px),(max-height: 600px){#app{transform:scale(min(calc(100vw / 600),calc(100vh / 600)))}}