*{box-sizing:border-box}body{margin:0;min-height:100svh;font-family:system-ui,sans-serif;color:var(--ink);background:var(--bg)}.run{--bg:#f2ecda;--ink:#21251e;--accent:#ceff4f;--panel:#242a26;--line:#a8a48c;--sub:#50574c}.big{--bg:#140f27;--ink:#f8f1ff;--accent:#e7b3ff;--panel:#221c39;--line:#51486b;--sub:#d0c0df;background:radial-gradient(ellipse at 70% 15%,#35234f,var(--bg) 55%)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #eb659f;outline-offset:4px}.frame{max-width:1330px;margin:auto;padding:0 clamp(16px,4vw,58px)}header,footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid var(--line);font-size:.75rem}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--sub)}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:1rem}.brand i{display:block;width:14px;height:14px;background:var(--accent);border:2px solid var(--ink);transform:rotate(12deg)}.tag,.eyebrow,small{font-size:.67rem;letter-spacing:.13em;font-weight:850}.tag{border:1px solid var(--line);border-radius:30px;padding:6px 10px}.layout{display:grid;grid-template-columns:minmax(235px,.62fr) minmax(0,1fr);gap:clamp(19px,4vw,61px);align-items:center;padding:clamp(22px,4vw,52px) 0}.intro p{max-width:35ch;color:var(--sub);line-height:1.5}.intro h1{font-size:clamp(3.3rem,7.3vw,7.8rem);line-height:.86;margin:17px 0;letter-spacing:-.095em;text-wrap:balance}.big h1{color:var(--accent)}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0}.stats div{border:1px solid var(--line);padding:8px 12px;border-radius:8px}.stats b{display:block;font-size:1.65rem;font-variant-numeric:tabular-nums}.keys{font-size:.78rem;color:var(--sub);line-height:1.75}kbd{font:inherit;border:1px solid var(--line);border-radius:4px;padding:1px 4px}.game{padding:8px;background:var(--panel);border-radius:20px;box-shadow:0 10px 25px #08061235;min-width:0}.screen{position:relative;overflow:hidden;border-radius:14px;background:#171527;touch-action:none;display:flex;justify-content:center;align-items:center}.run canvas{width:100%;height:auto;display:block}.big #board{width:min(61%,280px);height:auto;display:block}.previews{width:clamp(64px,19%,108px);align-self:flex-start;display:grid;gap:10px;margin:13px 5px 0 10px}.previews div{border:1px solid #51486b;border-radius:9px;padding:4px;text-align:center}.previews small{font-size:clamp(.48rem,1.25vw,.65rem)}.previews canvas{display:block;width:100%;height:auto}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:#0d0e1d75}.overlay[hidden]{display:none}.overlay-card{width:min(340px,100%);text-align:center;color:#fff;background:#171923ed;border:1px solid #ffffff65;border-radius:15px;padding:clamp(13px,3vw,32px);box-shadow:0 12px 30px #0006}.overlay h2{font-size:clamp(1.65rem,4vw,3rem);letter-spacing:-.06em;margin:5px 0}.overlay p{margin:0 0 12px;font-size:.86rem;color:#ddd}.overlay button{border:0;background:var(--accent);color:#191621;border-radius:9px;padding:9px 16px;font-weight:900}.controls{display:flex;justify-content:center;gap:5px;padding:8px 0 0}.controls button{flex:1;max-width:102px;min-width:0;min-height:42px;color:#fff;background:#ffffff19;border:1px solid #ffffff35;border-radius:7px;font-weight:bold;touch-action:manipulation}.controls button:hover{background:#ffffff35}.controls button:active{background:var(--accent);color:#171923}@media(max-width:760px){.layout{grid-template-columns:1fr;gap:14px}.intro h1{font-size:clamp(2.5rem,10vw,4.7rem);margin:8px 0}.intro p{margin:7px 0}.stats{display:flex;flex-wrap:wrap;margin:9px 0}.stats div{flex:1;min-width:63px;padding:3px 6px}.stats small{font-size:.53rem;letter-spacing:.06em}.stats b{font-size:1.15rem}.keys{font-size:.7rem}.run .screen{min-height:235px}.big #board{width:min(61%,225px,27vh)}footer{font-size:.6rem}}
