:root{color-scheme:dark;--bg:#17191b;--ink:#f2f3f4;--muted:#a3a8ad;--line:#35393d;--accent:#bccdde;font-family:"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:var(--accent);color:var(--bg)}
.page{width:min(1120px,calc(100% - 112px));min-height:100svh;margin-inline:auto;display:flex;flex-direction:column}.skip-link{position:fixed;top:1rem;left:1rem;z-index:5;padding:.75rem 1rem;background:var(--ink);color:var(--bg);transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:116px;border-bottom:1px solid var(--line)}.wordmark{font-size:1.125rem;font-weight:550;letter-spacing:-.035em}.back-link{font-size:.875rem;color:var(--muted);padding:12px 0}.back-link span{margin-left:12px}a:hover{color:var(--accent)}
main{flex:1}.introduction{padding:70px 0 62px}.eyebrow{font-size:.875rem;color:var(--muted);margin:0 0 22px}h1{font-size:clamp(2.75rem,7vw,5.5rem);line-height:1.12;font-weight:400;letter-spacing:-.06em;margin:0}.intro-copy{font-size:1.375rem;letter-spacing:-.025em;margin:25px 0 8px}.intro-detail{color:var(--muted);margin:0;max-width:42ch}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:25px;margin-bottom:24px}h2{font-size:1rem;font-weight:500;margin:0}.section-heading span{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0 0 80px;padding:0;gap:18px}.games li{display:flex}.game{display:flex;flex-direction:column;width:100%;padding:22px 20px 24px;border:1px solid var(--line);border-radius:3px;transition:border-color .18s,background .18s}.game:hover{border-color:#747b81;background:#1d2023;color:var(--ink)}.game-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.kind{font-size:.75rem;color:var(--muted)}.arrow{font-size:1.25rem;color:var(--muted)}.game-symbol{width:100%;height:72px;display:block;margin:32px 0}.crosswise{color:#aebed0}.lamps{color:#d3c3a3}.offcut{color:#afbdb0}.seams{color:#c4b5c9}h3{font-size:1.4rem;line-height:1.4;font-weight:500;letter-spacing:-.035em;margin:0 0 10px}.game p{color:var(--muted);font-size:.9375rem;line-height:1.65;margin:0 0 26px}.play{display:block;margin-top:auto;font-size:.8125rem;color:var(--accent)}.game:hover .play{text-decoration:underline;text-underline-offset:4px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);padding:25px 0 32px;font-size:.8125rem;color:var(--muted)}footer a span{margin-left:6px}
@media(max-width:1000px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}.game-symbol{width:120px;align-self:center}.game{padding:26px}.game p{max-width:30ch}}
@media(max-width:700px){.page{width:calc(100% - 48px)}.site-header{min-height:86px}.introduction{padding:48px 0 42px}.intro-copy{font-size:1.2rem}.games{gap:14px;margin-bottom:52px}.game{padding:20px}.wordmark{font-size:1rem}}
@media(max-width:440px){.games{grid-template-columns:1fr}.game{padding:24px}.game-symbol{margin:24px 0}.game p{max-width:none}h1{font-size:clamp(2.5rem,12vw,3.3rem)}footer{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}