:root{--ink:#0b0b0d}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{overflow-x:hidden}
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:50;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,1%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.progress{position:fixed;left:0;top:0;height:5px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--k);z-index:60}
.progress::after{content:"";position:absolute;right:-4px;top:2px;width:9px;height:14px;background:var(--k);border-radius:50% 50% 50% 50%/40% 40% 60% 60%}
.hero{position:relative;min-height:min(88vh,820px)}
#goo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;filter:blur(10px) contrast(28);background:var(--c);opacity:.95}
#eyes{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero h1{font-size:clamp(3.4rem,11vw,7.5rem);letter-spacing:-.02em;text-shadow:0 0 0 var(--c)}
.hero .copy{background:color-mix(in srgb,var(--c) 82%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:4px solid var(--k);border-radius:28px;padding:1.4rem 1.6rem;box-shadow:8px 8px 0 var(--k)}
.scramble{display:inline-block}
.btn,button{transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s;will-change:transform}
.btn:hover,button:hover{box-shadow:5px 5px 0 var(--k)}
.marquee{background:var(--k);color:var(--c);overflow:hidden;border-block:4px solid var(--k);padding:.9rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:2.4rem;width:max-content;animation:mq 32s linear infinite;font-weight:bold;font-size:clamp(1.1rem,2.6vw,1.6rem);white-space:nowrap}
.marquee .track span::before{content:"● ";color:var(--y)}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.spot{position:relative;overflow:hidden;--mx:50%;--my:50%}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(233,196,106,.38),transparent 60%);z-index:0}
.spot:hover::before{opacity:1}.spot>*{position:relative;z-index:1}
.dark .spot::before{background:radial-gradient(260px circle at var(--mx) var(--my),rgba(233,196,106,.22),transparent 60%)}
.ch img{will-change:transform}
.ch{position:relative}
.growth{position:relative}
.growth-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:center}
.meter-blob{aspect-ratio:1;max-width:420px;width:100%;margin:auto;position:relative}
.meter-blob svg{width:100%;height:100%;overflow:visible}
#gblob{transform-origin:200px 230px;transform:scale(.45)}
.miles{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.miles li{border:4px solid var(--k);border-radius:18px;padding:.8rem 1rem;background:#fff;box-shadow:4px 4px 0 var(--k);opacity:.45;transition:opacity .4s,transform .4s,background .4s}
.miles li.on{opacity:1;background:var(--y);transform:translateX(6px)}
.miles b{font-size:1.15rem}.miles small{display:block;opacity:.8}
.bar{height:16px;border:3px solid var(--k);border-radius:99px;overflow:hidden;background:#fff;margin:.8rem 0 1.2rem}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--k) 0 10px,#333 10px 20px);transition:width .2s}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,240%);opacity:0;background:var(--k);color:var(--c);padding:.7rem 1.2rem;border-radius:999px;border:3px solid var(--y);font-weight:bold;z-index:70;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.toast.show{transform:translate(-50%,0);opacity:1}
.splash{position:fixed;width:10px;height:14px;background:var(--k);border-radius:50% 50% 50% 50%/40% 40% 60% 60%;pointer-events:none;z-index:80}
.js .rv{opacity:0;transform:translateY(30px)}
.reduced .rv,.reduced .js .rv{opacity:1!important;transform:none!important}
@media(max-width:760px){.growth-wrap{grid-template-columns:1fr}.hero{min-height:auto}#goo{filter:blur(8px) contrast(24)}.hero .copy{padding:1rem 1.1rem}}
@media(prefers-reduced-motion:reduce){.grain,.marquee .track{animation:none}.hero img{animation:none}*{scroll-behavior:auto!important}}
.hero>*{min-width:0}.blobspace{min-height:420px}
#goo{opacity:1}
.hero .copy{background:color-mix(in srgb,var(--c) 92%,transparent)}
.master{border:5px solid var(--c);border-radius:28px;margin:1rem auto 2rem;max-width:760px;width:100%}
@media(max-width:760px){.blobspace{min-height:300px;order:-1}.hero{padding-top:1rem}}
#goo{mix-blend-mode:multiply}
/* hero layout fix */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center;min-height:auto;max-width:1300px}
.hero .copy{position:relative;z-index:2}
.blobspace{position:relative;width:100%;aspect-ratio:1/1;max-height:640px;min-height:0;overflow:visible}
.blobspace canvas{position:absolute;inset:0;width:100%;height:100%;z-index:auto;display:block}
#goo{filter:blur(10px) contrast(28);mix-blend-mode:multiply;background:var(--c)}
@media(max-width:1100px){.hero{grid-template-columns:minmax(0,1fr);max-width:760px}.blobspace{order:-1;aspect-ratio:auto;height:clamp(280px,48vw,440px);max-width:620px;margin:0 auto}}
@media(max-width:760px){.blobspace{height:300px}}
/* card never overflows: leave room for 8px offset shadow */
.hero .copy{box-sizing:border-box;width:auto;max-width:calc(100% - 10px);margin-right:10px;transform:none;overflow-wrap:anywhere}
.hero h1{overflow-wrap:normal;word-break:normal}
@media(max-width:1100px){.hero .copy{justify-self:stretch}}
/* image aspect fix: width/height attrs + max-width need height:auto */
img{height:auto;max-width:100%}
.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.grid figure{display:flex;flex-direction:column}
.grid figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--c)}
.ch img,.master{width:100%;height:auto;object-fit:contain}
/* a11y polish */
:focus-visible{outline:3px solid #e9c46a;outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px #111}
.skip{position:absolute;left:1rem;top:-100px;z-index:100;background:#111;color:#fbf6ea;padding:.6rem 1rem;border-radius:999px}.skip:focus{top:1rem}
picture{display:block}
section[id]{scroll-margin-top:70px}
.ch:nth-child(even) picture{order:2}
@media(max-width:760px){.ch:nth-child(even) picture{order:0}}
/* polish2 */
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem}
.steps a{display:inline-block;padding:.6rem 0;margin:-.6rem 0}
button,.btn{min-height:44px}
.launch{margin-top:1rem;border:3px dashed var(--k);border-radius:18px;padding:.7rem 1rem;background:var(--c)}
.launch p{margin:0}.launch small{color:#3a3a3a}
.launch .dot{display:inline-block;width:.65em;height:.65em;border-radius:50%;background:var(--y);border:2px solid var(--k);margin-right:.45em;vertical-align:baseline}
.launch code{background:#111;color:var(--c);padding:.15rem .45rem;border-radius:6px;word-break:break-all;font-size:.85rem}
.launch .mini{margin-top:.5rem;padding:.25rem .9rem;font-size:.95rem}
[hidden]{display:none!important}
@media(prefers-reduced-motion:no-preference){.launch .dot{animation:pulse 2s ease-in-out infinite}}
@keyframes pulse{50%{transform:scale(1.25)}}
@media(max-width:760px){.ca{font-size:.8rem;padding:.35rem .5rem;gap:.4rem}.ca code{font-size:.7rem;max-width:62vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ca button{min-height:36px;padding:.2rem .8rem}}
nav a{min-width:44px;justify-content:center}
@media(max-width:760px){nav a{margin-left:.15rem;min-width:40px}nav>div{margin-left:auto}}