:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0c0b09;--ink:#f4efe6;--muted:#9c9488;--line:#f4efe614;--bezel:#171512;--snake:#3ddc97;--invaders:#d392ff;--g2048:#e7c07b;--flappy:#ffe14a;--tetris:#5ce1e6;--contra:#ff5a36;--battle:#e6b325;font-family:IBM Plex Mono,ui-monospace,monospace}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0}body{background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-position:top;background-size:32px 32px;min-height:100%}.wrap{width:min(1180px,100% - 40px);margin:0 auto;padding:36px 0 72px}.top{justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px;display:flex}.marks{align-items:center;gap:18px;display:flex}.back{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:12px}a.back{text-decoration:none}a.back.gh{align-items:center;gap:6px;display:inline-flex}a.back.gh svg{display:block}a.back:hover,a.back:focus-visible{color:var(--ink)}h1{letter-spacing:-.035em;margin:0 0 10px;font-family:Newsreader,Iowan Old Style,Palatino,serif;font-size:clamp(48px,7vw,80px);font-weight:560;line-height:.9}.lede{max-width:40rem;color:var(--muted);margin:0 0 32px;font-size:14px;line-height:1.55}.lede code,.tab-path{color:var(--ink)}.layout{grid-template-columns:var(--stage,minmax(0, 1fr)) minmax(0, 1fr);align-items:start;gap:28px;display:grid}.stage{width:100%;min-width:0;max-width:100%;position:sticky;top:20px}.machine{--accent:var(--snake);background:var(--bezel);border:1px solid #2c2822;border-radius:22px;padding:14px 14px 16px;box-shadow:0 30px 70px #00000061}.machine.invaders{--accent:var(--invaders)}.machine.g2048{--accent:var(--g2048)}.machine.flappy{--accent:var(--flappy)}.machine.tetris{--accent:var(--tetris)}.machine.contra{--accent:var(--contra)}.machine.battle{--accent:var(--battle)}.machine.live{border-color:color-mix(in srgb, var(--accent) 70%, #2c2822)}.bar{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;justify-content:space-between;align-items:baseline;padding:2px 8px 12px;font-size:12px;display:flex}.bar b{color:var(--ink);font-weight:500}.dot{vertical-align:1px;background:#3a342c;border-radius:50%;width:7px;height:7px;margin-right:8px;display:inline-block}.machine.live .dot{background:var(--accent)}.screen{background:#000;border-radius:10px;width:100%;line-height:0;position:relative;overflow:hidden}.screen iframe{transform-origin:0 0;background:#000;border:0;position:absolute;top:0;left:0}.grip{z-index:2;appearance:none;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,#0000 0 46%,#f4efe68c 46% 100%);border:0;border-radius:0 0 10px;width:22px;height:22px;margin:0;padding:0;display:block;position:absolute;bottom:0;right:0}.grip:hover,.grip:focus-visible{background:linear-gradient(135deg, transparent 0 46%, var(--accent) 46% 100%)}.grip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.veil{color:var(--ink);font:inherit;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:linear-gradient(#0000001f,#0000008c);border:0;margin:0;padding:0;position:absolute;inset:0}.veil span{border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);color:var(--accent);background:#0c0b09b8;border-radius:999px;padding:8px 14px;font-size:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.veil:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.keys{color:var(--muted);margin:12px 8px 0;font-size:12px;line-height:1.6}kbd{color:var(--ink);font-family:inherit}.samples{min-width:0}.tabbar{border-bottom:1px solid #2c2822;justify-content:space-between;align-items:baseline;gap:16px;min-width:0;display:flex}.tabs{flex:none;gap:4px;display:flex}.tabs button{color:var(--muted);font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin:0;padding:10px 14px;font-size:12px}.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}.tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.tab-path{letter-spacing:.04em;text-transform:none;align-items:baseline;gap:5px;min-width:0;font-size:12px;text-decoration:none;display:inline-flex;overflow:hidden}.tab-path span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.tab-path svg{fill:none;stroke:currentColor;stroke-width:1.2px;stroke-linecap:square;stroke-linejoin:miter;flex:none;width:11px;height:11px;position:relative;top:1px}a.tab-path:hover span,a.tab-path:focus-visible span{text-decoration:underline}.sample{margin-top:12px}pre.code{color:#d9d1c5;tab-size:2;background:#100e0c;border:1px solid #2c2822;border-radius:14px;max-height:min(70vh,640px);margin:0;padding:16px 18px;font-size:12px;line-height:1.55;overflow:auto}pre.code .c{color:#6f675c}pre.code .s{color:#e7c07b}pre.code .k{color:#d392ff}@media (width<=900px){.layout{grid-template-columns:1fr}.stage{position:static}}