:root{color-scheme:light;--panel:#22221eeF;--label:#828279;--light:#f6f4eb;--panel-width:160px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#fafaf8;font-family:"Helvetica Neue",Helvetica,"PingFang SC",sans-serif}button,input,textarea{font:inherit}button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:1px solid #f0eddd;outline-offset:3px}button:disabled{opacity:.4}#workspace{position:fixed;inset:clamp(10px,3.333vw,24px);overflow:hidden;border-radius:18px;background:#ded9cb;isolation:isolate}#cloth{display:block;width:100%;height:100%;touch-action:none;cursor:text;outline:none}#cloth.panning{cursor:grabbing}#empty-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#54554a80;font-size:10px;letter-spacing:2px}#empty-hint[hidden]{display:none}.panel{position:absolute;width:var(--panel-width);background:var(--panel);color:var(--light);border-radius:2px;font-size:8px;box-shadow:0 1px 2px #25251d20;user-select:none;z-index:3}.yarn-panel{right:32px;top:0}.type-panel{left:38px;bottom:0}.fabric-panel{left:202px;bottom:0}.panel-head{height:23px;display:flex;align-items:center;gap:6px;padding:0 10px 0 20px;border-bottom:1px solid #ffffff06;color:var(--label);font-size:8px;letter-spacing:.4px;cursor:move;touch-action:none}.panel-head>span{margin-right:auto}.panel-head button{background:transparent;color:#8e8e83;font-size:12px;line-height:1;padding:2px;width:13px;height:17px}.panel-head .fold{font-size:10px}.panel-body{padding:7px 8px 9px}.swatches{display:grid;grid-template-columns:repeat(5,19px);gap:4px;margin:0 0 7px}.swatch{padding:0;width:19px;height:17px;border-radius:1px;background:var(--swatch);outline:1px solid #ffffff1a;outline-offset:-1px}.swatch.selected{outline:1px solid #f5f1df;outline-offset:2px}.slider{position:relative;display:grid;grid-template-columns:1fr 19px;align-items:center;column-gap:6px;row-gap:2px;margin-top:5px}.slider label{grid-column:1/-1;color:var(--label);font-size:7px;line-height:11px;letter-spacing:.3px}.slider output{color:var(--light);font-size:8px;text-align:right;font-weight:500;line-height:13px}.slider input{width:100%;margin:0;height:13px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;min-width:0}.slider input::-webkit-slider-runnable-track{height:1px;background:#31312c}.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:7px;border-radius:50%;background:#f3f1e7;border:0;margin-top:-3px}.slider input::-moz-range-track{height:1px;background:#31312c}.slider input::-moz-range-thumb{width:6px;height:7px;border:0;border-radius:50%;background:#f3f1e7}.button-group{display:flex;gap:5px;align-items:center}.button-group button{width:20px;height:17px;padding:2px 3px;background:transparent;border-radius:2px;color:#8d8d81}.button-group button.selected{background:#faf9ef;color:#33352d}.button-group svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:1.1}.alignment{padding:1px 0 2px}.type-panel .slider{margin-top:4px}.space-mode{margin-top:9px;color:var(--label);font-size:7px;letter-spacing:.3px}.space-mode .button-group{margin-top:5px}.fabric-swatches{display:flex;gap:7px;padding:3px 1px 6px}.fabric-swatches button{width:18px;height:18px;border-radius:1px;background:var(--color)}.fabric-swatches button.selected{outline:1px solid #f6f4e8;outline-offset:2px}.collapsed .panel-head{border-bottom:0}.collapsed .reset{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:500px){:root{--panel-width:144px}#workspace{border-radius:13px}.yarn-panel{right:12px}.type-panel{left:12px}.fabric-panel{left:160px}.panel-head{padding-left:12px}.swatches{grid-template-columns:repeat(5,17px)}.swatch{width:17px;height:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.input-panel{left:38px;top:0;width:220px}.input-panel .panel-head{padding-left:12px}#input-body{padding:10px 12px 12px;max-height:calc(100dvh - 215px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#68685d transparent}.input-tabs{display:flex;gap:4px;margin-bottom:12px}.input-tabs button{flex:1;padding:6px 4px;background:#34342d;color:#acac9f;border-radius:2px;font-size:10px}.input-tabs button.selected{background:#eeeee4;color:#282b23}.input-label{display:block;font-size:9px;color:#adada1;margin:0 0 6px}#text{display:block;width:100%;min-height:104px;max-height:260px;resize:vertical;position:static;margin:0;padding:9px 10px;font-size:12px;line-height:1.5;color:#f0f0e6;background:#30302a;border:1px solid #505046;border-radius:2px;opacity:1;pointer-events:auto}#text:focus-visible,select:focus-visible{outline:1px solid #e2dfcb;outline-offset:2px}.input-footer{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:8px;color:#909083;font-size:8px}.input-footer button,.sample-button,.remove-image{background:none;color:#c9c9bb;font-size:9px;padding:3px 0}.upload-button{width:100%;padding:10px 4px;background:#efeee4;color:#2d2f26;font-size:11px;border-radius:2px}.sample-button{margin-top:8px}.input-help{font-size:9px;line-height:1.6;color:#a3a395;margin:8px 0 12px}.image-previews{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.image-previews figure{margin:0;min-width:0}.image-previews img,.image-previews canvas{display:block;width:100%;height:76px;object-fit:contain;background:#eeeae0;border-radius:2px}.image-previews figcaption{font-size:8px;color:#a3a395;text-align:center;margin-top:5px}.input-panel select{width:100%;border:1px solid #515147;background:#34342d;color:#dfdfd2;border-radius:2px;font-size:10px;padding:6px 4px}.input-panel .slider{margin-top:9px}.input-panel .slider label{font-size:9px;line-height:13px}.input-panel .slider input{height:17px}.input-panel .slider input::-webkit-slider-thumb{width:8px;height:8px;margin-top:-4px}.input-panel .remove-image{margin-top:10px;color:#c6b39f}.image-status{font-size:8px;line-height:1.6;color:#adad9e;margin:9px 0 0;overflow-wrap:anywhere}.image-status.error{color:#edb5a7}#workspace.drop-active{outline:2px solid #b6c48d;outline-offset:-3px}#pattern-input-body[hidden],#text-input-body[hidden],#pattern-controls[hidden]{display:none}.panel-head{position:relative;z-index:1}
@media(max-width:500px){.input-panel{left:12px;width:calc(100% - 180px)}#input-body{padding:8px}#text{padding:7px;font-size:12px;min-height:93px}.image-previews{gap:5px}.image-previews img,.image-previews canvas{height:60px}.input-footer{font-size:7px}.input-help{font-size:8px}}
.surface-label{display:block;color:#adada1;font-size:9px;margin:2px 0 6px}.fabric-panel select{width:100%;padding:5px 4px;border:1px solid #515147;border-radius:2px;background:#34342d;color:#eeeede;font-size:10px}.surface-description{font-size:8px;line-height:1.6;color:#b4b4a5;margin:6px 0 9px}#surface-preview{display:block;width:100%;height:40px;margin-top:7px;border-radius:2px}.fabric-panel .panel-body{max-height:calc(100dvh - 265px);overflow-y:auto;scrollbar-width:thin}
.construction-buttons{display:flex;gap:4px;margin-bottom:10px}.construction-buttons button{flex:1;padding:5px 2px;background:#34342d;color:#aaa99c;font-size:9px;border-radius:2px}.construction-buttons button.selected{color:#30342a;background:#eeeee4}.process-buttons{display:flex;gap:4px;margin-top:11px}.process-buttons button{padding:6px 4px;border-radius:2px;font-size:8px;background:#37382f;color:#deded0}.process-buttons button:first-child{flex:1;background:#eeeee4;color:#30342a}.process-progress{display:flex;align-items:center;gap:7px;margin-top:8px}.process-progress progress{appearance:none;width:100%;height:3px;border:0;background:#393a30}.process-progress progress::-webkit-progress-bar{background:#393a30}.process-progress progress::-webkit-progress-value{background:#c0c69f}.process-progress progress::-moz-progress-bar{background:#c0c69f}.process-progress output{font-size:8px;min-width:24px;text-align:right;color:#c8cab8}.fabric-swatches{margin-top:10px}
.fabric-panel .panel-body{max-height:max(140px,calc(100dvh - 570px))}#input-body{max-height:calc(100dvh - 240px)}

/* Quiet floating tools: the grip and resize corner explain their own interaction. */
[hidden]{display:none!important}
:root{--panel-width:180px;--label:#aaa99b}
.input-panel{width:240px}.fabric-panel{left:222px}
.panel{font-size:10px;border-radius:3px}
.panel-head{height:32px;padding:0 5px 0 10px;gap:2px;cursor:grab;color:#c2c0b2}
.panel-head .panel-drag{display:flex;align-items:center;gap:8px;flex:1;width:auto;min-width:0;height:100%;padding:0;text-align:left;color:inherit;font-size:9px;letter-spacing:.6px;cursor:grab;touch-action:none}
.panel-drag span{margin:0}.grip{width:6px;height:12px;flex-shrink:0;background:radial-gradient(circle,#aaa999 1px,transparent 1.1px) 0 0/3px 4px;opacity:.75}
.panel-head .reset,.panel-head .fold{width:24px;height:26px;flex-shrink:0;font-size:13px;border-radius:2px}
.panel-head .fold{font-size:12px}.panel-head button:hover{color:#f4f1e6;background:#ffffff0b}
.panel-drag:hover .grip{opacity:1}.panel-head .panel-drag:hover{background:transparent}
.panel-body{overflow:auto;scrollbar-width:thin;scrollbar-color:#68685d transparent;padding:9px 10px 13px}
.panel .panel-body{max-height:var(--panel-max-body,calc(100dvh - 90px))}
.panel #input-body{max-height:min(var(--panel-max-body),calc(100dvh - 450px))}
.fabric-panel .panel-body{max-height:min(var(--panel-max-body),max(160px,calc(100dvh - 490px)))}
.panel.has-size .panel-body{height:var(--panel-body-height);max-height:var(--panel-max-body)}
.panel.has-size #text{height:max(104px,calc(var(--panel-body-height) - 90px));max-height:none;resize:none}
.panel-resize{position:absolute;right:0;bottom:0;z-index:2;width:20px;height:20px;padding:0;background:transparent;cursor:nwse-resize;touch-action:none}
.panel-resize::after{content:'';position:absolute;right:4px;bottom:4px;width:8px;height:8px;background:repeating-linear-gradient(135deg,transparent 0 2px,#8e8d7c 2px 3px,transparent 3px 5px);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.65}
.panel-resize:hover::after{opacity:1}.panel.collapsed .panel-resize{display:none}
.panel.is-dragging,.panel.is-resizing{outline:1px solid #e0dcc5;box-shadow:0 10px 22px #29292033}
.panel.is-dragging .panel-head,.panel.is-dragging .panel-drag{cursor:grabbing}.panel.is-dragging{will-change:transform}
.layout-active #cloth{pointer-events:none}
.layout-guide{position:absolute;z-index:2;pointer-events:none;opacity:.7}
.layout-guide.vertical{top:0;bottom:0;width:1px;border-left:1px dashed #5b6852}
.layout-guide.horizontal{left:0;right:0;height:1px;border-top:1px dashed #5b6852}
#reset-layout{position:absolute;right:12px;bottom:12px;z-index:600;display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:3px;background:var(--panel);color:#c9c7b8;font-size:10px}
#reset-layout:hover{color:#f6f4eb;background:#34352d}#reset-layout svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.2}
.slider{margin-top:9px;grid-template-columns:1fr 24px;row-gap:3px}.slider label{font-size:9px;line-height:13px}.slider output{font-size:10px;line-height:18px}.slider input{height:20px}
.slider input::-webkit-slider-runnable-track{background:#666657;height:2px}.slider input::-webkit-slider-thumb{width:8px;height:8px;margin-top:-3px}
.slider input::-moz-range-track{background:#666657;height:2px}.slider input::-moz-range-thumb{width:8px;height:8px}
.button-group button{width:26px;height:24px;padding:5px 6px}.space-mode{font-size:9px}.swatch{height:20px}.swatches{grid-template-columns:repeat(5,22px);gap:5px}.swatch{width:22px}
.fabric-swatches{gap:8px}.fabric-swatches button{width:21px;height:21px}
.input-tabs{margin-bottom:9px}.input-tabs button{padding:7px 4px}.input-footer{margin-top:6px}.input-footer button{font-size:10px;padding:5px 0}
.sample-button{margin:5px 0 2px;font-size:10px;padding:5px 0}.input-help{display:none}
.surface-label{font-size:10px;margin:10px 0 6px}.fabric-panel select{font-size:11px;padding:7px 5px}
.construction-buttons{margin:0 0 7px}.construction-buttons button{font-size:10px;padding:7px 2px}
.process-buttons{margin-top:7px}.process-buttons button{font-size:9px;padding:8px 4px}.process-progress{margin:9px 0 4px}
.image-status[hidden]{display:none}.image-previews{margin-top:6px}.input-panel select{font-size:10px;padding:7px 4px}
@media(max-width:500px){
  :root{--panel-width:144px}.input-panel{width:calc(100% - 180px)}.fabric-panel{left:160px}
  .panel-head{padding-left:6px}.panel-head .panel-drag{gap:5px;font-size:8px}.panel-head .reset,.panel-head .fold{width:22px}
  .panel-body{padding:8px 8px 12px}.swatches{grid-template-columns:repeat(5,17px);gap:5px}.swatch{width:17px;height:18px}
  .fabric-swatches{gap:7px}.fabric-swatches button{width:18px;height:20px}.construction-buttons button{font-size:9px}
  .panel #input-body{max-height:min(var(--panel-max-body),calc(100dvh - 450px))}
  #reset-layout{right:8px;bottom:8px;padding:7px;font-size:9px}
}
@media(pointer:coarse){.panel-head{height:36px}.panel-head .reset,.panel-head .fold{height:32px}.panel-resize{width:26px;height:26px}.slider input{height:24px}}

.motif-panel{left:406px;bottom:0}.motif-mode{display:flex;gap:4px;margin-bottom:8px}.motif-mode button{flex:1;padding:5px 0;background:#34342d;color:#aaa99c;font-size:9px;border-radius:2px}.motif-mode button.selected{background:#eeeee4;color:#30342a}.motif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.motif-grid button{height:31px;padding:6px;background:#ffffff06;color:#d4d2c3;border-radius:2px}.motif-grid button:hover{background:#ffffff18;color:#f8f5e9}.motif-grid button:active{background:#eeeee4;color:#34372d}.motif-grid svg{display:block;width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}.fabric-swatches{gap:6px}
@media(max-width:500px){.motif-panel{left:12px;bottom:180px}.motif-grid button{height:29px;padding:5px}.fabric-swatches{gap:4px}}
@media(max-width:500px){#reset-layout{position:fixed;left:max(14px,env(safe-area-inset-left,0px));right:auto;top:calc(6px + env(safe-area-inset-top,0px));bottom:auto;min-height:44px;padding:0 7px;background:transparent;color:#62635b}#reset-layout:hover{background:transparent;color:#22221e}}

/* Focusing floating tools must not scroll the cloth itself. */
#workspace{overflow:clip}

/* Keep the project return link outside the draggable workspace. */
.visual-coding-back{position:fixed;top:calc(6px + env(safe-area-inset-top,0px));right:max(24px,env(safe-area-inset-right,0px));z-index:1000;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:11px;letter-spacing:2px;line-height:1;color:#62635b;text-decoration:none;transition:color .2s ease}
.visual-coding-back:hover,.visual-coding-back:active{color:#22221e}
.visual-coding-back:focus-visible{outline:1px solid currentColor;outline-offset:0;border-radius:2px}
#workspace{top:calc(56px + env(safe-area-inset-top,0px))}
@media(max-width:500px){.visual-coding-back{right:max(10px,env(safe-area-inset-right,0px))}}

.custom-palette-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:4px 0 9px;padding:6px;border:1px solid #515147;border-radius:3px;background:#34342d;color:#c8c6b8;font-size:10px}
.custom-palette-toggle.selected{border-color:#dad7c6;color:#f5f1df}.custom-palette-toggle:hover{background:#424239}
#custom-color-preview{width:22px;height:16px;border-radius:2px;border:1px solid #ffffff28;flex-shrink:0}
#custom-palette{margin-bottom:10px}.color-modes{display:flex;gap:4px;margin-bottom:5px}.color-modes button{flex:1;min-height:44px;border-radius:2px;background:#34342d;color:#aaa99c;font-size:10px}.color-modes button.selected{background:#eeeee4;color:#30342a}
.custom-color-row{display:flex;align-items:center;gap:4px;min-height:44px}.custom-color-row input[type=color]{width:32px;height:36px;padding:0;background:none;border:0;cursor:pointer;flex-shrink:0}.custom-color-row input[type=color]::-webkit-color-swatch-wrapper{padding:4px 0}.custom-color-row input[type=color]::-webkit-color-swatch{border:1px solid #ffffff30;border-radius:2px}
.custom-color-row input[type=text]{width:0;min-width:0;flex:1;height:36px;padding:0 4px;border:1px solid #515147;border-radius:2px;background:#34342d;color:#f2eedd;font:11px ui-monospace,SFMono-Regular,monospace}.custom-color-row input[aria-invalid=true]{border-color:#d3787a}
.custom-color-row button{flex-shrink:0;width:24px;min-height:44px;background:transparent;color:#bbb9aa;font-size:18px}.custom-color-row button:hover{color:#f5f1df}
#add-yarn-color{width:100%;min-height:44px;margin-top:4px;border:1px dashed #656557;border-radius:2px;background:transparent;color:#c8c6b8;font-size:10px}#add-yarn-color:hover{background:#ffffff0b}
@media(pointer:coarse){.custom-color-row input[type=color],.custom-color-row input[type=text]{height:44px}}