:root{--bg:#202124;--h1:#bdc1c6;--body:#9aa0a6;--link:#8ab4f8;--muted:#5f6368}*{box-sizing:border-box}html,body{background:var(--bg);margin:0;padding:0}body{color:var(--body);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Roboto,Segoe UI,Arial,sans-serif}header{border-bottom:1px solid #2a2b2e;padding:6px 20px}header nav a{color:var(--muted);letter-spacing:.02em;font-size:.78rem;text-decoration:none}header nav a:hover,header nav a:focus-visible{color:var(--link)}main{width:100%;max-width:600px;margin:0 auto;padding:24px 20px 64px}canvas{width:100%;height:auto;image-rendering:pixelated;touch-action:manipulation;outline:none;margin-bottom:44px;display:block}canvas:focus-visible{outline:2px solid var(--link);outline-offset:4px}#text{transition:opacity .32s}#text.swap{opacity:0}h1{color:var(--h1);max-width:22ch;margin:0 0 20px;font-size:1.7rem;font-weight:400;line-height:1.3}.label{margin:0 0 10px;font-size:1rem}ul{max-width:52ch;margin:0 0 32px;padding-left:2.6em}li{margin-bottom:8px;line-height:1.45}.code{letter-spacing:.02em;margin:0 0 16px;font-size:.86rem}.later{font:inherit;letter-spacing:.03em;color:var(--link);cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;padding:6px 0;font-size:1.05rem;display:inline-flex}.later svg{fill:currentColor;flex:none;width:20px;height:20px}.later:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:2px}.reply{opacity:0;min-height:1.3em;margin:14px 0 0;font-size:.92rem;transition:opacity .3s}.reply.show{opacity:1}.credit{color:#3c3d40;margin:56px 0 0;font-size:.7rem}.credit a{color:inherit}.credit a:hover,.credit a:focus-visible{color:var(--muted)}@media (prefers-reduced-motion:reduce){#text,.reply{transition:none}}@media (width<=420px){h1{font-size:1.45rem}main{padding:16px 16px 48px}}
