*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Segoe UI,Arial,sans-serif;color:#e5f9ef;background:radial-gradient(circle at 80% 5%,#255851 0,transparent 35%),radial-gradient(circle at 5% 90%,#243b49 0,transparent 40%),#0a1b20}.shell{width:min(1000px,calc(100% - 28px));margin:auto;padding:24px 0 32px}header{display:flex;justify-content:space-between;align-items:center;gap:18px}.back{color:#a6dcc7;text-decoration:none;font-size:12px;font-weight:700}.eyebrow,small,footer,.status{font:700 10px/1.5 Consolas,monospace;letter-spacing:.12em}.eyebrow{margin:18px 0 4px;color:#7fe1b5}h1{margin:0;font-size:clamp(38px,6vw,64px);letter-spacing:-.065em;line-height:1}h1 em{color:#a3e69a;font-style:normal}.intro{margin:9px 0 0;color:#a7c5bc;font-size:14px}.status{padding:10px 14px;border:1px solid #6abf9b;border-radius:100px;color:#a3e69a}.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 10px}.dashboard>div{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:55px;padding:9px 14px;background:#163338;border:1px solid #487669;border-radius:12px}.dashboard small{color:#9fc1b3}.dashboard strong{font-size:20px;color:#eaf7db}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:11px}.controls label{display:flex;align-items:center;gap:9px;color:#b6d6c8;font-size:12px}.controls select,.controls button,.overlay button,.touch-controls button{border:1px solid #71b78e;border-radius:10px;background:#1b4040;color:#f0ffed;font:700 12px Segoe UI,Arial,sans-serif;cursor:pointer}.controls select{min-height:39px;padding:0 10px}.controls button{min-height:39px;padding:0 16px}.controls #start,.overlay button{background:#abe69c;color:#102a2c;border-color:#abe69c}.controls button:hover,.overlay button:hover,.touch-controls button:hover{filter:brightness(1.14);transform:translateY(-1px)}.controls>span{margin-left:auto;color:#9cbfb0;font-size:11px}kbd{display:inline-block;padding:5px;border:1px solid #649383;border-radius:5px;color:#e8f6ed;font:700 10px Consolas,monospace}.stage{position:relative;width:min(600px,100%);margin:auto;border:3px solid #69bd95;border-radius:16px;overflow:hidden;box-shadow:0 20px 55px #0008,0 0 30px #73d9ad38}canvas{display:block;width:100%;height:auto;aspect-ratio:1;background:#102b30;touch-action:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;background:#0c2528e8;backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.overlay>span{font:700 11px Consolas,monospace;color:#9ee7a1;letter-spacing:.13em}.overlay h2{margin:10px 0;font-size:clamp(27px,5vw,44px);letter-spacing:-.04em}.overlay p{max-width:380px;margin:0 0 20px;color:#b9d6c6;line-height:1.5}.overlay button{padding:12px 20px}.touch-controls{display:none;text-align:center;margin:12px auto}.touch-controls button{width:48px;height:43px;font-size:24px}.touch-controls>div{display:flex;justify-content:center;gap:8px;margin-top:6px}footer{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 25px;margin-top:15px;color:#8bbcac}@media(max-width:650px){.shell{padding-top:16px}.dashboard{grid-template-columns:repeat(2,1fr)}.controls>span{margin-left:0}.touch-controls{display:block}footer{font-size:8px}}@media(max-height:800px) and (min-width:651px){.stage{width:min(480px,100%)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}