:root{
  --void:#06041a;      /* deep indigo space */
  --ink:#eef2ff;       /* starlight text */
  --dust:#b3b6dc;      /* secondary text */
  --comet:#5ff3e6;     /* comet cyan */
  --crystal:#b07cff;   /* growth matter */
  --sun:#ff9a3c;       /* sun / accretion */
  --deep:#1b3f86;
  --pixel:"Galmuri11","Galmuri9",ui-monospace,monospace;
  --body:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;word-break:keep-all;overflow-wrap:break-word;background:var(--void);color:var(--ink);font:400 1.0625rem/1.75 var(--body);-webkit-text-size-adjust:100%;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--comet)}
:focus-visible{outline:3px solid var(--comet);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--comet);color:var(--void);padding:8px 14px;font-family:var(--pixel);text-decoration:none}
.skip:focus{top:12px}

/* ---------- the universe */
#sky{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.fallback-art{display:none}
html.no-gl #sky,html:not(.js) #sky{display:none}
html.no-gl .fallback-art,html:not(.js) .fallback-art{display:block;position:fixed;inset:0;z-index:0;background:linear-gradient(rgba(6,4,26,.45),rgba(6,4,26,.75)),url(img/cosmos-wide.webp) center/cover no-repeat;image-rendering:pixelated}
html.no-gl .gl-only,html:not(.js) .gl-only{display:none}
html.no-gl #upgrade,html:not(.js) #upgrade{background:radial-gradient(closest-side,transparent 60%,var(--void)),url(img/wormhole.webp) right 8% center/min(46vw,520px) no-repeat}
html.no-gl #blackhole,html:not(.js) #blackhole{background:radial-gradient(closest-side,transparent 55%,var(--void)),url(img/blackhole.webp) center 30%/min(90vw,620px) no-repeat}

/* ---------- chrome */
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,40px) 26px;pointer-events:none;background:linear-gradient(rgba(6,4,26,.9),rgba(6,4,26,.6) 55%,rgba(6,4,26,0))}
.top a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font:700 1.05rem var(--pixel);color:var(--ink);text-decoration:none}
.brand img{width:36px;height:36px;border-radius:9px;image-rendering:pixelated}
.lang{font:400 .95rem var(--pixel);color:var(--ink);text-decoration:none;padding:6px 12px;border:2px solid rgba(95,243,230,.55);background:rgba(6,4,26,.55)}
.lang:hover{border-color:var(--comet);color:var(--comet)}

.stages{position:fixed;right:clamp(14px,2.4vw,32px);top:50%;transform:translateY(-50%);z-index:5}
.stages ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.stages a{display:grid;grid-template-columns:auto 16px;align-items:center;justify-items:center;gap:10px;font:400 .82rem var(--pixel);color:var(--dust);text-decoration:none;opacity:.7}
.stages a::after{content:"";width:var(--s,4px);height:var(--s,4px);background:currentColor;box-shadow:0 0 0 1px rgba(6,4,26,.6)}
.stages li:nth-child(1) a{--s:4px}.stages li:nth-child(2) a{--s:6px}.stages li:nth-child(3) a{--s:8px}
.stages li:nth-child(4) a{--s:10px}.stages li:nth-child(5) a{--s:12px}.stages li:nth-child(6) a{--s:14px}
.stages a:hover{opacity:1;color:var(--ink)}
.stages a[aria-current]{opacity:1;color:var(--comet)}
.stages li:last-child a[aria-current]{color:var(--sun)}
.stages li:last-child a[aria-current]::after{background:#000;box-shadow:0 0 0 2px var(--sun),0 0 10px var(--sun)}

.matter{position:fixed;left:clamp(16px,4vw,40px);bottom:max(14px,env(safe-area-inset-bottom));z-index:5;margin:0;font:400 .82rem var(--pixel);color:var(--dust);display:flex;align-items:center;gap:8px;pointer-events:none}
.matter b{color:var(--ink);font-weight:700;min-width:3ch}
.gem{width:9px;height:9px;background:var(--crystal);transform:rotate(45deg);box-shadow:0 0 8px var(--crystal)}
html.no-gl .matter,html:not(.js) .matter{display:none}

/* ---------- content */
main{position:relative;z-index:2}
section{position:relative}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px clamp(16px,7vw,120px) 72px}
.hero-copy{max-width:46rem}
.title{margin:0;font:700 clamp(2.9rem,13vw,7.4rem)/1.02 var(--pixel);white-space:nowrap;letter-spacing:.01em;color:#e6fdff;
  text-shadow:0 .055em 0 #2a9bbf,0 .11em 0 var(--deep),0 .165em 0 #120c3e,0 0 .45em rgba(95,243,230,.35)}
html[lang=en] .title{font-size:clamp(2.6rem,10vw,6.4rem);white-space:normal}
.lead{margin:1.6rem 0 0;max-width:24em;font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.6;text-shadow:0 1px 12px var(--void)}
.badge{display:inline-block;margin:1.6rem 0 0;padding:8px 14px 7px;font:700 .95rem var(--pixel);color:var(--void);background:var(--comet);
  box-shadow:4px 4px 0 var(--deep),0 0 24px rgba(95,243,230,.35)}
.hint{position:absolute;left:clamp(16px,7vw,120px);bottom:64px;right:16px;margin:0;font:400 .85rem var(--pixel);color:var(--dust)}

.chapter{min-height:150vh;min-height:150svh;padding:0 clamp(16px,7vw,120px)}
.copy{position:sticky;top:30vh;max-width:34rem;padding:28px 0}
.copy::before{content:"";position:absolute;inset:-60px -120px -60px -40vw;z-index:-1;background:linear-gradient(90deg,rgba(6,4,26,.85) 55%,rgba(6,4,26,0));-webkit-mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);pointer-events:none}
h2{margin:0 0 .8rem;font:700 clamp(1.5rem,3.6vw,2.3rem)/1.3 var(--pixel);color:var(--ink);text-shadow:0 3px 0 var(--deep)}
.copy p{margin:0;color:#dfe3fb}
.helpers{list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px;margin:1.3rem 0 0;padding:0;font:400 .9rem var(--pixel);color:var(--dust)}
.helpers li{display:flex;align-items:center;gap:8px}
.helpers li::before{content:"";width:10px;height:10px}
.h-worm::before{background:var(--comet);box-shadow:0 0 0 2px #2a2270}
.h-star::before{background:#fff2b0;transform:rotate(45deg)}
.h-white::before{background:#fff;box-shadow:0 0 8px #fff}
.h-gas::before{background:var(--crystal);opacity:.75;border-radius:50%}

.media{padding:18vh clamp(16px,6vw,96px) 22vh;max-width:1100px;margin:0 auto}
.video{position:relative;aspect-ratio:16/9;background:#000;border:3px solid var(--comet);box-shadow:6px 6px 0 var(--deep),0 0 40px rgba(95,243,230,.18)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shots-title{margin-top:3.2rem}
.shots{list-style:none;margin:0;padding:6px 4px 18px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:var(--crystal) transparent}
.shots li{flex:0 0 clamp(170px,42vw,230px);scroll-snap-align:start}
.shots img{border-radius:16px;border:2px solid rgba(176,124,255,.5);background:#0c0830}

.finale{min-height:170vh;min-height:170svh;text-align:center;padding:0 16px}
.finale-copy{position:sticky;top:64vh}
.finale .ending{margin:0 auto;max-width:17em;font:700 clamp(1.45rem,4.4vw,2.6rem)/1.4 var(--pixel);color:#fff3e2;
  text-shadow:0 3px 0 #5a1d0c,0 0 22px rgba(255,154,60,.55),0 0 2px #000}

.foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;padding:36px 16px calc(56px + env(safe-area-inset-bottom));font:400 .9rem var(--pixel);color:var(--dust);background:linear-gradient(transparent,rgba(6,4,26,.9) 40%)}
.foot a{color:var(--ink)}
.foot a:hover{color:var(--comet)}

/* ---------- phones */
@media (max-width:760px){
  .stages{display:none}
  .brand{font-size:.95rem}
  .hero{justify-content:flex-end;padding-bottom:96px}
  .hint{bottom:48px}
  .chapter{min-height:150svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4svh}
  .copy{position:sticky;top:auto;bottom:calc(44px + env(safe-area-inset-bottom));max-width:none;padding:20px 0}
  .copy::before{inset:-40px -16px;background:rgba(6,4,26,.8);-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
  .media{padding-top:12vh}
  .finale-copy{top:62svh}
}
@media (max-width:380px){
  body{font-size:1rem}
  .lang{padding:5px 9px}
}