@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/nunito-600.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-800.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-900.woff2) format("woff2")}
:root{--lg:#12804F;--ink:#14263D;--ink-2:#44586E;--floor:#F8EFDC;--paper:#FFFAF0;--line:#E3D5B8;--sky-1:#79C2FF;--sky-2:#DCF1FF;--teal:#0B6670;--gold:#F2B632;--red:#E5484D;--green:#3FBF6A;--blue:#2F7FE0;--navy:#14263D}
@media (prefers-color-scheme:dark){:root{--lg:#5ED39B;--ink:#EAF2F8;--ink-2:#A9BCCB;--floor:#0D1B2A;--paper:#15293D;--line:#27425C;--sky-1:#12396A;--sky-2:#0D1B2A;--teal:#6AD0D8}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--floor);color:var(--ink);font:600 18px/1.6 Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-weight:900;line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:clamp(28px,4vw,42px);margin-bottom:22px}
h3{font-size:24px}
p{margin:0 0 1em}
/* header + footer */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:900;font-size:22px;letter-spacing:-.01em}
.mark{display:grid;grid-template-columns:repeat(2,12px);gap:3px}
.mark i{width:12px;height:12px;border-radius:3px;display:block}
.mark i:nth-child(1){background:var(--red)}.mark i:nth-child(2){background:var(--gold)}.mark i:nth-child(3){background:var(--green)}.mark i:nth-child(4){background:var(--blue)}
.top nav{display:flex;gap:24px}.top nav a{color:var(--ink);font-weight:800;text-decoration:none}.top nav a:hover{text-decoration:underline}
.foot{background:#14263D;color:#EAF2F8;margin-top:72px;padding:36px 0 44px}
.foot .brand{color:#EAF2F8}.foot a{color:#FFD36B}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}.foot p{margin:0;width:100%;font-size:15px;color:#A9BCCB}
/* buttons use the game's own button art */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 26px 13px;border:0 solid transparent;border-image:url(/img/btn-green.webp) 45% 12% fill / 20px 26px stretch;background:none;color:#fff;font:900 17px/1.1 Nunito,system-ui,sans-serif;text-decoration:none;text-shadow:0 2px 0 rgba(0,70,20,.5);cursor:pointer}
.btn.cream{border-image-source:url(/img/btn-cream.webp);color:#14263D;text-shadow:none}
.btn.gold{border-image-source:url(/img/btn-gold.webp);color:#4A2A00;text-shadow:0 1px 0 rgba(255,240,170,.7)}
.btn:active{transform:translateY(2px)}
.btn[aria-disabled=true]{filter:grayscale(1);opacity:.6;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:8px}
/* sky bands */
.sky{background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 84%,var(--floor) 100%)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:48px;align-items:center;padding-top:16px;padding-bottom:64px}
h1.big{font-size:clamp(40px,5.8vw,76px);line-height:.98;margin-bottom:22px}
.lede{font-size:clamp(18px,2.1vw,21px);max-width:36em;color:var(--ink)}
/* pixel + speech bubble (game assets) */
.say{display:flex;flex-direction:column;align-items:flex-start}
.bubble{width:100%;border:0 solid transparent;border-image:url(/img/bubble.webp) 105 105 170 215 fill / 32px 32px 51px 65px stretch;padding:16px 20px 40px 24px;min-height:84px;color:#14263D;font:800 16px/1.35 Nunito,system-ui,sans-serif;filter:drop-shadow(0 6px 10px rgba(10,30,60,.2))}
.pose{height:150px;width:auto;margin:-20px 0 0 4px}
/* the demo */
.hero-demo{width:100%;max-width:480px;justify-self:end}
.panel{border:38px solid transparent;border-image:url(/img/panel.webp) 110 fill / 38px stretch;padding:0 2px 2px;color:#14263D}
.hud{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px;font-weight:900;font-size:15px}
.digits{display:flex;gap:4px}
.digits b{width:26px;height:36px;display:grid;place-items:center;border-radius:8px;background:#0B5A3C;box-shadow:0 0 0 3px #2FD36B,inset 0 -3px 0 rgba(0,0,0,.25);color:#FDF6EA;font:900 22px/1 Nunito,system-ui,sans-serif}
.board{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);background-color:#FBF4E6;background-image:linear-gradient(#EFE2CB 1px,transparent 1px),linear-gradient(90deg,#EFE2CB 1px,transparent 1px);background-size:calc(100%/var(--cols)) calc(100%/var(--rows));border-radius:8px}
.c{display:block;aspect-ratio:1;background-size:100% 100%;background-repeat:no-repeat}
.c.e{visibility:hidden}
.cK{background-image:url(/img/cube-K.webp)}.cY{background-image:url(/img/cube-Y.webp)}.cU{background-image:url(/img/cube-U.webp)}.cR{background-image:url(/img/cube-R.webp)}.cG{background-image:url(/img/cube-G.webp)}.cB{background-image:url(/img/cube-B.webp)}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.board.intro .c:not(.e){animation:pop .45s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d)}
.garages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 4px 4px;min-height:96px}
.g{position:relative;border:0;padding:0;background:transparent center/contain no-repeat;aspect-ratio:188/192;cursor:pointer}
.g[data-c=K]{background-image:url(/img/garage-K.webp)}.g[data-c=R]{background-image:url(/img/garage-R.webp)}.g[data-c=G]{background-image:url(/img/garage-G.webp)}.g[data-c=B]{background-image:url(/img/garage-B.webp)}
.g.done{cursor:default;opacity:.5;filter:saturate(.7)}
.g.done[data-c=K]{background-image:url(/img/garage-K-open.webp)}.g.done[data-c=R]{background-image:url(/img/garage-R-open.webp)}.g.done[data-c=G]{background-image:url(/img/garage-G-open.webp)}.g.done[data-c=B]{background-image:url(/img/garage-B-open.webp)}
.g b{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);min-width:46%;padding:0 8px;border-radius:999px;background:#FFF6E4;color:#14263D;font:900 14px/1.5 Nunito,system-ui,sans-serif;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.g.shake{animation:shake .4s}
.garages .btn{grid-column:1/-1;justify-self:center}
/* games list */
.games{padding-top:28px}.games h2{margin-bottom:44px}
.feature{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:56px}
.poster{display:block;max-width:300px;border-radius:26px;box-shadow:0 0 0 4px var(--gold),0 0 0 11px var(--teal),0 18px 34px rgba(10,30,60,.28);transform:rotate(-2deg)}
.poster img{border-radius:26px;width:100%}
.feature .logo{width:min(340px,80%);margin-bottom:14px}
.slim{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between;border-top:3px solid var(--line);padding-top:30px}
.slim p{margin:6px 0 0;color:var(--ink-2);max-width:34em}
/* game page */
.gp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:56px;align-items:center;padding-top:8px;padding-bottom:64px}
.gp-hero .logo{width:min(420px,100%);margin-bottom:18px}
.gp-hero .say{margin:22px 0 22px;max-width:460px}
.gp-poster{justify-self:center}
.sec{padding-top:56px}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px 36px}
.facts li{display:flex;gap:14px;align-items:flex-start}
.facts li::before{content:"";flex:none;width:26px;height:26px;margin-top:2px;background:center/100% 100% no-repeat}
.facts li:nth-child(4n+1)::before{background-image:url(/img/cube-R.webp)}.facts li:nth-child(4n+2)::before{background-image:url(/img/cube-G.webp)}.facts li:nth-child(4n+3)::before{background-image:url(/img/cube-B.webp)}.facts li:nth-child(4n)::before{background-image:url(/img/cube-K.webp)}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none}
.shots figure{margin:0}.shots img{border-radius:22px;box-shadow:0 0 0 3px var(--gold),0 12px 26px rgba(10,30,60,.25)}
.shots figcaption{margin-top:14px;font-size:16px;color:var(--ink-2)}
.credits{font-size:15px;color:var(--ink-2);max-width:48em}
/* document pages */
.say-wrap{max-width:820px;margin:0 auto;padding:0 20px 36px}
.sky.slim-top .say{max-width:520px;margin:10px 0 0}
.doc{background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:10px 30px 30px;max-width:780px;margin:36px auto 0}
.doc h1{font-size:clamp(28px,4vw,38px);margin:20px 0 8px}
.doc h2{font-size:21px;letter-spacing:-.01em;margin:1.7em 0 .4em;text-wrap:wrap}
.doc li{margin:.35em 0}.small{font-size:15px;color:var(--ink-2)}
details{border-top:2px solid var(--line);padding:16px 0}details:last-of-type{border-bottom:2px solid var(--line)}
summary{font-weight:900;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";font-weight:900}details[open] summary::after{content:"–"}
details p{margin:10px 0 0;color:var(--ink-2)}
@media (max-width:520px){.brand{font-size:19px;gap:9px}.top{gap:12px}.top nav{gap:16px}.top nav a{font-size:16px}.foot-in{gap:14px 24px}}
@media (max-width:860px){
 .hero,.gp-hero,.feature{grid-template-columns:minmax(0,1fr);gap:34px}
 .hero-demo{justify-self:center}.feature .poster{margin:6px auto 10px;max-width:230px}.gp-poster .poster{max-width:240px}.btn{padding:10px 20px 13px;font-size:16px}
 .shots{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:0 -4px}
 .shots figure{scroll-snap-align:start}
 
 .panel{border-width:28px;border-image-width:28px}.digits b{width:23px;height:32px;font-size:19px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.board.intro .c:not(.e){animation:none}.g.shake{animation:none}}

/* hub: studio home */
.hub{padding-top:36px;padding-bottom:20px}.hub h1.big{font-size:clamp(44px,7.4vw,96px);max-width:12em}
.hub .lede{max-width:34em}
.sgrid{--cs:56px;display:grid;grid-template-columns:repeat(5,var(--cs));justify-self:center;margin-right:24px;filter:drop-shadow(0 14px 18px rgba(10,30,60,.22))}
.sgrid i{display:block;width:var(--cs);height:var(--cs);background-size:100% 100%;background-repeat:no-repeat}
.sgrid i.e{visibility:hidden}
.sgrid.intro i:not(.e){animation:pop .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d)}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px}
.tile{display:flex;flex-direction:column;background:var(--paper);border:3px solid var(--line);border-radius:26px;overflow:hidden}
.tile-art{display:block;aspect-ratio:16/10;overflow:hidden;background:#12476A}
.tile-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.tile-art.type{display:grid;place-items:center;background:linear-gradient(135deg,#0F3B5C,#1F7A8C);text-decoration:none}
.tile-art.type span{font:900 clamp(34px,4vw,46px)/1 Nunito,system-ui,sans-serif;color:#FFD36B;transform:rotate(-4deg);text-shadow:0 4px 0 #0A2438}
.tile-body{padding:20px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.kind{align-self:flex-start;font-size:14px;font-weight:800;padding:1px 12px;border-radius:999px;background:var(--line);color:var(--ink)}
.tile-body p{margin:0;color:var(--ink-2)}
.tile-links{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:10px 12px}
.gp-hero{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
@media (max-width:860px){.hub{grid-template-columns:minmax(0,1fr);gap:30px}.sgrid{--cs:34px;justify-self:start;margin:0}.gp-hero{grid-template-columns:minmax(0,1fr)}}

/* brand: avatar from the studio logo + the logo's two-tone lettering */
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--gold);flex:none}
.brand b{color:var(--lg);font-weight:900}.foot .brand b{color:#5ED39B}
.emblem{justify-self:center;width:100%;max-width:400px;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 5px var(--gold),0 0 0 12px var(--teal),0 22px 40px rgba(10,30,60,.28)}
.emblem img{width:100%;height:100%;border-radius:50%}
@media (max-width:860px){.emblem{width:70%;max-width:260px;justify-self:center;order:-1;margin-top:6px}}
@media (max-width:520px){.brand img{width:36px;height:36px}}

.empty{margin:0;border:3px dashed var(--line);border-radius:22px;padding:22px 26px;color:var(--ink-2)}
.sec[id]{scroll-margin-top:12px}
@media (max-width:430px){.top{flex-wrap:wrap;gap:10px 16px}.top nav{width:100%;gap:22px}}

.art{width:100%;max-width:520px;justify-self:center;border-radius:28px;box-shadow:0 0 0 4px var(--gold),0 0 0 11px var(--teal),0 18px 34px rgba(10,30,60,.28)}
.art img{width:100%;height:auto;border-radius:28px}
@media (max-width:860px){.art{max-width:440px;margin:0 11px}}