@font-face{font-family:Pixel;src:url('assets/pixelify-sans.ttf') format('truetype');font-display:swap;font-weight:400 700}
:root{--paper:#f5eddb;--ink:#243a3b;--accent:#bd332c;--muted:#686857;--line:rgba(36,58,59,.17);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:var(--paper);transition:background .7s,color .7s;color:var(--ink)}body.night{--paper:#18252e;--ink:#f5eddb;--accent:#ffae76;--muted:#b8c7bf;--line:rgba(245,237,219,.2)}body.burn{--paper:#302721;--ink:#f5eddb;--accent:#f3ba66;--muted:#d2bca5;--line:rgba(245,237,219,.2)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:6px}header{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:21px 4.2vw;pointer-events:none}header>*{pointer-events:auto}.brand img{display:block;width:140px;height:56px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(255,255,255,.2))}nav{display:flex;align-items:center;gap:28px;font-size:13px;font-weight:700}nav a:not(.nav-cta){padding:12px 0}.nav-cta{border:1px solid var(--ink);border-radius:3px;padding:13px 18px;display:flex;gap:23px}#motion{border:0;background:transparent;cursor:pointer;font-size:11px;opacity:.7;padding:12px 0}h1,h2{font-family:Pixel,monospace;font-weight:500;line-height:.98;letter-spacing:-.035em;margin:0}h1{font-size:clamp(48px,5.7vw,92px)}h2{font-size:clamp(42px,4.45vw,72px)}em{font-style:normal;color:var(--accent)}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 24px}.copy>p:not(.eyebrow):not(.aside):not(.awww):not(.domain){font-size:16px;line-height:1.6;max-width:350px;margin:25px 0 0;color:var(--muted)}.aside{font-family:Pixel,monospace;font-size:17px;color:var(--accent);margin-top:24px;max-width:310px}.receipt{display:inline-flex;align-items:center;gap:40px;transform:rotate(-4deg);padding:15px 20px;border-top:1px dashed var(--muted);border-bottom:1px dashed var(--muted);font-family:Pixel,monospace;font-size:13px;margin-top:28px}.tiny-tag{display:inline-block;border-bottom:2px solid var(--accent);font-family:Pixel;font-size:17px;padding-bottom:5px;margin-top:27px}.awww{font:36px Pixel;color:var(--accent);margin:25px 0 0;transform:rotate(-5deg)}.chapter{min-height:100svh;padding:120px 7vw 80px;position:relative}.chapter .copy{max-width:440px}.hero{text-align:center}.hero .copy{margin:0 auto;max-width:none}.hero .copy .intro{margin:18px auto 0!important;font-size:14px!important;line-height:1.5!important}.hero .eyebrow{margin-bottom:16px}.hero h1{line-height:.95}.scroll-hint{font:12px Pixel;position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;white-space:nowrap}.scroll-line{width:32px;height:1px;background:var(--accent)}#stage{position:fixed;inset:0;height:100svh;pointer-events:none;display:none;overflow:hidden}#scene{position:absolute;inset:0;width:100%;height:100%}#halo{position:absolute;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(ellipse,rgba(213,174,97,.17),transparent 66%);left:5%;top:13%;transition:background .8s}#device-shadow{position:absolute;width:44%;height:25px;left:12%;bottom:15%;background:#263e3b;filter:blur(18px);opacity:.16;border-radius:50%;will-change:transform,opacity}#fallback{position:absolute;width:48%;height:55%;object-fit:contain;left:7%;top:25%;filter:drop-shadow(0 20px 30px #0003);border-radius:14px;display:block}body.ready #fallback{display:none}#loading{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);font:12px Pixel;z-index:5;background:var(--paper);padding:10px 16px;border-radius:3px}body.ready #loading,body.still #loading{display:none}#progress{position:fixed;bottom:28px;left:4.2vw;right:4.2vw;display:none;grid-template-columns:1fr auto;gap:10px;font:10px Pixel;letter-spacing:.12em;pointer-events:none}.track{height:2px;background:var(--line);grid-column:span 2}.track i{display:block;width:0;height:100%;background:var(--accent)}.end{text-align:center}.end .copy{max-width:700px;margin:auto}.end h2{font-size:clamp(30px,3.3vw,48px)}.end .copy>p{margin:16px auto 24px!important}.end-logo{width:min(400px,70vw);height:155px;object-fit:contain;image-rendering:pixelated;margin-bottom:25px}.button{display:inline-flex;gap:38px;background:var(--ink);color:var(--paper);border-radius:3px;padding:18px 22px;font-weight:700;font-size:13px;transition:transform .2s}.button:hover{transform:translateY(-3px)}.gaki{display:block;width:max-content;margin:25px auto 0}.gaki img{width:130px;height:55px;object-fit:contain}.domain{font-size:11px;letter-spacing:.1em;color:var(--muted);margin:8px 0!important}.replay{display:block;font:15px Pixel;margin:24px 0 20px}.end small{display:block;font-size:10px;line-height:1.7;max-width:500px;margin:auto;color:var(--muted)}.skip{position:fixed;left:16px;top:-60px;z-index:99;background:var(--paper);padding:16px}.skip:focus{top:16px}.no-script{margin:40px}
/* JS enhancement: one continuous stage, chapters are real scroll destinations. */
body.enhanced #stage{display:block}body.enhanced .chapter{height:140svh;min-height:0;padding:0}body.enhanced .chapter .copy{position:fixed;left:65%;right:5%;top:50%;transform:translateY(-50%);visibility:hidden;opacity:0;transition:opacity .28s,visibility .28s;max-width:none;pointer-events:none}body.enhanced .chapter.active .copy{visibility:visible;opacity:1;pointer-events:auto}body.enhanced .hero .copy{left:12%;right:12%;top:125px;transform:none}body.enhanced .hero h1{font-size:clamp(48px,5.4vw,86px)}body.enhanced .hero .scroll-hint{position:fixed;bottom:66px;visibility:hidden;pointer-events:none}body.enhanced .hero.active .scroll-hint{visibility:visible;pointer-events:auto}body.enhanced .pair .copy{left:7%;right:67%}body.enhanced .pair h2{font-size:clamp(35px,3.5vw,57px)}body.enhanced .end .copy{left:10%;right:10%;top:50%;max-height:calc(100svh - 160px)}body.enhanced #progress{display:grid}body.enhanced .chapter:last-child{height:110svh}
body.still #scene{visibility:hidden}body.still #fallback{display:block}body.still *,body.still *::before{transition:none!important;scroll-behavior:auto!important}
@media(min-width:1500px){body.enhanced .hero .copy{top:14vh}.copy>p:not(.eyebrow):not(.aside):not(.awww):not(.domain){font-size:18px;max-width:380px}}
@media(max-width:760px) and (orientation:portrait){header{padding:14px 20px}.brand img{width:112px;height:44px}nav{gap:16px}nav>a:not(.nav-cta){display:none}.nav-cta{padding:10px 12px;font-size:11px;gap:12px}#motion{font-size:10px}body.enhanced .chapter{height:140svh}body.enhanced .chapter .copy,body.enhanced .pair .copy{left:7%;right:7%;top:108px;transform:none;text-align:left}body.enhanced .hero .copy{left:5%;right:5%;top:110px;text-align:center}body.enhanced .hero h1{font-size:clamp(40px,10vw,66px)}h2,body.enhanced .pair h2{font-size:clamp(36px,8.6vw,56px);line-height:1}.eyebrow{font-size:10px;margin-bottom:13px}.copy>p:not(.eyebrow):not(.aside):not(.awww):not(.domain){font-size:14px;line-height:1.45;max-width:340px;margin-top:14px}.aside{font-size:14px;margin-top:12px}.receipt,.tiny-tag{display:none}.awww{font-size:25px;margin-top:12px}body.enhanced .pair h2{font-size:34px;max-width:350px}.hero .intro{font-size:12px!important}.scroll-hint{font-size:11px!important;bottom:65px!important}#progress{left:20px;right:20px;bottom:20px;font-size:9px}#fallback{width:90%;left:5%;height:43%;top:48%}#device-shadow{width:74%;left:13%;bottom:13%}body.enhanced .end .copy{left:7%;right:7%;top:105px;transform:none;max-height:none}.end-logo{width:270px;max-width:80vw;height:115px;margin-bottom:18px}.end h2{font-size:32px}.end .eyebrow{font-size:9px}.end .copy>p{margin:16px auto!important}.button{font-size:12px;padding:16px 18px;gap:20px}.gaki{margin-top:23px}.replay{margin:19px 0}.end small{font-size:9px}.end .domain{font-size:10px}#halo{width:100vw;height:100vw;top:35%;left:0}#loading{bottom:45%;font-size:11px}}
@media(max-height:650px) and (min-width:761px),(max-height:650px) and (orientation:landscape){header{padding-top:10px}.brand img{height:43px}body.enhanced .hero .copy{top:82px}body.enhanced .hero h1{font-size:52px}.hero .intro{font-size:12px!important}h2{font-size:40px}.copy>p:not(.eyebrow):not(.aside):not(.awww):not(.domain){font-size:14px}.end-logo{height:85px;margin-bottom:10px}.end .eyebrow{margin-bottom:10px}.end .copy>p{margin:12px auto!important}.gaki{margin-top:14px}.gaki img{height:34px}.end .replay{margin:12px 0}.end small{font-size:9px}.button{padding:12px 18px}body.enhanced .end .copy{top:54%;max-height:none}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}body,*{transition:none!important}}

.chapter noscript img{display:block;width:min(680px,90vw);max-height:60vh;object-fit:contain;margin:35px auto}

@media(max-height:650px) and (min-width:761px),(max-height:650px) and (orientation:landscape){body.enhanced .hero .copy{left:7%;right:57%;top:28%;text-align:left}body.enhanced .hero h1{font-size:40px}.hero .copy .intro{margin-left:0!important}.hero .eyebrow{font-size:9px}}

@media(max-width:760px) and (orientation:portrait){body.enhanced .end .copy{text-align:center}.end .copy>p{max-width:none}}

@media(max-height:650px) and (min-width:761px),(max-height:650px) and (orientation:landscape){body.enhanced .hero .scroll-hint{left:7%;transform:none;bottom:60px}}
@media(max-height:720px) and (max-width:760px) and (orientation:portrait){body.enhanced .end .copy{top:94px}.end-logo{height:85px;width:240px;margin-bottom:12px}.end h2{font-size:29px}.end .copy>p{margin:12px auto!important}.end .gaki{margin-top:17px}.end .gaki img{height:42px}.end .replay{margin:14px 0}.end small{font-size:8px}}
/* V2: readable content below the interactive story. */
#fallback{border:8px solid #24252b;border-top-width:11px;border-bottom-width:11px;border-radius:23px;background:#24252b;object-fit:fill;box-shadow:0 18px 30px #263e3b22}
.hero .copy .intro{max-width:580px!important}body.enhanced .hero .copy .intro{font-size:14px!important}
#loading{display:none}body.loading #loading{display:block}body.loading .scroll-hint{visibility:hidden!important}
.game-info{position:relative;z-index:3;background:#f5eddb;color:#243a3b;padding:100px max(7vw,24px) 45px;border-top:1px solid #243a3b33;scroll-margin-top:90px}
.info-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;max-width:1240px;margin:auto}.info-intro h2{font-size:clamp(35px,4vw,58px)}.game-info p{line-height:1.7;color:#58615a;max-width:650px}.game-info figure{margin:0}.game-info img{width:100%;height:auto;border:7px solid #243a3b;border-radius:8px;image-rendering:pixelated}.game-info figcaption{font:15px Pixel;margin-top:14px;color:#a42e28}
.how-it-works,.questions{max-width:1240px;margin:80px auto 0}.how-it-works ol{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:0;list-style:none;counter-reset:steps}.how-it-works li{border-top:1px solid #243a3b44;padding-top:20px;counter-increment:steps}.how-it-works li:before{content:'0' counter(steps);font:25px Pixel;color:#bd332c}.game-info h3{font:26px/1.15 Pixel;margin:15px 0}.game-info h2{line-height:1.1}.answers{display:grid;grid-template-columns:1fr 1fr;gap:24px 8%;margin-top:25px}.answers>section{border-top:1px solid #243a3b33;padding-top:10px}.game-info a{text-decoration:underline;text-underline-offset:4px}.info-footer{max-width:1240px;margin:65px auto 0;border-top:1px solid #243a3b33;padding-top:25px;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;font-size:13px}.info-footer p{width:100%;margin:0;font-size:12px}
body.reading #stage,body.reading #progress,body.reading #loading,body.reading.enhanced .chapter .copy,body.reading.enhanced .scroll-hint{visibility:hidden!important;opacity:0!important;pointer-events:none!important}body.reading header{background:#f5eddbed;backdrop-filter:blur(12px)}
@media(max-width:760px) and (orientation:portrait){.info-intro,.answers,.how-it-works ol{grid-template-columns:1fr}.game-info{padding-top:65px}.info-intro{gap:30px}.game-info h2{font-size:36px}.game-info h3{font-size:24px}.game-info p{font-size:15px}.how-it-works,.questions{margin-top:55px}.how-it-works ol{gap:16px}.answers{gap:15px}.hero .copy .intro{max-width:330px!important}body.enhanced .hero .copy .intro{font-size:12px!important}#fallback{border-width:5px;border-radius:16px}}
@media(max-height:650px) and (min-width:761px),(max-height:650px) and (orientation:landscape){body.enhanced .hero .copy .intro{font-size:11px!important}.hero .copy .intro{max-width:300px!important}}
@media(max-width:760px) and (orientation:portrait){header .brand img{width:90px}header nav{gap:10px}header nav a[href="#about"]{display:block;font-size:11px;padding:8px 0}header #motion{font-size:9px}}
/* Phones on their side (about 340-440 px tall): the landscape layout with smaller type, so the words clear the header,
   the scroll hint and the progress bar (gakigames.com integration, 22 Oct 2026). */
@media(max-height:440px) and (orientation:landscape){header{padding-top:8px;padding-bottom:8px}.brand img{height:32px;width:auto}.nav-cta{padding:8px 12px}body.enhanced .hero h1{font-size:30px}.hero .eyebrow{margin-bottom:8px}body.enhanced .hero .copy .intro{font-size:10px!important;margin-top:8px!important;max-width:280px!important}body.enhanced .hero .scroll-hint{bottom:52px;font-size:10px}h2,body.enhanced .pair h2{font-size:26px;line-height:1.02}body.enhanced .chapter .copy{top:calc(50% + 6px)}body.enhanced .hero .copy{top:56px}body.enhanced .pair .copy{right:62%}.eyebrow{font-size:9px;margin-bottom:8px}.copy>p:not(.eyebrow):not(.aside):not(.awww):not(.domain){font-size:12px;line-height:1.35;margin-top:8px}.aside{font-size:12px;margin-top:8px}.awww{font-size:20px;margin-top:8px}.receipt,.tiny-tag{display:none}#progress{bottom:14px}body.enhanced .end .copy{top:calc(50% + 14px)}.end-logo{height:56px;width:auto;margin-bottom:6px}.end h2{font-size:22px}.end .copy>p{margin:6px auto!important}.end .gaki{margin-top:6px}.end .gaki img{height:26px}.end .replay{margin:6px 0}.end .domain,.end small{display:none}.button{padding:9px 14px}}