@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* Livelings: a twilight garden. Each creature lives inside a glowing "moon" (its warm studio shot,
   melted into the night). Fireflies drift in the sky; the aurora and every glow take the chosen
   creature's accent colour. */
:root{
  --night:#120F26; --night2:#1D1840; --ink:#F6EFE3; --muted:#B9B0CF; --line:rgba(246,239,227,.14);
  --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.1); --moon:#EFE8DC;
  --accent:#D9561F;
  --r:28px; --display:"Bricolage",ui-rounded,system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif;
  --gut:max(16px,4vw);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--night);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--night);padding:10px 14px;border-radius:10px;z-index:60}
.skip:focus{left:12px}
.eyebrow{font:600 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h2{font:700 clamp(36px,5vw,72px)/.98 var(--display);letter-spacing:-.035em;margin:0 0 16px;text-wrap:balance}
.sub{color:var(--muted);max-width:54ch;margin:0 0 32px;font-size:18px}

/* ---------- living background ---------- */
.skyfill{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 80% at 50% 0%,var(--night2),var(--night) 62%)}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:55vw;height:55vw;left:5%;top:0;background:radial-gradient(circle,color-mix(in oklab,var(--accent) 70%,transparent),transparent 65%)}
.aurora i:nth-child(2){width:45vw;height:45vw;right:0;top:30%;background:radial-gradient(circle,rgba(108,85,216,.55),transparent 65%);animation-duration:34s;animation-delay:-8s}
.aurora i:nth-child(3){width:40vw;height:40vw;left:30%;bottom:-5%;background:radial-gradient(circle,rgba(47,163,107,.28),transparent 65%);animation-duration:40s;animation-delay:-16s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-5vw,-3vh) scale(.95)}}
main,.foot{position:relative;z-index:1}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:24px;padding:16px var(--gut);transition:background .4s}
.top.solid{background:rgba(18,15,38,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.brand img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));animation:breathe 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.brand img{animation:none}}
.toplinks{display:flex;gap:24px;margin-left:auto}
.toplinks a{text-decoration:none;font-weight:600;font-size:15px;opacity:.85}
.toplinks a:hover{opacity:1}
.pill{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;backdrop-filter:blur(10px)}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:4px;background:currentColor;border-radius:2px}
.pill[aria-pressed=true]{background:var(--ink);color:var(--night)}
.pill[aria-pressed=true] .eq i{animation:eq .9s ease-in-out infinite alternate}
.pill[aria-pressed=true] .eq i:nth-child(2){animation-delay:-.3s}.pill[aria-pressed=true] .eq i:nth-child(3){animation-delay:-.6s}.pill[aria-pressed=true] .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:3px}to{height:14px}}

/* ---------- buttons ---------- */
.btn{border:0;background:var(--ink);color:var(--night);border-radius:999px;padding:16px 26px;font:700 16px/1 var(--display);text-align:center;text-decoration:none;display:inline-block;transition:transform .25s,box-shadow .25s;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn.glow{box-shadow:0 10px 40px color-mix(in oklab,var(--accent) 55%,transparent)}
.btn.glow:hover{box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 25%,transparent),0 14px 50px color-mix(in oklab,var(--accent) 70%,transparent)}
.btn.ghost{background:var(--glass);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);backdrop-filter:blur(8px)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}

/* ---------- the moon: a living loop inside a glowing disc ---------- */
.moon{position:absolute;border-radius:50%;background:var(--moon);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 60px 6px color-mix(in oklab,var(--accent) 45%,transparent),0 0 160px 30px color-mix(in oklab,var(--accent) 22%,transparent)}
.moon video,.moon img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04)}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -30px 60px rgba(18,15,38,.18),inset 0 20px 40px rgba(255,255,255,.35);pointer-events:none}

/* ---------- 1. hero ---------- */
.hero{height:190vh;position:relative}
.hero-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;padding:90px var(--gut) 40px;gap:2vw;overflow:hidden}
.hero-copy{position:relative;z-index:3}
h1{font:700 clamp(54px,7.4vw,124px)/.9 var(--display);letter-spacing:-.045em;margin:0 0 24px}
h1 .ln{display:block}
h1 .alive{background:linear-gradient(90deg,var(--ink) 20%,color-mix(in oklab,var(--accent) 75%,var(--ink)),var(--ink) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:44ch;margin:0 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-stage{position:relative;height:min(80svh,780px);aspect-ratio:1;justify-self:center;max-width:100%}
.hero-stage .moon.big{inset:20%;z-index:2}
.hero-name{position:absolute;left:0;right:0;bottom:-4%;text-align:center;font:600 15px/1 var(--body);color:var(--muted);margin:0;z-index:3;letter-spacing:.02em}
.orbit{position:absolute;inset:0;z-index:1}
.orbit .moon{width:12%;aspect-ratio:1;left:44%;top:44%;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 26px 2px rgba(255,255,255,.12);will-change:transform}
.orbit .moon img{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1.04)}50%{transform:scale(1.1) translateY(-2%)}}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3}
.scroll-hint span{width:22px;height:34px;border:1.5px solid var(--line);border-radius:12px;position:relative}
.scroll-hint span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:var(--ink);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
.hero-count{position:absolute;right:var(--gut);bottom:30px;text-align:right;color:var(--muted);font-size:14px;line-height:1.3;z-index:3;opacity:0}
.hero-count b{display:block;font:700 64px/1 var(--display);color:var(--ink);letter-spacing:-.04em}

/* ---------- 2. meet: horizontal parade ---------- */
.meet{position:relative}
.meet-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:80px 0 30px}
.meet-head{padding:0 var(--gut);max-width:900px}
.meet-head .sub{margin-bottom:28px}
.track{display:flex;gap:26px;padding:0 var(--gut);width:max-content;will-change:transform}
.lcard{width:clamp(240px,21vw,320px);flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:24px 20px 20px;border-radius:32px;background:linear-gradient(180deg,var(--glass2),var(--glass));box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s}
.lcard:hover{transform:translateY(-8px)}
.lcard .moon{position:relative;width:80%;aspect-ratio:1;margin-bottom:14px}
.lcard h3{font:700 26px/1 var(--display);letter-spacing:-.02em;margin:0}
.lcard .k{font-size:14px;color:var(--muted);margin:0}
.lcard .l{font-size:15px;margin:6px 0 12px;min-height:3em}
.lcard button{border:0;background:var(--glass2);color:var(--ink);border-radius:999px;padding:10px 16px;font:600 14px/1 var(--body);box-shadow:inset 0 0 0 1px var(--line)}
.lcard button:hover{background:var(--ink);color:var(--night)}

/* ---------- 3. maker ---------- */
.make{max-width:1320px;margin:0 auto;padding:clamp(80px,10vw,140px) var(--gut) 0}
.maker{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:start}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:min(520px,64svh);justify-self:center}
@media (min-width:901px){.stage{position:sticky;top:96px}}
.stage .moon{inset:6%;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.25,1.2)}
.stage .moon.off{opacity:0;transform:scale(.86)}
.stage .moon.summon{animation:summon .9s cubic-bezier(.2,.9,.25,1.25)}
@keyframes summon{0%{transform:scale(.7) rotate(-6deg);filter:brightness(1.6) blur(6px)}100%{transform:none;filter:none}}
.stage.hello .moon:not(.off){animation:hello .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes hello{30%{transform:scale(1.06,.94)}60%{transform:scale(.97,1.04)}}
.boop{position:absolute;inset:14%;border-radius:50%;border:0;background:transparent;z-index:3}
.sparks{position:absolute;left:50%;top:50%;z-index:4;pointer-events:none}
.sparks i{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:radial-gradient(circle,#fff,var(--accent) 60%,transparent 70%);animation:spark 1.1s cubic-bezier(.15,.7,.3,1) forwards;transform:scale(var(--s))}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.namecard{position:absolute;left:2%;bottom:3%;z-index:5;background:rgba(18,15,38,.72);backdrop-filter:blur(12px);border-radius:20px;padding:10px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.namecard input{display:block;border:0;background:transparent;font:700 24px/1.1 var(--display);width:8em;padding:0;outline:none;color:var(--ink)}
.namecard input:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.namecard span{font-size:13px;color:var(--muted)}
.round{position:absolute;right:2%;bottom:3%;z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:rgba(18,15,38,.72);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;backdrop-filter:blur(12px)}
.round svg{width:20px;height:20px}
.round[aria-pressed=false] .ic-play,.round[aria-pressed=true] .ic-pause{display:none}
.row-label{font-weight:600;font-size:15px;margin:0 0 10px}
.creatures{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:22px}
.tile{border:0;background:var(--glass);border-radius:18px;padding:6px 5px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s,background .2s}
.tile img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;display:block}
.tile span{font-size:11.5px;font-weight:600;line-height:1.2;text-align:center;color:var(--muted)}
.tile:hover{transform:translateY(-2px)}
.tile[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--ink),0 0 24px color-mix(in oklab,var(--accent) 50%,transparent);background:var(--glass2)}
.tile[aria-checked=true] span{color:var(--ink)}
.hues{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.hue{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:56px}
.hue img{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 1px var(--line)}
.hue span{font-size:11.5px;color:var(--muted)}
.hue[aria-checked=true] img{box-shadow:0 0 0 2.5px var(--night),0 0 0 4.5px var(--ink)}
.hue[aria-checked=true] span{color:var(--ink);font-weight:600}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.toast{min-height:1.5em;margin:12px 0 0;font-size:15px;color:var(--muted)}

/* ---------- 4. where ---------- */
.where,.shop{max-width:1240px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gut) 0}
.where h2,.shop h2{margin-bottom:40px}
.mocks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mock{margin:0;background:#FBF7F0;color:#1F1A16;border-radius:var(--r);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px;min-height:310px}
.mock figcaption{margin-top:auto;padding-top:14px;font-weight:600;color:#6B6158;font-size:15px}
.av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--moon);display:block}
.av video{width:100%;height:100%;object-fit:cover;transform:scale(1.25);display:block}
.av.big{width:76px;height:76px;box-shadow:0 8px 24px rgba(60,40,20,.25);border:3px solid #fff}
.mock-bar{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(31,26,22,.1)}
.mock-bar small{display:block;color:#6B6158;font-size:13px}
.bub{margin:0;padding:10px 14px;border-radius:18px;max-width:85%;font-size:15px}
.bub.them{background:#EFE8DC;border-bottom-left-radius:6px}
.bub.me{background:#1F1A16;color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.mock.server{background:#2B2D31;color:#EEE8E0}
.mock.server figcaption{color:#B5BAC1}
.srv-row{display:flex;gap:12px}
.srv-row p{margin:2px 0 0;font-size:15px;color:#DBDEE1}
.srv-row.dim{opacity:.7}
.botpill{font-size:11px;font-weight:600;background:#5865F2;color:#fff;border-radius:5px;padding:1px 5px;vertical-align:2px}
.srv-row .dot{width:44px;height:44px;border-radius:50%;background:#5DBB9C;flex:none}
.mock.site{background:linear-gradient(#fff,#F4EEE4);position:relative}
.site-lines{display:flex;flex-direction:column;gap:10px}
.site-lines i{display:block;height:12px;border-radius:6px;background:#EAE2D6;width:80%}
.site-lines i.s{width:50%}
.widget{position:absolute;right:20px;bottom:56px;display:flex;align-items:flex-end;gap:10px}
.widget p{margin:0 0 10px;background:#fff;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;box-shadow:0 6px 20px rgba(60,40,20,.12)}

/* ---------- 5. custom ---------- */
.custom{max-width:1240px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gut) 0}
.custom-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:start}
.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 26px;display:grid;gap:18px}
.steps li{counter-increment:s;position:relative;padding-left:58px;color:var(--muted)}
.steps li b{color:var(--ink);display:block;font:700 20px/1.2 var(--display);margin-bottom:2px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--display);color:var(--ink);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line),0 0 24px color-mix(in oklab,var(--accent) 35%,transparent)}
.promise{background:var(--glass);border-radius:18px;padding:14px 18px;box-shadow:inset 0 0 0 1px var(--line);margin:0}
.order{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border-radius:32px;padding:30px;box-shadow:inset 0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.35),0 0 120px color-mix(in oklab,var(--accent) 18%,transparent);backdrop-filter:blur(14px)}
.order-top{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.order .price{font:700 64px/1 var(--display);letter-spacing:-.04em;margin:0}
.small{color:var(--muted);font-size:15px}
.order label{display:block;font-weight:600;margin-bottom:8px}
.order textarea{width:100%;border:0;border-radius:18px;padding:14px 16px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--line);resize:vertical;min-height:120px;color:var(--ink)}
.order textarea::placeholder{color:#8F87A8}
.order textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.count{text-align:right;font-size:13px;color:var(--muted);margin:6px 0 14px}

/* ---------- 6. shop ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg,var(--glass2),var(--glass));border-radius:var(--r);padding:28px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.card ul{margin:0 0 24px;padding-left:18px;color:var(--muted)}
.card li{margin:6px 0}
.card .btn{margin-top:auto;width:100%}
.price{font:700 48px/1 var(--display);letter-spacing:-.03em;margin:0 0 16px}
.price small{font:600 14px/1 var(--body);color:var(--muted);letter-spacing:0;margin-left:6px}
.card.star{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 30%,rgba(255,255,255,.08)),var(--glass));box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--accent) 70%,white),0 0 80px color-mix(in oklab,var(--accent) 25%,transparent)}
.fine{font-size:14px;color:var(--muted);margin:14px 0 0}
.fine b{color:var(--ink)}
.center{text-align:center}

/* ---------- close ---------- */
.close{position:relative;text-align:center;padding:clamp(130px,16vw,230px) var(--gut) 60px;overflow:hidden}
.close h2{font-size:clamp(44px,7vw,110px);margin-bottom:30px;position:relative;z-index:2}
.close .btn{position:relative;z-index:2}
.close-moons{position:absolute;inset:0;z-index:1;pointer-events:none}
.close h2,.close .btn{text-shadow:0 2px 30px var(--night)}
.close-moons .moon{width:clamp(54px,6.5vw,96px);aspect-ratio:1;box-shadow:0 0 30px rgba(255,255,255,.12)}
.close-moons .moon img{animation:breathe 4s ease-in-out infinite}
.foot{max-width:1240px;margin:0 auto;padding:40px var(--gut) 50px;color:var(--muted);font-size:14px;text-align:center}
.foot p{margin:4px 0}

.unlock{position:fixed;inset:0;background:rgba(10,8,22,.7);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;z-index:50}
.unlock-box{background:var(--night2);border-radius:var(--r);padding:30px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:inset 0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.5)}
.unlock-box h2{font-size:32px}
.unlock-box p{color:var(--muted);margin:0 0 18px}
.dl{display:grid;gap:10px;margin-bottom:16px}

/* ---------- phone ---------- */
@media (max-width:900px){
  .close-moons .moon:nth-child(2),.close-moons .moon:nth-child(7),.close-moons .moon:nth-child(5),.close-moons .moon:nth-child(8),.close-moons .moon:nth-child(10),.close-moons .moon:nth-child(12){display:none}
  .toplinks{display:none}
  .brand{margin-right:auto}
  .hero{height:auto}
  .hero-pin{position:relative;height:auto;min-height:100svh;grid-template-columns:minmax(0,1fr);padding:76px var(--gut) 56px;gap:0;align-content:start}
  .hero-stage{order:-1;width:min(100%,440px);height:auto;margin:0 auto -10px}
  h1{font-size:clamp(46px,13.5vw,66px)}
  .lede{font-size:17px}
  .cta-row .btn{flex:1 1 auto}
  .hero-count,.scroll-hint{display:none}
  .meet-pin{height:auto;padding:90px 0 10px}
  .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:12px}
  .track::-webkit-scrollbar{display:none}
  .lcard{width:74vw;scroll-snap-align:center}
  .maker{grid-template-columns:minmax(0,1fr)}
  .stage{position:sticky;top:58px;z-index:6;width:min(100%,340px);margin:0 auto}
  .namecard{padding:7px 12px}
  .namecard input{font-size:19px;width:7em}
  .namecard span{font-size:12px}
  .round{width:42px;height:42px}
  .creatures{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:78px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut)) 20px;padding:2px var(--gut) 4px}
  .creatures::-webkit-scrollbar{display:none}
  .hue{width:calc((100% - 48px)/7)}
  .hue img{width:100%;height:auto;aspect-ratio:1}
  .actions .btn{flex:1 1 auto}
  .mocks,.cards,.custom-grid{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px) and (max-width:1180px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .hero{height:auto}.hero-pin{position:relative}
  .hero-count{opacity:1}
}

/* ================= funnel v2: centred hero, story, order studio, celebration ================= */
/* hero: Apple-style, centred, few words; the moon sits under the copy */
.hero-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;text-align:center;align-items:start;padding-top:max(96px,12svh);gap:0}
.hero-copy{max-width:900px}
.hero h1{font-size:clamp(56px,8.4vw,136px);margin-bottom:18px}
.hero .lede{margin:0 auto 26px;max-width:40ch}
.hero .cta-row{justify-content:center}
.hero-stage{height:min(52svh,560px);margin-top:-2svh}
.cta-row.center{justify-content:center}
.actions.center{justify-content:center}

/* story: a blank chat becomes someone */
.story{max-width:1240px;margin:0 auto;padding:clamp(60px,8vw,120px) var(--gut) 0}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
.story-mock-wrap{position:relative}
.story-mock{position:sticky;top:calc(50svh - 170px);margin:0;background:#FBF7F0;color:#1F1A16;border-radius:var(--r);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px;max-width:440px;margin-left:auto;transition:box-shadow .8s}
.story-mock .bub{transition:opacity .5s}
.story-mock .typing{display:flex;gap:5px;width:max-content}
.story-mock .typing i{width:7px;height:7px;border-radius:50%;background:#9A9087;animation:typing 1.2s infinite}
.story-mock .typing i:nth-child(2){animation-delay:.2s}.story-mock .typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.av.blank{position:relative;background:#D8D2CA;display:grid;place-items:center;transition:transform .8s cubic-bezier(.2,.9,.25,1.3),box-shadow .8s}
.av.blank b{font:700 13px/1 var(--body);color:#8C847C;transition:opacity .4s}
.av.blank video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(.6);transition:opacity .7s,transform .9s cubic-bezier(.2,.9,.25,1.3)}
.story-mock[data-step="1"] .av.blank{filter:grayscale(1);opacity:.7}
.story-mock[data-step="2"] .av.blank,.story-mock[data-step="3"] .av.blank{transform:scale(1.5);box-shadow:0 0 0 3px #fff,0 0 30px 6px color-mix(in oklab,var(--accent) 60%,transparent)}
.story-mock[data-step="2"] .av.blank video,.story-mock[data-step="3"] .av.blank video{opacity:1;transform:scale(1.04)}
.story-mock[data-step="2"] .av.blank b,.story-mock[data-step="3"] .av.blank b{opacity:0}
.story-mock[data-step="2"] .mock-bar,.story-mock[data-step="3"] .mock-bar{padding-left:10px}
.story-mock[data-step="3"]{box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 120px color-mix(in oklab,var(--accent) 40%,transparent)}
.story-lines{display:flex;flex-direction:column}
.sline{min-height:62svh;display:flex;flex-direction:column;justify-content:center;margin:0;font:700 clamp(32px,4.2vw,60px)/1.02 var(--display);letter-spacing:-.03em;opacity:.18;transition:opacity .6s,transform .6s;transform:translateY(16px)}
.sline:first-child{min-height:44svh}
.sline:last-child{min-height:70svh}
.sline.on{opacity:1;transform:none}
.sline .dim{color:var(--muted);font-size:.62em;margin-top:10px;letter-spacing:-.01em}
.sline .hl{background:linear-gradient(90deg,var(--ink),color-mix(in oklab,var(--accent) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* offer stack + guarantee */
.stack{background:var(--glass);border-radius:24px;padding:22px 24px;box-shadow:inset 0 0 0 1px var(--line);margin:0 0 16px}
.stack-h{font:700 20px/1.2 var(--display);margin:0 0 10px}
.stack ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:9px}
.stack li{position:relative;padding-left:30px;color:var(--muted)}
.stack li b{color:var(--ink)}
.stack li::before{content:"✦";position:absolute;left:4px;top:0;color:color-mix(in oklab,var(--accent) 70%,var(--ink))}
.stack-note{margin:0;font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.guarantee{display:flex;gap:14px;align-items:center;background:color-mix(in oklab,var(--accent) 16%,transparent);border-radius:20px;padding:14px 18px;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 45%,transparent)}
.guarantee p{margin:0}
.seal{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--night);font:700 22px/1 var(--display)}

/* the order studio */
.studio{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border-radius:32px;padding:26px;box-shadow:inset 0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.35),0 0 120px color-mix(in oklab,var(--accent) 22%,transparent);position:sticky;top:86px}
.studio-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.studio-top h3{font:700 22px/1 var(--display);margin:0}
.slots{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.slot-dots{display:flex;gap:4px}
.slot-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15)}
.slot-dots i.on{background:#7EE0A5;box-shadow:0 0 10px #7EE0A5;animation:pulse 2s ease-in-out infinite}
.slots.full{color:#F0A3A3}
@keyframes pulse{50%{opacity:.55}}
.progress{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:18px}
.progress i{display:block;height:100%;width:20%;border-radius:3px;background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 80%,white),var(--ink));transition:width .6s cubic-bezier(.2,.9,.25,1)}
.egg-wrap{display:grid;place-items:center;height:150px;margin-bottom:26px}
.egg{--e1:#EFE8DC;--e2:#CFC4E6;position:relative;width:104px;height:128px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(70% 60% at 35% 30%,rgba(255,255,255,.75),transparent 60%),linear-gradient(160deg,var(--e1),var(--e2));box-shadow:0 0 50px color-mix(in oklab,var(--e1) 60%,transparent),inset 0 -14px 26px rgba(0,0,0,.18);animation:float 4s ease-in-out infinite;transition:background .6s}
.egg-name{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font:600 14px/1 var(--body);color:var(--muted)}
.egg.wob{animation:wob .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes wob{0%{transform:rotate(0)}25%{transform:rotate(-9deg) scale(1.05)}55%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}100%{transform:none}}
.st{border:0;margin:0;padding:0;min-width:0}
.st.in{animation:stepin .45s cubic-bezier(.2,.9,.25,1)}
@keyframes stepin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.st legend{font:700 24px/1.15 var(--display);letter-spacing:-.02em;margin-bottom:12px;padding:0}
.st legend small,.q small{font:400 14px var(--body);color:var(--muted)}
.q{display:block;font-weight:600;margin:16px 0 8px}
.studio input,.studio textarea{width:100%;border:0;border-radius:16px;padding:13px 16px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);resize:vertical}
.studio input::placeholder,.studio textarea::placeholder{color:#8F87A8}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;background:var(--glass);border-radius:999px;padding:10px 15px;font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,background .2s}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed=true],.chip[aria-checked=true]{background:var(--ink);color:var(--night)}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sw{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.sw i{width:48px;height:48px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.sw[aria-pressed=true] i{transform:scale(1.08);box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--ink),0 0 24px var(--c)}
.sw[aria-pressed=true] span{color:var(--ink)}
.slotpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.slot{border:0;border-radius:18px;padding:14px 10px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:4px;align-items:center}
.slot b{font:700 17px/1 var(--display)}
.slot span{font-size:13px;color:#7EE0A5;font-weight:600}
.slot[disabled]{opacity:.45;cursor:not-allowed}
.slot[disabled] span{color:var(--muted)}
.slot[aria-checked=true]{background:var(--ink);color:var(--night)}
.slot[aria-checked=true] span{color:#1E7A45}
.ready{margin:14px 0 0;color:var(--muted)}
.ready b{color:var(--ink)}
.review{margin:0 0 14px;display:grid;gap:2px}
.review div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.review dt{color:var(--muted)}
.review dd{margin:0;font-weight:600;text-align:right}
.bonus{margin:0;font-size:14px;color:var(--muted)}
.studio-msg{min-height:1.3em;margin:12px 0 0;color:#FFC9A8;font-weight:600;font-size:15px}
.studio-nav{display:flex;gap:10px;justify-content:space-between;margin:12px 0 14px}
.studio-nav .btn.glow{flex:1}
.studio .fine{font-size:13px;color:var(--muted);margin:0}
.book{font-size:18px;padding:18px 26px;animation:bookglow 2.4s ease-in-out infinite}
@keyframes bookglow{50%{box-shadow:0 0 0 8px color-mix(in oklab,var(--accent) 22%,transparent),0 14px 60px color-mix(in oklab,var(--accent) 75%,transparent)}}

/* FAQ */
.faq{max-width:880px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gut) 0}
.qa{display:grid;gap:10px}
.qa details{background:var(--glass);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:0 22px}
.qa summary{cursor:pointer;list-style:none;font:700 19px/1.3 var(--display);padding:18px 30px 18px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:14px;font-size:26px;transition:transform .3s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{margin:0 0 18px;color:var(--muted)}

/* phone action bar */
.actionbar{display:none}

/* celebration */
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
.hatch{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--accent) 30%,rgba(10,8,22,.86)),rgba(10,8,22,.94) 70%);backdrop-filter:blur(10px)}
.hatch-box{text-align:center;max-width:520px;width:100%;max-height:92svh;overflow:auto}
.hatch-box h2{font-size:clamp(48px,8vw,84px);margin:18px 0 8px}
.hatch-box p{color:var(--muted);margin:0 0 18px}
.egg.big{width:150px;height:184px;margin:0 auto}
.egg.shake{animation:shake .35s ease-in-out infinite}
@keyframes shake{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.crack{position:absolute;inset:0;border-radius:inherit;opacity:0;background:linear-gradient(115deg,transparent 46%,rgba(18,15,38,.6) 47%,transparent 49%),linear-gradient(65deg,transparent 52%,rgba(18,15,38,.55) 53%,transparent 55%)}
.egg.crack-open{animation:pop .7s cubic-bezier(.2,1.6,.4,1) forwards;box-shadow:0 0 120px 30px color-mix(in oklab,var(--e1) 70%,transparent)}
.egg.crack-open .crack{opacity:1;transition:opacity .2s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1.08)}}
#crackBtn{margin:0 0 18px;font-size:18px;padding:18px 30px;animation:bookglow 2s ease-in-out infinite}
.countdown{display:flex;justify-content:center;gap:12px;margin:0 0 20px}
.countdown span{background:var(--glass);border-radius:18px;padding:12px 16px;min-width:86px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center}
.countdown b{font:700 38px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.next{text-align:left;color:var(--muted);margin:0 auto 20px;max-width:420px;padding-left:20px}
.next li{margin:6px 0}
.next b{color:var(--ink)}
.oto{background:var(--glass);border-radius:22px;padding:18px;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--accent) 60%,transparent);margin:0 0 16px}
.oto p{margin:0 0 12px}

@media (max-width:900px){
  .hero-pin{padding-top:84px;grid-template-rows:auto auto}
  .hero-stage{order:0;margin:8px auto 0}
  .hero .cta-row .btn{flex:1 1 auto}
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .story-mock{top:66px;z-index:4;max-width:none;margin:0;padding:16px}
  .story-mock .bub{font-size:14px}
  .sline{min-height:44svh;font-size:clamp(30px,8vw,40px)}
  .sline:first-child{min-height:30svh}
  .sline:last-child{min-height:50svh}
  .studio{position:relative;top:0;padding:20px}
  .swatches{gap:8px}
  .sw i{width:42px;height:42px}
  .actionbar{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;padding:8px;border-radius:999px;background:rgba(18,15,38,.82);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line),0 12px 40px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
  .actionbar.on{transform:none}
  .actionbar .btn{flex:1;padding:14px 10px}
  .countdown span{min-width:0;flex:1}
  .foot{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){.sline{opacity:1;transform:none}.egg,.book,#crackBtn{animation:none}}
.hatch.calm .egg.big{animation:calmglow 1.6s ease-in-out infinite}
@keyframes calmglow{50%{box-shadow:0 0 90px 20px color-mix(in oklab,var(--e1) 60%,transparent);transform:translateY(-4px)}}
.hello{position:relative;display:inline-block;margin:14px auto 6px;background:var(--ink);color:var(--night);font:700 18px/1.3 var(--display);padding:12px 18px;border-radius:20px;max-width:360px;animation:hello-in .6s cubic-bezier(.2,1.5,.4,1)}
.hello::before{content:"";position:absolute;left:50%;top:-8px;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--ink)}
@keyframes hello-in{from{opacity:0;transform:translateY(10px) scale(.9)}}
.hatch-promise{font-size:15px}
#shareEgg{margin:0 0 16px}
.promise-line{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink)}
.promise-line span{color:#7EE0A5;margin-right:4px}
.hatch-box>*:not(.egg){animation:fadein .6s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.hero .scroll-hint{display:none}
.close-moons{inset:90px 0 0}
@media (max-width:900px){
  .hero-stage{height:auto;width:min(78vw,340px);aspect-ratio:1}
  .story-grid{display:block}
  .story-mock-wrap{position:sticky;top:66px;z-index:4}
  .story-mock{position:relative;top:0}
}

.hatch-box .hello{color:var(--night)}
.crack{display:none}
.egg::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:3px solid var(--e1);opacity:0;pointer-events:none}
.egg.crack-open{animation:bloom 1.1s cubic-bezier(.2,1.2,.3,1) forwards}
.egg.crack-open::before{animation:ring 1.2s ease-out .1s forwards}
@keyframes bloom{0%{transform:scale(1);filter:none}35%{transform:scale(1.22) rotate(-4deg);filter:brightness(1.6) saturate(1.2)}100%{transform:scale(1);filter:brightness(1.12)}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.hatch.done .egg.big{width:104px;height:128px}
.hatch.done .hatch-box h2{font-size:clamp(40px,6vw,64px);margin-top:12px}
.egg.big{transition:width .8s cubic-bezier(.2,.9,.25,1),height .8s cubic-bezier(.2,.9,.25,1)}
@media (max-width:900px){
  .hero .cta-row{display:none}
  .hero .lede{margin-bottom:6px}
  .hero-pin{padding-top:92px}
}
/* phone, Mark Nov 2 04:21: creatures must sit naturally in their own space, never over text */
@media (max-width:900px){
  .story-mock-wrap{position:relative;top:0;margin-bottom:20px}
  .sline,.sline:first-child,.sline:last-child{min-height:0;padding:14px 0;font-size:clamp(26px,7vw,34px)}
  .stage{position:relative;top:0;width:min(72vw,280px)}
  .close-moons{display:none}
  .close{padding-top:90px}
  .lcard{scroll-margin-top:80px}
}
.av img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);display:block}
.mock figcaption b{color:inherit}
/* the sound pill invites a tap until music is playing */
.pill .play{display:none;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:2px}
.pill.invite .play{display:block}
.pill.invite .eq{display:none}
.pill.invite{background:var(--ink);color:#120F26;box-shadow:0 0 0 0 rgba(246,239,227,.5);animation:invite 2.4s ease-out infinite}
@keyframes invite{0%{box-shadow:0 0 0 0 rgba(246,239,227,.45)}70%{box-shadow:0 0 0 14px rgba(246,239,227,0)}100%{box-shadow:0 0 0 0 rgba(246,239,227,0)}}
@media (prefers-reduced-motion:reduce){.pill.invite{animation:none}}
/* guided tour */
.tour-btn{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:12px 22px 12px 14px;border:0;border-radius:999px;background:rgba(246,239,227,.1);color:var(--ink);font:600 15px/1 var(--body,inherit);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .3s,transform .3s}
.tour-btn:hover{background:rgba(246,239,227,.18);transform:translateY(-1px)}
.tour-btn .tplay{width:30px;height:30px;border-radius:50%;background:var(--ink);position:relative;flex:none}
.tour-btn .tplay::after{content:"";position:absolute;left:12px;top:9px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #120F26}
/* tour control: one small liquid-glass pill (Mark, Nov 4: the words are already on screen, so no caption box) */
.tour-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:45;padding:6px 6px 6px 16px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.14),0 12px 40px rgba(0,0,0,.35)}
.tour-ctl{display:flex;align-items:center;gap:4px}
.tour-step{display:flex;gap:6px;margin-right:8px}
.tour-step i{width:6px;height:6px;border-radius:999px;background:rgba(246,239,227,.28);transition:width .5s ease,background .5s ease}
.tour-step i.done{background:rgba(246,239,227,.6)}
.tour-step i.on{width:18px;background:var(--ink)}
.tour-ctl button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;padding:0;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s}
.tour-ctl button:hover{background:rgba(255,255,255,.12)}
.tour-ctl button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tour-ctl svg{width:18px;height:18px;fill:currentColor}
#tourPause .i-play,#tourPause.held .i-pause{display:none}
#tourPause.held .i-play{display:inline}
body.touring .actionbar{display:none}
@media (max-width:900px){.tour-bar{bottom:calc(12px + env(safe-area-inset-bottom))}}
/* soul preview */
.lcard .soul-link{background:none;border:0;color:var(--muted);font:500 13px/1 inherit;text-decoration:underline;text-underline-offset:3px;padding:8px;cursor:pointer}
.lcard .soul-link:hover{color:var(--ink)}
.soul-dlg{width:min(560px,calc(100% - 32px));max-height:min(80vh,720px);border:0;border-radius:28px;padding:24px 26px;background:#1a1636;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 40px 120px rgba(0,0,0,.6)}
.soul-dlg::backdrop{background:rgba(10,8,22,.7);backdrop-filter:blur(6px)}
.soul-head{display:flex;align-items:center;justify-content:space-between}
.soul-head h3{margin:0;font:700 26px/1.1 var(--display);letter-spacing:-.02em}
.soul-head button{border:0;background:rgba(246,239,227,.1);color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer}
.soul-sub{color:var(--muted);font-size:14px;line-height:1.5;margin:10px 0 14px}
.soul-body{font-size:15px;line-height:1.55;border-top:1px solid var(--line);padding-top:6px}
.soul-body h4{margin:16px 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.soul-body ul{margin:0;padding-left:18px}.soul-body p{margin:6px 0}
.soul-foot{margin:16px 0 0;font-size:14px}.soul-foot a{color:var(--ink)}

/* ---------- loose creatures (Mark, 2026-11-02): no disc, no background, just the creature and a soft glow ---------- */
.moon{background:none;border-radius:0;overflow:visible;box-shadow:none;isolation:isolate}
.moon::after{display:none}
.moon::before{content:"";position:absolute;inset:22% 12% 2%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 38%,transparent),transparent);filter:blur(18px);opacity:.8;pointer-events:none}
.moon video,.moon img{object-fit:contain;transform:none;filter:drop-shadow(0 16px 22px rgba(8,6,20,.45))}
.orbit .moon,.close-moons .moon{box-shadow:none}
.orbit .moon::before,.close-moons .moon::before{display:none}
/* launch prices (Roast Room verdict 2026-11-02) */
.was{margin:-8px 0 16px;font:600 13px/1.3 var(--body);color:var(--muted)}
.was span{color:var(--ink)}
.launch-note{width:fit-content;max-width:100%;margin:-8px auto 28px;padding:10px 18px;border-radius:999px;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--muted);text-align:center}
.launch-note b{color:var(--ink)}
.launch-note #launchLeft{color:var(--ink);font-weight:600}
/* avatars in the chat mocks: the creature stands loose, no disc, ring or grey square (Mark, Nov 4) */
.av{background:none;overflow:visible}
.av video,.av img{object-fit:contain;transform:scale(1.2);filter:drop-shadow(0 4px 6px rgba(40,25,10,.28))}
.av.big{border:0;box-shadow:none}
.story-mock[data-step="2"] .av.blank,.story-mock[data-step="3"] .av.blank{background:transparent;box-shadow:none}
.story-mock[data-step="2"] .av.blank video,.story-mock[data-step="3"] .av.blank video{object-fit:contain;filter:drop-shadow(0 6px 10px rgba(40,25,10,.3)) drop-shadow(0 0 14px color-mix(in oklab,var(--accent) 45%,transparent))}
/* the revealed face grows in place (no scale) so the name and "Online" move aside instead of being covered */
.av.blank{transition:width .8s cubic-bezier(.2,.9,.25,1.2),height .8s cubic-bezier(.2,.9,.25,1.2),background .5s}
.story-mock[data-step="2"] .av.blank,.story-mock[data-step="3"] .av.blank{transform:none;width:60px;height:60px}
/* paid files: what each one is for (Mark, Nov 4) */
.dl-row{display:grid;gap:4px}
.dl-row small{font-size:13px;line-height:1.35;color:var(--muted);text-align:center;padding:0 8px}
/* soul section (Creative Room, Nov 4): the real file on the left, one numbered edition on the right */
.soul{max-width:1240px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gut) 0}
.soul-lede{max-width:640px;color:var(--muted);margin:0 0 36px}
.soul-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
.soul-file,.soul-num{border-radius:var(--r);padding:clamp(22px,3vw,34px);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.soul-file{background:#FBF7F0;color:#1F1A16;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.soul-file h3{font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#7A6F64;margin:20px 0 8px}
.soul-file ul{margin:0;padding-left:20px}
.soul-file li,.soul-file p{margin:4px 0}
.soul-from{font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#7A6F64}
.soul-who{font:600 20px/1.35 var(--display);margin:10px 0 0!important}
.soul-note{font-size:14px;color:#7A6F64;margin-top:16px!important}
.soul-file .btn.ghost{margin-top:18px;background:#1F1A16;color:#FBF7F0;box-shadow:none}
.soul-num{position:sticky;top:96px}
.soul-num h3{font:700 clamp(22px,2.2vw,30px)/1.1 var(--display);letter-spacing:-.02em;margin:8px 0 18px}
.num-tag{display:inline-block;padding:6px 14px;border-radius:999px;font:700 14px/1 var(--body);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line);margin:0}
.num-quirk{font:500 19px/1.45 var(--body);margin:14px 0}
.num-fine{font-size:14px;color:var(--muted);margin:0 0 20px}
@media (max-width:900px){.soul-grid{grid-template-columns:1fr}.soul-num{position:static}}
/* "Yours is #8 of 100": the quirk reads as something it would say; Founding line is small and quiet */
.num-quirk{padding:14px 18px;border-radius:20px 20px 20px 6px;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line)}
.num-quirk:empty{display:none}
.num-founding{font:600 13px/1.3 var(--body);letter-spacing:.06em;color:var(--muted);margin:12px 0 0}
.num-founding[hidden]{display:none}
.soul-lede.soul-only{margin-top:-6px}.soul-only b{color:var(--ink)}
.soul-lede.first{margin-bottom:14px}

/* ---------- tour scenes (Mark, Nov 6): where the tour stops, creatures and motion, not words ---------- */
.scene{position:relative;height:min(64svh,560px);max-width:1100px;margin:0 auto 48px;display:grid;place-items:center}
/* Soul: three of the same Blaze, three souls, told only by how each one moves */
.soul-scene{display:flex;justify-content:center;align-items:center;gap:0;overflow:hidden}
.trio{position:relative;display:grid;place-items:center;height:auto}
.t2{z-index:2;scale:1.12}
.trio img{width:min(32vw,290px);margin:0 -2vw;height:auto;transform-origin:50% 92%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.trio::after{content:"";position:absolute;bottom:4%;left:50%;width:62%;height:9%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent,#D9561F) 55%,transparent),transparent);opacity:.55;filter:blur(4px)}
.t1 img{animation:yawn 5s ease-in-out infinite}
.t2 img{animation:hop 2.4s cubic-bezier(.3,.7,.4,1) infinite .4s}
.t3 img{animation:peek 4.6s ease-in-out infinite 1s}
@keyframes yawn{0%,52%,100%{transform:none}62%{transform:scale(.97,1.1) translateY(-3%)}74%{transform:scale(.95,1.13) translateY(-4%) rotate(-2deg)}86%{transform:scale(1.04,.96)}}
@keyframes hop{0%,62%,100%{transform:none}8%{transform:scale(1.1,.88)}24%{transform:translateY(-30%) scale(.94,1.07)}40%{transform:scale(1.12,.86)}50%{transform:scale(.98,1.02)}}
@keyframes peek{0%,100%{transform:none}22%,52%{transform:rotate(-15deg) translateX(-7%)}64%{transform:rotate(7deg) translateX(3%)}76%{transform:none}}

/* Make your own: a mystery egg that hatches a creature nobody has seen */
.egg-scene{cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:8px;overflow:visible}
.mystery-egg{position:relative;width:min(44vw,210px);aspect-ratio:120/150;z-index:2}
.mystery-egg::before{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(closest-side,hsl(var(--flash,265) 90% 75% / .5),transparent);animation:eggglow 3s ease-in-out infinite;transition:background .3s}
@keyframes eggglow{50%{opacity:.6;transform:scale(.92)}}
.shell{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.shell .top,.shell .bottom{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity 1.1s;transform-box:fill-box;transform-origin:50% 100%}
.shell .dots circle{fill:rgba(124,102,232,.35)}
.mcrack{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 6px hsl(var(--flash,265) 100% 75%));transition:opacity .15s}
.egg-scene.k1 .c1,.egg-scene.k2 .c1,.egg-scene.k2 .c2,.egg-scene.k3 .mcrack{opacity:1}
.egg-scene.wob .mystery-egg{animation:wob .9s ease-in-out infinite}
.egg-scene.k2 .mystery-egg{animation-duration:.55s}.egg-scene.k3 .mystery-egg{animation-duration:.3s}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.egg-scene.flash .mystery-egg::before{background:radial-gradient(closest-side,hsl(var(--flash) 100% 80% / .95),transparent)}
.egg-scene.open .mystery-egg{animation:none}
.egg-scene.open .shell .top{transform:translate(-55%,-95%) rotate(-55deg);opacity:0}
.egg-scene.open .shell .bottom{transform:translateY(8%) scale(1.04)}
.egg-scene.open .mcrack.c1,.egg-scene.open .mcrack.c2,.egg-scene.open .dots{opacity:0}
.hatchling{position:absolute;left:8%;width:84%;bottom:12%;z-index:1;opacity:0;transform:translateY(30%) scale(.5);transition:transform .9s cubic-bezier(.3,1.6,.5,1) .15s,opacity .4s .15s;overflow:visible}
.egg-scene.open .hatchling{opacity:1;transform:translateY(-46%) scale(1.05)}
.hbody{fill:#0d0a1e;stroke:hsl(var(--flash,265) 90% 75%);stroke-width:2.5;filter:drop-shadow(0 0 14px hsl(var(--flash,265) 90% 70% / .8))}
.egg-scene.look .hbody{animation:tint 7s ease-in-out infinite .6s}
@keyframes tint{0%,100%{fill:#0d0a1e}20%{fill:#4b3a9c}40%{fill:#9a3f6f}60%{fill:#2c5fa8}80%{fill:#3f7a4a}}
.heyes ellipse{fill:#FFF3C4;transform-box:fill-box;transform-origin:center;animation:blink 3.2s infinite 1.2s}
@keyframes blink{0%,44%,52%,100%{transform:none}48%{transform:scaleY(.08)}}
.hshine{opacity:.12}
.egg-rays{position:absolute;inset:-10%;z-index:0;background:repeating-conic-gradient(from 0deg,hsl(var(--flash,265) 90% 80% / .22) 0 6deg,transparent 6deg 22deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);opacity:0;transform:scale(.2);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .5s}
.egg-scene.open .mystery-egg-rays{opacity:1;transform:scale(1);animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.egg-friends{position:absolute;inset:0;z-index:1;pointer-events:none}
.egg-friends img{position:absolute;bottom:8%;width:min(28vw,170px);height:auto;transition:transform .7s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.egg-friends .f1{left:4%}.egg-friends .f2{right:4%}
.egg-friends .f3{left:2%;bottom:58%;width:min(19vw,120px);opacity:.9}.egg-friends .f4{right:2%;bottom:60%;width:min(19vw,120px);opacity:.9}
.egg-scene.wob .f1{transform:translateX(18%) rotate(10deg)}.egg-scene.wob .f2{transform:translateX(-18%) rotate(-10deg)}
.egg-scene.wob .f3{transform:translate(14%,6%) rotate(8deg)}.egg-scene.wob .f4{transform:translate(-14%,6%) rotate(-8deg)}
.egg-scene.open .mystery-egg-friends img{animation:cheer .9s cubic-bezier(.3,.7,.4,1) infinite}
.egg-scene.open .f1{transform:translateX(-14%)}.egg-scene.open .f2{transform:translateX(14%)}
.egg-scene.open .f2{animation-delay:.2s}.egg-scene.open .f3{animation-delay:.35s}.egg-scene.open .f4{animation-delay:.1s}
@keyframes cheer{0%,100%{translate:0 0}40%{translate:0 -22%}}

/* Close: every Liveling parades past and bobs, waving goodbye */
.close-parade{position:relative;z-index:2;margin:64px calc(-1 * var(--gut)) 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.parade-row{display:flex;gap:clamp(10px,2vw,26px);width:max-content;animation:march 60s linear infinite}
.parade-row img{width:clamp(64px,9vw,110px);height:auto;animation:bob 1.6s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
@keyframes march{to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:none}30%{transform:translateY(-12%) rotate(-6deg)}60%{transform:rotate(5deg)}}

@media (prefers-reduced-motion:reduce){
  .trio img,.parade-row,.parade-row img,.egg-scene .mystery-egg,.mystery-egg::before,.egg-rays,.egg-friends img,.heyes ellipse,.hbody{animation:none!important}
}
@media (max-width:900px){
  .scene{height:min(52svh,440px);margin-bottom:28px}
}
.egg-scene{max-width:760px}
/* on the tour, each scene fills the screen so no words share the frame (Creative Room, Nov 6) */
body.touring .scene{height:calc(100svh + 40px);max-height:none;margin-bottom:0}
/* Desktop tour, stop 1 (PC check, Nov 6): at 1440x900 the ring sits under the headline and is cut off by the
   pinned hero. On the tour the copy fades out and the whole ring takes the centre, above the tour dock. */
@media (min-width:901px){
  #hero.ring-solo .hero-pin{align-items:center;padding-bottom:120px}
  #hero.ring-solo .hero-copy{position:absolute;left:0;right:0;top:max(96px,12svh);margin:auto;opacity:0!important;pointer-events:none;transition:opacity .7s}
  #hero.ring-solo .hero-stage{height:min(66svh,620px);margin-top:0}
}

/* ---------- round 2: picture tiles instead of word lists ---------- */
.pics{list-style:none;margin:4px 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}
.pics li{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:0!important}
.pics li::before{content:none!important}
.pics li b{font:600 13px/1.2 var(--body);color:var(--ink)}
.pv{position:relative;width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line)}
.pv img.mstill{width:86%;height:86%;object-fit:contain}
.pv svg{width:34px;height:34px;fill:none;stroke:color-mix(in oklab,var(--accent) 70%,var(--ink));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pv-loop img{animation:pvbob 2.4s ease-in-out infinite}
.pv-play{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.pv-play svg{width:14px;height:14px;stroke:none;fill:#fff}
.pv-sq{border-radius:8px;background:color-mix(in oklab,var(--accent) 22%,var(--night2))}
.pv-round{border-radius:50%;background:color-mix(in oklab,var(--accent) 22%,var(--night2));overflow:hidden}
.pv-mark{position:absolute;right:4px;bottom:4px;width:14px;height:14px;opacity:.85}
.pv-cols{background:none;box-shadow:none}
.pv-cols .cw{position:absolute;width:52px;height:52px;display:grid;place-items:center}
.pv-cols .cw img{width:100%;height:100%;object-fit:contain}
.cw0{left:-10px;top:10px}.cw1{left:8px;top:-2px;z-index:1;filter:hue-rotate(120deg)}.cw2{right:-10px;top:10px;filter:hue-rotate(240deg)}
.pv-pet img{animation:pvhop 1.6s ease-in-out infinite}
.pv-num{font:700 26px/1 var(--display);color:var(--ink)}.pv-num small{font-size:12px;color:var(--muted)}
@keyframes pvbob{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes pvhop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px) scaleY(1.04)}}
.pics.mini{grid-template-columns:repeat(4,1fr);gap:12px 4px;margin:6px 0 14px}
.pics.mini li b{font-size:12px}
.pics.mini .pv{width:54px;height:54px;border-radius:16px}
.pics.mini .pv svg{width:28px;height:28px}
.more{margin:0 0 14px;color:var(--muted);font-size:14px}
.more summary{cursor:pointer;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more ul{margin:10px 0 0}
.card .more{margin-bottom:20px}
.fq{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--glass2);margin-right:10px;vertical-align:middle;flex:none}
.fq svg{width:18px;height:18px;fill:none;stroke:color-mix(in oklab,var(--accent) 70%,var(--ink));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.pv-loop img,.pv-pet img{animation:none}}
@media (max-width:420px){.pics{gap:12px 4px}.pv{width:62px;height:62px}.pics li b{font-size:12px}}
/* Phone (Mark, Nov 6: "what is this waste of space"): the three souls fill the frame as a big group,
   two behind and one in front, instead of a thin strip across the middle. */
@media (max-width:900px){
  .soul-scene{display:block;height:min(78svh,620px)}
  body.touring .soul-scene{height:calc(100svh + 40px)}
  .soul-scene .trio{position:absolute;height:auto;display:block}
  .soul-scene .trio img{width:100%;margin:0}
  .soul-scene .t1{width:min(54vw,300px);left:-2%;top:17%}
  .soul-scene .t3{width:min(54vw,300px);right:-2%;top:22%}
  .soul-scene .t2{width:min(82vw,460px);left:50%;translate:-50% 0;bottom:12%;z-index:2}
  /* Tour stop 1 on a phone: stay on the first screen. The headline fades and the ring of creatures
     fills the screen while the first line plays (Mark, Nov 6: "didn't stay on the hero part"). */
  #hero.ring-solo .hero-pin{align-content:center;min-height:100svh;padding-bottom:110px}
  #hero.ring-solo .hero-copy{position:absolute;left:0;right:0;top:90px;opacity:0!important;pointer-events:none;transition:opacity .7s}
  #hero.ring-solo .hero-stage{width:min(96vw,560px);margin:0 auto}
}