:root{font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:#e9f9e7;background:#0b1b15}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{display:grid;place-items:center;background:radial-gradient(circle at 15% 15%,#25583c 0,transparent 37%),radial-gradient(circle at 85% 85%,#254b2d 0,transparent 42%),#0b1b15}
.page{width:min(960px,calc(100% - 28px));padding:30px 0;text-align:center}
.eyebrow{margin:0 0 8px;color:#a8e987;font:bold 12px ui-monospace,monospace;letter-spacing:.2em}
h1{margin:0;font-size:clamp(38px,7vw,72px);letter-spacing:-.055em;line-height:1}
.lede{margin:15px auto 23px;max-width:620px;color:#bfd6ba;font-size:clamp(15px,2.3vw,18px)}
.game-frame{display:grid;place-items:center;min-height:420px;padding:18px;border:1px solid #6bbd764d;border-radius:24px;background:#07130e9c;box-shadow:0 24px 70px #0007,inset 0 1px #fff1;overflow:hidden}
canvas{display:block!important;position:static!important;left:auto!important;top:auto!important;transform:none!important;width:min(100%,820px)!important;height:auto!important;aspect-ratio:2/1;image-rendering:pixelated;border-radius:12px;box-shadow:0 0 0 1px #ffffff24,0 16px 35px #0008}
.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:18px auto 0;color:#c5dfbd}
.controls span{padding:9px 13px;border:1px solid #ffffff21;border-radius:99px;background:#ffffff0a}
kbd{padding:2px 6px;border-radius:5px;background:#b8ed9b;color:#11241a;font:bold 12px ui-monospace,monospace}
.hint{max-width:680px;margin:17px auto 0;color:#9fb89d;font-size:14px;line-height:1.5}
.credit{margin:17px 0 0;color:#849a83;font-size:12px}.credit a{color:#b6e69a}
@media(max-width:620px){.page{padding:16px 0}.game-frame{min-height:230px;padding:8px;border-radius:16px}}