/* Shared design system. Loaded last on every page. */
@font-face{font-family:Space;src:url('assets/space-grotesk-400.ttf');font-weight:400;font-display:swap}@font-face{font-family:Space;src:url('assets/space-grotesk-500.ttf');font-weight:500;font-display:swap}@font-face{font-family:Space;src:url('assets/space-grotesk-600.ttf');font-weight:600;font-display:swap}@font-face{font-family:Space;src:url('assets/space-grotesk-700.ttf');font-weight:700;font-display:swap}
:root{--ink:#262035;--cream:#faf8eb;--pink:#f3a5c2;--mint:#a4dfca;--purple:#79519a;--muted:#6b6071;--paper:var(--cream);--plum:var(--purple);--page-width:1280px;--gutter:48px;--surface-purple:#ede4ee;--surface-mint:#e4eddf;--surface-pink:#f1e3e9;--surface-oat:#f1edde}
body{background:var(--cream)!important;color:var(--ink)!important;font-family:Space,Arial,sans-serif!important;-webkit-font-smoothing:antialiased}body *,body *:before,body *:after{letter-spacing:normal!important}button,input,select,textarea{font-family:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:5px}h1,h2,h3{font-family:Space,Arial,sans-serif!important;font-weight:500!important;color:var(--ink)}p{line-height:1.75}h1{font-size:56px!important;line-height:1.08!important}h2{font-size:28px;line-height:1.2}h3{font-size:18px;line-height:1.35}
body .site-nav{box-sizing:border-box;width:100%;max-width:var(--page-width);min-height:110px;height:auto;margin:0 auto;padding:24px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--cream);border:0;position:relative;z-index:3}body .site-nav .brand{display:flex;align-items:center;gap:10px;margin:0;font:600 13px/1.14 Space,Arial,sans-serif;color:var(--ink);text-decoration:none;padding:0;flex-shrink:0}body .site-nav .brain{display:block;width:58px;height:58px;background:url('assets/brain-moveset.png') 0 0/400% 400%;image-rendering:pixelated}body .site-nav .brand-dot{color:var(--purple)}body .site-nav nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:auto;margin:0}body .site-nav nav>a,body .site-nav .nav-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 13px;margin:0;border:0;border-radius:7px;background:transparent;color:var(--ink);font:400 12px/1.4 Space,Arial,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}body .site-nav nav>a:hover,body .site-nav .nav-button:hover{background:var(--surface-purple);color:var(--purple)}body .site-nav nav>a[aria-current=page]{background:var(--surface-purple);color:var(--purple)}
body .dash-main,body.merch main,body.premise-page main{box-sizing:border-box;max-width:var(--page-width);padding:40px var(--gutter) 56px;margin:auto}body .shop-intro,body .story-intro{margin-top:0}.shop-intro h1,.story-intro h1,.dash-title h1{max-width:650px}.shop-intro p,.story-intro>p,.story-copy p,.journey-intro p:not(.eyebrow){color:var(--muted)}.story-intro{grid-template-columns:1.2fr 1fr;gap:48px}body .hero h1{font-size:clamp(64px,7.2vw,96px)!important}.hero .eyebrow,.eyebrow,.coming-soon,.detail-note,.prototype{font-family:Space,Arial,sans-serif!important;text-transform:none!important}.hero .eyebrow{font-size:12px}.watch{background:var(--ink)!important;color:var(--cream)!important;font:600 13px/1.4 Space,Arial,sans-serif!important;padding:16px 22px!important;box-shadow:4px 4px 0 var(--pink)}.journey{max-width:var(--page-width);padding:64px var(--gutter) 48px}.journey h2{font-size:40px}.outro{max-width:calc(var(--page-width) - 2 * var(--gutter));margin:0 auto;padding:32px 0;border:0}.outro h2{font-size:22px}.outro p{font-size:12px}
body .site-footer{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;width:100%;max-width:var(--page-width);margin:0 auto;padding:28px var(--gutter) 36px;border:0;color:var(--muted);font:400 11px/1.5 Space,Arial,sans-serif}body .site-footer a{color:var(--ink);text-decoration:none}.snapshot{background:var(--surface-purple)}.terrain-panel{background:var(--surface-mint)}.surroundings{background:var(--surface-oat)}.conversation{background:var(--surface-pink)}.story-invite{background:var(--surface-purple)}.mockup-note{background:var(--surface-purple);color:var(--purple)}
body dialog{background:var(--cream);color:var(--ink);border:0;border-radius:12px;padding:38px 32px 32px;font-family:Space,Arial,sans-serif;box-shadow:6px 6px 0 var(--pink)}body dialog h2{font-size:30px;line-height:1.2}body dialog p{color:var(--muted)}body .dialog-close{border:0;background:none;font:400 26px/1 Space;width:40px;height:40px}.roadmap-page .intro{box-sizing:border-box;max-width:var(--page-width);padding:40px var(--gutter);margin:auto;display:flex;gap:24px;align-items:center;justify-content:space-between}.roadmap-page .intro h1>span{color:var(--purple)}.roadmap-page .text-button{border:0;background:var(--surface-purple);border-radius:7px;padding:12px 16px;font:400 12px Space;white-space:nowrap;min-height:42px}.roadmap-page .milestone-detail{max-width:var(--page-width);padding:32px var(--gutter);grid-template-columns:80px 1fr 130px}.roadmap-page .chapter-nav{max-width:calc(var(--page-width) - 2 * var(--gutter));margin:0 auto 28px;border:0;gap:10px}.roadmap-page .chapter-tab{padding:14px;background:var(--surface-oat);border-radius:8px}.roadmap-page .chapter-tab:before{display:none}.roadmap-page .chapter-tab.active{background:var(--mint)}.roadmap-page .chapter-tab strong{font:500 12px/1.5 Space}.roadmap-page .chapter-tab span{font:400 10px Space;margin-bottom:5px}.roadmap-page .detail-meta,.roadmap-page .detail-date,.roadmap-page .status-pill,.roadmap-page .world-hint,.roadmap-page .sign-board,.roadmap-page .sign-number{font-family:Space,Arial,sans-serif}.roadmap-page .detail-main h2{font-size:28px}.roadmap-page .detail-main p{font-size:14px;color:var(--muted)}.roadmap-page .arrow-button{border:0;background:var(--surface-purple);color:var(--ink);border-radius:7px}.roadmap-notice{box-sizing:border-box;max-width:var(--page-width);margin:auto;padding:0 var(--gutter) 16px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.roadmap-notice p{margin:0}.roadmap-page .sign-date{font-size:9px}.roadmap-page .status-pill{border-radius:5px;background:var(--surface-purple)}.roadmap-page .status-pill[data-status=in-progress]{background:var(--surface-pink)}
@media(max-width:900px){:root{--gutter:28px}body .site-nav{gap:12px}body .site-nav nav{gap:2px}body .site-nav nav>a,body .site-nav .nav-button{padding:10px;font-size:11px}.story-intro h1{font-size:48px!important}.roadmap-page .chapter-nav{margin-left:var(--gutter);margin-right:var(--gutter)}.outro{margin-left:var(--gutter);margin-right:var(--gutter)}}
@media(max-width:700px){:root{--gutter:22px}body .site-nav{padding:16px var(--gutter) 12px;flex-wrap:wrap;min-height:120px;gap:10px}body .site-nav .brand{font-size:12px;gap:8px}body .site-nav .brain{width:48px;height:48px}body .site-nav nav{width:100%;justify-content:space-between;gap:2px;flex-wrap:wrap}body .site-nav nav>a,body .site-nav .nav-button{font-size:10px;min-height:40px;padding:8px 7px}body .dash-main,body.merch main,body.premise-page main{padding:28px var(--gutter) 40px}h1,.story-intro h1{font-size:40px!important}.hero h1{font-size:64px!important}body .hero h1{font-size:64px!important}.shop-intro{margin-top:0}.story-intro{display:block}.story-intro>p{font-size:14px}.journey{padding:40px var(--gutter)}.journey h2{font-size:32px}.outro{padding:28px 0}.outro h2{font-size:18px}.roadmap-page .intro{padding:28px var(--gutter);align-items:flex-start}.roadmap-page .intro h1{font-size:38px!important}.roadmap-page .milestone-detail{padding:26px var(--gutter);grid-template-columns:1fr 86px}.roadmap-page .chapter-number{display:none}.roadmap-page .chapter-tab{flex:0 0 120px}.roadmap-page .detail-main h2{font-size:25px}.roadmap-page .detail-main p{font-size:13px}.roadmap-notice{font-size:10px;flex-wrap:wrap}body .site-footer{padding:24px var(--gutter) 30px;font-size:10px}body .site-footer>span:last-child{width:100%}body dialog{padding:34px 24px 26px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Homepage first-stream ticker */
.stream-ticker{background:var(--mint);color:var(--ink)}.stream-ticker-inner{box-sizing:border-box;max-width:var(--page-width);margin:auto;padding:20px var(--gutter);display:flex;align-items:center;justify-content:center;gap:32px}.stream-label{font-size:15px;font-weight:500;white-space:nowrap}.stream-label>span{color:var(--purple);margin-right:8px}.stream-ticker p{margin:0;font-size:14px}.stream-clock{display:flex;align-items:center;gap:16px}.stream-clock[hidden]{display:none}.stream-clock>span{display:grid;text-align:center;gap:3px;min-width:44px}.stream-clock strong{font-size:28px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}.stream-clock small{font-size:10px}.stream-clock>b{font-weight:400;opacity:.5;align-self:flex-start}.stream-ticker time{font-size:12px}
@media(max-width:700px){.stream-ticker-inner{padding:18px var(--gutter);gap:14px 24px;flex-wrap:wrap}.stream-clock{gap:12px}.stream-clock strong{font-size:25px}.stream-clock>span{min-width:38px}.stream-ticker time{width:100%;text-align:center}}

.stream-date{display:block;font-size:11px;font-weight:400;margin-top:5px;padding-left:24px}

.roadmap-description{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* One heading color across all pages, including inline emphasis. */
body :is(h1,h2,h3,h4,h5,h6),body :is(h1,h2,h3,h4,h5,h6) *{color:var(--ink)!important}

/* Shared Twitch CTA shape. */
.watch{border-radius:7px!important}

/* Concept status light; no live connection is implied. */
body .site-nav nav .dashboard-status{display:inline-block;flex-shrink:0;width:7px;height:7px;margin:0 0 0 7px;border-radius:50%;background:#4c967a;box-shadow:0 0 0 3px #a4dfca55}

/* Keep navigation available while scrolling on every page. */
/* Full-width sticky surface; retain the same centered content margins. */
body .site-nav{position:sticky;top:0;z-index:50;max-width:none;padding-inline:max(var(--gutter),calc((100% - var(--page-width)) / 2 + var(--gutter)))}
html{scroll-padding-top:130px}
@media(max-width:700px){html{scroll-padding-top:155px}}

/* Clean walker label and vertically centered landscape controls. */
#walker>span{background:transparent;box-shadow:none;border:0;outline:0}
.world-caption{top:50%;bottom:auto;transform:translateY(-50%);z-index:2}
.world-control{pointer-events:none}.world-control button{pointer-events:auto}

/* Probably's homepage expressions. */
#walker{pointer-events:auto;cursor:pointer;touch-action:manipulation;min-width:44px;min-height:60px}
#walker.chasing{transition:none}
#walker .walker-emote{display:none;bottom:140%;font:500 12px Space;color:var(--ink);background:var(--pink);border-radius:6px;padding:5px 9px}
#walker.oof .walker-emote{display:block}
.walker-eyes{transform-box:fill-box;transform-origin:center;animation:probably-blink 5.3s infinite}
.walker-mouth{transform-box:fill-box;transform-origin:center;animation:probably-mumble 7s infinite}
#walker.oof .walking-body{animation:probably-oof .8s ease-out;transform-origin:50% 85%}
#walker.oof .walker-eyes{animation:none;transform:scaleY(.25)}
#walker.oof .walker-mouth{animation:none;transform:scale(.55,2.2)}
@keyframes probably-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.1)}}
@keyframes probably-mumble{0%,60%,76%,100%{transform:scaleY(1)}64%,72%{transform:scale(.65,1.8)}68%{transform:scaleY(.6)}}
@keyframes probably-oof{0%,100%{transform:none}18%{transform:translateY(3px) rotate(-9deg) scaleY(.78)}45%{transform:rotate(5deg) scaleY(.9)}70%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){#walker.oof .walking-body{animation:none}#walker{transition:none}}

/* Landscape arrows: original placement, softer borderless buttons. */
.world-caption{top:auto;bottom:15px;transform:none}
.world-control button{border:0;border-radius:4px}
@media(max-width:700px){.world-caption{bottom:12px}}

/* Reaching hop: lift the sprite and raise its arms. */
#walker.jumping svg{animation:probably-jump .7s ease-in-out}
#walker.jumping .walker-arm{transform-box:fill-box;transform-origin:center top}
#walker.jumping .left-arm{transform:rotate(155deg)}
#walker.jumping .right-arm{transform:rotate(-155deg)}
#walker.jumping .walker-mouth{animation:none;transform:scale(.6,1.6)}
@keyframes probably-jump{0%,100%{transform:translateY(0)}15%{transform:translateY(3px) scaleY(.9)}48%{transform:translateY(-40px)}80%{transform:translateY(-8px)}}

/* Stacked slides reserve space so rotating headlines never shift the scene. */
.title-cycle{position:relative;max-width:1080px;margin:0 auto}.title-cycle h1{display:grid;align-items:center}.title-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s ease;display:block}.title-slide.is-current{opacity:1;visibility:visible}.title-slide.game-message{font-size:.72em;line-height:1.25}.title-toggle{position:absolute;right:0;bottom:0;width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;pointer-events:auto}.title-toggle:hover{background:var(--surface-purple)}
@media(max-width:700px){.title-slide.game-message{font-size:.57em}.title-toggle{right:0;bottom:-22px}}

/* Preserve the original hero typography across all rotating messages. */
.title-cycle{max-width:1200px}
.title-cycle h1{font-weight:600!important}
.title-slide,.title-slide.game-message{font-size:1em;line-height:1.08;text-wrap:balance;transform:translateY(12px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.3,1),visibility .85s;will-change:opacity,transform}
.title-slide.is-current{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.title-slide{transform:none;transition:none}}

#visitor-creeper{position:absolute;width:34px;height:57px;transform:translate(-50%,-100%);pointer-events:none}#visitor-creeper[hidden]{display:none}#visitor-creeper svg{width:100%;height:100%;shape-rendering:crispEdges;animation:creeper-step .32s steps(2,end) infinite}@keyframes creeper-step{50%{transform:translateY(-3px) rotate(2deg)}}

/* Full-opacity rolling titles, with no crossfade. */
.title-cycle h1{overflow:hidden;padding-bottom:.06em}
.title-slide,.title-slide.game-message{opacity:1;visibility:visible;transform:translateY(115%);transition:none;will-change:transform}
.title-slide.is-current{transform:translateY(0);transition:transform 1s cubic-bezier(.22,.7,.18,1)}
.title-slide.is-leaving{transform:translateY(-115%);transition:transform 1s cubic-bezier(.22,.7,.18,1)}
@media(prefers-reduced-motion:reduce){.title-slide,.title-slide.game-message{visibility:hidden;transform:none;transition:none}.title-slide.is-current{visibility:visible}}

/* Alternating little creeper steps and a soft side-to-side bob. */
#visitor-creeper svg{transform-origin:50% 90%;animation:creeper-waddle .48s ease-in-out infinite}
.creeper-foot{transform-box:fill-box;transform-origin:center top;animation:creeper-leg .48s ease-in-out infinite}
.creeper-foot-right{animation-delay:-.24s}
@keyframes creeper-leg{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-4px) rotate(12deg)}}
@keyframes creeper-waddle{0%,100%{transform:translateY(0) rotate(-3deg)}25%,75%{transform:translateY(-2px) rotate(0)}50%{transform:translateY(0) rotate(3deg)}}

/* Familiar creeper tells, softened to the site's palette. */
.creeper-head{transform-box:fill-box;transform-origin:50% 90%;animation:creeper-look 2.4s ease-in-out infinite}
@keyframes creeper-look{0%,100%{transform:rotate(0)}35%,65%{transform:rotate(-5deg)}}
#visitor-creeper.hissing svg{animation:creeper-hiss 1.4s ease-in-out infinite}
#visitor-creeper.hissing .creeper-head{animation:none;transform:rotate(3deg)}
#visitor-creeper.hissing .creeper-foot{animation-duration:.7s}
@keyframes creeper-hiss{0%,100%{transform:scale(1);filter:brightness(1)}55%{transform:scale(1.1,1.04);filter:brightness(1.3) saturate(.65)}}

/* Quiet pixel glints, tucked outside the headline and copy. */
.sky-glint{position:absolute;pointer-events:none;width:16px;height:16px;background:var(--mint);opacity:.65;clip-path:polygon(40% 0,60% 0,60% 30%,70% 30%,70% 40%,100% 40%,100% 60%,70% 60%,70% 70%,60% 70%,60% 100%,40% 100%,40% 70%,30% 70%,30% 60%,0 60%,0 40%,30% 40%,30% 30%,40% 30%)}
.glint-left{left:4%;top:64%;background:var(--pink);width:12px;height:12px}
.glint-right{right:4%;top:72%}
.glint-low{left:10%;bottom:34px;width:7px;height:7px;background:var(--purple);opacity:.3;clip-path:none}
@media(max-width:700px){.glint-left{left:12px;top:auto;bottom:28px;width:9px;height:9px}.glint-right{right:12px;top:auto;bottom:54px;width:11px;height:11px}.glint-low{display:none}}