/* nomadarcade.com in Showroom (guide codename Window Light), from the studio brand's direction B.
   One window's daylight, upper left. Every object stands on something and drops a soft shadow to the
   lower right. Nothing glows. Shared by the home page, every game page and the 404. showroom.py writes it
   into dist/assets/showroom/ with each font URL stamped ?v=<hash>. */

@font-face{font-family:"Mona Sans";src:url(/assets/showroom/fonts/mona-sans-var.woff2?v=ab721e50) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/assets/showroom/fonts/martian-mono-var.woff2?v=136b23ee) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

@property --lx{syntax:"<length-percentage>";inherits:true;initial-value:64%}

/* 1 · Tokens ------------------------------------------------------------------------------------ */
/* tokens:core · the same in both hours */
:root{
  --sans:"Mona Sans",sans-serif;
  --mono:"Martian Mono",monospace;
  --col:1200px;--gut:24px;
  /* Motion. site.js reads these when it starts, so the clock and the CSS run on the same numbers */
  --t-setdown:280ms;--t-stagger:60ms;--t-fade:160ms;--t-lift:220ms;--t-press:120ms;--t-light:900ms;
  --sd-drop:14px;--sd-shadow:1.3;--lift-rise:6px;--lift-tilt:3deg;--press-pill:.96;--press-obj:.985;--press-dark:6%;--roll-hold:42%;
  /* Sizes the rules keep: every tap target, and the smallest lockup and mark */
  --tap:44px;
  /* A Tile is this deep for its width, and its edge sweeps this far across for each unit down */
  --tile-d:.14;--tile-edge:.3;
  /* Masking tape, the In build finish */
  --tape:rgb(236 226 196/.92);--tape-2:rgb(226 214 178/.92);
  /* Each title's glaze, sampled from its own icon */
  --g-cannon-clash:#222A78;--g-thunk:#1F4337;--g-sky-chase:#CFE6F0;--g-scoot:#2A2F3C;--g-cupshot:#4C9F48;--g-swingaroo:#2E3370;
  --g-tall-order:#3D2E5E;--g-launch-lab:#F5B94F;--g-pose-guide:#121A2E;--g-cadrillo-voice:#2B58CA;--g-parcel-yard:#E6E3DC;
  --g-pack-perfect:#B9BDB2;--g-before-i-unpack:#57534B;--g-milestone:#57534B;
  /* Spring, damping 0.8, 1.5% overshoot, sampled from the closed form (site.js draws the same curve) */
  --spring:linear(0,.096 6.25%,.291 12.5%,.498 18.75%,.676 25%,.811 31.25%,.903 37.5%,.961 43.75%,.993 50%,1.009 56.25%,1.015 62.5%,1.015 68.75%,1.012 75%,1.006 87.5%,1);
  --ease-light:cubic-bezier(.45,0,.25,1);
  --grain: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'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h16M11.5 1.5 17.5 7l-6 5.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M19 7H3M8.5 1.5 2.5 7l6 5.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* tokens:day · Daylight */
:root{
  color-scheme:light;
  --wall:#F3F1EC;--floor:#E8E4DC;--plinth:#FBFAF7;--plinth-side:#E2DDD3;--raised:#FFFFFF;
  --line:#D8D2C7;--line-2:#BDB6A9;--ink:#1C1B18;--ink-2:#57534B;--on-ink:#FFFFFF;--ink-press:#000000;
  --kiln:#EC5418;--kiln-text:#B13A0A;--on-kiln:#1C1B18;--cobalt:#2747C8;--on-cobalt:#FFFFFF;
  --ok:#1E7A4C;--warn:#8A5A00;--bad:#C0281D;
  --shade:48 36 20;--mull:60 48 30;--pool:255 251 242;
  --plinth-hi:#FBFAF7;--plinth-lo:#F1EEE8;--lip-a:#F4F2ED;--lip-b:#FFFFFF;--edge-hi:#FFFFFF;
  --ledge-a:#FFFFFF;--ledge-b:#F6F4EF;--ledge-c:#E9E5DD;--ledge-lip-a:#EDEAE3;--ledge-lip-b:#FBFAF7;
  --floor-a:#ECE9E2;--floor-b:#E3DFD6;--mat:#FFFFFF;
  --na-ink:var(--ink);--na-accent:var(--kiln);--na-accent-2:var(--cobalt);--na-ground:var(--wall);
}

/* 2 · Base -------------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:104px;background:var(--wall)}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--sans);font-weight:430;font-stretch:100%;font-size:18px;line-height:1.6;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:var(--cobalt);text-decoration-thickness:1px;text-underline-offset:.18em}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance}
p{text-wrap:pretty}
.nw{white-space:nowrap}
button{font:inherit;color:inherit}
b,strong,th{font-weight:600}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
::selection{background:#F7C9B4;color:var(--ink)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:12px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:600;text-decoration:none;translate:0 -200%}
.skip:focus{translate:0 0}
/* viewport-fit=cover: on a phone held sideways the sides keep clear of the notch */
.wrap{width:min(var(--col),100% - 2 * max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)));margin-inline:auto}
@media (max-width:899px){body{font-size:17px}}

/* 3 · Type -------------------------------------------------------------------------------------- */
.kicker{font:620 12px/1.3 var(--sans);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance}
.hero-h{font-weight:680;font-size:clamp(40px,2.2vw + 32px,64px);line-height:1.02;letter-spacing:-.032em}
.h1{font-weight:640;font-size:clamp(36px,1.85vw + 29.4px,56px);line-height:1.04;letter-spacing:-.03em}
.h2{font-weight:640;font-size:clamp(30px,.95vw + 26.3px,40px);line-height:1.08;letter-spacing:-.024em}
.h3{font-weight:600;font-size:clamp(20px,.19vw + 19.3px,22px);line-height:1.2;letter-spacing:-.01em}
.hero-h,.h1,.h2{font-stretch:100%}
@media (min-width:900px){.hero-h,.h1,.h2{font-stretch:112%}}
.lead{font-size:clamp(17px,.1vw + 16.6px,18px);line-height:1.6;color:var(--ink-2);max-width:56ch}
.note{font-size:14px;line-height:1.45;letter-spacing:.005em;color:var(--ink-2)}
.plate{font:440 12px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-2);text-wrap:balance}
.count{font-weight:300;font-stretch:125%;font-size:clamp(44px,1.9vw + 37px,64px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.arw{display:inline-block;width:.95em;height:.68em;margin-left:.18em;vertical-align:-.02em;overflow:hidden;text-indent:200%;white-space:nowrap;background:currentColor;-webkit-mask:var(--arrow-r) center/contain no-repeat;mask:var(--arrow-r) center/contain no-repeat}
.arw-l{margin:0 .32em 0 0;-webkit-mask-image:var(--arrow-l);mask-image:var(--arrow-l)}
.arw-d{rotate:90deg;margin-left:.3em}

/* 4 · Pills ------------------------------------------------------------------------------------- */
.pill{--fill:var(--raised);--fg:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 20px;border:0;border-radius:999px;background:var(--fill);color:var(--fg);font:600 15px/1.1 var(--sans);font-stretch:100%;letter-spacing:-.003em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-fade) linear,scale var(--t-press) var(--spring)}
.pill:hover{background:color-mix(in oklab,var(--fill),#000 var(--press-dark))}
.pill:active{scale:var(--press-pill);background:color-mix(in oklab,var(--fill),#000 var(--press-dark))}
.pill-ink{--fill:var(--ink);--fg:var(--on-ink)}
.pill-ink:hover,.pill-ink:active{background:var(--ink-press)}
.pill-raised{--fill:var(--raised);box-shadow:inset 0 0 0 1px var(--line),8px 10px 18px -12px rgb(var(--shade)/.34)}
.pill-kiln{--fill:var(--kiln);--fg:var(--on-kiln);box-shadow:inset 0 1px 0 rgb(255 255 255/.28),8px 10px 18px -12px rgb(var(--shade)/.4)}
.pill-lg{min-height:52px;padding:0 26px;font-size:16px}
.pill-store{padding-left:8px;gap:12px}
.pill-store .chip{--s:36px}
.go{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cobalt);font-weight:600;font-size:15px;text-decoration:none}
.go:hover{text-decoration:underline}

/* 5 · Chip: an icon at button size ---------------------------------------------------------------- */
.chip{--s:28px;position:relative;display:block;flex:none;width:var(--s);height:var(--s);border-radius:24%;overflow:hidden;background:var(--c,#cfc8bc)}
.chip img{width:100%;height:100%;object-fit:cover}
.chip::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(0 0 0/.08),inset 1px 1px 0 rgb(255 255 255/.3)}

/* 6 · Objects ----------------------------------------------------------------------------------- */
/* An object stands on something: .obj isolates it so its contact shadow paints right under it. */
.obj{position:relative;isolation:isolate}
.cshadow{position:absolute;z-index:-1;left:6%;right:-12%;bottom:-5%;height:12%;border-radius:50%;filter:blur(5px);background:radial-gradient(closest-side,rgb(var(--shade)/.46),rgb(var(--shade)/.14) 62%,transparent);transform:skewX(-32deg) translateX(9%) scale(var(--sd-s,1));transform-origin:30% 50%;opacity:var(--sd-so,1);pointer-events:none}

/* Tile: an icon made into a satin tile, 14% as thick as it is wide, its edge swept lower right */
.tile{--d:calc(var(--w,96px)*var(--tile-d));--dx:calc(var(--d)*var(--tile-edge));--e1:color-mix(in oklab,var(--c),#000 16%);--e2:color-mix(in oklab,var(--c),#000 26%);--e3:color-mix(in oklab,var(--c),#000 36%);--e4:color-mix(in oklab,var(--c),#000 46%);
  position:relative;display:block;width:var(--w,96px);height:var(--w,96px);border-radius:22%;background:var(--c);
  box-shadow:calc(var(--dx)*.125) calc(var(--d)*.125) 0 var(--e1),calc(var(--dx)*.25) calc(var(--d)*.25) 0 var(--e1),calc(var(--dx)*.375) calc(var(--d)*.375) 0 var(--e2),calc(var(--dx)*.5) calc(var(--d)*.5) 0 var(--e2),calc(var(--dx)*.625) calc(var(--d)*.625) 0 var(--e3),calc(var(--dx)*.75) calc(var(--d)*.75) 0 var(--e3),calc(var(--dx)*.875) calc(var(--d)*.875) 0 var(--e4),var(--dx) var(--d) 0 var(--e4)}
.tile>img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgb(255 255 255/.30),transparent 42%,rgb(0 0 0/.14));mix-blend-mode:soft-light;box-shadow:inset 1.5px 1.5px 0 rgb(255 255 255/.36),inset -1px -1px 0 rgb(0 0 0/.12)}
.tile-obj{--w:96px;display:block;width:calc(var(--w)*(1 + var(--tile-d)*var(--tile-edge)));height:calc(var(--w)*(1 + var(--tile-d)))}
.tile-obj>.cshadow{left:2%;right:-16%;bottom:-6%;height:16%}

/* Stele: a portrait slab in the title's glaze, its screen set 4% deep, its Tile at its foot */
.stele{--w:200px;--ar:9/16;--side:calc(var(--w)*.05);--p:calc(var(--w)*.072);
  --e1:color-mix(in oklab,var(--c),#000 24%);--e2:color-mix(in oklab,var(--c),#000 40%);
  position:relative;display:flex;flex-direction:column;width:var(--w);padding:var(--p) var(--p) 0;border-radius:calc(var(--w)*.11);
  background:linear-gradient(104deg,rgb(255 255 255/.17),rgb(255 255 255/0) 34%,rgb(0 0 0/0) 64%,rgb(0 0 0/.16)),linear-gradient(180deg,rgb(255 255 255/.08),rgb(0 0 0/.06)),var(--c);
  box-shadow:inset 1.5px 1.5px 0 rgb(255 255 255/.3),inset -1px 0 0 rgb(0 0 0/.18),calc(var(--side)*.25) 0 0 var(--e1),calc(var(--side)*.5) 0 0 var(--e1),calc(var(--side)*.75) 0 0 var(--e2),var(--side) 0 0 var(--e2)}
.stele .screen{position:relative;aspect-ratio:var(--ar);border-radius:calc(var(--w)*.06);overflow:hidden;background:#0E0E0C}
.stele .screen>:is(video,img){width:100%;height:100%;object-fit:cover}
.stele .screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px rgb(0 0 0/.62),inset calc(var(--w)*.016) calc(var(--w)*.026) calc(var(--w)*.045) rgb(0 0 0/.42),inset -1px -1px 0 rgb(255 255 255/.16)}
.stele .foot{position:relative;display:flex;align-items:center;justify-content:center;height:calc(var(--w)*.3)}
.stele .foot{--tw:calc(var(--w)*.2)}
.stele .foot .tile{--w:var(--tw)}
.stele .vbtn{position:absolute;right:calc(var(--w)*.04);top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stele .vbtn::before{content:"";position:absolute;inset:9px;border-radius:50%;background:color-mix(in oklab,var(--c),#000 30%);box-shadow:inset 1px 1px 2px rgb(0 0 0/.5),0 1px 0 rgb(255 255 255/.22)}
.stele .vbtn svg{position:relative;width:12px;height:12px;fill:rgb(255 255 255/.9)}
.stele .vbtn .i-play{display:none}
.stele.is-paused .vbtn .i-play,.stele:not(.is-playing) .vbtn .i-play{display:block}
.stele.is-paused .vbtn .i-pause,.stele:not(.is-playing) .vbtn .i-pause{display:none}
.stele>.cshadow{left:0;right:-30%;bottom:-3.5%;height:7%}
.screen-note{position:absolute;inset:0;display:grid;place-items:center;padding:18%;text-align:center;font:430 14px/1.45 var(--sans);color:rgb(242 239 233/.82);background:radial-gradient(70% 50% at 50% 42%,#1d2742,#0b1020)}

/* Plinth: a ceramic box whose face is the card */
.plinth{position:relative;background:var(--grain),linear-gradient(180deg,var(--plinth-hi),var(--plinth-lo));border-radius:6px;box-shadow:inset 0 1px 0 var(--edge-hi),inset -12px 0 16px -12px rgb(var(--mull)/.16),28px 34px 48px -28px rgb(var(--mull)/.3)}
.plinth-top{position:absolute;left:0;right:0;bottom:100%;height:12px;background:linear-gradient(180deg,var(--lip-a),var(--lip-b));clip-path:polygon(2.2% 0,97.8% 0,100% 100%,0 100%);border-radius:2px 2px 0 0}
.plinth-top::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--edge-hi);opacity:.9}

/* Ledge: a long shelf. Its top takes the objects; its edge takes the labels */
.ledge{position:relative;height:18px;border-radius:3px;background:var(--grain),linear-gradient(180deg,var(--ledge-a) 0,var(--ledge-b) 30%,var(--ledge-c) 100%);box-shadow:inset 0 1px 0 var(--edge-hi),0 1px 0 rgb(var(--shade)/.08),18px 24px 30px -18px rgb(var(--shade)/.34)}
.ledge::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px;background:linear-gradient(180deg,var(--ledge-lip-a),var(--ledge-lip-b));clip-path:polygon(.8% 0,99.2% 0,100% 100%,0 100%)}

/* Light: the window's pool and the mullion shadows */
.sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(330px 420px at var(--lx) 46%,rgb(var(--pool)/.95),rgb(var(--pool)/.6) 38%,rgb(var(--pool)/0) 72%),
  linear-gradient(118deg,transparent 39%,rgb(var(--mull)/.045) 41% 43%,transparent 45% 57%,rgb(var(--mull)/.045) 59% 61%,transparent 63%),
  linear-gradient(180deg,var(--wall) 0,var(--wall) 64%,var(--floor-a) 72%,var(--floor) 80%,var(--floor-b) 100%)}
.sweep::before{content:"";position:absolute;left:-12%;top:-30%;width:78%;height:150%;transform:skewX(-27deg);background:linear-gradient(90deg,rgb(var(--pool)/0),rgb(var(--pool)/.55) 18%,rgb(var(--pool)/.55) 47%,rgb(var(--pool)/0) 66%);filter:blur(18px)}
.sweep::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.7}

/* 7 · Header ------------------------------------------------------------------------------------ */
.hdr{position:sticky;top:12px;z-index:60;margin-top:12px;height:64px;pointer-events:none}
.hdr-bar{position:relative;display:flex;align-items:center;gap:20px;height:64px;padding:0 10px 0 22px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px rgb(var(--shade)/.07),12px 16px 30px -18px rgb(var(--shade)/.32),0 1px 2px rgb(var(--shade)/.06);pointer-events:auto}
.hdr-home{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;--na-ink:var(--ink);--na-accent:var(--kiln);--na-ground:var(--raised)}
/* lockup-h.svg is 6.9 : 1, so 30 px tall is 207 px wide and its cap height 18.5 px; the feet stand on the name's baseline in the file */
.hdr-lockup{height:30px;width:auto}
.hdr-nav{display:flex;gap:6px;margin-left:auto}
.hdr-nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);font-weight:560;font-size:15px;text-decoration:none;border-radius:999px}
.hdr-nav a:hover{background:color-mix(in oklab,var(--raised),#000 5%)}
.hdr-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:var(--kiln);scale:0 1;transition:scale var(--t-lift) var(--spring)}
.hdr-nav a[aria-current]::after{scale:1 1}
.hdr-cta{flex:none}
.hdr-cta .chip{--s:30px}
/* Three chips overlapping, each ringed in the pill's ink so they read as three */
.pill-live .chips{display:flex}
.pill-live .chip{box-shadow:0 0 0 2px var(--ink)}
.pill-live .chip+.chip{margin-left:-10px}
.hdr-menu{display:none}
.menu{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:10px;border-radius:28px;background:var(--raised);box-shadow:inset 0 0 0 1px rgb(var(--shade)/.07),12px 16px 30px -18px rgb(var(--shade)/.4);pointer-events:auto}
.menu[hidden]{display:none}
.menu a:not(.pill){display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:16px;color:var(--ink);font-weight:600;font-size:18px;text-decoration:none}
.menu a:not(.pill):hover{background:var(--wall)}
.menu .pill{width:100%;margin-top:8px}
@media (max-width:899px){
  .hdr{top:10px;margin-top:10px;height:56px}
  .hdr-bar{height:56px;padding:0 6px 0 16px}
  .hdr-lockup{height:26px}
  .hdr-nav,.hdr-cta{display:none}
  .hdr-menu{display:inline-flex;margin-left:auto;min-height:44px;padding:0 18px;box-shadow:inset 0 0 0 1px var(--line)}
}

/* 8 · Home hero --------------------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;margin-top:-88px;padding-top:88px;overflow:clip}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(48 36 20/.12);pointer-events:none}
@media (min-width:900px){
  .hero .sweep{background:
    radial-gradient(380px 640px at var(--lx) 40%,rgb(255 253 248/1) 0,rgb(255 251 242/.85) 34%,rgb(255 251 242/0) 70%),
    radial-gradient(260px 56px at var(--lx) 89%,rgb(255 253 248/.95),rgb(255 253 248/0) 100%),
    linear-gradient(118deg,transparent 39%,rgb(var(--mull)/.06) 41% 43%,transparent 45% 57%,rgb(var(--mull)/.06) 59% 61%,transparent 63%),
    linear-gradient(180deg,#EAE6DE 0,#EAE6DE 64%,#E1DCD2 72%,#DAD5CB 82%,#D5D0C5 100%)}
  .hero .sweep::before{opacity:.45}
}
.hero-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);min-height:min(790px,100svh - 24px)}
.hero-words{grid-column:1/span 5;align-self:center;padding:48px 0 96px}
.hero-words .kicker{margin-bottom:22px}
.hero-h span{display:block}
.hero-words .lead{margin-top:24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.picker{display:flex;align-items:center;gap:6px;margin-top:22px}
.picker-tray{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line),8px 10px 18px -12px rgb(var(--shade)/.3)}
.pick{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pick .chip{--s:34px;transition:translate var(--t-lift) var(--spring),box-shadow var(--t-lift) linear}
.pick[aria-checked="true"] .chip{box-shadow:0 0 0 2px var(--raised),0 0 0 4px var(--kiln)}
.pick:hover .chip{translate:0 -2px}
.pick:active .chip{scale:.96}
.pick-label{margin-left:12px;min-width:0}
.pick-label span{display:block}
.pick-label span[hidden]{display:none}
.pick-label b{display:block;font:600 14px/1.25 var(--sans);color:var(--ink)}

.hero-scene{position:relative;grid-column:6/span 7;align-self:stretch;min-height:640px}
.podium{position:absolute;left:4%;right:0;bottom:96px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px}
.stand{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center}
.stand .stele{--w:clamp(170px,14.6vw,206px);margin-bottom:12px}
.stand .plinth{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:16px}
.stand:nth-child(1) .plinth{height:136px}
.stand:nth-child(2) .plinth{height:104px}
.stand:nth-child(3) .plinth{height:72px}
.stand .plinth .plate{position:relative;z-index:1;text-align:center;padding:0 10px}
/* A plinth's label: the name over its status, two lines */
:is(.stand,.ghero-scene) .plinth .plate b{display:block;font:600 14px/1.25 var(--sans);letter-spacing:0;color:var(--ink);margin-bottom:3px}
:is(.stand,.ghero-scene) .plinth .plate span{display:block}
.stand .plinth::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgb(48 36 20/.10);opacity:var(--dim,1);pointer-events:none}
.hero-mark{position:absolute;left:-12%;bottom:58px;width:112px;height:112px}
.floorline{position:absolute;left:calc(-12% + 56px);right:-50vw;bottom:58px;height:6px;background:radial-gradient(circle,rgb(87 83 75/.55) 1.6px,transparent 2.2px) 0 50%/14px 6px repeat-x;pointer-events:none}
@media (max-width:899px){
  .hero{margin-top:-76px;padding-top:76px}
  .hero-grid{display:flex;flex-direction:column;min-height:0;padding-bottom:40px}
  .hero-words{display:contents}
  .hero-words .kicker{order:1;margin:30px 0 16px}
  .hero-h{order:2}
  /* The buttons come straight under the headline, so the cookie notice at the bottom never covers the big
     one and has no need to move over the headline (360 to 430 px wide phones, 667 to 932 px tall) */
  .hero .cta-row{order:3;margin-top:24px}
  .hero-scene{order:4;min-height:0;height:400px;margin-top:12px}
  .cta-row .pill{flex:1 1 auto}
  .picker{order:5;flex-wrap:wrap;margin-top:18px}
  .pick-label{flex:1 1 100%;margin:10px 0 0 4px}
  .hero-words .lead{order:6;margin-top:22px}
  .podium{left:0;right:0;bottom:56px;justify-content:center}
  .stand{flex:0 0 auto;width:min(260px,72vw)}
  .stand:not(.is-chosen){display:none}
  .stand .stele{--w:150px}
  .stand .plinth{height:56px!important}
  .hero-mark{left:0;bottom:22px;width:48px;height:48px}
  .floorline{left:24px;bottom:20px}
  .sweep{background:
    radial-gradient(260px 360px at 50% 70%,rgb(var(--pool)/.95),rgb(var(--pool)/0) 72%),
    linear-gradient(180deg,var(--wall) 0,var(--wall) 82%,var(--floor-a) 87%,var(--floor) 92%,var(--floor-b) 100%)}
}

/* The guide: one Wanderer, the study's own four poses, walking from stop to stop down the home page.
   A stop (.gspot) is where it stands and the pose it takes there; site.js moves it in and walks it. */
.gspot{position:absolute;z-index:3;display:block;pointer-events:none;--walk:0}
.guide{position:absolute;inset:0;display:block;transform:translateX(var(--gx,0px));--na-ink:var(--ink);--na-accent:var(--kiln);--na-ground:var(--wall)}
.guide>.cshadow{left:4%;right:-22%;bottom:-1%;height:9%}
.gfig{position:absolute;inset:0;display:block}
.gp{position:absolute;inset:0;display:block;visibility:hidden}
.gp.is-on{visibility:visible}
.gp svg{width:100%;height:100%;overflow:visible}
.gspot-bays{left:8px;bottom:2px;width:64px;height:64px}
.gspot-soon{right:18px;bottom:100%;width:64px;height:64px;--walk:144}
.gspot-soon-phone{display:none}
.gspot-tf{left:6%;bottom:5.7%;width:64px;height:64px;--walk:96}
.gspot-roll{left:0;top:0;width:44px;height:44px}
.gspot-foot{right:122px;bottom:0;width:56px;height:56px;--walk:192}
@media (max-width:899px){
  .gspot-bays{left:4px;width:48px;height:48px}
  .gspot-soon{display:none}
  .gspot-soon-phone{display:block;right:14px;bottom:100%;width:52px;height:52px;--walk:96}
  .gspot-tf{width:48px;height:48px;--walk:48}
  .gspot-roll{display:none}
  .gspot-foot{width:44px;height:44px;--walk:96}
}

/* 9 · Bands and section heads ----------------------------------------------------------------- */
.band{position:relative;padding:112px 0}
/* The bays, the shelf and the How band clip sideways: a shadow still at its set-down scale reaches past a phone's
   edge, and the open slot's light reaches past the last column between 900 and 1,199 px. */
.band-live,.band-shelf,.band-how{overflow-x:clip}
.band-floor{background:var(--grain),var(--floor);box-shadow:inset 0 1px 0 rgb(var(--shade)/.07),inset 0 18px 24px -20px rgb(var(--shade)/.18)}
.sec-head{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;margin-bottom:56px}
.sec-head>div{grid-column:1/span 7}
.sec-head .kicker{margin-bottom:14px}
.sec-head .sub{grid-column:8/span 5;color:var(--ink-2);font-size:17px;line-height:1.6}
@media (max-width:899px){
  .band{padding:72px 0}
  .sec-head{display:block;margin-bottom:36px}
  .sec-head .sub{margin-top:14px}
}

/* 10 · On the App Store now: three bays --------------------------------------------------------- */
.bays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.bay{position:relative;display:flex;flex-direction:column}
.bay-stage{position:relative;display:flex;justify-content:center;padding-bottom:14px}
.bay-stage .stele{--w:208px}
.bay-face{flex:1;display:flex;flex-direction:column;padding:28px 28px 22px}
.bay-face .plinth-top{height:14px}
.bay-id{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bay-id .chip{--s:40px}
.bay-face h3{margin-bottom:10px}
.bay-face .tag{font-weight:560;font-size:17px;line-height:1.45;color:var(--ink);margin-bottom:10px}
.bay-face .blurb{font-size:16px;line-height:1.55;color:var(--ink-2)}
.bay-face .bay-cta{margin-top:auto;padding-top:24px}
.bay-face .bay-cta .pill{width:100%}
.bay-face .note{margin-top:12px}
.bay-face .go{margin-top:6px;align-self:flex-start}
@media (max-width:899px){
  .bays{grid-template-columns:1fr;gap:64px}
  .bay-stage .stele{--w:200px}
  .bay-face{padding:24px 22px 18px}
}

/* 11 · Coming soon: one wall of five equal niches, the object above its words ---------------------- */
.bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut)}
.cell{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;border-radius:14px;background:var(--grain),linear-gradient(180deg,var(--plinth-hi),var(--plinth-lo));box-shadow:inset 0 1px 0 var(--edge-hi),inset -14px 0 18px -14px rgb(var(--mull)/.14),24px 30px 44px -26px rgb(var(--mull)/.32)}
.cell-stage{position:relative;order:-1;display:flex;align-items:flex-end;justify-content:center;height:390px;border-radius:14px 14px 0 0;overflow:hidden}
.cell-stage .stele{--w:150px;z-index:1;margin-bottom:28px}
.cell-sill{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(180deg,#ECE8E1,#F7F5F1 40%,#EFEBE4);box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 2px 6px rgb(var(--shade)/.08)}
.cell-words{position:relative;z-index:1;display:flex;flex-direction:column;padding:22px 20px 24px}
.cell-id{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cell-id .chip{--s:36px;display:none}
.cell-words h3{font-size:18px;line-height:1.25;margin-bottom:8px}
.cell-words .tag{font-weight:560;font-size:16px;line-height:1.45;color:var(--ink)}
.cell-words .go{margin-top:auto;padding-top:16px;align-self:flex-start}
@media (max-width:1099px) and (min-width:900px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .bento{grid-template-columns:1fr;gap:20px}
  .cell-stage{height:auto;padding-top:24px}
  .cell-stage .stele{--w:170px}
  .cell-id .chip{display:block}
  .cell-words{padding:22px 22px 18px}
  .cell-words h3{font-size:20px}
}

/* 12 · On TestFlight: the Launch Lab stele on its test stand ------------------------------------- */
.band-tf{overflow:clip}
.tf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center}
.tf-stage{grid-column:7/span 6;position:relative;width:min(460px,100%);aspect-ratio:460/600;margin-inline:auto;--u:calc(min(460px,100vw - 40px)/460)}
.tf-stage .rig{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tf-stage .stele{--w:calc(var(--u)*188);position:absolute;left:28%;top:5.5%}
.tf-stage .jaw{position:absolute;z-index:2;top:39%;width:calc(var(--u)*16);height:calc(var(--u)*46);border-radius:calc(var(--u)*4);background:linear-gradient(90deg,#5d5a54,#2c2a26);box-shadow:inset 1px 1px 0 rgb(255 255 255/.22),3px 5px 8px -3px rgb(0 0 0/.4)}
.tf-stage .jaw-l{left:calc(28% - var(--u)*8)}
.tf-stage .jaw-r{left:calc(28% + var(--u)*188 + var(--u)*9.4 - var(--u)*8)}
.tf-words{grid-column:1/span 5}
.tf-obj{position:absolute;inset:0}
.tf-words .kicker{margin-bottom:14px}
.tf-mat{margin-top:28px;padding:22px 24px;border-radius:16px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line),14px 18px 30px -20px rgb(var(--shade)/.34)}
.tf-mat .h3{margin-bottom:6px}
.tf-words .tag{margin-top:22px;font-size:17px;font-weight:560;color:var(--ink)}
.tf-words .blurb{margin-top:8px;font-size:16px;color:var(--ink-2);line-height:1.55}
.tf-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:28px}
.tf-words .note{margin-top:14px}
@media (max-width:899px){
  .tf-grid{display:flex;flex-direction:column;gap:24px}
  .tf-words .vnote{display:none}
  .tf-words{width:100%}
  .tf-stage{width:100%;max-width:400px}
}

/* 13 · The shelf: three ledges of five -------------------------------------------------------- */
.band-tf+.band-shelf{padding-top:40px}
.shelf-row{position:relative;margin-top:28px}
.shelf-row+.shelf-row{margin-top:72px}
.slots{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut)}
.slot{position:relative;display:flex;flex-direction:column}
.slot-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.slot-obj{position:relative;display:flex;align-items:flex-end;justify-content:center;height:136px;padding-bottom:4px}
.slot-obj .tile-obj{--w:92px}
.slot-card{position:relative;flex:1;display:flex;flex-direction:column;margin:22px 4px 0;padding:20px 18px 12px;border-radius:10px;background:var(--plinth);box-shadow:inset 0 1px 0 var(--edge-hi),inset 0 0 0 1px rgb(var(--shade)/.05),14px 18px 26px -18px rgb(var(--shade)/.32)}
.slot-card::before,.slot-card::after{content:"";position:absolute;top:-16px;width:6px;height:20px;border-radius:3px;background:linear-gradient(90deg,#B8B1A4,#8F887B);box-shadow:1px 2px 3px rgb(0 0 0/.18)}
.slot-card::before{left:22px}
.slot-card::after{right:22px}
.slot-card .plate{margin-bottom:10px}
.slot-card h3{font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.008em;margin-bottom:8px}
.slot-card .blurb{font-size:16px;line-height:1.5;color:var(--ink-2)}
.slot-card .go{margin-top:auto;padding-top:6px}
.slot-link:hover .slot-card .go{text-decoration:underline}
.shelf-row>.ledge{position:absolute;left:-10px;right:-10px;top:136px;z-index:0}
.slot-open .slot-obj::before{content:"";position:absolute;left:50%;bottom:-6px;width:240px;height:300px;translate:-50% 0;background:radial-gradient(50% 50% at 50% 70%,rgb(255 251 240/1),rgb(255 251 240/0));pointer-events:none}
.slot-open .slot-card{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.open-obj{display:flex;flex-direction:column;align-items:center}
/* mark.svg's figure spans y 74.09 to 448 of 512, so a 131.4 px box draws it 96 px tall; its feet are 64 units above the box's foot */
.open-fig{display:block;width:131.4px;height:131.4px;margin-bottom:-16.4px;--na-ink:var(--ink-2);--na-accent:var(--ink-2)}
.open-fig svg{width:100%;height:100%;overflow:visible}
.open-fig path{fill:none!important;stroke:var(--ink-2);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.open-plinth{display:block;width:72px;height:16px;border-radius:3px}
.slot-open .slot-card .plate{color:var(--kiln-text)}
@media (max-width:899px){
  .shelf-row+.shelf-row{margin-top:0}
  .slots{grid-template-columns:1fr;gap:0}
  .slot{border-bottom:1px solid var(--line)}
  .slot-link{flex-direction:row;align-items:flex-start;gap:16px;padding:20px 0}
  .slot-obj{flex:none;width:84px;height:94px;align-items:flex-start;justify-content:flex-start;padding:4px 0 0}
  .slot-obj .tile-obj{--w:68px}
  .slot-card{margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
  .slot-card::before,.slot-card::after{display:none}
  .shelf-row>.ledge{display:none}
  .slot-open .slot-card{box-shadow:none}
  .open-fig{width:87.6px;height:87.6px;margin-bottom:-10.95px}
  .open-plinth{width:52px;height:12px}
  .slot-open .slot-obj::before{width:160px;height:160px;bottom:-30px}
}

/* Finishes, from bench to window (named in the guide) */
.f-primed .tile{background:#E6E3DC}
.f-primed .tile>img{width:64%;height:64%;margin:18%;border-radius:22%;box-shadow:0 0 0 3px #F7F5F0,1px 2px 3px rgb(0 0 0/.14)}
.f-primed .tile::after{background:linear-gradient(135deg,rgb(255 255 255/.4),transparent 45%);mix-blend-mode:normal;opacity:.5}
.tape{position:absolute;z-index:2;top:-6%;right:-14%;width:58%;height:18%;rotate:8deg;background:linear-gradient(180deg,var(--tape),var(--tape-2));box-shadow:0 1px 2px rgb(0 0 0/.12);clip-path:polygon(0 8%,4% 0,9% 10%,14% 0,100% 0,96% 18%,100% 34%,96% 52%,100% 70%,96% 86%,100% 100%,0 100%,4% 84%,0 66%,4% 50%,0 32%)}
.f-carved .tile{--c:#B9BDB2;background:var(--grain),#B9BDB2}
.f-carved .tile::after{background:none;box-shadow:inset 1px 1px 0 rgb(255 255 255/.25)}
.f-carved .tile svg{position:absolute;inset:16%;width:68%;height:68%}
.f-drawn .tile-drawn{display:block}
.f-drawn .drawn{display:block;width:calc(var(--w)*1.062);height:calc(var(--w)*1.16);margin:calc(var(--w)*-.01) 0 0 calc(var(--w)*-.01);overflow:visible}
.f-lit::before{content:"";position:absolute;z-index:-2;left:50%;bottom:-30px;width:250px;height:250px;translate:-50% 0;background:radial-gradient(50% 50% at 50% 62%,rgb(255 250 236/1),rgb(255 250 236/.55) 45%,rgb(255 250 236/0));pointer-events:none}
.f-stand .jaws{position:absolute;inset:0;pointer-events:none}
.f-stand .jaws::before,.f-stand .jaws::after{content:"";position:absolute;top:34%;width:8%;height:28%;border-radius:2px;background:linear-gradient(90deg,#5d5a54,#2c2a26);box-shadow:1px 2px 3px rgb(0 0 0/.3)}
.f-stand .jaws::before{left:-5%}
.f-stand .jaws::after{left:calc(100% + var(--d)*.3 - 3%)}
.f-stand .cable{position:absolute;left:46%;top:96%;width:44%;height:24%;border:2.5px solid #3a3833;border-top:0;border-right:0;border-radius:0 0 0 70%;pointer-events:none}

/* 14 · How we make games: three exhibits, then Bench to Window --------------------------------- */
.exhibits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.exhibit{display:flex;flex-direction:column}
.ex-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;height:230px}
.ex-stage svg.ex-art{position:relative;z-index:1;width:220px;height:180px;margin-bottom:-4px;overflow:visible}
.ex-plinth{height:28px;margin:0 22%}
.exhibit h3{margin:30px 0 10px}
.exhibit p{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:34ch}
@media (max-width:899px){
  .exhibits{grid-template-columns:1fr;gap:48px}
  .ex-stage{height:200px}
  .exhibit h3{margin-top:22px}
}

.roll{position:relative;margin-top:120px}
.roll-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin-bottom:40px}
.roll-head>div{grid-column:1/span 7}
.roll-head .kicker{margin-bottom:12px}
.stages{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gut)}
.stage{display:flex;flex-direction:column;align-items:center;text-align:center}
.stage-obj{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:150px}
.stage-obj .tile-obj{--w:84px}
.stage-stand{width:78%;height:34px;border-radius:4px 4px 0 0}
.stage-word{margin-top:76px}
.stage-word b{display:block;font:600 16px/1.25 var(--sans);color:var(--ink);margin-bottom:4px}
.stage-word .plate{display:block}
.roll-floor{position:relative}
.track{position:absolute;left:0;right:0;top:160px;height:44px;pointer-events:none}
.track::before{content:"";position:absolute;left:0;right:0;top:36px;height:6px;background:radial-gradient(circle,rgb(87 83 75/.55) 1.6px,transparent 2.2px) 0 50%/14px 6px repeat-x}
.cart{position:absolute;left:0;top:0;width:84px;height:42px;overflow:visible}
@media (max-width:899px){
  .roll{margin-top:80px}
  .roll-head{display:block}
  .stages{grid-template-columns:1fr;gap:0;padding-left:68px}
  .stage{flex-direction:row;align-items:center;gap:18px;text-align:left;min-height:124px}
  .stage-obj{height:auto;width:92px;flex:none;flex-direction:column;align-items:center}
  .stage-obj .tile-obj{--w:62px}
  .stage-stand{width:76px;height:16px}
  .stage-word{margin-top:0}
  .track{left:0;right:auto;top:0;bottom:0;width:56px;height:auto}
  .track::before{left:25px;right:auto;top:0;bottom:0;width:6px;height:auto;background:radial-gradient(circle,rgb(87 83 75/.55) 1.6px,transparent 2.2px) 50% 0/6px 14px repeat-y}
  .cart{width:56px;height:28px}
}

/* 15 · The studio ------------------------------------------------------------------------------- */
.studio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.studio-main{grid-column:1/span 7}
.studio-plinth{padding:48px 48px 40px;border-radius:14px}
.studio-plinth .kicker{margin-bottom:14px}
.studio-plinth .h2{margin-bottom:22px}
.about{font-weight:430;font-size:clamp(20px,.6vw + 17.8px,26px);line-height:1.45;letter-spacing:-.008em;color:var(--ink);max-width:34ch}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:var(--gut)}
.fact{position:relative;padding:24px 24px 22px;border-radius:12px;background:var(--grain),linear-gradient(160deg,#F7F5F0,#ECE8E0);box-shadow:inset 1px 1px 0 rgb(255 255 255/.95),inset -1px -1px 0 rgb(var(--shade)/.1),12px 16px 24px -18px rgb(var(--shade)/.3)}
.fact .count{display:block;color:var(--ink);margin-bottom:12px}
.fact p{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:30ch}
.fact-wide{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fact-wide svg{flex:none;width:44px;height:44px}
.tower-col{grid-column:9/span 4;position:sticky;top:120px}
.tower-fig{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.tower-fig .count{margin-bottom:8px}
.tower-fig>p{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:30ch;margin-bottom:30px}
.tower{position:relative;display:flex;flex-direction:column-reverse;gap:0;width:100%}
.slab{--h:40px;position:relative;display:flex;align-items:center;height:var(--h)}
.slab i{position:relative;display:block;flex:none;width:112px;height:calc(var(--h) - 3px);margin-top:3px;border-radius:5px;background:linear-gradient(104deg,rgb(255 255 255/.2),rgb(255 255 255/0) 40%,rgb(0 0 0/.14)),var(--c);box-shadow:inset 1px 1px 0 rgb(255 255 255/.3),2px 3px 0 color-mix(in oklab,var(--c),#000 38%),3px 4px 0 color-mix(in oklab,var(--c),#000 46%)}
.slab>span{display:grid;grid-template-columns:96px auto;column-gap:12px;align-items:baseline;margin-left:20px;font-size:14px;line-height:1.2;color:var(--ink);white-space:nowrap}
.slab>span .plate{color:var(--ink-2);text-wrap:nowrap}
.slab::before{content:"";position:absolute;left:118px;width:14px;top:50%;height:1px;background:var(--line-2)}
.tower-base{width:180px;height:20px;margin-top:6px;border-radius:4px}
@media (max-width:899px){
  .studio-grid{display:block}
  .studio-plinth{padding:30px 24px 28px}
  .facts{grid-template-columns:1fr}
  .tower-col{position:static;margin-top:48px}
  .slab i{width:96px}
  .slab::before{left:102px}
}
@media (max-width:380px){.slab i{width:80px}.slab::before{left:86px}}
/* Between a tablet and a wide screen the tower takes five columns and narrower slabs, so each label fits its column */
@media (max-width:1199px) and (min-width:900px){.tower-col{grid-column:8/span 5}.slab i{width:96px}.slab::before{left:102px}}

/* 16 · Footer ----------------------------------------------------------------------------------- */
.sfoot{position:relative;padding:72px 0 120px;background:var(--grain),var(--floor);box-shadow:inset 0 1px 0 rgb(var(--shade)/.07),inset 0 18px 24px -20px rgb(var(--shade)/.18);overflow:clip}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.foot-lockup-a{display:flex;align-items:center;min-height:44px;--na-ink:var(--ink);--na-accent:var(--kiln);--na-ground:var(--floor)}
.foot-lockup{height:34px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:10px}
.foot-links .pill{font-size:14px;min-height:44px;padding:0 18px}
.legal{margin-top:36px;max-width:76ch;font-size:14px;line-height:1.55;color:var(--ink-2)}
.foot-line{position:relative;height:72px;margin-top:40px}
.foot-line::before{content:"";position:absolute;left:-100vw;right:110px;bottom:12px;height:6px;background:radial-gradient(circle,rgb(87 83 75/.55) 1.6px,transparent 2.2px) 100% 50%/14px 6px repeat-x}
.foot-line .cart{left:auto;right:0;top:auto;bottom:0;width:112px;height:56px}
@media (max-width:899px){
  .sfoot{padding:56px 0 132px}
  .foot-links .pill{flex:1 1 auto}
}

/* 17 · Phone dock: the sticky call to action ---------------------------------------------------- */
.dock{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;display:none;align-items:center;gap:8px;padding:6px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px rgb(var(--shade)/.08),12px 16px 30px -14px rgb(var(--shade)/.45);translate:0 calc(100% + 40px);transition:translate var(--t-setdown) var(--spring)}
.dock.is-on{translate:0 0}.dock.is-now{transition:none}
/* While the dock carries the store pill, the hero's own pill hides, and so does a bay pill under the dock, so two never show at once. */
@media (max-width:899px){[data-store="hero"].is-docked,[data-store="bay"].is-docked{visibility:hidden;transition:visibility 0s var(--t-setdown)}[data-store="hero"].is-docked.is-now,[data-store="bay"].is-docked.is-now{transition:none}}
.dock-chip{position:relative;flex:none;width:52px;height:52px;padding:4px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.dock-chip .chip{--s:44px;position:absolute;inset:4px}
.dock-chip .chip[hidden]{display:none}
.dock .pill{flex:1;min-height:52px}
/* While the cookie notice shows at the bottom, the dock stands above it (site.js sets --ck-h from the notice's top edge). */
.has-ck .dock{bottom:var(--ck-h,140px);translate:0 calc(100% + 40px + var(--ck-h,140px))}.has-ck .dock.is-on{translate:0 0}
@media (max-width:899px){.dock{display:flex}}

/* 18 · Game page -------------------------------------------------------------------------------- */
/* Each game page is its own room: showroom.py sets its --wall on the body from the title's glaze (the house
   wall where the glaze is near gray). Floor and window light follow the wall. */
.page-game{--room-floor:color-mix(in oklab,var(--wall),#1C2433 4%);--room-floor-2:color-mix(in oklab,var(--wall),#1C2433 8%);--room-pool:color-mix(in oklab,var(--wall),#fff 62%);background:var(--wall)}
.page-game .sweep{background:
  radial-gradient(360px 470px at var(--lx,74%) 44%,color-mix(in oklab,var(--room-pool),transparent 5%),color-mix(in oklab,var(--room-pool),transparent 45%) 40%,transparent 72%),
  linear-gradient(118deg,transparent 39%,rgb(30 40 60/.045) 41% 43%,transparent 45% 57%,rgb(30 40 60/.045) 59% 61%,transparent 63%),
  linear-gradient(180deg,var(--wall) 0,var(--wall) 66%,var(--room-floor) 76%,var(--room-floor-2) 100%)}
.page-game .sweep::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--room-pool),transparent 50%) 18%,color-mix(in oklab,var(--room-pool),transparent 50%) 47%,transparent 66%)}
/* The floor under the hero runs on into the wall below it, so the two meet without an edge */
.page-game #overview{background:linear-gradient(180deg,var(--room-floor-2),var(--wall) 220px)}
.ghero{position:relative;isolation:isolate;margin-top:-88px;padding-top:88px;overflow:clip}
.ghero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);min-height:min(820px,100svh)}
/* The words start at one height on every game page, so the back button stays put from page to page */
.ghero-words{grid-column:1/span 6;align-self:start;padding:72px 0 88px}
.back{margin-bottom:40px}
.ghero-words .tile-obj{--w:88px;margin-bottom:30px}
.ghero-words .plate{margin-top:16px}
.ghero-words .lead{margin-top:18px;color:var(--ink);font-weight:430;max-width:30ch}
.ghero-words .note{margin-top:14px;max-width:46ch;color:color-mix(in oklab,var(--ink-2),var(--ink) 30%)}
.ghero-words .soon-play{margin-top:16px}
.ghero-words .soon-play+.note{margin-top:6px}
.ghero-scene{grid-column:7/span 6;align-self:end;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px 0 84px}
.ghero-scene .stele{--w:280px;margin-bottom:12px}
/* A gameplay take, its status bar cut off, stands as tall as a landing page's cut on a 280 px slab */
.ghero-scene .stele.is-take{--w:248px}
.ghero-scene .plinth{width:380px;height:96px;display:flex;justify-content:center;padding-top:18px}
.ghero-scene .plinth .plate{text-align:center}
/* An app still on the bench has no footage yet: its Tile stands on the plinth in its finish, and the words
   leave out their own small copy of it */
.page-game:has(.ghero-tile) .ghero-words .tile-obj{display:none}
.ghero-tile{position:relative;display:flex;justify-content:center;margin-bottom:34px}
.ghero-tile .tile-obj{--w:300px}
.ghero-scene:has(.ghero-tile) .plinth{width:340px;height:132px;padding-top:26px}
/* A live game's plinth carries its store link as a QR code, for a visitor on a computer with a mouse */
.qr-press{display:none}
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  .ghero-scene .plinth.has-qr{height:128px;justify-content:space-between;align-items:center;padding:4px 18px 0 26px}
  .plinth.has-qr .plate{text-align:left}
  .qr-press{display:flex;align-items:center;gap:14px}
  .qr-press .plate{max-width:11ch;text-align:right}
  .qr-press svg{flex:none;width:100px;height:100px;padding:6px;border-radius:4px;background:var(--plinth-hi);box-shadow:inset 1px 2px 3px rgb(var(--shade)/.2),inset 0 -1px 0 var(--edge-hi)}
  .qr-press path{fill:none;stroke:var(--ink)}
}
/* A store button with no link yet is the store pill not yet lit: pressed into the wall, its chip in place */
.pill-off{--fill:color-mix(in oklab,var(--wall),#000 5%);--fg:var(--ink-2);box-shadow:inset 1px 2px 3px rgb(var(--shade)/.22),inset 0 -1px 0 rgb(255 255 255/.9);cursor:default}
.pill-off:hover,.pill-off:active{background:var(--fill);scale:1}
.pill-off .chip{filter:saturate(.75)}
.go-down{margin-left:10px}
.ghero-words .vnote{margin-top:8px;max-width:46ch}
.notyet{max-width:720px;padding:34px 36px 32px;border-radius:12px}
.notyet p{font-size:clamp(18px,.3vw + 17px,21px);line-height:1.5;color:var(--ink);max-width:48ch}
.wall-text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.wall-text .prose{grid-column:1/span 7}
.wall-text .prose p{max-width:64ch;color:var(--ink)}
.wall-text .prose p+p{margin-top:1em}
.plays{grid-column:9/span 4;position:relative;padding-top:4px}
.plays-shelf{display:flex;flex-direction:column;gap:12px}
.play{position:relative;padding:16px 0 0;border-top:1px solid var(--line)}
.play b{display:block;font:600 16px/1.3 var(--sans);margin-bottom:3px}
.play span{display:block;font-size:15px;line-height:1.45;color:var(--ink-2)}
/* The right-hand print's shadow falls past the screen edge on a phone; the band clips it there, sideways only. */
.band-worlds,.band-shots{overflow-x:clip}
.rail{position:relative;margin-top:28px}
.prints{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.print{display:flex;flex-direction:column;align-items:center}
.mat{padding:14px;background:var(--mat);border-radius:3px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.04),14px 20px 30px -18px rgb(30 40 60/.42),0 1px 2px rgb(30 40 60/.12)}
.mat img{width:100%;aspect-ratio:720/1290;object-fit:cover;box-shadow:inset 0 0 0 1px rgb(0 0 0/.06)}
.print figcaption{margin-top:16px;text-align:center}
.print figcaption b{display:block;font:600 16px/1.3 var(--sans);color:var(--ink)}
.rail>.ledge{position:absolute;left:-10px;right:-10px;bottom:40px}
/* Screenshots: prints 260 px wide, up to four to a ledge (--k a ledge, set by showroom.py). Each print's
   mat and caption share the rows across its ledge, so the ledge runs under every mat at one height. */
.shots{display:flex;flex-direction:column;gap:56px}
.shots .rail{margin-top:0}
.shots .prints{grid-template-columns:repeat(var(--k),minmax(0,1fr));grid-template-rows:auto auto;row-gap:0}
.shot{grid-row:span 2;display:grid;grid-template-rows:subgrid;justify-items:center}
.shot>.obj{width:min(100%,260px)}
.shot .mat{padding:10px}
.shot .mat img{width:100%;height:auto;aspect-ratio:646/1400;object-fit:cover}
.shot figcaption{width:min(100%,260px);margin-top:30px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.shots .prints>.ledge{grid-row:1;grid-column:1/-1;align-self:end;z-index:-1;margin:0 -10px -14px}
.legal-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:48px 0 96px}
.lnk{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 6px;color:var(--ink);font:600 14px/1.2 var(--sans);text-decoration:underline 1px;text-decoration-color:var(--line-2);text-underline-offset:3px}
.lnk:hover{text-decoration-color:currentColor}
.legal-row .by{display:flex;align-items:center;gap:12px;margin-left:16px;font-size:14px;color:var(--ink-2)}
.pressed{width:30px;height:30px;--na-ink:color-mix(in oklab,var(--wall),#000 16%);--na-accent:color-mix(in oklab,var(--wall),#000 16%);--na-accent-2:color-mix(in oklab,var(--wall),#000 16%);--na-ground:transparent;filter:drop-shadow(0 1px 0 rgb(255 255 255/.85)) drop-shadow(0 -1px 0 rgb(0 0 0/.14))}
/* The doors: the titles either side on the shelf, each half through the screen's edge on a low plinth, and
   the Wanderer between them, who turns and steps toward the one pointed at */
.band-doors{position:relative;display:block;height:330px;overflow:clip;border-top:1px solid var(--line)}
.door{position:absolute;top:0;bottom:0;width:min(40%,460px);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.door-prev{left:0}.door-next{right:0}
.door-stage{position:absolute;bottom:52px;width:320px;display:flex;flex-direction:column;align-items:center}
.door-prev .door-stage{left:-160px}.door-next .door-stage{right:-160px}
.door-stage .tile-obj{--w:170px;margin-bottom:16px}
.door-plinth{width:320px;height:64px}
.door-words{position:absolute;bottom:96px;display:flex;flex-direction:column;gap:6px}
.door-words .plate{white-space:nowrap}
.door-prev .door-words{left:200px}.door-next .door-words{right:200px;align-items:flex-end;text-align:right}
.door-words b{font:600 clamp(20px,1vw + 12px,26px)/1.2 var(--sans);letter-spacing:-.01em}
.door:hover .door-words b,.door:focus-visible .door-words b{text-decoration:underline 1.5px;text-underline-offset:4px}
.door-guide{position:absolute;left:50%;bottom:52px;width:104px;height:104px;margin-left:-52px;transition:translate 520ms var(--spring);--na-ink:var(--ink);--na-accent:var(--kiln);--na-ground:var(--wall)}
.door-guide>.obj{position:absolute;inset:0;display:block}
.door-guide .cshadow{left:4%;right:-22%;bottom:-1%;height:9%}
.door-pose{position:absolute;inset:0;display:block;transition:scale 220ms var(--spring)}
.door-pose svg{width:100%;height:100%;overflow:visible}
.band-doors:has(.door-prev:is(:hover,:focus-visible)) .door-guide{translate:-36px 0}
.band-doors:has(.door-prev:is(:hover,:focus-visible)) .door-pose{scale:-1 1}
.band-doors:has(.door-next:is(:hover,:focus-visible)) .door-guide{translate:36px 0}
@media (max-width:1199px) and (min-width:900px){
  .ghero-tile .tile-obj{--w:240px}
  .ghero-scene:has(.ghero-tile) .plinth{width:300px}
  .door-words{bottom:104px}
  .door-prev .door-words{left:176px}.door-next .door-words{right:176px}
}
@media (max-width:899px){
  .ghero{margin-top:-76px;padding-top:76px}
  .ghero-grid{display:block;min-height:0}
  .ghero-words{padding:20px 0 0}
  .back{margin-bottom:16px}
  /* The slab's foot already carries the icon, so the words leave theirs out and the footage comes up higher */
  .ghero-words .tile-obj{display:none}
  .ghero-words .h1{margin-top:20px}
  .ghero-words .cta-row{margin-top:24px}
  .go-down{margin-left:4px}
  .ghero-scene{padding:36px 0 64px}
  .ghero-scene .stele{--w:216px}
  .ghero-scene .stele.is-take{--w:192px}
  .ghero-scene .plinth{width:280px;height:96px}
  .ghero-tile .tile-obj{--w:200px}
  .ghero-scene:has(.ghero-tile) .plinth{width:280px;height:104px;padding-top:22px}
  /* Its video note says the footage plays on the right, which is only true on a wide screen */
  .ghero-words .vnote{display:none}
  .notyet{padding:26px 22px 24px}
  .wall-text{display:block}
  .plays{margin-top:36px}
  .prints{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .rail>.ledge{display:none}
  /* On a phone the screenshots run in one row that scrolls sideways, a print and a half in view */
  .shots{display:flex;flex-direction:row;gap:16px;margin-inline:-20px;padding:0 20px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .shots::-webkit-scrollbar{display:none}
  .shots .rail,.shots .prints{display:contents}
  .shots .prints>.ledge{display:none}
  .shot{flex:0 0 58vw;display:flex;flex-direction:column;scroll-snap-align:start}
  .shot>.obj{width:100%}
  .shot .mat{padding:8px}
  .shot figcaption{width:100%;margin-top:14px}
  .legal-row{padding:36px 0 72px}
  .legal-row .by{margin-left:0;width:100%;margin-top:10px}
  .band-doors{height:330px}
  .door{width:50%}
  .door-stage{bottom:40px;width:240px}
  .door-prev .door-stage{left:-120px}.door-next .door-stage{right:-120px}
  .door-stage .tile-obj{--w:124px;margin-bottom:12px}
  .door-plinth{width:240px;height:52px}
  .door-words{top:24px;bottom:auto}
  .door-prev .door-words{left:20px}.door-next .door-words{right:20px}
  .door-words b{font-size:18px}
  .door-guide{bottom:40px;width:84px;height:84px;margin-left:-42px}
}
/* A phone held sideways: the cookie notice sits bottom right, 330px wide for two lines of text, and the
   big button stops 8px short of it, so the notice stays at the bottom and never moves up over the
   headline. The button starts at the left safe area, so its cap takes off both. A short screen also
   brings the game page's title up, clear of the card's top edge. */
@media (max-height:500px) and (min-width:640px) and (max-width:899px){
  body>.ck{left:auto;right:calc(16px + env(safe-area-inset-right,0px));margin:0;width:min(330px,100vw - 360px)}
  [data-ck-clear]{max-width:calc(100vw - 44px - min(330px,100vw - 360px) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
}
@media (max-height:600px) and (max-width:899px){
  .ghero-words{padding-top:12px}
  .back{margin-bottom:8px}
  .ghero-words .h1{margin-top:12px}
  .ghero-words .cta-row{margin-top:16px}
}

/* 19 · Motion: Set down, Lift, Press ------------------------------------------------------------ */
.motion [data-obj]>:not(.cshadow){translate:0 var(--sd-y,0px);opacity:var(--sd-o,1)}
.motion [data-words]{opacity:var(--wd-o,1)}
[data-lift]{transition:transform var(--t-lift) var(--spring)}
[data-obj]:has(>[data-lift])>.cshadow{transition:opacity var(--t-lift) linear,filter var(--t-lift) linear}
@media (hover:hover){
  .lift-on:hover [data-lift]{transform:translateY(calc(-1 * var(--lift-rise))) rotate(var(--tilt,0deg))}
  .lift-on:hover [data-obj]:has(>[data-lift])>.cshadow{opacity:.55;filter:blur(8px)}
}
.lift-on:focus-within [data-lift]{transform:translateY(calc(-1 * var(--lift-rise)))}
.lift-on:focus-within [data-obj]:has(>[data-lift])>.cshadow{opacity:.55;filter:blur(8px)}
.lift-on:active [data-lift]{transform:scale(var(--press-obj))}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation:none!important}
  [data-store="hero"].is-docked,[data-store="bay"].is-docked{transition:none}
  .lift-on:hover [data-lift],.lift-on:focus-within [data-lift]{transform:none}
  .lift-on:active [data-lift]{transform:none}
  .pill:active{scale:1}
}
.rm-play{position:absolute;inset:0;z-index:2;display:none;place-items:center;border:0;padding:0;background:transparent;cursor:pointer}
.rm-play span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgb(28 27 24/.82)}
.rm-play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.reduced .stele:not(.is-playing) .rm-play{display:grid}

/* 20 · Not found -------------------------------------------------------------------------------- */
.lost{position:relative;isolation:isolate;margin-top:-88px;padding-top:88px;overflow:clip}
.lost-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);min-height:min(760px,100svh - 24px)}
.lost-words{grid-column:1/span 6;align-self:center;padding:48px 0 96px}
.lost-words .kicker{margin-bottom:22px}
.lost-words .lead{margin-top:22px}
.lost-scene{grid-column:7/span 6;position:relative;align-self:stretch;min-height:420px}
.lost-scene .floorline{left:-4%;right:-50vw;bottom:72px}
/* The Wanderer, Surprised, and the cart that got away on the same floor line (its dots' middle is 75 px up) */
.lost-fig{position:absolute;left:4%;bottom:75px;width:200px;height:200px;--na-ink:var(--ink);--na-accent:var(--kiln);--na-ground:var(--wall)}
.lost-fig>.cshadow{left:4%;right:-22%;bottom:-1%;height:9%}
.lost-pose{position:absolute;inset:0;display:block}
.lost-pose svg{width:100%;height:100%;overflow:visible}
.lost-cart{position:absolute;right:-12%;bottom:73px;width:260px;height:130px;--roll:-560px;--spin:-1725deg}
.lost-cart .cart{position:static;width:100%;height:100%}
/* Every game and app, its small Tile each, for a visitor who came for one of them */
.lost-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:40px;max-width:400px}
.lost-chip{display:grid;place-items:center;min-width:var(--tap);min-height:52px;border-radius:12px;transition:translate var(--t-lift) var(--spring)}
.lost-chip:hover{translate:0 -3px}
/* The shelf's lamp glow behind a lit Tile reaches 250 px; at 40 px it would only pale the buttons above */
.lost-chip .f-lit::before{display:none}
.lost-chip:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
/* As the page opens the cart rolls in past him and on out of reach, and he jumps. --spin turns the wheels
   once per their circumference along --roll (r 12 of the cart's 168 units: 3.08 deg a px at 260 px wide). */
.motion .lost-cart{animation:lost-roll 1400ms cubic-bezier(.2,.7,.2,1) both}
.motion .lost-cart .wheel{animation:lost-wheel 1400ms cubic-bezier(.2,.7,.2,1) both}
.motion .lost-pose{animation:lost-hop 180ms ease-out 900ms}
@keyframes lost-roll{from{translate:var(--roll) 0}}
@keyframes lost-wheel{from{rotate:var(--spin)}}
@keyframes lost-hop{50%{translate:0 -6px}}
@media (max-width:899px){
  .lost{margin-top:-76px;padding-top:76px}
  .lost-grid{display:block;min-height:0}
  .lost-words{padding:36px 0 0}
  .lost-scene{height:240px;min-height:0;margin-top:12px}
  .lost-scene .floorline{left:0;bottom:40px}
  .lost-chips{margin-top:28px;max-width:none}
  .lost-fig{left:4%;bottom:43px;width:120px;height:120px}
  .lost-cart{right:-14%;bottom:41px;width:180px;height:90px;--roll:-300px;--spin:-1340deg}
}

/* 21 · Cookie notice: consent.js and consent.css, dressed through their --ck-* variables ---------- */
:root{--ck-bg:var(--raised);--ck-fg:var(--ink);--ck-border:0;--ck-shadow:inset 0 0 0 1px rgb(var(--shade)/.08),12px 16px 30px -14px rgb(var(--shade)/.45);--ck-font:500 14px/1.45 "Mona Sans",sans-serif;--ck-btn-border:1.5px solid var(--line-2)}