:root{color-scheme:dark;--mint:#8df5ce;--lilac:#b68cff;--white:#eeeaf3;--muted:#96919e}
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0;background:#000;color:var(--white);overflow:hidden}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.story{position:relative;width:100%;height:100vh;height:100dvh;min-height:530px;background:#000;overflow:hidden;isolation:isolate}
#space,.visual-fallback{position:absolute;inset:0;width:100%;height:100%}
#space{z-index:1;display:block;touch-action:none}.visual-fallback{z-index:0;pointer-events:none}.canvas-ready .visual-fallback{display:none}
.fallback-unit{position:absolute;left:62%;top:44%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:50%;background:var(--mint);box-shadow:0 0 20px 8px #75f4c67a,0 0 95px 40px #58e1aa28}
.fallback-logo{display:none;position:absolute;width:min(65vw,850px);height:auto;left:61%;top:43%;transform:translate(-50%,-50%)}
.fallback-token{display:block;position:absolute;left:50%;top:50%;width:min(44vw,620px);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 0 24px #8d7af588)}
.fallback-solana{display:none;position:absolute;left:50%;top:50%;width:min(34vw,480px);height:auto;transform:translate(-50%,-50%)}
.show-solana .fallback-token{display:none}.show-solana .fallback-solana{display:block}
.stage-2 .fallback-unit,.stage-3 .fallback-unit,.stage-4 .fallback-unit{display:none}.stage-2 .fallback-logo{display:block}.stage-3 .fallback-token,.stage-4 .fallback-token{display:block}
.topline,.copy,.chapters,.visual-wordmark{position:absolute;z-index:2}
.topline{top:0;left:0;right:0;padding:clamp(24px,3.8vw,55px) clamp(24px,5.3vw,80px);display:flex;align-items:center;justify-content:space-between;gap:25px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.13em}
.home{text-decoration:none;color:#e7e3ee;font-weight:650;white-space:nowrap}.home span{color:#706a7a;font-weight:400}.home:focus-visible,.transport button:focus-visible,.chapter:focus-visible,.explore:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
.transport{display:flex;align-items:center;gap:clamp(16px,2.8vw,38px)}.runtime{color:#696370;font-size:11px}.transport button{border:0;border-bottom:1px solid #595261;background:none;color:#c8c1d0;font:inherit;letter-spacing:inherit;padding:5px 0;cursor:pointer}.transport button:hover{color:var(--mint);border-color:var(--mint)}
.copy{left:clamp(24px,7vw,108px);bottom:clamp(155px,19vh,210px);max-width:min(400px,34vw)}.kicker{margin:0 0 20px;color:var(--mint);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.17em}.copy h1{margin:0;font-size:clamp(48px,5.4vw,82px);font-weight:480;letter-spacing:-.065em;line-height:1.02}.description{max-width:380px;margin:20px 0 0;color:#aca7b4;font-size:clamp(15px,1.22vw,18px);line-height:1.5}.explore{display:none;align-items:center;gap:20px;width:max-content;margin-top:28px;padding:13px 0;border-bottom:1px solid #89e8c2;color:#a7f7d3;text-decoration:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.12em}.explore:hover{color:#fff}.explore{display:flex}
.visual-wordmark{left:62%;top:68%;transform:translate(-50%,10px);opacity:0;transition:opacity .6s,transform .6s;text-align:center;white-space:nowrap;pointer-events:none}.visual-wordmark span{display:block;color:#7f788a;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.22em;font-size:11px;margin-bottom:7px}.visual-wordmark strong{font-size:clamp(50px,6.6vw,102px);font-weight:560;letter-spacing:-.06em;line-height:1;color:#e9e5ef}.show-solana .visual-wordmark{opacity:1;transform:translate(-50%,0)}
.chapters{left:clamp(24px,5.3vw,80px);right:clamp(24px,5.3vw,80px);bottom:clamp(24px,3.3vw,48px)}.progress-track{height:1px;background:#524b5a;position:relative}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lilac),var(--mint));box-shadow:0 0 13px #7bffc8}.chapter-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.chapter{border:0;background:none;color:#77717f;text-align:left;padding:18px 8px 0 0;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.12em}.chapter span{display:block;font-size:14px;letter-spacing:.06em;margin-bottom:5px}.chapter em{font-style:normal}.chapter.active{color:#d8fbe7}.chapter:hover{color:#eae5ee}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){.story{min-height:0}.topline{padding:max(23px,env(safe-area-inset-top)) 23px;font-size:10px;letter-spacing:.09em}.runtime{display:none}.transport{gap:17px}.copy{left:24px;right:24px;bottom:clamp(150px,21vh,200px);max-width:none}.kicker{font-size:10px;margin-bottom:12px}.copy h1{font-size:clamp(38px,10vw,60px)}.description{font-size:14px;line-height:1.45;margin-top:12px;max-width:310px}.explore{margin-top:13px;padding:9px 0;font-size:10px}.visual-wordmark{left:50%;top:49%}.visual-wordmark span{font-size:9px}.visual-wordmark strong{font-size:clamp(46px,13vw,72px)}.chapters{left:23px;right:23px;bottom:max(25px,env(safe-area-inset-bottom))}.chapter{font-size:9px;padding-top:13px}.chapter span{font-size:12px}.fallback-unit{left:50%;top:34%}.fallback-logo{left:50%;top:35%;width:95vw}.fallback-token{left:50%;top:50%;width:min(78vw,325px)}.fallback-solana{left:50%;top:50%;width:min(60vw,250px)}}
@media(max-height:620px) and (min-width:721px){.copy{bottom:120px}.copy h1{font-size:54px}.description{margin-top:12px}.visual-wordmark{top:70%}}
@media(prefers-reduced-motion:reduce){.visual-wordmark{transition:none}}

@media(max-width:720px){#space{touch-action:pan-y}}

.story-title{position:absolute;z-index:2;top:clamp(72px,12vh,105px);left:50%;width:min(90vw,680px);transform:translateX(-50%);text-align:center;pointer-events:none}
.story-title h2{margin:0;color:#eeeaf3;font-size:clamp(30px,4.5vw,54px);font-weight:650;letter-spacing:-.055em;line-height:1}
.story-title p{margin:9px 0 0;color:#96919e;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(10px,1.3vw,14px);font-weight:400;letter-spacing:.13em;line-height:1.35}
@media(max-width:720px){.story-title{top:clamp(72px,12vh,101px);width:calc(100% - 48px)}.story-title h2{font-size:clamp(30px,8vw,40px)}.story-title p{font-size:10px;letter-spacing:.08em}}
@media(max-height:620px) and (min-width:721px){.story-title{top:72px}.story-title h2{font-size:32px}.story-title p{font-size:10px;margin-top:6px}}
