.wrap{max-width:1040px}.sub{max-width:560px;margin-bottom:36px;font-size:16px}.stage{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}@media (max-width: 800px){.stage{grid-template-columns:1fr}}.fabric-col{position:sticky;top:68px;min-width:0}.zoom-wrap::-webkit-scrollbar{width:10px;height:10px}.zoom-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}.dropcard{min-height:260px}.dropcard.has-image{padding:0;overflow:hidden;min-height:0}.dropcard img{width:100%;height:100%;object-fit:cover;display:block}.dropcard.hide-controls .overlay-remove,.dropcard.hide-controls .overlay-resize,.dropcard.hide-controls .stitch-handle{display:none}.pin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E6795F,var(--thread-red));margin-bottom:14px;box-shadow:0 2px 4px #00000026}.drop-label{font-size:14px;color:var(--ink-soft)}.change-photo{display:none;margin-top:8px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:none;border:none;text-decoration:underline;cursor:pointer;padding:0}.change-photo.show{display:inline-block}.change-photo:hover{color:var(--chambray)}.bg-color-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.bg-color-label{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap}.bg-swatches{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.bg-swatch{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);cursor:pointer;padding:0;flex-shrink:0;transition:transform .1s}.bg-swatch:hover{transform:scale(1.2)}.bg-swatch.active{outline:2px solid var(--chambray);outline-offset:2px}.bg-custom-label{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--brass);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--brass);flex-shrink:0;overflow:hidden}.bg-custom-label input[type=color]{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.bg-custom-label.active{outline:2px solid var(--chambray);outline-offset:2px}.side-copy{display:flex;flex-direction:column;padding:16px 4px 0}.side-copy .step{display:flex;gap:14px;margin-bottom:18px}.step-num{font-family:var(--font-mono);font-size:12px;color:var(--brass);padding-top:2px;flex-shrink:0;width:18px}.step-text{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}.step-text strong{color:var(--ink);font-weight:600}.controls-col{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}.tab-bar{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto}.tab-btn{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:none;border:1px solid transparent;border-radius:100px;color:var(--ink-soft);padding:7px 14px;cursor:pointer;white-space:nowrap;transition:color .12s,background-color .12s,border-color .12s}.tab-btn:hover{color:var(--ink);border-color:var(--line)}.tab-btn.active{color:var(--chambray);border-color:var(--line);background:var(--bone)}.tab-panel{display:none;padding:20px 22px}.tab-panel.active{display:block}.tab-empty{font-size:13px;color:var(--ink-soft);line-height:1.5;padding:12px 0 4px}.tab-heading{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0 0 4px;color:var(--chambray)}.tab-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 16px;line-height:1.5}.swatch-row{display:none;margin-bottom:22px}.swatch-row.show{display:block}.swatch-row h2{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;font-weight:500}.spools{display:flex;gap:10px;flex-wrap:wrap}.spool{display:flex;align-items:center;gap:7px;background:var(--bone);border:1px solid var(--line);border-radius:100px;padding:5px 12px 5px 5px}.spool-dot{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.08);flex-shrink:0}.spool-hex{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft)}.results{display:none}.results.show{display:block}.result-block{margin-bottom:28px}.result-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}.result-head h2{font-family:var(--font-display);font-weight:600;font-size:20px;margin:0;color:var(--chambray)}.result-head p{margin:0;font-size:12.5px;color:var(--ink-soft)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.button-card{background:var(--bone);border:1px solid var(--line);border-radius:6px;padding:14px 12px 13px;text-align:center;transition:transform .12s ease,box-shadow .12s ease}.button-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2c43561a}.btn-name{font-size:13px;font-weight:600;margin:10px 0 2px}.btn-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);margin-bottom:4px}.btn-hex{font-family:var(--font-mono);font-size:10.5px;color:var(--brass);margin-bottom:10px}.shop-link{display:inline-block;font-size:12px;font-weight:600;color:var(--chambray);text-decoration:none;border-bottom:1.5px solid var(--brass);padding-bottom:1px}.shop-link:hover{color:var(--thread-red);border-color:var(--thread-red)}.empty-note{font-size:12.5px;color:var(--ink-soft);margin-top:8px}.upload-btn{display:inline-block;font-size:13px;font-weight:600;background:var(--chambray);color:#fff;padding:9px 16px;border-radius:100px;cursor:pointer}.upload-btn:hover{background:var(--thread-red)}.own-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.own-item{display:flex;align-items:center;gap:8px;background:var(--bone);border:1px solid var(--line);border-radius:100px;padding:5px 10px 5px 5px}.own-item img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}.own-name-input{border:none;background:transparent;font-size:12.5px;font-family:var(--font-body);color:var(--ink);width:100px;outline:none}.own-hex{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.15)}.own-remove{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}.own-remove:hover{color:var(--thread-red)}.own-edit,.own-place{border:none;background:none;color:var(--chambray);cursor:pointer;font-size:11px;font-family:var(--font-mono);text-decoration:underline;padding:2px 4px;white-space:nowrap}.own-edit:hover,.own-place:hover{color:var(--thread-red)}.placement-controls{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}.pc-field{display:flex;flex-direction:column;gap:5px}.pc-field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.pc-input-row{display:flex;align-items:baseline;gap:6px}.pc-input-row input{font-family:var(--font-mono);font-size:16px;color:var(--chambray);font-weight:600;background:transparent;border:none;border-bottom:2px solid var(--line);width:64px;padding:2px;outline:none}.pc-input-row input:focus{border-bottom-color:var(--brass)}.pc-unit{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft)}.pc-hint{font-size:10.5px;color:var(--ink-soft);opacity:.8;max-width:160px;line-height:1.4}.pc-toggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;padding-bottom:3px}.pc-toggle input{accent-color:var(--chambray)}.clear-overlays{display:none;margin-top:4px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);background:none;border:none;text-decoration:underline;cursor:pointer;padding:0}.clear-overlays.show{display:inline-block}.thread-panel{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.thread-head h2{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0 0 4px;color:var(--chambray)}.thread-head p{margin:0 0 14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}.thread-suggest-row{margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap}.thread-suggest-btn{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em;background:none;border:1px solid var(--line);color:var(--ink-soft);border-radius:100px;padding:7px 14px;cursor:pointer}.thread-suggest-btn.active{background:var(--chambray);border-color:var(--chambray);color:#fff}.thread-suggest-btn:hover{border-color:var(--brass);color:var(--ink)}.thread-grid{display:flex;flex-wrap:wrap;gap:8px}.thread-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;width:58px;cursor:pointer;padding:4px;border-radius:6px;border:2px solid transparent}.thread-swatch:hover{background:var(--bone)}.thread-swatch.active{border-color:var(--chambray);background:var(--bone)}.thread-spool{width:26px;height:26px;border-radius:4px;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 0 0 2px #ffffff59}.thread-swatch-name{font-size:9.5px;color:var(--ink-soft);text-align:center;line-height:1.2}.export-row{display:none;gap:10px;flex-wrap:wrap}.export-row.show{display:flex}.fabric-overlay{position:absolute;width:60px;height:60px;border-radius:50%;background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 3px 8px #00000059;cursor:grab;z-index:5;touch-action:none}.fabric-overlay.dragging{cursor:grabbing}.fabric-overlay.no-border{border:none;box-shadow:none}.overlay-remove{position:absolute;top:-6px;right:-6px;width:16px;height:16px;background:var(--thread-red);color:#fff;border-radius:50%;font-size:11px;line-height:16px;text-align:center;cursor:pointer}.overlay-resize{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;background:var(--chambray);border:2px solid #fff;border-radius:50%;cursor:se-resize;box-shadow:0 1px 3px #00000059}.btn-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid rgba(0,0,0,.12)}.card-actions{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:2px}.place-btn{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink-soft);border-radius:100px;padding:5px 10px;cursor:pointer}.place-btn:hover{border-color:var(--brass);color:var(--ink)}.card-size-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px;justify-content:center}.card-size-chip{font-family:var(--font-mono);font-size:10px;border:1.5px solid var(--line);border-radius:100px;padding:3px 9px;background:none;color:var(--ink-soft);cursor:pointer;transition:border-color .1s,background .1s,color .1s}.card-size-chip:hover{border-color:var(--brass);color:var(--ink)}.card-size-chip.active{background:var(--chambray);border-color:var(--chambray);color:#fff}