:root{--bg:#f3f5fb;--surface:#fff;--fg:#141a2b;--muted:#5a6380;--line:#dde2ef;--accent:#3d5afe;--circle:#ef4d6b;--square:#2bb3a3;--triangle:#f5a524;--cross:#7c5cff;--display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;--body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, Menlo, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1120;--surface:#161b2e;--fg:#e9ecf6;--muted:#9aa3c0;--line:#262d47;--accent:#8c9cff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0d1120;--surface:#161b2e;--fg:#e9ecf6;--muted:#9aa3c0;--line:#262d47;--accent:#8c9cff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font:17px/1.6 var(--body)}.wrap{padding:0 20px;gap:56px;max-width:760px;margin:0 auto;padding-block:28px 64px;display:grid}a{color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}header.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{font:800 1.15rem/1 var(--display);letter-spacing:-.01em;color:var(--fg);align-items:center;gap:10px;text-decoration:none;display:flex}.mark{grid-template-columns:repeat(2,1fr);gap:3px;width:26px;height:26px;display:grid}.mark i{border-radius:3px}.mark i:first-child{background:var(--circle);border-radius:50%}.mark i:nth-child(2){background:var(--square)}.mark i:nth-child(3){background:var(--triangle)}.mark i:nth-child(4){background:var(--cross)}nav{gap:18px;font-size:.95rem;display:flex}nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--fg)}.intro h1{font:800 clamp(2.1rem, 6vw, 3.2rem)/1.05 var(--display);letter-spacing:-.025em;text-wrap:balance;margin:0 0 14px}.intro p{color:var(--muted);max-width:54ch;margin:0;font-size:1.1rem}.game{background:var(--surface);border:1px solid var(--line);border-radius:18px;grid-template-columns:1fr auto;align-items:center;gap:28px;padding:28px;display:grid}.game>div{min-width:0}.eyebrow{font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.game h1,.game h2{font:800 2rem/1.1 var(--display);letter-spacing:-.02em;margin:8px 0 10px}.game p{margin:0 0 14px}.facts{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.facts li{font:500 .78rem/1 var(--mono);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 10px}section.doc h2{font:800 1.7rem/1.15 var(--display);letter-spacing:-.02em;margin:0 0 6px}section.doc h3{font:700 1.05rem/1.3 var(--body);margin:26px 0 6px}section.doc p,section.doc li{max-width:65ch}section.doc ul{margin:6px 0;padding-left:1.2em}.updated{font:500 .8rem/1 var(--mono);color:var(--muted);margin-bottom:18px}.contact{background:var(--surface);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:16px 18px;display:flex}.contact code{font:500 .95rem/1.2 var(--mono);-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}button.copy{font:700 .85rem/1 var(--body);border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;border-radius:8px;padding:9px 14px}button.copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}footer{color:var(--muted);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:20px;font-size:.9rem;display:flex}.section-title{font:800 1.7rem/1.15 var(--display);letter-spacing:-.02em;margin:8px 0 18px}.kinds{grid-template-columns:repeat(2,1fr);gap:14px;margin:0;padding:0;list-style:none;display:grid}.kinds li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}.kinds h3{font:700 1.05rem/1.3 var(--body);margin:12px 0 4px}.kinds p{color:var(--muted);margin:0;font-size:.95rem}.dot{border-radius:4px;width:18px;height:18px;display:block}.dot.circle{background:var(--circle);border-radius:50%}.dot.square{background:var(--square)}.dot.triangle{background:var(--triangle);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.dot.cross{background:var(--cross);clip-path:polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%);border-radius:0}@media (max-width:560px){.kinds{grid-template-columns:1fr}.game{grid-template-columns:1fr;padding:22px}}body{margin:0}nav a[aria-current=page]{color:var(--fg);font-weight:700}.doc h1{font:800 clamp(1.9rem, 5vw, 2.5rem)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 6px}a.copy{font:700 .85rem/1 var(--body);border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:8px;padding:9px 14px;text-decoration:none}body{background-image:radial-gradient(color-mix(in srgb, var(--line) 85%, transparent) 1.2px, transparent 1.2px);background-size:24px 24px;background-attachment:fixed;overflow-x:clip}.wrap{gap:72px;max-width:880px}header.top{z-index:3;position:relative}.mark i{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}.brand:hover .mark i:first-child{transform:translate(-2px,-2px)scale(1.1)}.brand:hover .mark i:nth-child(2){transform:translate(2px,-2px)rotate(90deg)}.brand:hover .mark i:nth-child(3){transform:translate(-2px,2px)rotate(-120deg)}.brand:hover .mark i:nth-child(4){transform:translate(2px,2px)rotate(180deg)scale(.9)}nav a{padding-block:4px;transition:color .2s;position:relative}nav a:after{content:"";background:var(--accent);transform-origin:100%;border-radius:2px;height:2px;transition:transform .3s cubic-bezier(.65,0,.35,1);position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}nav a:hover:after,nav a[aria-current=page]:after{transform-origin:0;transform:scaleX(1)}.intro{align-content:center;min-height:min(62vh,560px);padding-block:40px 20px;display:grid;position:relative}.intro h1{z-index:1;letter-spacing:-.04em;pointer-events:none;max-width:13ch;font-size:clamp(2.7rem,8.4vw,5.2rem);line-height:.98;position:relative}.intro .lede{z-index:1;pointer-events:none;font-size:1.2rem;position:relative}.word{margin-right:.22em;display:inline-block}.word.hl{background:linear-gradient(90deg, var(--circle), var(--triangle), var(--square), var(--cross), var(--circle));color:#0000;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;padding-right:.06em;font-style:italic;position:relative}.word.hl:after{content:"";background:inherit;transform-origin:0;background-size:300% 100%;border-radius:1em;height:.12em;position:absolute;bottom:-.04em;left:0;right:.1em}.playfield{z-index:0;pointer-events:none;width:100vw;position:absolute;top:-110px;bottom:-40px;left:50%;transform:translate(-50%)}.playfield .body{pointer-events:auto;cursor:pointer;will-change:transform;place-items:center;display:grid;position:absolute}.playfield.live .body{top:0!important;left:0!important}.playfield .body svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px color-mix(in srgb, var(--c) 35%, transparent));transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .25s}.playfield .body:hover svg{transform:scale(1.15)}.playfield .body i{background:var(--c);opacity:0;pointer-events:none;border-radius:50%;width:7px;height:7px;position:absolute}.playfield .body.popped{pointer-events:none}.playfield .body.popped svg{opacity:0;transform:scale(1.7)}.playfield .body.popped i{animation:.6s cubic-bezier(.2,.7,.3,1) both burst}@keyframes burst{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1.3)}to{opacity:0;transform:rotate(var(--a)) translateX(64px) scale(.3)}}.section-title{font-size:clamp(1.9rem,4.4vw,2.6rem)}.kinds{perspective:1000px;gap:16px}.kinds li{--c:var(--accent);--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry));border-radius:18px;padding:26px 24px 24px;transition:transform .25s ease-out,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}.kinds li.circle{--c:var(--circle)}.kinds li.square{--c:var(--square)}.kinds li.triangle{--c:var(--triangle)}.kinds li.cross{--c:var(--cross)}.kinds li:before{content:"";background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%);opacity:0;pointer-events:none;transition:opacity .3s;position:absolute;inset:0}.kinds li:hover{border-color:color-mix(in srgb, var(--c) 55%, var(--line));box-shadow:0 18px 40px -18px color-mix(in srgb, var(--c) 55%, transparent)}.kinds li:hover:before{opacity:1}.kinds li>*{position:relative}.kinds h3{font:800 1.3rem/1.2 var(--display);letter-spacing:-.01em;margin-top:18px}.kinds .num{font:500 .8rem/1 var(--mono);color:var(--muted);transition:color .3s;position:absolute;top:22px;right:22px}.kinds li:hover .num{color:var(--c)}.dot{border-radius:8px;width:36px;height:36px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.kinds li.circle:hover .dot{animation:.7s cubic-bezier(.3,0,.3,1) bounce}.kinds li.square:hover .dot{transform:rotate(90deg)scale(1.1)}.kinds li.triangle:hover .dot{animation:.6s ease-in-out wobble}.kinds li.cross:hover .dot{transform:rotate(180deg)scale(1.1)}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}35%{transform:translateY(-12px)scale(.92,1.08)}70%{transform:translateY(0)scale(1.12,.88)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}.marquee{background:var(--fg);width:100vw;color:var(--bg);z-index:2;margin:-24px 0 -40px calc(50% - 50vw);padding:14px 0;position:relative;overflow:hidden;transform:rotate(-2deg);box-shadow:0 10px 30px -12px #00000059}.marquee .track{width:max-content;display:flex}.marquee .beat{font:800 clamp(1.4rem, 3.4vw, 2.1rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;align-items:center;gap:.5em;padding-right:.5em;display:inline-flex}.marquee svg{width:.85em;height:.85em}.game{--panel:#10142a;isolation:isolate;background:var(--panel);color:#eef1fb;border:1px solid #262d4d;border-radius:26px;padding:clamp(28px,5vw,48px);position:relative;overflow:hidden}.game:before{content:"";z-index:-2;background:conic-gradient(from 0deg, color-mix(in srgb, var(--circle) 45%, transparent), transparent 22%, color-mix(in srgb, var(--cross) 50%, transparent) 40%, transparent 58%, color-mix(in srgb, var(--square) 40%, transparent) 76%, transparent);filter:blur(60px);opacity:.55;position:absolute;inset:-40%}.game:after{content:"";z-index:-1;background:radial-gradient(320px circle at var(--mx,80%) var(--my,50%), #ffffff17, transparent 70%);position:absolute;inset:0}.game .eyebrow{color:#a5aed0}.game h1,.game h2{letter-spacing:-.035em;font-size:clamp(2.4rem,6vw,3.4rem)}.game p{color:#c9cfe6}.game a{color:#b4c0ff;text-underline-offset:3px}.game a:hover{color:#fff}.loader{aspect-ratio:1;place-items:center;width:150px;display:grid;position:relative}.loader span{border:2px solid #ffffff14;border-radius:50%;position:absolute}.loader .r1{border-top-color:#eef1fb;inset:0}.loader .r2{border-right-color:var(--accent);inset:20px}.loader .r3{border-bottom-color:#a5aed0;inset:40px}.loader .core{background:#eef1fb;border:0;width:22px;height:22px;position:static;box-shadow:0 0 24px 4px #8c9cff80}@media (max-width:560px){.loader{justify-self:start;width:110px}.intro{min-height:0;padding-block:56px 24px}.playfield .body{opacity:.6}}@media (prefers-reduced-motion:no-preference){.word{animation:.8s cubic-bezier(.2,.8,.2,1) both rise;animation-delay:calc(var(--i) * 70ms + .1s)}.word.hl{animation:rise .8s cubic-bezier(.2, .8, .2, 1) both calc(var(--i) * 70ms + .1s), shimmer 6s linear infinite}.word.hl:after{animation:.7s cubic-bezier(.65,0,.35,1) 1s both draw,6s linear infinite shimmer}.intro .lede{animation:.8s ease-out .75s both fade-up}.playfield:not(.live) .body svg{animation:6s ease-in-out infinite alternate float}.marquee .track{animation:28s linear infinite ticker}.marquee:hover .track{animation-duration:70s}.game:before{animation:18s linear infinite spin}.loader .r1{animation:2.4s linear infinite spin}.loader .r2{animation:1.8s linear infinite reverse spin}.loader .r3{animation:1.2s linear infinite spin}.loader .core{animation:1.8s ease-in-out infinite pulse}.motion [data-reveal]{opacity:0;transition:opacity .7s ease-out,translate .8s cubic-bezier(.2,.8,.2,1),scale .8s cubic-bezier(.2,.8,.2,1),transform .25s ease-out,border-color .3s,box-shadow .3s;transition-delay:calc(var(--i,0) * 90ms);translate:0 34px;scale:.97}.motion [data-reveal].in{opacity:1;translate:0;scale:1}.motion .marquee{animation:.8s ease-out both fade-up}}@keyframes rise{0%{opacity:0;transform:translateY(.7em)rotate(6deg)}to{opacity:1;transform:none}}@keyframes fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes shimmer{to{background-position:300% 0}}@keyframes draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes float{0%{transform:translateY(-8px)rotate(-8deg)}to{transform:translateY(8px)rotate(8deg)}}@keyframes ticker{to{transform:translate(-50%)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.6;transform:scale(.7)}}
