*{box-sizing:border-box}html,body{margin:0;background:#161726;color:#fff;font:15px system-ui,sans-serif;min-height:100%;overscroll-behavior:none}header{height:90px;padding:14px 22px;display:flex;justify-content:space-between;flex-wrap:wrap;background:#1c2131}header b{color:#b3f7d9;letter-spacing:3px}header p{width:100%;margin:8px 0;font-size:13px}main{display:flex;align-items:center;justify-content:center;min-height:240px}button{font:inherit;color:inherit;background:#35465a;border:1px solid #80999e;border-radius:10px;min-height:44px;padding:9px 15px;touch-action:none}button:active,button[aria-pressed=true]{background:#527a54}button:focus-visible{outline:3px solid #ffcb7d}#intro{position:absolute;top:110px;left:50%;transform:translateX(-50%);width:min(570px,calc(100% - 28px));background:#222a3bf5;border:1px solid #6a9086;border-radius:20px;padding:24px;z-index:2}h1{font-size:34px;margin:12px 0}p{line-height:1.5}small{display:block;color:#aed7c8;font-size:11px;letter-spacing:1px;margin:12px 0}footer{padding:12px;text-align:center}footer p{font-size:12px;color:#c5ded0}footer div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}footer button{min-width:58px;min-height:50px}@media(max-width:600px){header{padding:10px 14px}#intro{top:100px;padding:18px}h1{font-size:28px}#intro p{font-size:13px;line-height:1.4}footer{padding:8px}footer div{gap:6px}footer button{font-size:13px;padding:9px 12px;min-width:62px}footer p{font-size:11px}main{min-height:310px}}
canvas{max-width:100%;height:auto!important}