@font-face{font-family:Fredoka;src:url(../fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Pacifico;src:url(../fonts/pacifico.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--cream:#fff6ec;--paper:#fffaf4;--pink:#f7b6c8;--pink2:#ec7fa0;--rose:#d9547e;--lilac:#cdb8f0;--blue:#b7dcf5;--butter:#fbe7a1;--ink:#4a3542;--soft:#7d6672;--r:28px;
--knit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Cpath d='M2 2q5 12 10 16M22 2q-5 12-10 16' stroke='%23ec7fa0' stroke-opacity=%27.055' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 Nunito,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;line-height:1.1;margin:0 0 .4em;font-weight:600}
h2{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.01em}
.script{font-family:Pacifico,cursive;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.knit{background-image:var(--knit)}
.btn{display:inline-flex;align-items:center;gap:.4em;font:600 1.05rem Fredoka,sans-serif;padding:.85em 1.5em;border-radius:999px;border:0;background:var(--rose);color:#fff;text-decoration:none;cursor:pointer;box-shadow:0 6px 0 #b23c62,0 14px 24px -10px #d9547e88;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;outline:2px dashed #ffffff88;outline-offset:-6px}
.btn:hover{transform:translateY(-3px) scale(1.04)}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b23c62}
.btn.ghost{background:#fff;color:var(--rose);box-shadow:0 6px 0 var(--pink);outline-color:#ec7fa066}
.btn.sm{padding:.55em 1.1em;font-size:.95rem;box-shadow:0 4px 0 #b23c62}
.btn[disabled]{opacity:.4;pointer-events:none}
.stitched{position:relative;background:#fff;border-radius:var(--r);box-shadow:0 18px 40px -24px #9b5b7a55}
.stitched::before{content:"";position:absolute;inset:8px;border:2.5px dashed var(--pink);border-radius:calc(var(--r) - 8px);pointer-events:none}
/* thread */
.thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:4;overflow:hidden;mix-blend-mode:multiply}
.thread path{fill:none;stroke:var(--pink2);stroke-width:4;stroke-linecap:round;opacity:.38;filter:drop-shadow(0 2px 0 #fff)}
main,.foot{position:relative;z-index:1}
/* nav */
.nav{position:fixed;inset:12px 12px auto;z-index:20;display:flex;align-items:center;gap:1rem;padding:.5rem .6rem .5rem 1.2rem;border-radius:999px;background:#fffaf4cc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px -18px #9b5b7a88;border:2px dashed #f7b6c8aa;max-width:1100px;margin:auto}
.brand{display:flex;align-items:baseline;gap:.35rem;text-decoration:none;color:var(--rose)}.brand .script{font-size:1.6rem;line-height:1}.brand small{font:600 .9rem Fredoka}
.nav nav{display:flex;gap:1.3rem;margin-left:auto}.nav nav a{text-decoration:none;font-weight:700;color:var(--soft)}.nav nav a:hover{color:var(--rose)}
@media(max-width:820px){.nav nav{display:none}.nav .btn{margin-left:auto}}
/* hero */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;padding:7rem 1.2rem 4rem;text-align:center;background-color:var(--cream)}
.hero::after{content:"";position:absolute;inset:auto -10% -1px;height:120px;background:radial-gradient(60% 100% at 50% 100%,#f7b6c833,transparent)}
.hero-inner{position:relative;z-index:2;max-width:760px}
.kicker{display:inline-block;background:#fff;border-radius:999px;padding:.35em 1em;font-weight:700;font-size:.9rem;color:var(--rose);border:2px dashed var(--pink);margin:0 0 .4rem;animation:pop .7s .2s both cubic-bezier(.3,1.6,.5,1)}
.logo{width:min(640px,100%);height:auto;overflow:visible}
.logo text{font-family:Pacifico,cursive;fill:var(--rose);stroke:var(--rose);stroke-width:2.2;stroke-linejoin:round;paint-order:stroke}
.logo .t1{font-size:150px}.logo .t2{font-size:58px;fill:var(--pink2);stroke:var(--pink2)}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;fill-opacity:0;animation:drawText 2.6s .3s forwards cubic-bezier(.6,.1,.3,1),fillIn .9s 1.9s forwards}
.t2{animation-delay:1s,2.4s}
.yarn-in,.yarn-out{fill:none;stroke:var(--pink2);stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:drawText 1.4s .1s forwards}
.yarn-out{animation-delay:2.6s}
.ball circle{fill:var(--pink);stroke:var(--pink2);stroke-width:3}.ball path{fill:none;stroke:var(--pink2);stroke-width:2.5;stroke-linecap:round}
.ball{transform-box:fill-box;transform-origin:center;animation:pop .8s 3s both cubic-bezier(.3,1.6,.5,1)}
@keyframes drawText{to{stroke-dashoffset:0}}@keyframes fillIn{to{fill-opacity:1}}
@keyframes pop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.lead{font-size:clamp(1.05rem,2.6vw,1.25rem);color:var(--soft);max-width:560px;margin:.4rem auto 1.4rem;animation:up .8s 2.2s both}
.lead b{color:var(--ink)}
.cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;animation:up .8s 2.4s both}
.pills{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;animation:up .8s 2.6s both}
.pills li{background:#fff;padding:.35em .9em;border-radius:999px;font-weight:700;font-size:.9rem;box-shadow:0 6px 16px -10px #9b5b7a77}
.float-layer{position:absolute;inset:0;z-index:1}
.fl{position:absolute;width:clamp(96px,13vw,180px);aspect-ratio:3/4;object-fit:cover;border-radius:46% 46% 40% 40%/38% 38% 50% 50%;border:5px solid #fff;outline:2.5px dashed var(--pink);outline-offset:-12px;box-shadow:0 24px 40px -20px #9b5b7a88;animation:pop 1s both cubic-bezier(.3,1.6,.5,1),bob 6s ease-in-out infinite alternate;will-change:transform}
.f1{left:5%;top:17%;rotate:-8deg;animation-delay:.4s,0s}.f2{right:6%;top:15%;rotate:7deg;animation-delay:.6s,-2s}.f3{left:10%;bottom:12%;rotate:6deg;animation-delay:.8s,-1s}.f4{right:10%;bottom:10%;rotate:-6deg;animation-delay:1s,-3s}.f5{left:22%;top:4%;width:clamp(70px,8vw,110px);rotate:-12deg;animation-delay:1.2s,-4s;opacity:.95}.f6{right:24%;bottom:3%;width:clamp(70px,8vw,110px);rotate:10deg;animation-delay:1.4s,-5s}
@keyframes bob{to{translate:0 -14px}}
@media(max-width:700px){.fl{width:84px;border-width:4px}.f1{left:-14px;top:13%}.f2{right:-14px;top:15%}.f3{left:-10px;bottom:5%}.f4{right:-10px;bottom:4%}.f5,.f6{display:none}.kicker{font-size:.78rem}.hero{padding-top:8.5rem}}
.scroll-hint{position:absolute;bottom:18px;left:50%;translate:-50% 0;z-index:2;font:600 .8rem Fredoka;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:4px}
.scroll-hint span{width:2px;height:28px;background:linear-gradient(var(--pink2),transparent);animation:bob 1.2s infinite alternate}
@media(max-width:700px){.scroll-hint{display:none}}
/* marquee */
.marquee{overflow:hidden;background:var(--rose);color:#fff;padding:.9rem 0;rotate:-1.5deg;margin:-1rem -2% 0;width:104%;position:relative;z-index:3;border-block:3px dashed #ffffff88}
.marquee div{display:flex;gap:1.4rem;width:max-content;animation:mq 30s linear infinite;font:600 1.3rem Fredoka;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
.sec{padding:6rem 1.2rem;max-width:1180px;margin:auto}
.band{max-width:none;border-radius:48px;margin:2rem .6rem}.band>*{max-width:1180px;margin-left:auto;margin-right:auto}
.pink{background:#fde3ea var(--knit)}.lilac{background:#ece3fb var(--knit)}
.sh{text-align:center;max-width:640px;margin:0 auto 2.4rem}.sh p{color:var(--soft)}
.tag{color:var(--pink2);font-size:1.5rem;margin:0}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.2rem}
.tab{font:600 1rem Fredoka;border:2px dashed var(--pink);background:#fff;color:var(--soft);padding:.5em 1.1em;border-radius:999px;cursor:pointer;transition:.25s}
.tab:hover{color:var(--rose)}.tab.on{background:var(--pink);color:#fff;border-color:#fff;box-shadow:0 6px 0 var(--pink2)}
@media(max-width:600px){.tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:.6rem;margin-inline:-1.2rem;padding-inline:1.2rem;scrollbar-width:none}.tab{flex:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.6rem}
@media(max-width:600px){.grid{grid-template-columns:1fr 1fr;gap:1rem}}
.card{margin:0;background:#fff;padding:10px 10px 4px;border-radius:26px;rotate:var(--r);box-shadow:0 18px 30px -22px #9b5b7a99;transition:transform .5s cubic-bezier(.3,1.8,.5,1),opacity .4s,rotate .4s}
.card.hide{display:none}
.card.in{animation:pop .6s both cubic-bezier(.3,1.6,.5,1)}
.card:hover{transform:scale(1.04,.97) translateY(-6px);rotate:0deg}
.card:hover .ph img{transform:scale(1.07)}
.ph{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;border-radius:18px;overflow:hidden;position:relative}
.ph::after{content:"";position:absolute;inset:6px;border:2px dashed #ffffffb0;border-radius:14px}
.ph img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s}
.card figcaption{font:600 1rem Fredoka;text-align:center;padding:.55rem .2rem}
.squish{animation:squish .5s}@keyframes squish{30%{transform:scale(1.12,.86)}60%{transform:scale(.93,1.08)}100%{transform:scale(1)}}
.more{text-align:center;margin-top:2.6rem}
/* split */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;padding:0 1rem}
.split p{color:var(--soft);font-size:1.1rem}
.stack{position:relative;height:380px}.stack img{position:absolute;width:56%;aspect-ratio:3/4;object-fit:cover;border-radius:24px;border:6px solid #fff;box-shadow:0 20px 40px -20px #9b5b7a99}
.stack img:nth-child(1){left:0;top:30px;rotate:-9deg}.stack img:nth-child(2){left:22%;top:0;rotate:3deg;z-index:2}.stack img:nth-child(3){right:0;top:50px;rotate:10deg}
@media(max-width:760px){.split{grid-template-columns:1fr;text-align:center}.stack{height:300px;max-width:360px;margin:auto;width:100%}}
/* stepper */
.stepper{max-width:760px;margin:auto;padding:2.2rem clamp(1.2rem,4vw,2.6rem)}
.dots{display:flex;justify-content:space-between;list-style:none;padding:0;margin:0 0 1.6rem;counter-reset:d;position:relative}
.dots::before{content:"";position:absolute;left:8%;right:8%;top:17px;border-top:3px dashed var(--pink)}
.dots li{counter-increment:d;display:flex;flex-direction:column;align-items:center;gap:.3rem;font:600 .85rem Fredoka;color:var(--soft);position:relative;flex:1}
.dots li::before{content:counter(d);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--pink);transition:.3s}
.dots li.on::before{background:var(--rose);border-color:var(--rose);color:#fff;scale:1.1}
.step{border:0;padding:0;margin:0;display:none}.step.on{display:block;animation:up .45s both}
legend{font:600 clamp(1.3rem,3.5vw,1.7rem) Fredoka;margin-bottom:1rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips button{font:700 .98rem Nunito;border:2px solid #f2d4de;background:var(--paper);color:var(--ink);padding:.6em 1.1em;border-radius:999px;cursor:pointer;transition:.25s cubic-bezier(.3,1.6,.5,1)}
.chips button:hover{transform:translateY(-2px);border-color:var(--pink)}
.chips button.on{background:var(--pink);border-color:var(--pink2);color:#fff;transform:scale(1.05)}
.swatches button::before{content:"";display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--c);margin-right:.45em;vertical-align:-3px;border:2px solid #0001}
.sizes button{display:flex;flex-direction:column;align-items:center;gap:.4rem;border-radius:22px;min-width:120px}
.sizes i{display:grid;place-items:center;font-style:normal;width:calc(54px*var(--s));height:calc(54px*var(--s));border-radius:50%;background:var(--butter);border:2px dashed var(--pink2)}
.field{display:block;margin-top:1.2rem;font-weight:700}
.field textarea,.field input{display:block;width:100%;margin-top:.4rem;font:inherit;font-weight:400;padding:.8em 1em;border-radius:18px;border:2px dashed var(--pink);background:var(--paper);color:var(--ink);resize:vertical}
.field :focus{outline:3px solid var(--lilac);border-color:transparent}
.preview{margin-top:1.4rem;background:#fdf1f5;border-radius:20px;padding:1rem 1.2rem}.preview .script{margin:0;color:var(--pink2)}
.preview pre{white-space:pre-wrap;font:500 .98rem/1.55 Nunito;margin:.3rem 0 0}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem;justify-content:flex-end}.actions [hidden]{display:none}
.note{min-height:1.4em;text-align:right;color:var(--rose);font-weight:700;margin:.6rem 0 0}
/* process */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.steps li{padding:2rem 1.4rem 1.6rem}.steps span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--lilac);color:#fff;font:700 1.3rem Fredoka;margin-bottom:.8rem}
.steps li:nth-child(2) span{background:var(--pink)}.steps li:nth-child(3) span{background:#8cc6ec}.steps li:nth-child(4) span{background:#f2c94c}
.steps p{color:var(--soft);margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps{grid-template-columns:1fr}}
.quote{margin:4rem auto 0;text-align:center;max-width:820px}
.quote p{font:600 clamp(1.6rem,4.6vw,2.8rem)/1.25 Fredoka;margin:0}.quote em{font-family:Pacifico;font-style:normal;color:var(--rose);font-weight:400}
.quote cite{display:block;margin-top:1rem;font-style:normal;color:var(--soft);font-weight:700}
/* ship */
.ship{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.ship article{padding:2.2rem 1.6rem;text-align:center}
.ship p{color:var(--soft);margin:0}.ico{font-size:2.4rem;width:76px;height:76px;margin:0 auto .8rem;display:grid;place-items:center;border-radius:50%;background:var(--butter)}
.ship article:nth-child(2) .ico{background:var(--pink)}.ship article:nth-child(3) .ico{background:var(--blue)}
@media(max-width:760px){.ship{grid-template-columns:1fr}}
/* faq */
.faq{max-width:780px;margin:auto;display:grid;gap:1rem}
.faq details{padding:1.1rem 1.6rem}.faq summary{font:600 1.15rem Fredoka;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:1.6rem;color:var(--rose);transition:.3s}
.faq details[open] summary::after{rotate:45deg}.faq details p{color:var(--soft);margin:.6rem 0 .2rem}
.final{text-align:center;max-width:none;background-color:#fde3ea;border-radius:48px 48px 0 0;margin-top:3rem;padding:6rem 1.2rem}
.foot{text-align:center;padding:2rem 1rem 3rem;background:#fde3ea;color:var(--soft)}.foot .script{font-size:2rem;color:var(--rose);margin:0}.foot p{margin:.2rem}
/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.vis{opacity:1;transform:none}
/* lightbox */
dialog{border:0;padding:14px;border-radius:30px;background:#fff;max-width:min(92vw,560px);box-shadow:0 30px 80px -20px #4a354288}
dialog::backdrop{background:#4a3542aa;backdrop-filter:blur(6px)}
dialog[open]{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
dialog img{width:100%;max-height:75vh;object-fit:contain;border-radius:20px}dialog p{text-align:center;font:600 1.2rem Fredoka;margin:.6rem 0 .2rem}
dialog .x{position:absolute;right:10px;top:10px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#fff;font-size:1.6rem;cursor:pointer;box-shadow:0 4px 12px #0002}
dialog .nv{position:absolute;top:45%;width:44px;height:44px;border-radius:50%;border:0;background:#ffffffe0;font-size:1.8rem;cursor:pointer;color:var(--rose)}.pv{left:20px}.nx{right:20px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.draw,.yarn-in,.yarn-out{stroke-dashoffset:0;fill-opacity:1}.reveal{opacity:1;transform:none}.marquee div{animation:none}}