@font-face{font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bagel-fat-one-400.woff2) format('woff2')}
@font-face{font-family:'Gaegu';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/gaegu-700.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-700.woff2) format('woff2')}

:root{
  --cream:#FDF4EB;
  --paper:#FFFAF4;
  --ink:#141116;
  --pink:#FD73A9;
  --pink-2:#FFA6CA;
  --mint:#14F195;
  --gas:#A8F5CD;
  --purple:#9945FF;
  --lilac:#CDB8FF;
  --abyss:#05020C;
  --line:3px;
  --shadow:5px 5px 0 var(--ink);
  --display:'Bagel Fat One',system-ui,sans-serif;
  --hand:'Gaegu','Comic Sans MS',cursive;
  --mono:'Space Mono',ui-monospace,monospace;
  --body:'Space Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--abyss);color:var(--ink);
  font:500 17px/1.5 var(--body);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:3px dashed var(--purple);outline-offset:4px}

#bubbles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#fog{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(168,245,205,.85),rgba(168,245,205,.45) 40%,rgba(168,245,205,0) 75%)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
main{position:relative;z-index:2}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font:400 19px/1 var(--display);letter-spacing:.01em;text-decoration:none;
  padding:15px 24px 14px;border:var(--line) solid var(--ink);border-radius:999px;
  background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .2s;
  user-select:none;-webkit-user-select:none;white-space:nowrap;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-pink{background:var(--pink)}
.btn-mint{background:var(--mint)}
.btn-ink{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--pink)}
.btn-ink:hover{box-shadow:6px 6px 0 var(--pink)}
.btn-sm{font-size:16px;padding:11px 17px 10px}
.btn-lg{font-size:24px;padding:19px 32px 17px}
.btn-round{width:52px;height:52px;padding:0}
.btn-round svg{width:22px;height:22px;fill:var(--ink)}
.btn.is-soon{opacity:.82}

/* ---------- top bar ---------- */
.bar{
  position:fixed;z-index:80;top:14px;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 24px));display:flex;align-items:center;gap:18px;
  padding:8px 8px 8px 12px;background:var(--paper);border:var(--line) solid var(--ink);
  border-radius:999px;box-shadow:4px 4px 0 var(--ink);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3);
}
.bar.hide{transform:translate(-50%,-130%)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:400 22px/1 var(--display)}
.brand img{width:40px;height:40px}
.nav{display:flex;gap:4px;margin:0 auto}
.nav a{font-weight:700;font-size:15px;text-decoration:none;padding:8px 12px;border-radius:999px}
.nav a:hover{background:var(--pink-2)}
.bar-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav + .bar-r{margin-left:0}
.icon-btn{width:44px;height:44px;border-radius:50%;border:var(--line) solid var(--ink);background:var(--gas);
  display:grid;place-items:center;padding:0}
.icon-btn svg{width:22px;height:22px;fill:var(--ink);stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.icon-btn .ic-off{display:none}
.muted .icon-btn{background:var(--paper)}
.muted .icon-btn .ic-on{display:none}
.muted .icon-btn .ic-off{display:block}

/* ---------- depth gauge ---------- */
.depth{position:fixed;z-index:50;right:18px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
  transition:color .4s}
.depth.deep{color:var(--cream)}
.depth-track{position:relative;width:6px;height:46vh;border-radius:6px;background:rgba(20,17,22,.18)}
.depth.deep .depth-track{background:rgba(253,244,235,.18)}
.depth-fill{position:absolute;left:0;right:0;top:0;height:0;border-radius:6px;background:linear-gradient(var(--pink),var(--purple),var(--mint))}
.depth-head{position:absolute;left:50%;top:0;width:34px;height:34px;transform:translate(-50%,-50%);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}
.depth-val{writing-mode:horizontal-tb;white-space:nowrap}
.depth-val b{font-size:13px}

/* ---------- hero / surface ---------- */
.hero{
  position:relative;min-height:max(720px,100svh);overflow:hidden;
  background:
    radial-gradient(circle,rgba(20,17,22,.07) 1.2px,transparent 1.6px) 0 0/22px 22px,
    var(--cream);
  display:grid;grid-template-columns:1fr minmax(260px,auto) 1fr;
  grid-template-rows:auto 1fr auto;padding:0 4vw 130px;
}
.sky{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;display:block;width:150px;height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 64'%3E%3Cpath d='M22 58c-11 0-18-7-18-16s8-16 18-15c2-11 12-19 24-17 6-8 18-11 28-6 7-6 22-6 30 4 13-1 24 8 24 20 9 2 15 9 15 16 0 8-7 14-16 14z' fill='%23FFFAF4' stroke='%23141116' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  animation:drift 60s linear infinite;opacity:.95}
.c1{top:16%;left:-160px;animation-duration:70s}
.c2{top:30%;left:-160px;width:110px;height:44px;animation-duration:52s;animation-delay:-30s}
.c3{top:9%;left:-160px;width:90px;height:36px;animation-duration:85s;animation-delay:-55s}
.c4{top:46%;left:-160px;width:130px;height:52px;animation-duration:64s;animation-delay:-12s}
@keyframes drift{to{transform:translateX(calc(100vw + 340px))}}

.wordmark{
  grid-column:1/-1;grid-row:1;justify-self:center;position:relative;z-index:1;
  margin:clamp(96px,13vh,140px) 0 0;display:flex;gap:.03em;
  font:400 clamp(72px,15.5vw,250px)/.86 var(--display);letter-spacing:-.01em;
  color:var(--pink);-webkit-text-stroke:max(4px,.035em) var(--ink);paint-order:stroke fill;
  text-shadow:.035em .045em 0 var(--ink);user-select:none;-webkit-user-select:none;
}
.wordmark span{display:inline-block;will-change:transform}
.wordmark span:nth-child(odd){animation:bob 3.2s ease-in-out infinite}
.wordmark span:nth-child(even){animation:bob 3.2s ease-in-out -1.6s infinite}
@keyframes bob{50%{translate:0 -.035em}}

.hero-stage{grid-column:2;grid-row:1/3;position:relative;z-index:3;align-self:end;justify-self:center;
  margin-top:calc(clamp(96px,13vh,140px) + clamp(72px,15.5vw,250px)*.5)}
.hero .sol{height:min(66vh,640px);max-height:calc(100svh - 260px);min-height:360px}
.ground{position:absolute;left:12%;right:12%;bottom:-10px;height:26px;border-radius:50%;background:rgba(20,17,22,.14);z-index:-1}

.hint{position:absolute;right:-200px;top:34%;width:190px;white-space:nowrap;z-index:4;font:700 22px/1.05 var(--hand);color:var(--ink);rotate:6deg;
  transition:opacity .3s}
.hint svg{width:64px;height:40px;margin:4px 0 0 -6px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.hero-left{grid-column:1;grid-row:2;align-self:end;z-index:4;padding-bottom:10px}
.kicker{display:inline-block;margin:0 0 14px;font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  background:var(--ink);color:var(--cream);padding:8px 12px;border-radius:999px;transform:rotate(-2deg)}
.thesis-big{margin:0;font:400 clamp(40px,4.6vw,74px)/.98 var(--display);display:flex;flex-direction:column}
.thesis-big span:last-child{color:var(--pink);-webkit-text-stroke:max(3px,.04em) var(--ink);paint-order:stroke fill;text-shadow:.04em .05em 0 var(--ink)}

.hero-right{grid-column:3;grid-row:2;align-self:end;justify-self:end;z-index:4;display:flex;flex-direction:column;gap:14px;align-items:flex-end;padding-bottom:10px}
.btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.ca{display:flex;align-items:center;gap:10px;max-width:100%;background:var(--paper);border:var(--line) solid var(--ink);border-radius:16px;
  padding:6px 6px 6px 12px;box-shadow:4px 4px 0 var(--ink)}
.ca-label{font:700 12px/1 var(--mono);background:var(--purple);color:#fff;padding:6px 7px;border-radius:7px}
.ca code{font:700 14px/1.2 var(--mono);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}
.ca-copy{border:2px solid var(--ink);background:var(--gas);border-radius:10px;font:700 13px/1 var(--mono);padding:9px 11px;text-transform:uppercase}
.ca-copy:active{transform:translateY(1px)}
.ca-copy.done{background:var(--pink)}

.waves{position:absolute;left:0;bottom:-1px;width:100%;height:120px;z-index:5;pointer-events:none;overflow:visible}
.waves path{stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}
.waves .w2{fill:#B9A0FF;animation:wave 9s linear infinite reverse}
.waves .w1{fill:var(--lilac);animation:wave 7s linear infinite}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-720px)}}

/* ---------- the sol rig ---------- */
.sol{position:relative;aspect-ratio:812/1319;cursor:pointer;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline-offset:8px}
.sol img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.sol-body{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.012,.992)}}
.sol-head{position:absolute;inset:0;transform-origin:55.4% 36.4%;
  --c:0;transform:translate(var(--jx,0px),var(--jy,0px)) scale(calc(1 + var(--c)*.3),calc(1 + var(--c)*.26));
  filter:saturate(calc(1 + var(--c)*.7)) hue-rotate(calc(var(--c)*-14deg)) brightness(calc(1 - var(--c)*.06))}
.eye{position:absolute;width:10.7%;aspect-ratio:1;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%)}
.eye.l{left:46.4%;top:15.5%}
.eye.r{left:69.4%;top:15.2%}
.pupil{position:absolute;left:29.5%;top:29.5%;width:41%;height:41%;border-radius:50%;background:#0b0a0c;
  transform:translate(var(--px,0%),var(--py,0%));transition:transform .08s linear}
.lid{position:absolute;left:-5%;right:-5%;top:-5%;height:110%;background:var(--pink);transform:translateY(calc(-104% + var(--c)*48%));transition:transform .09s ease}
.lid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;background:var(--ink);border-radius:50%}
.sol.blink .lid{transform:translateY(0)}
.sol-game{height:min(46vh,430px)}

/* puffs, pops */
.puff{position:absolute;left:0;top:0;width:var(--s,120px);height:auto;margin:calc(var(--s,120px)*-.43) 0 0 calc(var(--s,120px)*-.5);will-change:transform,opacity}
.puff svg{display:block;width:100%;height:auto;overflow:visible}
.puff .po circle{fill:var(--ink)}
.puff .pf circle{fill:var(--gas)}
.puff .ph circle{fill:#E2FDEF}
.pop{position:absolute;left:0;top:0;white-space:nowrap;font:400 var(--fs,34px)/1 var(--display);color:var(--gas);
  -webkit-text-stroke:max(3px,.09em) var(--ink);paint-order:stroke fill;text-shadow:.05em .07em 0 var(--ink);will-change:transform,opacity}
.drop{position:absolute;left:0;top:0;width:12px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7FD3FF;border:2px solid var(--ink)}

/* ---------- ocean ---------- */
.ocean{position:relative;margin-top:-2px;overflow-x:clip;
  background:linear-gradient(180deg,var(--lilac) 0%,#B89BFF 9%,#9670F6 20%,#6A3FDC 33%,#46209F 46%,#2A116B 58%,#170843 70%,#0B0424 82%,var(--abyss) 92%)}
.rays{position:absolute;inset:0 0 auto;height:1600px;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(105deg,transparent 0 70px,rgba(255,255,255,.55) 70px 130px,transparent 130px 230px);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}

.tapes{position:relative;height:150px;margin-top:-10px;z-index:3}
.tape{position:absolute;left:-5%;width:110%;overflow:hidden;border-block:var(--line) solid var(--ink);padding:12px 0 10px;white-space:nowrap}
.tape-run{display:inline-block;font:400 30px/1 var(--display);animation:tape 30s linear infinite}
.t1{top:20px;background:var(--purple);color:var(--cream);transform:rotate(-2.4deg)}
.t2{top:70px;background:var(--pink);color:var(--ink);transform:rotate(1.6deg)}
.t2 .tape-run{animation-direction:reverse;animation-duration:36s}
@keyframes tape{to{transform:translateX(-50%)}}

.sec{position:relative;padding:clamp(70px,10vw,140px) max(5vw,20px);max-width:1280px;margin:0 auto;z-index:3}
.sec-tag{display:inline-block;margin:0 0 22px;font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:8px 12px;border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
.h2{margin:0 0 18px;font:400 clamp(52px,8.4vw,128px)/.9 var(--display);color:var(--cream);
  -webkit-text-stroke:max(4px,.045em) var(--ink);paint-order:stroke fill;text-shadow:.04em .055em 0 var(--ink)}
.sub{max-width:560px;margin:0 0 30px;font-size:19px;font-weight:700}
.sub.light,.scribble.light,.hold .sub{color:var(--cream)}
.scribble{font:700 clamp(28px,3.4vw,42px)/1 var(--hand);margin:46px 0 0;text-align:center;transform:rotate(-2deg)}
.sticker{position:absolute;border:6px solid var(--paper);border-radius:22px;box-shadow:0 0 0 3px var(--ink),8px 10px 0 3px rgba(0,0,0,.35)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.3,1.15)}
.reveal.in{opacity:1;transform:none}

/* thesis */
.thesis{text-align:center}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);perspective:1200px}
.card{background:var(--paper);border:var(--line) solid var(--ink);border-radius:28px;padding:16px 16px 26px;box-shadow:8px 8px 0 var(--ink);text-align:left;
  transform-style:preserve-3d;transition:transform .2s ease}
.card.in{transform:rotate(var(--r,-1.5deg))}
.card:nth-child(2){--r:1.8deg}
.card-img{border-radius:18px;overflow:hidden;border:var(--line) solid var(--ink);aspect-ratio:1}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.05)}
.card h3{margin:20px 6px 6px;font:400 clamp(40px,5vw,66px)/.95 var(--display)}
.card:nth-child(2) h3{color:var(--pink);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.card p{margin:0 6px;font-size:18px;font-weight:700}

/* story */
.chapters{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(40px,7vw,90px);position:relative}
.chapters::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;border-left:5px dotted rgba(253,244,235,.55)}
.chapter{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,70px);position:relative}
.chapter.flip .porthole{order:2}
.porthole{justify-self:center;width:min(100%,400px);aspect-ratio:1;border-radius:50%;padding:22px;position:relative;
  background:
    radial-gradient(circle at 50% 2.8%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 97.2% 50%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 50% 97.2%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 2.8% 50%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 17.3% 17.3%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 82.7% 17.3%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 17.3% 82.7%,var(--ink) 0 5px,transparent 6px),
    radial-gradient(circle at 82.7% 82.7%,var(--ink) 0 5px,transparent 6px),
    linear-gradient(135deg,#FFE3EF,var(--pink-2));
  border:var(--line) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.porthole img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:var(--line) solid var(--ink)}
.porthole::after{content:"";position:absolute;inset:22px;border-radius:50%;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.45) 0 18%,transparent 34%)}
.chap-card{background:var(--paper);border:var(--line) solid var(--ink);border-radius:24px;padding:24px 26px;box-shadow:6px 6px 0 var(--ink);position:relative;max-width:480px}
.chapter:not(.flip) .chap-card{transform:rotate(1.2deg)}
.chapter.flip .chap-card{transform:rotate(-1.2deg);justify-self:end}
.chap-n{position:absolute;top:-22px;left:22px;font:400 26px/1 var(--display);background:var(--pink);border:var(--line) solid var(--ink);border-radius:999px;padding:8px 14px 6px}
.chap-card h3{margin:8px 0 8px;font:400 40px/1 var(--display)}
.chap-card p{margin:0;font-size:18px;font-weight:700}

/* hold it in */
.hold-sticker{width:clamp(130px,17vw,230px);right:max(5vw,20px);top:70px;transform:rotate(7deg)}
.game{display:grid;grid-template-columns:auto 1fr minmax(260px,330px);align-items:center;gap:clamp(18px,4vw,50px);
  background:rgba(253,244,235,.1);border:var(--line) solid var(--ink);border-radius:36px;padding:clamp(18px,3vw,36px);
  box-shadow:8px 8px 0 var(--ink);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.gauge{display:flex;gap:12px;height:min(46vh,430px)}
.gauge-tube{position:relative;width:64px;height:100%;border:var(--line) solid var(--ink);border-radius:40px;background:rgba(253,244,235,.9);overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.gauge-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--mint),var(--gas) 55%,var(--pink) 88%,#FF3B6B);border-top:3px solid var(--ink)}
.gauge-danger{position:absolute;left:0;right:0;top:0;height:3%;background:repeating-linear-gradient(45deg,#FF3B6B 0 6px,var(--ink) 6px 12px);border-bottom:2px solid var(--ink)}
.gauge-marks{list-style:none;margin:0;padding:0;position:relative;width:80px;font:700 12px/1 var(--mono);text-transform:uppercase;color:var(--cream)}
.gauge-marks li{position:absolute;left:0;transform:translateY(50%);white-space:nowrap}
.gauge-marks li::before{content:"";display:inline-block;width:10px;height:3px;background:var(--cream);vertical-align:middle;margin-right:6px}
.game-stage{display:flex;justify-content:center;align-items:flex-end;min-height:min(46vh,430px)}
.game-panel{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--cream)}
.psi{display:flex;align-items:baseline;gap:8px;font:400 64px/1 var(--display);color:var(--cream);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink)}
.psi span{font:700 18px/1 var(--mono);-webkit-text-stroke:0;text-shadow:none}
.hold-btn{width:168px;height:168px;border-radius:50%;border:4px solid var(--ink);background:var(--pink);font:400 38px/1 var(--display);
  box-shadow:0 9px 0 var(--ink);transition:transform .08s,box-shadow .08s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold-btn.down{transform:translateY(7px);box-shadow:0 2px 0 var(--ink);background:#FF5C97}
.hold-btn.shake{animation:jit .08s linear infinite}
@keyframes jit{25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px -2px}}
.hold-help{margin:-4px 0 0;font-size:14px;opacity:.8}
kbd{font:700 12px/1 var(--mono);border:2px solid currentColor;border-radius:6px;padding:2px 6px}
.result{min-height:78px;display:flex;flex-direction:column;gap:4px}
.result b{font:400 30px/1 var(--display);color:var(--gas)}
.result.fail b{color:#FF7AA8}
.result span{font-weight:700}
.result.pulse{animation:pulse .5s ease}
@keyframes pulse{40%{transform:scale(1.12)}}
.game-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-weight:700}

/* gas-onomics */
.gas{text-align:center}
.gas-wrap{position:relative;width:min(100%,760px);aspect-ratio:1.35;margin:10px auto 0}
.gas-core{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  border:var(--line) solid var(--ink);overflow:hidden;box-shadow:0 0 0 10px rgba(20,241,149,.25),0 0 90px 20px rgba(153,69,255,.6)}
.gas-core img{width:100%;height:100%;object-fit:cover}
.bubble{position:absolute;width:clamp(120px,19%,150px);aspect-ratio:1;border-radius:50%;border:var(--line) solid var(--cream);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85) 0 7%,rgba(255,255,255,.18) 8% 30%,rgba(168,245,205,.18) 60%,rgba(153,69,255,.35));
  color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset -8px -10px 24px rgba(20,241,149,.35),0 0 30px rgba(20,241,149,.25);animation:float 5s ease-in-out infinite;transition:scale .25s}
.bubble b{font:400 38px/1 var(--display);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 var(--ink)}
.bubble span{font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.bubble:hover{scale:1.08}
.bubble.popped{animation:none;scale:0;transition:scale .14s ease-in}
.b1{left:2%;top:4%}
.b2{right:2%;top:8%;animation-delay:-1.2s}
.b3{left:6%;bottom:2%;animation-delay:-2.5s}
.b4{right:5%;bottom:4%;animation-delay:-3.6s}
@keyframes float{50%{translate:0 -14px}}

/* how to buy */
.steps{list-style:none;margin:20px 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--paper);border:var(--line) solid var(--ink);border-radius:24px;padding:24px 20px 22px;box-shadow:6px 6px 0 var(--ink);position:relative}
.step:nth-child(odd).in{transform:rotate(-1.5deg)}
.step:nth-child(even).in{transform:rotate(1.5deg) translateY(16px)}
.step-n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--mint);border:var(--line) solid var(--ink);font:400 26px/1 var(--display);margin-bottom:14px}
.step:nth-child(2) .step-n{background:var(--pink)}
.step:nth-child(3) .step-n{background:var(--lilac)}
.step:nth-child(4) .step-n{background:#FFD66B}
.step h3{margin:0 0 6px;font:400 28px/1 var(--display)}
.step p{margin:0;font-weight:700}
.buy-row{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ca-big code{font-size:16px;max-width:460px}
.buy-sticker{width:clamp(130px,16vw,220px);right:max(5vw,20px);top:60px;transform:rotate(-6deg)}
.chart-box{margin:40px auto 0;max-width:1000px;height:520px;border:var(--line) solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);background:#111}
.chart-box iframe{width:100%;height:100%;border:0}

/* meme vault */
.memes{max-width:1400px}
.pile{position:relative;height:1060px;margin-top:30px}
.meme{position:absolute;margin:0;width:var(--w,260px);padding:10px 10px 12px;background:var(--paper);border:var(--line) solid var(--ink);border-radius:16px;
  box-shadow:6px 8px 0 rgba(0,0,0,.45);cursor:grab;touch-action:none;transform:rotate(var(--r,0deg));
  transition:left .7s cubic-bezier(.2,.9,.3,1.1),top .7s cubic-bezier(.2,.9,.3,1.1),transform .25s,box-shadow .25s;
  -webkit-user-select:none;user-select:none}
.meme img{width:100%;border-radius:9px;border:2px solid var(--ink);pointer-events:none;-webkit-user-drag:none}
.meme figcaption{font:700 19px/1.1 var(--hand);margin-top:8px;text-align:center;color:var(--ink)}
.meme:hover{transform:rotate(var(--r,0deg)) scale(1.04)}
.meme.dragging{cursor:grabbing;transition:transform .2s,box-shadow .2s;transform:rotate(0deg) scale(1.08);box-shadow:14px 18px 0 rgba(0,0,0,.4)}
.pile-foot{text-align:center;margin-top:30px}

/* the bottom */
.bottom{max-width:none;padding:0;min-height:100vh;display:flex;flex-direction:column}
.abyss{position:absolute;inset:0;overflow:hidden;z-index:-1}
.abyss img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.abyss::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--abyss) 0%,rgba(5,2,12,.35) 30%,rgba(5,2,12,.1) 60%,rgba(5,2,12,.85) 100%)}
.bottom-inner{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(90px,14vw,170px) 20px max(56vh,440px)}
.mega{margin:0;font:400 clamp(56px,10vw,150px)/.88 var(--display);color:var(--cream);-webkit-text-stroke:max(4px,.04em) var(--ink);paint-order:stroke fill;
  text-shadow:.04em .05em 0 var(--ink),0 0 60px rgba(20,241,149,.35)}
.mega-sub{font:400 clamp(26px,3.4vw,44px)/1.1 var(--display);color:var(--gas);margin:22px 0 34px;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.mega-sub em{font-style:normal;color:var(--pink)}
.bottom-ctas{display:flex;flex-direction:column;align-items:center;gap:16px}
.bottom-ctas .btns{justify-content:center}
.foot{position:relative;padding:26px max(5vw,20px) 34px;text-align:center;color:rgba(253,244,235,.75);font-size:14px;max-width:760px;margin:0 auto}
.foot p{margin:0 0 6px}
.foot-small{font:700 12px/1 var(--mono);opacity:.7}

/* lightbox + toast */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(5,2,12,.82);display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(900px,100%);background:var(--paper);border:var(--line) solid var(--ink);border-radius:22px;padding:12px;box-shadow:8px 8px 0 var(--pink);animation:lbIn .3s cubic-bezier(.2,.9,.3,1.3)}
@keyframes lbIn{from{transform:scale(.85) rotate(-3deg);opacity:0}}
.lightbox img{max-height:72vh;width:auto;margin:0 auto;border-radius:12px;border:2px solid var(--ink)}
.lightbox figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 2px;flex-wrap:wrap}
.lightbox figcaption b{font:700 26px/1 var(--hand)}
.lb-btns{display:flex;gap:10px}
.toast{position:fixed;z-index:95;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--ink);color:var(--cream);font-weight:700;
  padding:13px 20px;border-radius:999px;border:2px solid var(--gas);transition:transform .35s cubic-bezier(.2,.9,.3,1.3),visibility 0s .35s;pointer-events:none;max-width:calc(100% - 30px);text-align:center;visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hint{right:-150px;width:150px;font-size:19px}
  .nav{display:none}
  .game{grid-template-columns:auto 1fr}
  .game-panel{grid-column:1/-1}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding:0 18px 140px;text-align:center}
  .wordmark{margin-top:96px}
  .hero-stage{grid-column:1;grid-row:2;margin-top:2vw}
  .hero .sol{height:min(52vh,470px);min-height:300px}
  .hint{right:-30px;top:44%;width:auto;font-size:17px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:6px 9px 4px;box-shadow:3px 3px 0 var(--ink)}
  .hint svg{display:none}
  .hero-left{grid-column:1;grid-row:3;padding:26px 0 0}
  .thesis-big{align-items:center}
  .hero-right{grid-column:1;grid-row:4;justify-self:center;align-items:center;padding-top:22px}
  .btns{justify-content:center}
  .depth{display:none}
  .cards{grid-template-columns:1fr}
  .chapters::before{left:28px}
  .chapter,.chapter.flip{grid-template-columns:1fr}
  .chapter.flip .porthole{order:0}
  .chapter.flip .chap-card{justify-self:start}
  .porthole{width:min(82vw,360px)}
  .hold-sticker,.buy-sticker{position:relative;right:auto;top:auto;margin:0 0 20px auto;display:block}
  .steps{grid-template-columns:1fr 1fr}
  .gas-wrap{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;justify-items:center}
  .gas-core{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;width:min(76vw,380px);margin-bottom:10px}
  .bubble{position:relative;inset:auto;width:min(40vw,150px)}
  .pile{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .meme{position:relative;left:auto!important;top:auto!important;width:auto;touch-action:auto;cursor:pointer}
}
@media (max-width:600px){
  body{font-size:16px}
  .bar{top:10px;padding:6px 6px 6px 10px;gap:8px}
  .brand span{font-size:19px}
  .brand img{width:34px;height:34px}
  .bar .btn-sm .js-ticker{display:none}
  .icon-btn{width:40px;height:40px}
  .ca code{max-width:52vw;font-size:13px}
  .ca-big code{max-width:52vw}
  .btn{font-size:17px;padding:13px 19px 12px}
  .btn-lg{font-size:21px}
  .btn-round{width:48px;height:48px;padding:0}
  .hero-right .btns .js-buy{flex-basis:100%}
  .game{grid-template-columns:auto 1fr;padding:16px;gap:12px}
  .gauge{height:300px}
  .gauge-tube{width:46px}
  .gauge-marks{width:58px;font-size:10px}
  .game-stage{min-height:300px}
  .sol-game{height:290px}
  .hold-btn{width:140px;height:140px;font-size:32px}
  .psi{font-size:52px}
  .steps{grid-template-columns:1fr}
  .step:nth-child(even).in{transform:rotate(1.5deg)}
  .tape-run{font-size:24px}
  .tapes{height:120px}
  .t2{top:58px}
  .meme figcaption{font-size:16px}
  .chap-card h3{font-size:34px}
  .lightbox figcaption b{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}