:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#f0eadc;background:#d7cebb;font-size:12px;--panel:#242420ee;--line:#ffffff1f;--accent:#f1c68f}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{border:0;color:inherit;cursor:pointer;background:transparent;border-radius:6px}button:hover{background:#ffffff14}button:disabled{opacity:.35;cursor:default}button:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}#cloth{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:text;touch-action:manipulation}#typing-input{position:fixed;opacity:0;width:1px;height:1px;min-width:1px;min-height:1px;padding:0;border:0;resize:none;pointer-events:none;z-index:1;font-size:16px}#feeding-yarn{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden}#feeding-yarn path{fill:none;stroke-linecap:round;stroke-linejoin:round}#feed-shadow,#needle-shadow{stroke:#28221966;stroke-width:3.5}#feed-line{stroke-width:1.9}#needle-line{stroke-width:2}#output-range{position:fixed;border:1px dashed #554a3548;pointer-events:none;z-index:1;border-radius:2px}#output-range span{position:absolute;right:0;bottom:-22px;font-size:10px;color:#494337;background:#ebe4d0b0;padding:3px 6px;border-radius:3px}header{position:fixed;top:max(16px,env(safe-area-inset-top));left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:4;pointer-events:none}.brand,.actions{pointer-events:auto;background:var(--panel);border:1px solid #ffffff1c;border-radius:9px;box-shadow:0 4px 18px #0002}.brand{padding:10px 13px;font-weight:700;font-size:16px;color:#f0eadc;text-decoration:none;white-space:nowrap}.brand span{font-size:10px;font-weight:400;letter-spacing:1px;padding-left:10px;color:#c8c2b1}.actions{display:flex;align-items:center;padding:4px;gap:2px}.actions button{font-size:11px;padding:7px 10px;white-space:nowrap}.actions #undo,.actions #redo{font-size:19px;padding:3px 8px}.actions #export{background:#dcc29c;color:#302b22;font-weight:600}#settings{position:fixed;left:22px;top:82px;width:270px;max-height:calc(100dvh - 104px);overflow:auto;background:var(--panel);border:1px solid #ffffff26;border-radius:11px;box-shadow:0 12px 28px #29200e30;backdrop-filter:blur(12px);z-index:5;scrollbar-width:thin;scrollbar-color:#777564 transparent}#panel-handle{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);cursor:grab;touch-action:none;user-select:none;font-size:11px}#panel-handle:active{cursor:grabbing}#panel-handle small{font-size:9px;color:#a5a596;padding-left:8px}#panel-close{font-size:19px;line-height:1;padding:2px 5px}nav{display:flex;margin:12px 12px 4px;gap:3px}nav button{font-size:10px;padding:8px 4px;flex:1;color:#b3b2a3}nav button.active{background:#ffffff12;color:var(--accent)}.panel{padding:4px 15px 13px}.panel>label,.pair>label,details>label{display:block;color:#c9c5b7;font-size:10px;margin-top:16px}select{display:block;width:100%;background:#35362f;border:1px solid #ffffff23;color:#eee8d9;padding:7px;border-radius:5px;margin-top:7px;font-size:11px}input[type=range]{display:block;width:100%;height:8px;accent-color:#d7b382;margin:10px 0 4px;cursor:pointer}output{float:right;font-size:9px;color:#cfc2a6}input[type=color]{width:32px;height:27px;background:#ffffff10;border:1px solid #ffffff25;padding:2px;border-radius:4px;cursor:pointer}.color-row{display:flex;gap:18px;margin-top:13px;align-items:center}.color-row label{display:flex;gap:8px;align-items:center;font-size:10px;color:#bbb8a9}details{border-top:1px solid var(--line);padding-top:12px;margin-top:18px}summary{cursor:pointer;list-style:none;font-size:10px;color:#aaa998}summary:after{content:"＋";float:right}details[open]>summary:after{content:"−"}.swatch-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:12px 0 3px}.swatch-grid button{height:25px;padding:0;border:1px solid #ffffff23;border-radius:3px}.swatch-grid button.selected{outline:2px solid #ede0be;outline-offset:1px}.fabric-grid{grid-template-columns:repeat(4,1fr);gap:8px}.fabric-grid button{height:32px}.pair{display:flex;gap:10px}.pair>label{flex:1}.section-label{font-size:10px;color:#b5b2a1;margin:15px 0 8px}.segments{display:flex;gap:4px}.segments button{flex:1;font-size:11px;padding:8px;border:1px solid #ffffff20}.segments button.active{background:#c5a37328;border-color:#d7b480;color:var(--accent)}.pattern-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.pattern-grid button{padding:7px 2px;background:#ffffff09}.pattern-grid canvas{width:23px;height:23px;display:block;margin:auto;image-rendering:pixelated}.pattern-grid span{display:none}.check{display:flex!important;align-items:center;gap:7px}.check input{accent-color:#d6b287}.material-note{font-size:9px;line-height:1.7;color:#aaa891;margin:16px 0}.bottom-actions{display:flex;gap:7px}.bottom-actions button{font-size:10px;background:#ffffff10;padding:8px;flex:1}.panel-foot{border-top:1px solid var(--line);padding:10px 15px;display:flex;justify-content:space-between;color:#989b86;font-size:9px}#hint{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#292922d9;color:#eae4d2;padding:9px 15px;border-radius:20px;font-size:10px;pointer-events:none;z-index:3;white-space:nowrap}#hint.off{display:none}#notice{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);padding:11px 18px;border-radius:6px;color:#302e24;background:#f2e8d4;box-shadow:0 4px 15px #0003;font-size:11px;z-index:7;display:none;pointer-events:none;max-width:90vw}body.dragging{user-select:none}body.dragging #cloth{cursor:grabbing}@media(max-width:600px){header{top:10px;left:10px;right:10px;gap:7px}.brand{padding:8px 9px;font-size:14px}.brand span{display:none}.actions button{font-size:10px;padding:6px 7px}.actions #undo,.actions #redo{padding:3px 6px;font-size:17px}#settings{width:252px;max-height:calc(100dvh - 75px)}#hint{font-size:9px;padding:8px 12px;max-width:92vw;white-space:normal;text-align:center}}

#cloth-background{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#unravel{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.bottom-actions{padding:12px 15px;border-top:1px solid var(--line)}
#feeding-yarn.blink #needle-line,#feeding-yarn.blink #needle-shadow{animation:caret-blink 1.06s step-end infinite}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#feeding-yarn.blink #needle-line,#feeding-yarn.blink #needle-shadow{animation:none}}

/* The yarn wordmark sits directly on the fabric. */
.brand{display:flex;align-items:center;gap:9px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--brand-ink);text-decoration:none;min-height:38px}
.brand-mark{width:39px;height:31px;flex:none;overflow:visible}.brand-mark path{fill:none;stroke-linecap:round;stroke-linejoin:round}.yarn-shadow{stroke:var(--brand-ink);stroke-width:2.7;opacity:.15;transform:translateY(.6px)}.yarn-body{stroke:var(--logo-yarn);stroke-width:1.9}.yarn-accent{stroke:var(--logo-accent);stroke-width:1.9}.yarn-fiber{stroke:var(--brand-ink);opacity:.18;stroke-width:.4;stroke-dasharray:1 1.7}
.brand .brand-copy{display:flex;flex-direction:column;gap:6px;padding:0;color:inherit;letter-spacing:0}.brand-copy strong{font-size:13px;font-weight:600;letter-spacing:1px}.brand-copy small{font-size:7px;font-weight:400;letter-spacing:1.2px;color:var(--brand-muted)}
#feed-shadow{stroke-width:1.55;opacity:.45}#feed-line{stroke-width:.85}#feed-fiber{stroke-width:.18;stroke-dasharray:1.4 2.1;opacity:.6}#needle-shadow{stroke-width:1.8}#needle-line{stroke-width:1.1}
@media(max-width:600px){.brand{gap:6px;padding:0}.brand-mark{width:26px;height:25px}.brand .brand-copy{display:flex;gap:4px}.brand-copy strong{font-size:11px;letter-spacing:.4px}.brand-copy small{font-size:5.2px;letter-spacing:.7px}}

.brand-copy strong{color:var(--logo-yarn);text-shadow:0 .5px 1px #0002}.brand-copy small{color:var(--logo-accent);text-shadow:0 .5px 1px #0002}
#feed-line{stroke-width:1.3}#feed-shadow{stroke-width:2.3}#feed-fiber{stroke-width:.26}