@font-face{font-family:'Urbanist';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/urbanist.woff2) format('woff2')}
:root{
  --sun:#FFD426; --sun-deep:#E3AE00;
  --pink:#F8347C; --pink-deep:#C1175A; --pink-soft:#FFD9E6;
  --blue:#2D5BFF; --blue-deep:#1A39C9; --blue-soft:#DCE4FF;
  --mint:#22D38A; --mint-deep:#0C9A5F;
  --ink:#1F0F47; --ink-2:rgba(31,15,71,.74);
  --field:#F3F0FA; --line:#E2DBF4; --err:#C4123A;
  --r-card:28px;
  --out:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.5,.5,1);
  --font:'Urbanist',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--ink) transparent}
main{overflow-x:clip}
body{margin:0;background:var(--sun);color:var(--ink);font:500 17px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto;-webkit-user-drag:none;user-select:none}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.on-dark :focus-visible{outline-color:#fff}
.thin{font-weight:300}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* stickers: die-cut artwork, always tilted, gently alive */
.e{position:relative;display:inline-grid;place-items:center;width:var(--w);height:var(--w);font:400 calc(var(--w)*var(--k,1))/1 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;letter-spacing:0;
  -webkit-user-select:none;user-select:none;--o:calc(var(--w)*.036);text-shadow:calc(var(--o)*1.000) calc(var(--o)*0.000) 0 #fff,calc(var(--o)*0.940) calc(var(--o)*0.342) 0 #fff,calc(var(--o)*0.766) calc(var(--o)*0.643) 0 #fff,calc(var(--o)*0.500) calc(var(--o)*0.866) 0 #fff,calc(var(--o)*0.174) calc(var(--o)*0.985) 0 #fff,calc(var(--o)*-0.174) calc(var(--o)*0.985) 0 #fff,calc(var(--o)*-0.500) calc(var(--o)*0.866) 0 #fff,calc(var(--o)*-0.766) calc(var(--o)*0.643) 0 #fff,calc(var(--o)*-0.940) calc(var(--o)*0.342) 0 #fff,calc(var(--o)*-1.000) calc(var(--o)*0.000) 0 #fff,calc(var(--o)*-0.940) calc(var(--o)*-0.342) 0 #fff,calc(var(--o)*-0.766) calc(var(--o)*-0.643) 0 #fff,calc(var(--o)*-0.500) calc(var(--o)*-0.866) 0 #fff,calc(var(--o)*-0.174) calc(var(--o)*-0.985) 0 #fff,calc(var(--o)*0.174) calc(var(--o)*-0.985) 0 #fff,calc(var(--o)*0.500) calc(var(--o)*-0.866) 0 #fff,calc(var(--o)*0.766) calc(var(--o)*-0.643) 0 #fff,calc(var(--o)*0.940) calc(var(--o)*-0.342) 0 #fff,0 calc(var(--o)*2.4) calc(var(--o)*2.6) rgba(31,15,71,.34)}
.e--img{font-size:0;text-shadow:none}
.e--img canvas{position:absolute;left:50%;top:50%;display:block;width:calc(var(--w)*1.56);height:calc(var(--w)*1.56);max-width:none;translate:-50% -50%;pointer-events:none}
.stk{position:absolute;pointer-events:none;rotate:var(--r,0deg);animation:float var(--d,6s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes float{from{translate:0 -5px;rotate:calc(var(--r,0deg) - 2.5deg)}to{translate:0 6px;rotate:calc(var(--r,0deg) + 2.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{from{translate:0 -4px}to{translate:0 5px}}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

/* ================= HOME ================= */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(env(safe-area-inset-top) + 46px) 20px 92px}
.rays{position:absolute;z-index:-2;left:50%;top:150px;width:1500px;height:1500px;margin:-750px 0 0 -750px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.36) 0 9deg,rgba(255,255,255,0) 9deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 78%);mask:radial-gradient(closest-side,#000 18%,transparent 78%);
  animation:spin 90s linear infinite}

.wm{position:relative;isolation:isolate;margin:0;font-weight:900;font-size:clamp(84px,27.5vw,176px);line-height:.8;letter-spacing:-.045em;
  rotate:-5deg;transform-origin:20% 50%;filter:drop-shadow(0 10px 10px rgba(31,15,71,.26));width:max-content}
.wm span{position:relative;display:block;white-space:nowrap;animation:slap .7s var(--out) backwards}
.wm span:nth-child(2){color:var(--pink);margin-left:.42em;animation-delay:.14s}
.wm span::before{content:attr(data-t);position:absolute;left:0;top:0;z-index:-1;color:#fff;-webkit-text-stroke:.19em #fff;paint-order:stroke fill}
@keyframes slap{from{opacity:0;transform:scale(1.7) rotate(-14deg)}55%{opacity:1}to{transform:none}}
.hero>.stk{z-index:-1}

.hook{position:relative;margin-top:26px;font-size:clamp(19px,5.1vw,24px);line-height:1.22;font-weight:600;max-width:14.8em;letter-spacing:-.01em;animation:rise .7s var(--out) .32s backwards}
.hook span{display:block}
.hook strong{display:block;font-weight:900}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

.pick{margin-top:92px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.char{--tilt:-3.6deg;margin-right:-5px;--c:var(--blue);--cd:var(--blue-deep);position:relative;display:block;text-decoration:none;color:var(--ink);
  border-radius:var(--r-card);background:var(--c);rotate:var(--tilt);
  box-shadow:0 7px 0 var(--cd),0 22px 26px -12px rgba(31,15,71,.45);
  transition:translate .14s var(--out),box-shadow .14s var(--out);animation:cardin .8s var(--out) .45s backwards}
.char--girl{--tilt:3.6deg;margin:20px 0 0 -5px;z-index:1;--c:var(--pink);--cd:var(--pink-deep);animation-delay:.56s}
.char:active{translate:0 5px;box-shadow:0 2px 0 var(--cd),0 10px 14px -10px rgba(31,15,71,.45)}
@keyframes cardin{from{opacity:0;transform:translateY(46px) scale(.94)}}
.char-fig{position:relative;display:block;height:98px;clip-path:inset(-130px -30px 0 -30px)}
.char-img{position:absolute;left:50%;bottom:-24px;width:178px;max-width:none;margin-left:-89px;animation:popup .7s var(--pop) .85s backwards}
.char--girl .char-img{animation-delay:.98s;width:208px;margin-left:-104px;bottom:-40px}
@keyframes popup{from{transform:translateY(78%)}}
.char-heart{position:absolute;left:50%;top:-84px;--w:32px;margin-left:-16px;animation:bob 1.6s ease-in-out infinite alternate,fadein .4s 1.3s backwards}
.char--girl .char-heart{animation-delay:.5s,1.45s;top:-106px}
.char:not(.char--girl) .char-img{translate:10px 0}
@keyframes fadein{from{opacity:0;scale:.3}}
.char-bub{position:absolute;left:-14px;top:-86px;z-index:2;width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 6px 14px -4px rgba(31,15,71,.35);animation:fadein .45s var(--pop) 1.7s backwards}
.char--girl .char-bub{animation-delay:1.95s}
.char-bub::before,.char-bub::after{content:"";position:absolute;background:#fff;border-radius:50%}
.char--girl .char-bub{left:auto;right:-14px}
.char-bub::before{width:13px;height:13px;right:2px;bottom:-4px}
.char-bub::after{width:7px;height:7px;right:-5px;bottom:-13px}
.char--girl .char-bub::before{right:auto;left:2px}
.char--girl .char-bub::after{right:auto;left:-5px}
.char-bub .e{--w:36px;text-shadow:none;transition:scale .22s var(--out),rotate .22s var(--out)}
.char-bub.swap .e{scale:0;rotate:-40deg}
.char-plate{position:relative;z-index:1;display:grid;gap:3px;margin:0 6px 6px;padding:13px 12px 10px;background:#fff;border-radius:22px}
.char-plate strong{font-size:clamp(21px,6vw,26px);font-weight:900;line-height:1.05;letter-spacing:-.025em}
.char-plate small{font-size:14px;font-weight:600;line-height:1.25;color:var(--ink-2);min-height:2.5em}
.go{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:99px;background:var(--c);color:#fff;font-size:19px;font-weight:800;letter-spacing:-.01em;box-shadow:inset 0 -4px 0 var(--cd)}
.go svg{width:20px;height:20px;transition:translate .2s var(--out)}
.char:hover .go svg{translate:4px 0}


/* sheets */
.sheet-sec{position:relative;border-radius:38px 38px 0 0;padding:74px 22px 96px}
.h2{font-size:clamp(40px,11.4vw,68px);line-height:.94;letter-spacing:-.04em;font-weight:900;text-wrap:balance}
.h2 .thin{letter-spacing:-.03em}
.h2--stack span{display:block}
.wheel-sec .h2{font-size:clamp(40px,12.2vw,68px)}


.steps{background:#fff}
.steps-list{position:relative;list-style:none;margin:38px 0 0;padding:0;display:grid;gap:30px}
.steps-list::before{content:"";position:absolute;left:41px;top:46px;bottom:46px;border-left:4px dotted var(--line)}
.step{position:relative;display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:center}
.step .e{--w:62px;margin-left:5px;rotate:var(--r)}
.step h3{font-size:23px;line-height:1.1;font-weight:900;letter-spacing:-.02em}
.step p{margin-top:5px;font-size:16.5px;line-height:1.38;color:var(--ink-2)}
.js .step{opacity:0;translate:0 26px;transition:opacity .6s var(--out),translate .6s var(--out);transition-delay:calc(var(--i)*90ms)}
.js .in .step{opacity:1;translate:0 0}
.js .step .e{scale:.4;transition:scale .6s var(--pop);transition-delay:calc(var(--i)*90ms + 120ms)}
.js .in .step .e{scale:1}
.steps{margin-top:-38px}

.wheel-sec{background:var(--mint);margin-top:-38px;overflow-x:clip;overflow-y:visible;padding-bottom:calc(128px + env(safe-area-inset-bottom))}
.wheel-sec .lead{margin-top:16px;font-size:18px;line-height:1.4;font-weight:600;max-width:24em}
.wheel-box{position:relative;width:min(100%,340px);aspect-ratio:1;margin:44px auto 0}
.wheel-box::before{content:"";position:absolute;inset:3%;border-radius:50%;box-shadow:0 26px 34px -8px rgba(31,15,71,.5)}
.wheel-rot{position:absolute;inset:0;transition:transform 4.4s cubic-bezier(.12,.72,.1,1);will-change:transform}
.wheel-rot svg,.wheel-lights{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js .wheel-box{rotate:-50deg;scale:.8;opacity:0;transition:rotate 1s var(--out),scale 1s var(--out),opacity .5s}
.js .in .wheel-box{rotate:0deg;scale:1;opacity:1}
.wheel-lights circle{fill:#fff;animation:blink 1s steps(1) infinite}
.wheel-lights circle:nth-child(even){animation-delay:.5s}
@keyframes blink{50%{fill:var(--sun)}}
.wheel-pin{position:absolute;left:50%;top:-14px;width:40px;margin-left:-20px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));transform-origin:50% 20%}
.wheel-pin.tick{animation:tick .28s ease-out 14}
@keyframes tick{30%{transform:rotate(-16deg)}}
.hub{position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:5px solid #fff;background:var(--ink);color:#fff;
  font-size:clamp(15px,4.3vw,18px);font-weight:900;letter-spacing:-.01em;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:translate .12s,box-shadow .12s}
.hub:active{translate:-50% calc(-50% + 4px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.hub[disabled]{cursor:default}
.said{position:relative;z-index:1;margin:-6px auto 0;rotate:-1.5deg;box-shadow:0 14px 24px -10px rgba(31,15,71,.45);max-width:340px;background:#fff;color:var(--ink);border-radius:26px;padding:22px 22px 24px}
.said::before{content:"";position:absolute;left:50%;top:-11px;width:24px;height:24px;margin-left:-12px;background:#fff;rotate:45deg;border-radius:5px}
.said p{font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.said.pop{animation:saidpop .5s var(--pop)}
.confetti{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;left:0;top:0;display:block;will-change:transform}
@keyframes saidpop{from{scale:.86;opacity:.3}}
.host{margin:24px auto 0;max-width:340px;font-size:15.5px;line-height:1.4;font-weight:600;color:var(--ink-2);text-align:center}
.wheel-foot{margin-top:64px}
.wheel-foot .share{margin-top:0}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#fff;border-radius:26px 26px 0 0;box-shadow:0 -10px 30px -8px rgba(31,15,71,.4);animation:dockin .45s var(--out)}
.dock .btn{height:54px;padding:0 10px;font-size:18.5px;box-shadow:0 5px 0 var(--cd)}
.dock .btn:active{box-shadow:0 1px 0 var(--cd)}
@keyframes dockin{from{transform:translateY(110%)}}

.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:66px;padding:0 26px;border:0;border-radius:99px;text-decoration:none;
  background:var(--c);color:#fff;font-size:21px;font-weight:900;letter-spacing:-.01em;
  box-shadow:0 6px 0 var(--cd),0 20px 22px -12px rgba(31,15,71,.55);transition:translate .12s var(--out),box-shadow .12s var(--out)}
.btn:active{translate:0 4px;box-shadow:0 2px 0 var(--cd),0 10px 12px -10px rgba(31,15,71,.5)}
.btn svg{width:24px;height:24px}
.btn--boy{--c:var(--blue);--cd:var(--blue-deep)}
.btn--girl{--c:var(--pink);--cd:var(--pink-deep)}
.btn--paper{--c:#fff;--cd:rgba(31,15,71,.28);color:var(--ink)}
.share{margin-top:26px;font-size:17px;line-height:1.35;font-weight:600}
.share a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-weight:900;text-underline-offset:4px;text-decoration-thickness:2px}
.share svg{flex:none;width:22px;height:22px}
.foot{margin-top:34px;display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;justify-content:space-between;font-size:15px;font-weight:600}
.foot b{font-weight:900;font-size:19px;letter-spacing:-.03em}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px;text-decoration-thickness:2px}

/* ================= SIGNUP ================= */
#signup{--c:var(--blue);--cd:var(--blue-deep);--cs:var(--blue-soft);--on:#fff;min-height:100dvh;background:var(--c);color:var(--on)}
#signup[data-side=girl]{--c:var(--pink);--cd:var(--pink-deep);--cs:var(--pink-soft);--on:var(--ink)}
.su-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;background:var(--c)}
.back{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 0 rgba(31,15,71,.3);transition:translate .12s,box-shadow .12s}
.back:active{translate:0 3px;box-shadow:0 1px 0 rgba(31,15,71,.3)}
.back svg{width:22px;height:22px}
.meter{position:relative;flex:1;height:30px;border-radius:99px;background:rgba(31,15,71,.28);box-shadow:inset 0 3px 0 rgba(31,15,71,.2)}
.meter i{position:absolute;inset:5px;border-radius:99px;background:linear-gradient(#5CF0B4,var(--mint) 55%);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0 round 99px);transition:clip-path .6s var(--out)}
.meter-n{flex:none;font-size:16px;font-weight:800;min-width:4.3em;text-align:right;font-variant-numeric:tabular-nums}
.meter-n.full{animation:saidpop .5s var(--pop)}

.stage{position:relative;isolation:isolate;overflow:hidden;padding:26px 20px 96px;text-align:center}
.avatar{position:relative;width:196px;height:196px;margin:84px auto 0}
.avatar-bg{position:absolute;inset:0;border-radius:50%;background:var(--cs);box-shadow:0 0 0 7px #fff,0 9px 0 7px var(--cd),0 30px 30px -6px rgba(31,15,71,.4)}
.avatar-clip{position:absolute;inset:-90px 0 0;border-radius:0 0 98px 98px;overflow:hidden}
.avatar-clip img{position:absolute;left:50%;bottom:-30px;width:236px;max-width:none;margin-left:-118px}
.pal{position:absolute;right:-66px;bottom:46px;width:104px;height:104px}
.pal-bg{position:absolute;inset:0;border-radius:50%;background:#FFF0B3;box-shadow:0 0 0 5px #fff,0 6px 0 5px var(--cd),0 16px 18px -4px rgba(31,15,71,.4)}
.pal-clip{position:absolute;inset:-50px 0 0;border-radius:0 0 52px 52px;overflow:hidden}
.pal-clip img{position:absolute;left:50%;bottom:-18px;width:132px;max-width:none;margin-left:-66px}
.pal-tag{position:absolute;left:50%;bottom:-17px;translate:-50% 0;rotate:3deg;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;padding:3px 11px 4px;border-radius:99px;background:var(--sun);color:var(--ink);font-size:13.5px;font-weight:800;line-height:1.2;box-shadow:0 3px 0 rgba(31,15,71,.25)}
.pal-tag.pop{animation:tagpop .35s var(--pop)}
#signup[data-side=girl] .pal{display:none}
#signup.enter .pal{animation:avin .7s var(--pop) .45s backwards}
#signup[data-side=girl] .avatar-clip img{width:276px;margin-left:-138px;bottom:-52px}
#signup[data-side=girl] .done-char{width:290px}
.avatar-heart{position:absolute;left:50%;top:-98px;--w:48px;margin-left:-24px;animation:bob 1.6s ease-in-out infinite alternate}
.nametag{position:relative;z-index:2;display:inline-grid;justify-items:center;margin-top:-20px;padding:9px 20px 10px;border-radius:20px;background:#fff;color:var(--ink);rotate:-3deg;box-shadow:0 5px 0 rgba(31,15,71,.25);max-width:88%}
.nametag b{font-size:23px;font-weight:900;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.nametag span{font-size:14.5px;font-weight:700;color:var(--ink-2);line-height:1.2}
.nametag.pop{animation:tagpop .35s var(--pop)}
@keyframes tagpop{from{scale:.9}}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px auto 0;min-height:0}
.tags span{font-size:13.5px;font-weight:800;padding:4px 11px;border-radius:99px;background:var(--sun);color:var(--ink);animation:tagpop .35s var(--pop)}
.stage h1{margin-top:22px;font-size:clamp(40px,11.4vw,60px);line-height:.94;letter-spacing:-.04em;font-weight:900}
.stage h1:focus{outline:0}
.stage .sub{margin:12px auto 0;font-size:18px;line-height:1.35;font-weight:600;max-width:20em}
#signup.enter .avatar{animation:avin .8s var(--pop) .1s backwards}
#signup.enter .nametag{animation:fadein .5s var(--pop) .45s backwards}
#signup.enter .form{animation:sheetin .8s var(--out) .15s backwards}
@keyframes avin{from{opacity:0;transform:translateY(60px) scale(.6)}}
@keyframes sheetin{from{transform:translateY(90px);opacity:0}}

.form{position:relative;z-index:1;margin-top:-58px;background:#fff;color:var(--ink);border-radius:38px 38px 0 0;padding:38px 20px calc(44px + env(safe-area-inset-bottom));display:grid;gap:40px}
.grp{display:grid;gap:16px;min-width:0}
.grp h2{font-size:29px;line-height:1;font-weight:900;letter-spacing:-.03em}
.grp .note{margin-top:-8px;font-size:16px;color:var(--ink-2);line-height:1.35}
.row{display:grid;grid-template-columns:128px 1fr;gap:12px}
.f{display:grid;gap:7px;min-width:0;align-content:start}
.f label{font-size:16px;font-weight:800}
.f label em{font-style:normal;font-weight:600;color:var(--ink-2)}
.f input,.f textarea{width:100%;font:600 17px/1.3 var(--font);color:var(--ink);background:var(--field);border:2px solid transparent;border-radius:16px;height:56px;padding:0 16px;outline:0;caret-color:var(--c);
  transition:border-color .15s,background .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.f textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:rgba(31,15,71,.68);font-weight:500}
.f input:focus,.f textarea:focus{border-color:var(--c);background:#fff;box-shadow:0 0 0 4px var(--cs)}
.f .hint,.hint{font-size:14.5px;line-height:1.35;color:var(--ink-2);margin:0}
.hint.next{text-align:center;font-weight:600;margin-top:-2px}
.hint.lock{display:flex;gap:7px;align-items:center;font-weight:700}
.hint.lock svg{flex:none;width:17px;height:17px}
.pre{position:relative}
.pre span{position:absolute;left:16px;top:50%;translate:0 -52%;font-weight:800;font-size:18px;color:var(--ink-2);pointer-events:none}
.pre input{padding-left:38px}
.errmsg{display:none;gap:6px;align-items:flex-start;font-size:15px;line-height:1.3;font-weight:700;color:var(--err)}
.errmsg svg{flex:none;width:18px;height:18px;margin-top:1px}
.bad .errmsg{display:flex}
.bad input,.bad textarea{border-color:var(--err);background:#FFF2F5}
.bad .drop{border-color:var(--err)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:46px;padding:0 17px;border-radius:99px;border:2px solid var(--line);background:#fff;font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,scale .12s}
.chip svg{width:0;height:16px;opacity:0;transition:width .2s var(--out),opacity .2s}
.chip:active{scale:.94}
.chip[aria-pressed=true]{background:var(--cs);border-color:var(--c);animation:tagpop .3s var(--pop)}
.chip[aria-pressed=true] svg{width:16px;opacity:1}
.chips.full .chip[aria-pressed=false]{opacity:.5}
.chips.nope{animation:nope .3s}
@keyframes nope{25%{translate:-5px 0}75%{translate:5px 0}}

.drop{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;margin-top:46px;padding:0 16px 22px;border-radius:24px;border:3px dashed var(--c);background:var(--cs);transition:scale .15s var(--out)}
.drop:active{scale:.985}
.drop .e{--w:74px;rotate:-9deg;margin:-40px 0 16px;animation:bob 1.8s ease-in-out infinite alternate}
.drop b{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.drop span{font-size:15px;font-weight:600;color:var(--ink-2)}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.clip{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;border-radius:24px;background:var(--field);animation:tagpop .35s var(--pop)}
.clip video{width:96px;height:128px;border-radius:14px;object-fit:cover;background:var(--ink)}
.clip-meta{display:grid;gap:6px;min-width:0;justify-items:start}
.clip-meta b{font-size:16px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-meta .dur{font-size:15px;font-weight:800;padding:3px 11px;border-radius:99px;background:var(--mint);font-variant-numeric:tabular-nums}
.clip-meta .dur.no{background:#FFD0DA;color:#A30D2E}
.clip-meta button{margin-top:2px;height:44px;padding:0 16px;border-radius:99px;border:2px solid var(--ink);background:#fff;font-size:15.5px;font-weight:800}

.agree{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.38;font-weight:600;cursor:pointer}
.agree input{position:absolute;opacity:0;width:32px;height:32px;margin:0}
.agree .box{width:32px;height:32px;border-radius:10px;border:2.5px solid var(--ink);display:grid;place-items:center;color:#fff;transition:background .15s,border-color .15s}
.agree .box svg{width:20px;height:20px;scale:0;transition:scale .25s var(--pop)}
.agree input:checked + .box{background:var(--ink)}
.agree input:checked + .box svg{scale:1}
.agree input:focus-visible + .box{outline:3px solid var(--c);outline-offset:3px}
.send{display:grid;gap:16px}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sum{font-size:16px;font-weight:800;color:var(--err);text-align:center}
.sum:empty{display:none}

.done{position:relative;isolation:isolate;overflow:hidden;min-height:100dvh;display:grid;align-content:center;justify-items:center;text-align:center;padding:40px 22px calc(48px + env(safe-area-inset-bottom))}
.done:focus{outline:0}
.done-duo{position:relative;display:flex;justify-content:center;align-items:flex-end}
.done-pal{width:168px;margin:0 -18px 14px -64px;rotate:7deg;animation:avin .8s var(--pop) .25s backwards}
#signup[data-side=girl] .done-pal{display:none}
#signup[data-side=boy] .done-char{width:220px;margin-left:-14px}
.done-char{width:250px;margin-bottom:4px;animation:avin .8s var(--pop) backwards,wiggle 1.1s ease-in-out .8s infinite alternate}
@keyframes wiggle{from{rotate:-6deg}to{rotate:6deg}}
.done h1{font-size:clamp(46px,13vw,76px);line-height:.92;letter-spacing:-.04em;font-weight:900;overflow-wrap:anywhere}
.done p{margin-top:14px;font-size:19px;line-height:1.35;font-weight:600;max-width:19em}
.done .demo{margin-top:22px;font-size:15px;font-weight:700;padding:10px 16px;border-radius:16px;background:#fff;color:var(--ink);max-width:22em}
.done .btn{margin-top:28px;max-width:340px}
.done-back{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-size:17px;font-weight:800;text-underline-offset:4px;text-decoration-thickness:2px}
.burst{position:absolute;left:50%;top:38%;z-index:5;pointer-events:none}
.burst .e{position:absolute;left:0;top:0;--w:var(--s);margin:calc(var(--s)/-2)}

.flood{position:fixed;inset:0;z-index:100;clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .52s cubic-bezier(.6,0,.2,1);pointer-events:none}
.flood.on{clip-path:circle(160vmax at var(--x,50%) var(--y,50%))}
.flood.out{opacity:0;transition:opacity .32s}

@media (min-width:520px) and (max-width:899px){.wm{margin-left:16px}}
/* ================= WIDE ================= */
@media (min-width:900px){
  .hero{padding:56px max(40px,calc(50vw - 540px)) 110px;display:grid;grid-template-columns:1.05fr 1fr;column-gap:56px;align-items:center;align-content:center;row-gap:30px;min-height:min(100dvh,820px)}
  .hero-copy{grid-column:1}
  .wm{font-size:clamp(118px,11.4vw,164px)}
  .hook{font-size:28px}
  .pick{grid-column:2;grid-row:1;margin-top:110px;gap:26px;max-width:540px;justify-self:end;width:100%}
  .char-fig{height:140px;clip-path:inset(-240px -40px 0 -40px)}.char-img{width:250px;margin-left:-125px}
  .char-plate{padding:18px 18px 14px}.char-plate strong{font-size:32px}.char-plate small{font-size:16px;min-height:0}
  .rays{top:50%;width:2600px;height:2600px;margin:-1300px 0 0 -1300px}
  .sheet-sec{padding:110px max(40px,calc(50vw - 540px)) 140px}
  .h2,.wheel-sec .h2{font-size:84px}
  .steps-list{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
  .steps-list::before{display:none}
  .step{grid-template-columns:1fr;gap:10px;align-content:start}
  .step .e{--w:120px}
  .wheel-sec{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:center}
  .wheel-copy{grid-column:1;grid-row:1}
  .wheel-play{grid-column:2;grid-row:1}
  .wheel-foot{grid-column:1/-1}
  .char-heart{top:-132px;--w:40px;margin-left:-20px}
  .char--girl .char-heart{top:-160px}
  .char--girl .char-img{width:290px;margin-left:-145px;bottom:-56px}
  .dock{left:50%;right:auto;bottom:18px;width:440px;margin-left:-220px;padding:10px;border-radius:99px}
  .wheel-box{margin-top:0;width:400px}
  .said{position:static;margin-top:44px}.said::before{display:none}
  #signup:not(.is-done){display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,600px);grid-template-rows:auto 1fr;column-gap:40px;padding:0 max(32px,calc(50vw - 560px)) 60px}
  #signup .su-top{grid-column:1/-1;padding-left:0;padding-right:0}
  #signup .stage{position:sticky;top:90px;align-self:start;padding-bottom:20px}
  #signup .form{margin-top:16px;border-radius:38px;padding:44px 40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  html{scroll-behavior:auto}
  .rays,.stk,.char-heart,.avatar-heart,.drop .e,.done-char,.wheel-lights circle{animation:none!important}
  .wheel-rot{transition-duration:.7s}
  .js .step,.js .step .e,.js .wheel-box{transition-duration:.2s;translate:0 0;scale:1;rotate:0deg}
  .flood{transition:none}
}

/* ================= LEGAL LINKS ================= */
.legal{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:10px;font-size:15px;font-weight:700}
.legal a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px;text-decoration-thickness:2px}
.legal-note{text-align:center}
.legal-note a{font-weight:800;text-underline-offset:3px}
.sending{opacity:.75;pointer-events:none}

/* ================= DOCUMENT PAGES ================= */
.doc-top{position:relative;isolation:isolate;overflow:hidden;background:var(--sun);padding:calc(env(safe-area-inset-top) + 22px) 20px 74px}
.doc-brand{display:inline-block;rotate:-4deg;font-size:34px;line-height:.86;font-weight:900;letter-spacing:-.045em;text-decoration:none;filter:drop-shadow(0 4px 4px rgba(31,15,71,.25))}
.doc-brand span{position:relative;isolation:isolate;display:block;width:max-content}
.doc-brand span:nth-child(2){color:var(--pink);margin-left:.42em}
.doc-brand span::before{content:attr(data-t);position:absolute;left:0;top:0;z-index:-1;color:#fff;-webkit-text-stroke:.19em #fff;paint-order:stroke fill}
.doc-top h1{margin-top:30px;font-size:clamp(38px,10.5vw,64px);line-height:.96;letter-spacing:-.04em;font-weight:900;text-wrap:balance;max-width:14em}
.doc{position:relative;margin-top:-38px;background:#fff;border-radius:38px 38px 0 0;padding:44px 22px calc(56px + env(safe-area-inset-bottom))}
.doc-in{max-width:66ch;margin:0 auto}
.doc .lead{font-size:20px;line-height:1.4;font-weight:700}
.doc h2{margin-top:40px;font-size:25px;line-height:1.1;font-weight:900;letter-spacing:-.025em}
.doc p,.doc ul{margin-top:12px;font-size:17px;line-height:1.55;color:var(--ink)}
.doc ul{padding-left:1.15em}
.doc li{margin-top:6px}
.doc a{font-weight:700;text-underline-offset:3px;text-decoration-thickness:2px}
.doc .todo{background:var(--sun);color:var(--ink);font-weight:800;padding:1px 6px;border-radius:6px}
.doc .updated{margin-top:44px;font-size:15px;font-weight:700;color:var(--ink-2)}
.doc-foot{margin-top:28px;padding-top:6px;border-top:2px solid var(--line)}
.doc-foot .legal{margin-top:6px}
.lost{min-height:100dvh;display:grid;align-content:center;justify-items:start;gap:18px;background:var(--sun);padding:40px 22px}
.lost h1{font-size:clamp(44px,12vw,84px);line-height:.94;letter-spacing:-.04em;font-weight:900;max-width:9em}
.lost p{font-size:19px;font-weight:600;max-width:22em}
.lost .btn{width:auto}
@media (min-width:900px){
  .doc-top{padding:40px max(40px,calc(50vw - 540px)) 96px}
  .doc{padding:64px 40px 90px}
}