:root{--ivory:#f8f2e4;--cream:#f1e7d3;--ink:#2f3448;--soft:#8b8478;--navy:#27324a;--terracotta:#c4553f;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans:-apple-system, "SF Pro Text", "Avenir Next", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--ink);font-family:var(--sans);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#e6dccb}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}h1,h2,h3,p{margin:0}.app{background:radial-gradient(120% 70% at 50% 0%, #fffaf0, var(--ivory) 55%, #f1e8d6);max-width:460px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:0 0 60px #5a3c1e2e}.screen{flex-direction:column;flex:1;min-width:0;animation:.4s both screen-in;display:flex}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}.bar{padding:max(10px, env(safe-area-inset-top)) 10px 4px;grid-template-columns:44px 1fr 44px;align-items:center;display:grid}.icon{width:44px;height:44px;color:var(--ink);opacity:.75;border-radius:50%;place-items:center;display:grid}.icon:active{background:#3c281414}.title{text-align:center}.title h2{font:500 20px/1.2 var(--serif);letter-spacing:.01em}.thread-bar{background:#3c28141a;border-radius:3px;width:84px;height:3px;margin:7px auto 0;overflow:hidden}.thread-bar i{background:repeating-linear-gradient(90deg, var(--terracotta) 0 5px, #d77a62 5px 7px);border-radius:3px;height:100%;transition:width .4s;display:block}.stage{flex:1;place-items:center;min-height:0;display:grid}.caption{text-align:center;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);height:16px;font-size:11px}.primary{background:var(--navy);height:54px;color:var(--cream);letter-spacing:.18em;outline-offset:-6px;border-radius:999px;outline:1.5px dashed #f1e7d380;padding:0 34px;font-size:13px;font-weight:600;transition:transform .15s;box-shadow:0 8px 18px -6px #27324a99}.primary:active{transform:scale(.97)}.link{color:var(--soft);text-underline-offset:3px;padding:10px;font-size:12px;-webkit-text-decoration:underline #8b847866;text-decoration:underline #8b847866}.collection{overflow-y:auto}.brand{text-align:center;padding:max(22px, env(safe-area-inset-top)) 16px 8px;position:relative}.brand .icon{right:10px;top:max(14px, env(safe-area-inset-top));position:absolute}.brand h1{font:600 22px/1 var(--serif);letter-spacing:.34em;margin-right:-.34em}.brand p{letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:9px;font-size:11px}.grid{grid-template-columns:1fr 1fr;gap:12px;padding:8px 16px;display:grid}.card{text-align:center;background:#fffaf0;border:1px solid #785a321a;border-radius:20px;padding:6px 10px 11px;transition:transform .15s;display:block;box-shadow:0 6px 14px -8px #5a3c1e59}.card:active{transform:scale(.97)}.thumb{aspect-ratio:1/.92;place-items:center;padding:5% 9%;display:grid}.thumb img{filter:drop-shadow(0 4px 5px #462d1459);width:100%;animation:.4s cubic-bezier(.3,1.5,.5,1) pop}@keyframes pop{0%{opacity:0;transform:scale(.9)}}.card h3{font:500 15px/1.2 var(--serif)}.card span{letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:3px;font-size:10px;display:block}.card.done span{color:var(--terracotta)}.col-foot{padding:12px 16px max(10px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;margin-top:auto;display:flex}.guide{width:100%;height:100%;display:block}.guide path{stroke:#9a9fb0;stroke-width:.4px;stroke-linejoin:round}.guide .g-cut{fill:none;stroke:#b9b3a6;stroke-width:.5px;stroke-dasharray:1.6 1.4}.guide .g-on{stroke:var(--cs);stroke-width:.9px;stroke-dasharray:1.8 1.2;animation:1.5s ease-in-out infinite alternate glow}@keyframes glow{0%{fill:var(--c1)}to{fill:var(--c2)}}.guide .g-inspect{stroke:#e0218a;stroke-width:1px}.hoop{aspect-ratio:1;width:min(100vw - 26px,100dvh - 292px,430px);position:relative}.hoop-ring{background:conic-gradient(from 20deg,#dcb785,#c99b62,#e4c493,#c4935a,#dbb785,#cfa36c,#e2c08f,#c8995f,#dcb785);border-radius:50%;position:absolute;inset:0;box-shadow:0 22px 30px -12px #5a3c1980,0 3px 6px #5a3c1947,inset 0 1.5px 1px #fff9,inset 0 -2px 3px #5a320f66}.hoop-ring:before{content:"";border-radius:50%;position:absolute;inset:2.3%;box-shadow:0 0 0 1px #6e461e61,inset 0 1px 0 1px #ffffff4d}.hoop-screw{background:linear-gradient(90deg,#a98347,#f1dfb0 45%,#b48d4f 60%,#8f6b35);border-radius:3px;width:8.5%;height:6.4%;position:absolute;top:-3.4%;left:50%;transform:translate(-50%);box-shadow:0 2px 3px #462d0f66}.hoop-screw:after{content:"";background:linear-gradient(90deg,#8f6b35,#e9d49f 50%,#8f6b35);border-radius:2px 2px 0 0;width:56%;height:40%;position:absolute;top:-34%;left:50%;transform:translate(-50%)}.fabric{background-size:40px;background-color:var(--cream);touch-action:none;cursor:crosshair;border-radius:50%;position:absolute;inset:5%;overflow:hidden}.fabric:after{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #6e461e66,inset 0 5px 9px #50321466,inset 0 0 46px #8c643229}.design{pointer-events:none;width:82%;height:82%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.design>*{width:100%;height:100%;position:absolute;inset:0}.design .guide{mix-blend-mode:multiply;opacity:.9}.stitched{filter:drop-shadow(0 1.2px 1px #3c260f80)}.glint{pointer-events:none}.needle{opacity:0;pointer-events:none;width:0;height:0;transition:opacity .2s;position:absolute;top:0;left:0}.needle.on{opacity:1}.needle:before{content:"";transform-origin:50% 100%;background:linear-gradient(90deg,#8f8f96,#fff 45%,#9a9aa2);border-radius:2px 2px 1px 1px;width:2px;height:30px;position:absolute;bottom:0;left:0;transform:rotate(38deg);box-shadow:1px 2px 2px #28190a59}.hint{white-space:nowrap;pointer-events:none;letter-spacing:.04em;color:#6d6558;background:#fffaf0d9;border-radius:99px;padding:6px 12px;font-size:11px;animation:.6s .5s both screen-in;position:absolute;bottom:7%;left:50%;transform:translate(-50%)}.hoop-ring,.hoop-screw,.fabric{transition:opacity .8s,transform .9s cubic-bezier(.4,0,.2,1)}.hoop.away .hoop-ring,.hoop.away .fabric{opacity:0;transform:scale(.84)}.hoop.away .hoop-screw{opacity:0;transform:translate(-50%)translateY(40%)scale(.84)}.hoop.away .fabric{pointer-events:none}.finished{filter:drop-shadow(0 14px 12px #462d1459)drop-shadow(0 2px 2px #462d144d);width:73.8%;animation:1.1s cubic-bezier(.3,1.3,.5,1) both present;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes present{0%{filter:drop-shadow(0 1px 1px #462d1466);transform:translate(-50%,-50%)}45%{transform:translate(-50%,-52%)scale(.92)rotate(-3deg)}to{transform:translate(-50%,-50%)scale(1.08)rotate(0)}}.twinkle{opacity:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:#e0b354;width:14px;height:14px;animation:1.6s ease-in-out both twinkle;position:absolute}.t0{animation-delay:.7s;top:20%;left:8%}.t1{animation-delay:.9s;top:12%;right:6%;transform:scale(1.4)}.t2{animation-delay:1.1s;bottom:14%;right:10%}.t3{animation-delay:1s;bottom:8%;left:12%;transform:scale(.8)}.t4{animation-delay:1.25s;top:2%;left:46%;transform:scale(.7)}@keyframes twinkle{40%{opacity:.9;rotate:40deg}to{opacity:0;rotate:90deg}}.hoop-foot{padding:4px 8px max(14px, env(safe-area-inset-bottom));flex-direction:column;justify-content:flex-end;min-height:148px;display:flex}.spools{justify-content:center;gap:clamp(3px,1.4vw,10px);padding:20px 0 6px;display:flex}.spool{flex:none;width:40px;height:58px;transition:transform .3s cubic-bezier(.3,1.7,.5,1),opacity .3s;position:relative}.spool:before,.spool:after{content:"";background:linear-gradient(#ecd6ad,#c9a36c);border-radius:5px;height:10px;position:absolute;left:1px;right:1px;box-shadow:0 2px 3px #462d144d,inset 0 1px #ffffff80}.spool:before{top:0}.spool:after{bottom:0}.spool i{background:repeating-linear-gradient(97deg, #fff3 0 1px, transparent 1px 2.4px, #3c230f24 2.4px 3.2px), linear-gradient(90deg, #3c230f42, #ffffff38 32%, transparent 60%, #3c230f47), var(--c);border-radius:6px/12px;transition:box-shadow .3s,inset .3s;position:absolute;inset:8px 5px}.spool.sel{transform:translateY(-9px)scale(1.16)}.spool.sel i{box-shadow:0 0 0 2px var(--ivory), 0 0 0 3.5px var(--c), 0 0 14px 2px var(--c)}.spool.used{opacity:.4}.spool.used i{left:13px;right:13px}.done-actions{flex-direction:column;align-items:center;gap:4px;animation:.6s .9s both screen-in;display:flex}.done-actions p{font:italic 15px var(--serif);color:var(--soft);margin-bottom:12px}.jacket-wrap{aspect-ratio:400/470;width:min(100vw - 12px,85.1dvh - 212.75px,440px);position:relative}.jacket-art{filter:drop-shadow(0 10px 14px #3c281447);width:100%;height:100%;position:absolute;inset:0}.placed{touch-action:none;cursor:grab;position:absolute}.placed img,.ghost{pointer-events:none;width:100%;display:block}.placed img{filter:drop-shadow(0 1px .6px #060c1eb3)drop-shadow(0 2.5px 3px #060c1e4d);transition:transform .25s,filter .25s}.placed.lift img,.ghost{filter:drop-shadow(0 14px 10px #060c1e66);transform:scale(1.1)}.placed.sel:before{content:"";border:1.5px dashed #fffaebcc;border-radius:22%;position:absolute;inset:-7%}.placed.attach img{animation:.55s cubic-bezier(.3,1.6,.5,1) settle}@keyframes settle{0%{filter:drop-shadow(0 12px 9px #060c1e66);transform:scale(1.12)}55%{transform:scale(.96)}}.sew{pointer-events:none;position:absolute;inset:0}.sew path{fill:none;stroke:#fffbea;stroke-width:1.7px;stroke-linecap:round;stroke-dasharray:2.4 1.8 2.4 1.8 2.4 1.8 2.4 1.8 2.4 100;opacity:0}.placed.attach .sew path{animation:.9s linear .1s sew}@keyframes sew{0%{opacity:1;stroke-dashoffset:0}85%{opacity:1}to{opacity:0;stroke-dashoffset:-100px}}.ghost{z-index:100;margin:0;position:fixed;translate:-50% -50%}.jacket-foot{padding:4px 8px max(12px, env(safe-area-inset-bottom));flex-direction:column;justify-content:flex-end;gap:10px;min-height:138px;display:flex}.tray{justify-content:center;gap:6px;min-height:58px;display:flex}.tray-item{touch-action:none;border-radius:16px;flex:none;width:56px;height:56px;padding:3px;transition:opacity .2s,transform .2s}.tray-item img{pointer-events:none;filter:drop-shadow(0 3px 3px #462d1459);width:100%}.tray-item.on{opacity:.3}.tray-item.held{opacity:.15}.tray-item.fresh{animation:1.2s ease-in-out infinite nudge}@keyframes nudge{50%{transform:translateY(-7px)scale(1.08)}}.tools{justify-content:center;gap:8px;animation:.25s both screen-in;display:flex}.tools button{background:#fffaf0;border:1px solid #785a3229;border-radius:50%;width:44px;height:44px;font-size:20px;box-shadow:0 3px 8px -4px #5a3c1e80}.tools button:active{transform:scale(.94)}.tools .wide{letter-spacing:.12em;text-transform:uppercase;border-radius:99px;width:auto;padding:0 18px;font-size:12px}.debug{z-index:50;color:#e8f0e0;-webkit-user-select:text;user-select:text;background:#1e1e28d1;border-radius:8px;max-width:300px;padding:6px 8px;font:10px/1.35 ui-monospace,Menlo,monospace;position:absolute;top:62px;left:6px}.debug pre{white-space:pre-wrap;margin:0 0 4px}.debug button,.debug select{font:inherit;color:inherit;background:#ffffff24;border:0;border-radius:4px;margin:0 4px 4px 0;padding:3px 6px}