*{box-sizing:border-box}body{margin:0;color:#d9e5ef;background:radial-gradient(ellipse at 50% 0,#192238,#070b12 65%);font:15px/1.5 system-ui,sans-serif}header{text-align:center;padding:24px 12px 8px}.eyebrow{font-size:10px;letter-spacing:3px;color:#7ea8bb}h1{font-size:34px;letter-spacing:-1px;margin:5px}h1 span{font-weight:300;color:#88d3e9}header p{margin:0;color:#98abba}nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 12px}button{font:600 13px system-ui;color:#d5f6ff;border:1px solid #395366;background:#162536;border-radius:6px;padding:10px 15px;cursor:pointer}button:hover,button:focus-visible{background:#29465c;outline:2px solid #8ce9ff}#start{background:#164958}#stage{position:relative;width:100%;height:620px}#wrap{background:#141923;border:1px solid #43546c;padding:10px;position:absolute;left:50%;top:0;transform-origin:top center;box-sizing:content-box}#wrap-inner{background:#000;overflow:hidden;position:relative}canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0}.keys{text-align:center;color:#8b9cab;font-size:13px;padding:0 12px}b{color:#c3e9f3}section{max-width:800px;margin:20px auto;border:1px solid #3d5365;background:#111d2a;padding:24px;border-radius:10px}section h2{margin-top:0}footer{text-align:center;color:#697e90;font-size:10px;letter-spacing:1px;padding:20px}@media(max-width:600px){h1{font-size:25px}h1 span{display:block}header{padding-top:16px}nav{gap:5px}button{padding:9px 11px}section{margin:16px}}