/* The original SVG stays visible until the local WebGL scene has rendered. */
.merch-tailor-stage{width:100%;position:relative;visibility:hidden;max-height:0;overflow:hidden}
.merch-tailor-ready .merch-tailor-stage{visibility:visible;max-height:none;overflow:visible}
.merch-tailor-ready>.merch-prep-illustration{display:none}
.merch-tailor-stage canvas{display:block;width:100%;height:auto;aspect-ratio:720/460;touch-action:pan-y;cursor:grab;border:0;background:transparent}
.merch-tailor-stage canvas:active{cursor:grabbing}
.merch-tailor-stage canvas:focus-visible,.merch-tailor-thread:focus-visible{outline:2px dashed var(--ink,#141312);outline-offset:4px}
.merch-tailor-hint{font:500 12px/1.5 var(--body,Arial,sans-serif);margin:0 10px 14px;color:var(--ink,#141312)}
.merch-tailor-controls{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}
.merch-tailor-thread{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 16px;border:1.5px solid var(--ink,#141312);background:var(--paper,#f1eee7);color:var(--ink,#141312);box-shadow:3px 3px 0 var(--ink,#141312);font:700 12px/1.3 var(--body,Arial,sans-serif);cursor:pointer}
.merch-tailor-thread i{display:block;width:15px;height:15px;border:1px solid var(--ink,#141312);border-radius:50%;background:#e4ff4f}
.merch-tailor-thread:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink,#141312)}
.merch-tailor-status{font:500 11px/1.4 var(--body,Arial,sans-serif);min-width:70px;text-align:left}
.merch-tailor-note{font:400 10px/1.5 var(--body,Arial,sans-serif);color:var(--ink,#141312);margin:16px 12px 12px}
.merch-tailor-ready #merch-motion{margin-top:0}
@media(max-width:480px){.merch-tailor-hint{font-size:11px}.merch-tailor-note{font-size:10px;max-width:280px;margin:14px auto 8px}.merch-tailor-stage canvas{width:100%}.merch-tailor-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){.merch-tailor-thread{transition:none}}

.merch-tailor-note:empty{display:none}
.merch-tailor-thread{position:relative;isolation:isolate;min-height:48px;border-radius:10px;box-shadow:0 4px 0 var(--ink,#1b112e);padding:13px 24px;margin:6px;background-color:var(--bobbin-color,var(--acid));background-image:repeating-linear-gradient(90deg,transparent 0 5px,#1b112e14 5px 6px);transition:transform 180ms ease}
.merch-tailor-thread::before,.merch-tailor-thread::after{content:"";position:absolute;top:-7px;bottom:-7px;width:10px;border:1.5px solid var(--ink);border-radius:50% / 7px;background:var(--paper);box-shadow:0 3px 0 var(--ink);pointer-events:none}
.merch-tailor-thread::before{left:-5px}.merch-tailor-thread::after{right:-5px}
.merch-tailor-thread>span{position:relative;z-index:1;font-size:11px;letter-spacing:.02em}
.merch-tailor-thread i{width:18px;height:18px;border-width:2px;box-shadow:inset 0 0 0 3px var(--paper)}
.merch-tailor-thread:hover{transform:translateY(-2px) rotate(-2deg)}
.merch-tailor-thread:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink,#1b112e)}
.merch-tailor-thread.is-winding{animation:mess-bobbin-turn 400ms ease-in-out}
.merch-tailor-controls .merch-tailor-thread{background-color:var(--bobbin-color,var(--acid));background-image:repeating-linear-gradient(90deg,transparent 0 5px,#1b112e14 5px 6px)}
@keyframes mess-bobbin-turn{0%,100%{transform:rotate(0)}30%{transform:translateY(-2px) rotate(-4deg)}70%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.merch-tailor-thread,.merch-tailor-thread.is-winding{animation:none;transition:none}}