@font-face{font-family:Prata;src:url(/fonts/Prata-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--ground:#12110e;--card:#1c1a16;--paper:#f4f1ea;--dim:rgb(244 241 234 / .66);--faint:rgb(244 241 234 / .42);--rule:rgb(244 241 234 / .1);--edge:rgb(244 241 234 / .12);--glass:rgb(24 22 19 / .55);--blur:blur(20px) saturate(125%);--u:1dvh}
*{box-sizing:border-box}html{background:var(--ground)}body{margin:0;font:400 18px/1.4 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--paper);background:var(--ground)}
a{color:inherit;text-decoration:none}p,h1,h2,h3,dl,dd,figure{margin:0}img{display:block}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:12px}
html.lock,html.lock body{overflow:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.asc{position:fixed;inset:0;z-index:0;pointer-events:none}.asc canvas{display:block}

/* The table: a row of screens. Only the script moves it. */
.desk{height:100dvh;overflow:hidden}
.tb{position:fixed;inset:0;z-index:1;display:flex;overflow:hidden;outline:0}
.pan{position:relative;flex:none;width:100vw;height:100dvh}

/* The opening */
.hero{position:absolute;left:6%;top:19%;width:36%}
.hero .wm{font:400 calc(21*var(--u))/.92 Prata,serif;letter-spacing:-.015em;margin-left:-.04em}
.hero .wm{white-space:nowrap}
.wm .mk{display:none;width:.8em;height:.8em;vertical-align:baseline;margin-right:.255em;overflow:visible}
.hero .tag{font-size:calc(3.1*var(--u));line-height:1.3;max-width:15em;text-wrap:balance;margin-top:calc(2.4*var(--u))}
.hero .why{font-size:calc(2.05*var(--u));line-height:1.65;color:var(--dim);max-width:25em;margin-top:calc(2.2*var(--u));text-wrap:pretty}
.why-m{display:none}
.hero .blurb{font-size:calc(2.2*var(--u));line-height:1.6;color:rgb(244 241 234 / .72);max-width:24em;margin-top:calc(1.2*var(--u))}
.hero .go{margin-top:calc(2*var(--u))}
/* The signup: a frosted pill with the field and a paper button inside it */

/* Kind names */
.lbl{position:absolute;left:5%;top:5.5%;display:flex;align-items:baseline;gap:calc(1.4*var(--u));font:400 calc(5.4*var(--u))/1 Prata,serif;white-space:nowrap}
.lbl span,.lbl i{font:400 calc(1.3*var(--u))/1 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-style:normal}

/* A card on the table */
.pc{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:min(calc(var(--w)*1vw),calc(var(--w)*1.75dvh));rotate:var(--r);display:block;background:var(--card);color:var(--paper);padding:calc(1.1*var(--u)) calc(1.1*var(--u)) 0;border-radius:calc(1.6*var(--u));border:1px solid rgb(244 241 234 / .07);user-select:none;-webkit-user-select:none;
 box-shadow:0 1px 0 rgb(255 255 255 / .04) inset,0 calc(1*var(--u)) calc(2*var(--u)) calc(-.4*var(--u)) rgb(0 0 0 / .5),0 calc(3*var(--u)) calc(5*var(--u)) calc(-2*var(--u)) rgb(0 0 0 / .6);
 transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,rotate .55s cubic-bezier(.2,.7,.2,1)}
.ph{display:block;border-radius:calc(.8*var(--u));overflow:hidden;background:#0e0d0b}.ph img{width:100%;height:auto}
/* A screenshot gets a quiet window bar, so it reads as a site and not a print */
.bar{display:flex;align-items:center;gap:calc(.45*var(--u));height:calc(2.2*var(--u));padding:0 calc(.9*var(--u));background:#262420;font-style:normal}
.bar b{width:calc(.7*var(--u));height:calc(.7*var(--u));border-radius:50%;background:rgb(244 241 234 / .22)}
.bar em{margin-left:calc(1*var(--u));font:400 calc(1.05*var(--u))/1 Jost,sans-serif;letter-spacing:.04em;color:var(--faint);font-style:normal}
.pm{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:calc(1.1*var(--u)) calc(.3*var(--u)) calc(.2*var(--u))}.pm b{font:400 calc(2.5*var(--u))/1.1 Prata,serif;white-space:nowrap}
.pm small{font-size:calc(1.15*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.pl{display:block;font-size:calc(1.45*var(--u));line-height:1.35;color:var(--dim);padding:0 calc(.3*var(--u)) calc(1.4*var(--u))}
.pc:hover,.pc:focus-visible{translate:0 calc(-1*var(--u));rotate:calc(var(--r)*.35);box-shadow:0 1px 0 rgb(255 255 255 / .05) inset,0 calc(2*var(--u)) calc(3*var(--u)) calc(-.6*var(--u)) rgb(0 0 0 / .55),0 calc(6*var(--u)) calc(8*var(--u)) calc(-3*var(--u)) rgb(0 0 0 / .65)}
.pc.gone{visibility:hidden}
.kc .pm b{font-size:calc(3.4*var(--u))}
.pan-archive .pm{flex-direction:column;align-items:flex-start;gap:calc(.6*var(--u))}.pan-archive .pm small{font-size:calc(1.05*var(--u))}.pan-archive .pl{padding-top:calc(.4*var(--u))}.kc{padding-bottom:calc(.6*var(--u))}

/* The map: a frosted pill with a light that slides to where you are */
.map{position:fixed;z-index:5;left:50%;translate:-50% 0;bottom:calc(3.2*1dvh);display:flex;gap:2px;align-items:center;padding:6px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge);white-space:nowrap}
.map button{position:relative;z-index:1;padding:11px 18px;border-radius:999px;color:var(--dim);font:400 12px/1 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:color .4s}
.map button[data-go=start]{font:400 17px/1 Prata,serif;letter-spacing:0;text-transform:none;padding:10px 18px}
.map .on,.map button:hover{color:var(--paper)}
.map .ind{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:rgb(244 241 234 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06);transition:transform .7s cubic-bezier(.16,1,.3,1),width .7s cubic-bezier(.16,1,.3,1),scale .35s cubic-bezier(.2,1.4,.4,1),background .3s,box-shadow .3s}
/* Hold the dock and slide: the light follows your finger like a drop of glass, and lets go where you lift */
.map{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:scale .35s cubic-bezier(.2,1.4,.4,1)}
.map.drag{scale:1.04}.map.drag .ind{scale:1.14 1.22;background:rgb(244 241 234 / .17);box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),inset 0 -1px 0 rgb(255 255 255 / .06),0 8px 24px -6px rgb(0 0 0 / .55);-webkit-backdrop-filter:blur(6px) saturate(160%) brightness(1.15);backdrop-filter:blur(6px) saturate(160%) brightness(1.15);transition:transform .14s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,1,.3,1),scale .35s cubic-bezier(.2,1.4,.4,1),background .3s,box-shadow .3s}
.map.drag button{transition:color .15s}

/* An open work: the card on the left, a short brief on the right */
.scrim{position:fixed;inset:0;z-index:20;background:rgb(8 7 6 / .55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}.scrim.in{opacity:1}
.fly{position:fixed;z-index:30;margin:0;pointer-events:none;transition:none;padding:14px 14px 0;border-radius:20px;--u:1dvh}
.fly.flying{transition:left .6s cubic-bezier(.16,1,.3,1),top .6s cubic-bezier(.16,1,.3,1),width .6s cubic-bezier(.16,1,.3,1),rotate .6s cubic-bezier(.16,1,.3,1)}
.fly .pm{flex-wrap:wrap;row-gap:4px}.fly .pm small{white-space:normal}.shot{display:none}.fly .ph{border-radius:10px}.fly .pm b{font-size:clamp(20px,2.4vw,30px)}.fly .pm small{font-size:12px}.fly .pl{font-size:15px}.fly .bar{height:22px;gap:6px;padding:0 12px}.fly .bar b{width:8px;height:8px}.fly .bar em{font-size:12px}
.br{position:fixed;z-index:40;top:2.4vh;bottom:2.4vh;right:1.6vw;width:min(44vw,620px);overflow-y:auto;overscroll-behavior:contain;background:rgb(28 26 22 / .94);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgb(244 241 234 / .08);border-radius:28px;padding:clamp(26px,4.4vh,44px) clamp(26px,3vw,44px) 36px;
 box-shadow:0 40px 80px -30px rgb(0 0 0 / .8);translate:calc(100% + 4vw) 0;transition:translate .65s cubic-bezier(.16,1,.3,1);outline:0;scrollbar-width:thin;scrollbar-color:rgb(244 241 234 / .2) transparent;display:flex;flex-direction:column}
.br.in{translate:0 0}.br[hidden]{display:none}
.kick{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-right:56px}.kick span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--faint);margin-right:10px;vertical-align:middle}
.br .bn{font:400 clamp(44px,min(5vw,8vh),76px)/1.02 Prata,serif;letter-spacing:-.01em;margin:clamp(10px,2vh,18px) 0 10px -.02em}
.br .ln{font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:rgb(244 241 234 / .88);max-width:26em}
.br .sig{font:400 clamp(17px,1.4vw,19px)/1.5 Prata,serif;color:rgb(244 241 234 / .6);margin-top:12px;max-width:26em}
.lk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(18px,3vh,26px)}
.go{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;border-radius:999px;background:var(--paper);color:#171512;font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .3s}.go:hover{background:#fff}
.go2{display:inline-flex;padding:11px 18px;border-radius:999px;border:1px solid rgb(244 241 234 / .2);font-size:14px;white-space:nowrap;transition:background .3s}.go2:hover{background:rgb(244 241 234 / .06)}
.why{margin-top:clamp(24px,4vh,36px)}.why h3,.facts dt{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.why p{font-size:clamp(15px,1.15vw,17px);line-height:1.62;margin-top:8px;max-width:32em}
.rl{list-style:none;padding:0;margin-top:10px;max-width:34em;counter-reset:r;border-top:1px solid var(--rule)}.rl li{counter-increment:r;display:grid;grid-template-columns:1.6em 1fr;padding:9px 0;border-bottom:1px solid var(--rule);font-size:clamp(14.5px,1.08vw,16px);line-height:1.5}.rl li::before{content:counter(r);color:var(--dim);font-size:.82em;padding-top:.15em}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:clamp(20px,3.4vh,30px);padding-top:clamp(16px,2.6vh,22px);border-top:1px solid var(--rule)}.facts dd{font-size:14.5px;line-height:1.45;margin-top:5px}
.plate{display:flex;gap:14px;align-items:center;margin-top:auto;padding-top:clamp(22px,4vh,34px)}.plate img{width:84px;height:auto;border-radius:8px;flex:none}
.plate figcaption{font-size:13.5px;line-height:1.5;color:var(--dim)}.plate b{font-weight:500;color:var(--paper);margin-right:4px}
/* A group of games in a brief: one row per game, opening it on its own site */
.gl{list-style:none;padding:0;margin:clamp(20px,3.4vh,30px) 0 0;border-top:1px solid var(--rule)}
.gl a{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.gl img{width:104px;height:auto;border-radius:8px}
.gt b{display:block;font:400 21px/1.15 Prata,serif}.gt>span{display:block;font-size:14px;line-height:1.4;color:var(--dim);margin-top:4px}
.gl .go2{padding:8px 14px;font-size:13px}.gl a:hover .go2{background:rgb(244 241 234 / .06)}
.bx{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgb(244 241 234 / .07);transition:background .3s}.bx:hover{background:rgb(244 241 234 / .14)}.bx svg{width:14px;height:14px;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;fill:none}

/* Phones: one long column, same order */
@media (orientation:portrait),(max-width:699px){
 :root{--u:1vw}
 /* Full bleed: the character ground is part of the page, so it runs under the browser's own bars */
 body{position:relative}body::before{position:absolute}.asc.in-page{position:absolute;inset:0 0 auto 0}
 .desk{height:auto;overflow:visible}html,body{overflow-x:clip}
 .tb{position:relative;inset:auto;display:block;overflow:visible;padding-bottom:calc(30vw + env(safe-area-inset-bottom))}
 .pan{width:auto;height:auto;display:flex;flex-direction:column;padding:0 6vw}
 .hero{position:relative;left:auto;top:auto;width:auto;padding-top:max(16vw,env(safe-area-inset-top))}.hero .wm{font-size:25vw}.wm .mk{display:inline-block}.hero .tag{font-size:5.6vw;margin-top:3.4vw;max-width:none}.hero .why{display:none}.why-m{display:block;font-size:4.4vw;line-height:1.65;color:var(--dim);margin:12vw 2vw 0}.hero .blurb{font-size:4.2vw;margin-top:2vw}
 /* No grain layer on phones: it lightened the page against Safari's own top strip */
 body::before{display:none}
 .kinds{display:flex;flex-direction:column;gap:5vw;margin-top:12vw}
 .kinds .kc{position:relative;left:auto;top:auto;width:auto;margin:0;padding:2.4vw;border-radius:5vw;display:grid;grid-template-columns:34vw 1fr;align-items:center;column-gap:5vw}.kinds .kc .ph{border-radius:3vw}
 .kinds .kc:nth-child(1){rotate:-1deg;margin-right:6vw}.kinds .kc:nth-child(2){rotate:1deg;margin-left:6vw}.kinds .kc:nth-child(3){rotate:-.6deg;margin-right:3vw}.kinds .kc:nth-child(4){rotate:.8deg;margin-left:4vw}
 .kc .pm{flex-direction:column;align-items:flex-start;gap:1.6vw;padding:0}.kc .pm b{font-size:8vw}.kc .pm small{font-size:2.8vw}
 .lbl{position:relative;left:auto;top:auto;margin:22vw 0 9vw;font-size:11vw;gap:3vw;align-self:flex-start}.lbl span,.lbl i{font-size:2.8vw}
 .pan:not(.pan-start)+.pan[data-k] .lbl{margin-top:22vw}
 /* One column: a section that spans two wide screens keeps one heading */
 .lbl.cont{display:none}
 .lbl i[data-n]{font-size:0}.lbl i[data-n]::after{content:attr(data-n);font-size:2.8vw}
 .pc{position:relative;left:auto;top:auto;width:80vw;margin:0 2vw 11vw;border-radius:4.4vw;padding:2.6vw 2.6vw 0}.pc .ph{border-radius:2.4vw}.pc .pm b{font-size:6vw}.pc .pm small{font-size:2.6vw}.pc .pl{font-size:3.6vw;padding-bottom:3.6vw}
 .pan-archive .pc{width:66vw}
 .pan>.pc:nth-of-type(even){align-self:flex-end}
 .bar{height:5vw;gap:1.2vw;padding:0 2.4vw}.bar b{width:1.6vw;height:1.6vw}.bar em{font-size:2.4vw;margin-left:2vw}
 .map{bottom:calc(12px + env(safe-area-inset-bottom))}.map button{padding:11px 12px;font-size:11px;letter-spacing:.08em}.map button[data-go=start]{padding:10px 13px;font-size:16px}
 .shot{display:block;margin:0 0 22px}.shot img{width:100%;height:auto;border-radius:18px}
 .br .bx{top:calc(24px + 12px);right:calc(6vw + 12px);background:rgb(18 17 14 / .55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgb(244 241 234 / .14)}.plate img{display:none}
 .br{top:calc(env(safe-area-inset-top) + 10px);left:0;right:0;bottom:0;width:auto;border-radius:28px 28px 0 0;border-bottom:0;padding:24px 6vw calc(40px + env(safe-area-inset-bottom));translate:0 105%}
 .gl a{grid-template-columns:76px minmax(0,1fr) auto;gap:12px}.gl img{width:76px}.gt b{font-size:5vw}.gt>span{font-size:3.4vw}
 .br .bn{font-size:13vw}.facts{grid-template-columns:1fr}.bx{top:14px;right:14px}
 .pc.fly{position:fixed;margin:0;--u:1vw}.fly .pl{display:none}
}
@media (prefers-reduced-motion:reduce){.pc,.br,.scrim,.fly.flying,.map .ind{transition:none!important}}

.map .mk2{display:inline-block;width:.8em;height:.8em;vertical-align:baseline;margin-right:.3em;overflow:visible}
.map{transition:scale .35s cubic-bezier(.2,1.4,.4,1),opacity .4s ease,translate .5s cubic-bezier(.16,1,.3,1)}
.map.away{opacity:0;translate:-50% 24px;pointer-events:none}