:root{
  --paper:#eef1f5; --ink:#0e1a2b; --muted:#5b6779; --line:#d3d9e3; --tile:#ffffff;
  --accent:#ff4f3b; --accent-ink:#8a1d12;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
main{max-width:920px;margin:0 auto;padding:56px 24px 88px}
a{color:inherit}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* top line */
.top{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:14px;margin-bottom:56px}
.top b{color:var(--ink);font-weight:600}

/* hero */
.hero{display:grid;grid-template-columns:auto 1fr;gap:16px 56px;align-items:end;margin-bottom:64px}
.mark rect{fill:var(--ink);shape-rendering:crispEdges}
.mark rect:nth-child(4n+3){fill:var(--accent)}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1;letter-spacing:-.025em;font-weight:700;margin:0 0 14px}
.hero p{margin:0;color:var(--muted);font-size:18px;max-width:42ch;line-height:1.45}
@media (prefers-reduced-motion:no-preference){
  .mark rect{opacity:0;animation:pix .18s steps(1) forwards;animation-delay:calc(var(--i)*22ms)}
  @keyframes pix{to{opacity:1}}
}

/* game tiles */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;padding:0;margin:0}
.tile{display:grid;grid-template-columns:56px 1fr;gap:4px 18px;padding:20px 22px 20px 18px;
  background:var(--tile);border:1.5px solid var(--line);border-radius:6px;text-decoration:none;height:100%}
.tile:hover{border-color:var(--ink)}
.tile:active{transform:translateY(2px)}
.tile .icon{grid-row:1/span 3;width:56px;height:56px;border-radius:4px;background:var(--paper);
  display:grid;place-items:center;color:var(--ink)}
.tile:hover .icon{background:var(--accent);color:#fff}
.tile h2{font-size:18px;font-weight:650;margin:2px 0 0;line-height:1.2}
.tile p{margin:0;color:var(--ink);font-size:15px;line-height:1.4}
.tile .meta{color:var(--muted);font-size:13px;margin-top:6px}
.tile .meta em{font-style:normal;color:var(--accent-ink)}
.icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

h3{font-size:14px;font-weight:600;color:var(--muted);margin:48px 0 14px;padding-top:24px;border-top:1.5px solid var(--line)}
.src{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 32px}
.src li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.src span{color:var(--muted)}
.src a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.src a:hover{text-decoration-color:var(--ink)}

.note{margin-top:40px;color:var(--muted);font-size:15px;max-width:60ch}
footer{margin-top:56px;padding-top:16px;border-top:1.5px solid var(--line);color:var(--muted);font-size:14px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* game pages */
.back{display:inline-block;margin-bottom:28px;font-size:15px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.page-h{font-size:36px;line-height:1.05;letter-spacing:-.02em;margin:0 0 10px}
header p{margin:0;color:var(--muted);max-width:52ch}
.stage{display:block;width:100%;max-width:600px;aspect-ratio:3/2;border:1.5px solid var(--line);border-radius:6px;background:#fff;outline:none}
.stage:focus-visible{border-color:var(--accent)}
.hud{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin-top:10px;max-width:600px}
.controls{color:var(--muted);font-size:14px;margin-top:20px;max-width:56ch}

@media (max-width:640px){
  main{padding:32px 18px 64px}
  .top{margin-bottom:36px}
  .hero{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
  .mark{width:160px;height:102px}
  .grid,.src{grid-template-columns:1fr}
}