@font-face{font-family:Fredoka;src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}@font-face{font-family:Nunito;src:url(/fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}:root{--cream:#fff8f1;--cream-2:#fdeee2;--blush:#ffd6dd;--pink:#ff8fab;--pink-deep:#f0628a;--berry:#c2416b;--lilac:#cdb8ff;--lilac-deep:#8b6be0;--mint:#bff0dc;--mint-deep:#3fa985;--sky:#c9e7ff;--butter:#ffe9a8;--cocoa:#4a2f3a;--cocoa-soft:#7a5865;--stitch:rgba(194,65,107,0.45);--card:#fffdfb;--shadow-soft:0 1px 0 rgba(255,255,255,0.9) inset,0 -6px 14px rgba(240,98,138,0.06) inset,0 18px 40px -18px rgba(122,56,82,0.35),0 6px 14px -6px rgba(122,56,82,0.18);--shadow-puff:0 2px 0 rgba(255,255,255,0.8) inset,0 -4px 0 rgba(0,0,0,0.06) inset,0 10px 22px -10px rgba(122,56,82,0.45);--radius-xl:34px;--radius-lg:24px;--radius-md:16px;--font-display:"Fredoka","Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;--font-body:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}*{box-sizing:border-box}body,html{margin:0;padding:0;min-height:100%}body{position:relative;min-height:100vh;font-family:var(--font-body);color:var(--cocoa);background-color:var(--cream);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 12% 8%,rgba(255,214,221,.9) 0,rgba(255,214,221,0) 34%),radial-gradient(circle at 92% 18%,rgba(205,184,255,.55) 0,rgba(205,184,255,0) 32%),radial-gradient(circle at 70% 96%,rgba(191,240,220,.7) 0,rgba(191,240,220,0) 36%),radial-gradient(rgba(194,65,107,.07) 1px,transparent 1.4px);background-size:auto,auto,auto,14px 14px}button,input,select{font:inherit;color:inherit}a{color:var(--berry)}.shell{max-width:1120px;margin:0 auto;padding:18px 18px 40px}.topbar{justify-content:space-between;gap:12px;flex-wrap:wrap}.brand,.topbar{display:flex;align-items:center}.brand{gap:10px;text-decoration:none;color:var(--cocoa)}.brand-mark{width:46px;height:46px;flex:none}.brand-name{font-family:var(--font-display);font-weight:650;font-size:28px;letter-spacing:.2px}.brand-name span{color:var(--pink-deep)}.links{display:flex;flex-wrap:wrap}.chip,.links{gap:8px;align-items:center}.chip{display:inline-flex;padding:8px 14px;border-radius:999px;background:var(--card);border:2px dashed var(--stitch);color:var(--cocoa);text-decoration:none;font-weight:750;font-size:14px;box-shadow:var(--shadow-puff);cursor:pointer;transition:transform .15s ease,background .15s ease}.chip:hover{transform:translateY(-1px);background:#fff}.chip:active{transform:translateY(1px)}.chip svg{width:16px;height:16px}.ca{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero{text-align:center;margin:26px auto 22px;max-width:720px}.hero h1{font-family:var(--font-display);font-weight:650;font-size:clamp(34px,6vw,58px);line-height:1.02;margin:0 0 12px;letter-spacing:-.5px}.hero h1 em{font-style:normal;color:var(--pink-deep);background:linear-gradient(transparent 62%,var(--butter) 62%);border-radius:6px;padding:0 4px}.hero p{font-size:clamp(16px,2.2vw,19px);color:var(--cocoa-soft);margin:0;font-weight:650}.pillow{position:relative;background:var(--card);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);padding:22px}.pillow:before{content:"";position:absolute;inset:9px;border-radius:calc(var(--radius-xl) - 9px);border:2.5px dashed var(--stitch);pointer-events:none}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}.panel{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-display);font-weight:600;font-size:19px;margin:4px 6px 0}.step{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blush);color:var(--berry);font-size:15px;margin-right:8px;box-shadow:var(--shadow-puff)}.stage{position:relative;aspect-ratio:1/1;width:100%;border-radius:var(--radius-lg);overflow:hidden;background:repeating-linear-gradient(45deg,rgba(255,143,171,.06) 0 12px,rgba(255,255,255,0) 12px 24px),var(--cream-2);box-shadow:inset 0 0 0 2px rgba(194,65,107,.12),inset 0 10px 22px -16px rgba(122,56,82,.5)}.drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;cursor:pointer;border:0;background:transparent;width:100%;border-radius:inherit}.drop.over{background:rgba(255,214,221,.55)}.btn:focus-visible,.chip:focus-visible,.drop:focus-visible{outline:3px solid var(--lilac-deep);outline-offset:3px}.drop-icon{width:92px;height:92px}.drop strong{font-family:var(--font-display);font-weight:600;font-size:21px}.drop span{color:var(--cocoa-soft);font-weight:650;font-size:14.5px}.crop{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.crop:active{cursor:grabbing}.crop canvas,.stage canvas.view,.stage img.view{position:absolute;inset:0;width:100%;height:100%;display:block}.crop-hint{left:50%;bottom:12px;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(74,47,58,.62);color:#fff;font-size:12.5px;font-weight:750;white-space:nowrap}.crop-hint,.ring-guide{position:absolute;pointer-events:none}.ring-guide{inset:0;background:radial-gradient(circle at center,transparent 49.6%,rgba(255,248,241,.42) 50%)}.zoom{display:flex;align-items:center;gap:10px;padding:0 6px}.zoom input[type=range]{flex:1 1;height:28px;margin:0;background:transparent;appearance:none;cursor:pointer}.zoom input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--blush),var(--lilac));box-shadow:inset 0 1px 2px rgba(122,56,82,.18)}.zoom input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--blush),var(--lilac));box-shadow:inset 0 1px 2px rgba(122,56,82,.18)}.zoom input[type=range]::-webkit-slider-thumb{appearance:none;width:26px;height:26px;margin-top:-8px;border-radius:50%;background:var(--pink-deep);border:4px solid #fff;box-shadow:0 3px 8px rgba(122,56,82,.35)}.zoom input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--pink-deep);border:4px solid #fff;box-shadow:0 3px 8px rgba(122,56,82,.35)}.zoom input[type=range]:focus-visible{outline:3px solid var(--lilac-deep);outline-offset:4px;border-radius:999px}.zoom svg{width:18px;height:18px;color:var(--cocoa-soft);flex:none}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:18px;cursor:pointer;text-decoration:none;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;min-height:54px}.btn svg{width:21px;height:21px}.btn-main{flex:1 1 auto;color:#fff;background:linear-gradient(180deg,#ff9fb8 0,var(--pink-deep) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(160,30,75,.25),0 12px 22px -10px rgba(240,98,138,.9);text-shadow:0 1px 0 rgba(160,30,75,.35)}.btn-soft{color:var(--cocoa);background:var(--cream-2);box-shadow:var(--shadow-puff)}.btn-mint{flex:1 1 auto;color:#fff;background:linear-gradient(180deg,#6fd3ae 0,var(--mint-deep) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(20,100,70,.25),0 12px 22px -10px rgba(63,169,133,.9);text-shadow:0 1px 0 rgba(20,100,70,.35)}.btn:hover:not(:disabled){transform:translateY(-1px);filter:saturate(1.05) brightness(1.02)}.btn:active:not(:disabled){transform:translateY(2px)}.btn:disabled{cursor:not-allowed;filter:grayscale(.65) opacity(.6)}.status{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-md);font-weight:750;font-size:14.5px;line-height:1.35;background:var(--cream-2)}.status svg{width:20px;height:20px;flex:none}.status.ok{background:#e9fbf3;color:#1f6b52}.status.warn{background:#fff4d6;color:#7a5410}.status.bad{background:#ffe3e8;color:#9b2348}.status.info{background:#efe9ff;color:#4a3596}.counter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--radius-md);background:linear-gradient(180deg,#fff 0,var(--cream-2) 100%);box-shadow:var(--shadow-puff)}.counter-text{font-weight:800;font-size:15px}.counter-text small{display:block;font-weight:650;font-size:12.5px;color:var(--cocoa-soft)}.buttons-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}.pip{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.pip.used{background:#ead9df}.working{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:22px;background:rgba(255,248,241,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.working strong{font-family:var(--font-display);font-size:21px;font-weight:600}.working span{color:var(--cocoa-soft);font-weight:700;font-size:14px}.dim{position:absolute;inset:0;background:rgba(255,248,241,.55)}.yarn{width:96px;height:96px;animation:wobble 2.4s ease-in-out infinite}.yarn .thread{stroke-dasharray:6 7;animation:stitch 1.1s linear infinite}.progress{width:min(260px,80%);height:12px;border-radius:999px;background:#f3dde4;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}.progress i{display:block;height:100%;width:40%;border-radius:inherit;background:repeating-linear-gradient(-45deg,var(--pink) 0 10px,var(--pink-deep) 10px 20px);background-size:28px 28px;animation:slide 1.2s linear infinite;transition:width .6s ease}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px;color:var(--cocoa-soft);font-weight:700}.placeholder svg{width:120px;height:120px;opacity:.9}.compare{display:inline-flex;padding:4px;border-radius:999px;background:var(--cream-2);box-shadow:var(--shadow-puff)}.compare button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;color:var(--cocoa-soft)}.compare button[aria-pressed=true]{background:#fff;color:var(--berry);box-shadow:0 2px 6px rgba(122,56,82,.18)}.pfp-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--radius-md);background:var(--cream-2)}.pfp-row canvas,.pfp-row img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(122,56,82,.3);flex:none;object-fit:cover}.pfp-row .pfp-sq{border-radius:14px}.pfp-row p{margin:0;font-size:13.5px;font-weight:700;color:var(--cocoa-soft)}.sizes{display:flex;gap:6px;flex-wrap:wrap}.sizes button{border:2px solid transparent;background:#fff;border-radius:999px;padding:5px 11px;font-weight:800;font-size:12.5px;cursor:pointer;color:var(--cocoa-soft);box-shadow:var(--shadow-puff)}.sizes button[aria-pressed=true]{border-color:var(--pink);color:var(--berry)}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}.how .pillow{padding:22px 22px 20px}.how h3{font-family:var(--font-display);font-weight:600;margin:2px 0 6px;font-size:19px}.how p{margin:0;color:var(--cocoa-soft);font-weight:650;font-size:14.5px;line-height:1.45}.how svg{width:44px;height:44px}.foot{margin-top:30px;text-align:center;color:var(--cocoa-soft);font-size:13px;font-weight:650;line-height:1.6}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:var(--cocoa);color:#fff;font-weight:750;font-size:14px;box-shadow:0 10px 24px rgba(74,47,58,.35);z-index:20}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@keyframes wobble{0%,to{transform:rotate(-7deg) scale(1)}50%{transform:rotate(7deg) scale(1.04)}}@keyframes stitch{to{stroke-dashoffset:-26}}@keyframes slide{to{background-position:28px 0}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.breathe{animation:breathe 2.8s ease-in-out infinite}@media (prefers-reduced-motion:reduce){.breathe,.progress i,.yarn,.yarn .thread{animation:none}}@media (max-width:860px){.how,.workbench{grid-template-columns:1fr}.buttons-row{max-width:50%}}@media (max-width:520px){.shell{padding:12px 12px 30px}.pillow{padding:16px;border-radius:28px}.pillow:before{inset:7px;border-radius:22px}.brand-name{font-size:24px}.brand-mark{width:40px;height:40px}.hero{margin:18px auto 16px}.btn{font-size:17px;padding:14px 18px}.buttons-row{display:none}}