:root{color:#1d1d1f;font:13px/1.4 system-ui,sans-serif}html,body{background:#ededef;height:100%;margin:0;overflow:hidden}#view{touch-action:none;outline:none;width:100%;height:100%;position:fixed;inset:0}.panel{background:#ffffffeb;border-radius:10px;gap:8px;width:230px;padding:12px 14px;display:grid;position:fixed;top:12px;left:12px;box-shadow:0 2px 12px #0000001f}.panel h1{margin:0;font-size:14px}.panel a{color:#2563eb}:is(.panel,.layer-card) label{grid-template-columns:72px minmax(0,1fr) 34px;align-items:center;gap:6px;display:grid}:is(.panel,.layer-card) label>input:not([type=checkbox]):not([type=color]),:is(.panel,.layer-card) label>select{box-sizing:border-box;width:100%;min-width:0}.panel .row .file,.panel .row button{white-space:nowrap}:is(.panel,.layer-card) label.check{grid-template-columns:auto 1fr}:is(.panel,.layer-card) output{text-align:right;font-variant-numeric:tabular-nums;color:#555}:is(.panel,.layer-card) input[type=range]{width:100%}.row{flex-wrap:wrap;gap:6px;display:flex}button,.file{font:inherit;cursor:pointer;background:#fff;border:1px solid #c8c8cc;border-radius:6px;padding:5px 9px}button:hover,.file:hover{background:#f3f3f5}.file input{display:none}.hint{color:#666;margin:0;font-size:12px}#list{gap:2px;max-height:160px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}#list li{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;padding:3px 6px;overflow:hidden}#list li.sel{background:#dbe7ff}#list li{align-items:center;gap:6px;display:flex}.layer-handle{cursor:grab;color:#888;touch-action:none;-webkit-user-select:none;user-select:none;padding:0 2px}.layer-name{text-overflow:ellipsis;flex:1;overflow:hidden}.layer-eye{color:#2563eb;background:0 0;border:0;padding:0 4px;font-size:12px}#list li.hidden .layer-name{color:#aaa;text-decoration:line-through}#list li.dragging{z-index:1;background:#fff;position:relative;box-shadow:0 2px 8px #0000002e}#list li.drop-target{box-shadow:inset 0 2px #2563eb}#props[hidden]{display:none}#hud{color:#444;background:#fffc;border-radius:5px;padding:3px 7px;font:12px ui-monospace,monospace;position:fixed;bottom:10px;left:12px}:is(.panel,.layer-card) select{font:inherit;width:100%}:is(.panel,.layer-card) label[hidden],body.bench .panel,body.bench #hud{display:none}body.bench #view{inset:0 auto auto 0}.garment-layers{gap:6px;display:grid}.garment-layers:empty{display:none}.mockup-box{border-top:1px solid #00000014;gap:6px;padding-top:6px;display:grid}.pair{gap:6px;display:flex}.ring-gizmo{pointer-events:none;z-index:1;touch-action:none;width:100%;height:100%;position:fixed;inset:0;overflow:visible}.ring-gizmo circle{fill:none}.ring-shadow{stroke:#00000047;stroke-width:5px}.ring-line{stroke:#fff;stroke-width:2.5px}.ring-hit{stroke:#0000;stroke-width:28px;pointer-events:stroke;cursor:grab;touch-action:none}.ring-dot{stroke:#00000059;stroke-width:1px;transform-box:fill-box;transform-origin:50%;opacity:0;transition:opacity .22s,transform .5s cubic-bezier(.19,1.51,.29,.99);transform:scale(0);fill:#fff!important}.ring-gizmo.show-dot .ring-dot{opacity:1;transform:scale(1)}.ring-body{transition:transform .4s cubic-bezier(.19,1.51,.29,.99)}.ring-gizmo.compressed .ring-body{transform:scale(.95)}.ring-thumb{stroke:#00000059;stroke-width:1.5px;pointer-events:all;cursor:grab;touch-action:none;fill:#fff!important}.ring-gizmo.dragging .ring-hit,.ring-gizmo.dragging .ring-thumb{cursor:grabbing}body.ui-hidden .ring-gizmo,body.bench .ring-gizmo{display:none!important}.zones-box[hidden]{display:none}.zone-tiles{flex-wrap:wrap;gap:6px;display:flex}.zone-tiles button{color:#fff;background:#1fa646;border:1px solid #1a9a3a;border-radius:8px;min-width:64px;padding:8px 10px;font-weight:600}.zone-tiles button.off{color:#888;background:#fff;border-color:#c8c8cc;text-decoration:line-through}:is(.panel,.layer-card) label select{min-width:0}:is(.panel,.layer-card) label input[type=color]{width:34px;padding:0}.tile-overlay{display:none}@media (max-width:700px){body.tile-active .tile-overlay{writing-mode:vertical-lr;z-index:2;touch-action:none;direction:rtl;width:28px;height:34vh;display:block;position:fixed;top:32%;left:10px}}body.ui-hidden .tile-overlay,body.bench .tile-overlay{display:none!important}body.ui-hidden .panel,body.ui-hidden #hud,body.ui-hidden .topbar{display:none}:root{--green:#1fa646;--green-dark:#17863a;--bar:52px}button.primary,.next{background:var(--green);border-color:var(--green-dark);color:#fff;font-weight:600}button.primary:hover,.next:hover{background:var(--green-dark)}.topbar{height:var(--bar);z-index:3;box-sizing:border-box;background:#fffffff0;align-items:center;gap:10px;padding:0 12px;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 1px 8px #00000014}.topbar-back{color:#1d1d1f;border-radius:8px;padding:0 6px 4px;font-size:28px;line-height:1;text-decoration:none}.topbar-back:hover{background:#f0f0f2}.topbar-title{white-space:nowrap;text-overflow:ellipsis;max-width:28vw;font-size:15px;overflow:hidden}.topbar-spacer{flex:1}.mode-switch{background:#ececef;border-radius:9px;gap:2px;padding:3px;display:flex}.mode-switch a{color:#555;border-radius:7px;padding:5px 14px;font-weight:600;text-decoration:none}.mode-switch a.on{color:#1d1d1f;background:#fff;box-shadow:0 1px 3px #0000001f}.topbar-icon{padding:4px 10px;font-size:18px;line-height:1}.topbar-toggle[aria-pressed=true]{color:#fff;background:#1d1d1f;border-color:#1d1d1f}.topbar-export{background:var(--green);border-color:var(--green-dark);color:#fff;padding:6px 16px;font-weight:600}.topbar-export:hover{background:var(--green-dark)}.topbar-color{cursor:pointer;background:0 0;border:1px solid #c8c8cc;border-radius:50%;width:32px;height:32px;padding:0}.topbar-color::-webkit-color-swatch-wrapper{padding:2px}.topbar-color::-webkit-color-swatch{border:0;border-radius:50%}.undo-row,.panel>h1,.panel>a{display:none}@media (min-width:701px){.panel{width:250px;top:calc(var(--bar) + 12px);max-height:calc(100vh - var(--bar) - 130px);overflow-y:auto}body:not(.panel-open) .panel,body:not(.panel-open) #hud{display:none}}.export-pop{top:calc(var(--bar) + 8px);z-index:4;background:#fff;border-radius:12px;gap:8px;width:260px;padding:12px 14px;display:grid;position:fixed;right:12px;box-shadow:0 6px 28px #0000002e}.export-pop[hidden]{display:none}.export-pop h2{text-transform:uppercase;letter-spacing:.04em;color:#777;margin:4px 0 0;font-size:12px}.export-pop .mockup-box{border:0;padding:0}.export-pop label{grid-template-columns:52px 1fr;align-items:center;gap:6px;display:grid}.export-pop label.check{grid-template-columns:auto 1fr}.export-pop label>span:empty{display:none}.export-pop select{font:inherit;width:100%}.look-tiles{z-index:2;box-sizing:border-box;background:#ffffffeb;border-radius:14px;gap:8px;max-width:calc(100vw - 32px);padding:8px;display:flex;position:fixed;bottom:14px;left:50%;overflow-x:auto;transform:translate(-50%);box-shadow:0 2px 14px #0000001f}.look-tiles:empty{display:none}.look-tiles button{background:0 0;border:2px solid #0000;border-radius:10px;flex:none;justify-items:center;gap:4px;width:76px;padding:4px;display:grid}.look-tiles button:hover{background:#f3f3f5}.look-tiles button.on{border-color:var(--green);background:#effaf2}.look-tiles img,.look-tiles .swatch{object-fit:cover;background:#ddd;border-radius:6px;width:64px;height:80px;display:block}.look-tiles .label{color:#333;white-space:nowrap;text-overflow:ellipsis;max-width:70px;font-size:11px;font-weight:600;overflow:hidden}.look-divider{background:#d6d6da;flex:none;align-self:stretch;width:1px;margin:6px 2px 18px}.look-tiles.busy{opacity:.6;pointer-events:none}#hud{max-width:calc(50vw - 230px);bottom:12px;left:12px}.sheet-handle{display:none}button:disabled{opacity:.4;cursor:default}@media (max-width:700px){:root{--bar:48px;font-size:15px}.topbar{gap:6px;padding:0 8px}.topbar-title,.topbar-toggle{display:none}.mode-switch a{padding:5px 10px}.topbar-icon{padding:4px 8px}.topbar-export{padding:6px 12px}.topbar-add{white-space:nowrap;padding:6px 10px}.panel{overscroll-behavior:contain;z-index:2;box-sizing:border-box;background:#fffffff7;border-radius:16px 16px 0 0;gap:10px;width:auto;max-height:58vh;padding:0 16px 16px;transition:max-height .25s;inset:auto 0 0;overflow-y:auto;box-shadow:0 -2px 16px #0000001f}body.sheet-collapsed .panel{max-height:54px;overflow:hidden}.sheet-handle{background:inherit;z-index:1;touch-action:none;border:0;border-radius:0;flex-direction:column;align-items:center;gap:6px;margin:0 -16px;padding:8px 0 10px;font-weight:600;display:flex;position:sticky;top:0}.sheet-handle:hover{background:inherit}.sheet-handle .grip{background:#c8c8cc;border-radius:2px;width:40px;height:4px}.panel .hint{display:none}:is(.panel,.layer-card) label{grid-template-columns:96px minmax(0,1fr) 44px;min-height:36px}button,.file{padding:8px 12px}#list{max-height:96px}#hud{max-width:56vw;font-size:10px;inset:56px auto auto 8px}body.sheet-collapsed #hud{display:none}.look-tiles{gap:4px;padding:6px;bottom:62px}.look-tiles button{width:60px;padding:3px}.look-tiles img,.look-tiles .swatch{width:50px;height:62px}.look-tiles .label{max-width:56px;font-size:10px}body:not(.sheet-collapsed) .look-tiles{display:none}.export-pop{width:auto;left:8px;right:8px}}body.bench .topbar,body.bench .look-tiles,body.bench .export-pop{display:none!important}body.ui-hidden .look-tiles{display:none}body.picker{background:#ebebeb;grid-template-columns:1fr 360px;display:grid}.picker-stage{min-width:0;min-height:0;position:relative}body.picker #view{position:absolute;inset:0}.picker-loading{color:#666;background:#ebebeb;place-content:center;justify-items:center;gap:12px;font-weight:600;display:grid;position:absolute;inset:0}.picker-loading[hidden]{display:none}.spinner{border:3px solid #d0d0d4;border-top-color:var(--green);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}.picker-drag{color:#888;pointer-events:none;margin:0;font-size:12px;transition:opacity .4s;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.picker-stage.dragged .picker-drag{opacity:0}.picker-side{box-sizing:border-box;z-index:1;background:#fff;flex-direction:column;gap:14px;height:100vh;padding:28px 24px 20px;display:flex;overflow-y:auto;box-shadow:-2px 0 16px #0000000f}.picker-side h1{margin:0;font-size:22px}.picker-sub{color:#666;margin:-6px 0 4px}.garment-tiles{grid-template-columns:1fr 1fr;gap:10px;display:grid}.garment-tile{text-align:center;background:#f6f6f7;border:2px solid #e4e4e8;border-radius:12px;justify-items:center;gap:2px;padding:8px 8px 10px;display:grid}.garment-tile:hover{background:#efeff1}.garment-tile.on{border-color:var(--green);background:#effaf2}.garment-tile img{aspect-ratio:4/5;object-fit:contain;width:100%}.garment-tile .name{font-size:13px;font-weight:700}.garment-tile .sub{color:#777;font-size:11px}.picker-mode{background:#ececef;border-radius:10px;gap:2px;margin-top:auto;padding:3px;display:flex}.picker-mode button{color:#555;background:0 0;border:0;border-radius:8px;flex:1;padding:9px;font-weight:600}.picker-mode button.on{color:#1d1d1f;background:#fff;box-shadow:0 1px 3px #0000001f}.next{font:inherit;border:1px solid var(--green-dark);cursor:pointer;border-radius:12px;padding:13px;font-size:16px}.picker-dev{color:#999;align-self:center;font-size:12px}@media (max-width:700px){body.picker{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr}.picker-side{border-radius:16px 16px 0 0;gap:10px;height:auto;max-height:52vh;padding:16px 16px 14px;box-shadow:0 -2px 16px #00000014}.picker-side h1{font-size:18px}.picker-sub{display:none}.garment-tiles{gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.garment-tile{flex:none;width:96px;padding:6px 6px 8px}.garment-tile .sub{display:none}.garment-tile .name{font-size:12px;line-height:1.2}.picker-mode{margin-top:0}.picker-dev{display:none}}.layer-card{top:calc(var(--bar) + 12px);z-index:3;width:280px;max-height:calc(100vh - var(--bar) - 24px);box-sizing:border-box;background:#fff;border-radius:14px;flex-direction:column;display:flex;position:fixed;right:12px;overflow:hidden;box-shadow:0 4px 24px #00000024}.layer-card[hidden]{display:none}.card-head{border-bottom:1px solid #eee;align-items:center;gap:10px;padding:10px 10px 10px 12px;display:flex}.card-head img{object-fit:contain;background:#f2f2f4 repeating-conic-gradient(#e6e6e9 0 25%, transparent 0 50%) 0 0 / 10px 10px;border-radius:6px;width:36px;height:36px}.card-head img[hidden]{display:none}.card-head strong{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:14px;overflow:hidden}.card-close{color:#555;background:#f2f2f4;border:0;border-radius:50%;width:30px;height:30px;padding:0;font-size:13px}.card-close:hover{background:#e6e6e9}.card-body{overscroll-behavior:contain;gap:8px;padding:4px 14px 12px;display:grid;overflow-y:auto}.card-body h3{text-transform:uppercase;letter-spacing:.05em;color:#888;margin:10px 0 0;font-size:11px}.card-body .hint{color:#666;margin:0;font-size:12px}.layer-card .row[hidden],.style-chips[hidden],.zones-box[hidden]{display:none}.card-actions .file{white-space:nowrap}.card-actions{border-top:1px solid #eee;justify-content:space-between;padding:10px 14px}.card-actions #remove{color:#c62828}.style-chips{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.style-chips button{color:#444;background:#f6f6f7;border:2px solid #e4e4e8;border-radius:10px;justify-items:center;gap:4px;padding:6px 2px;font-size:11px;font-weight:600;display:grid}.style-chips button.on{border-color:var(--green);color:#1d1d1f;background:#effaf2}.chip-swatch{border-radius:4px;width:28px;height:20px;display:block}.chip-print{background:linear-gradient(135deg,#2f6fd6,#5aa0ff)}.chip-screen{background:linear-gradient(135deg,#2f6fd6,#5aa0ff);box-shadow:inset 0 0 0 20px #ffffff1f}.chip-dtg{background:linear-gradient(135deg,#2f6fd6 40%,#9cc4ff 50%,#2f6fd6 60%)}.chip-patch{background:#efe9dc;border-radius:6px;box-shadow:inset 0 0 0 3px #1c1c1c}.chip-embroidery{background:repeating-linear-gradient(45deg,#2f6fd6 0 2px,#6fa8ff 2px 4px)}.chip-embroidery3d{background:repeating-linear-gradient(45deg,#2f6fd6 0 2px,#6fa8ff 2px 4px);box-shadow:0 2px #1d4ea0}.chip-embroideryPuff3d{background:radial-gradient(circle at 50% 40%,#8fbaff 0 30%,#2f6fd6 70%),repeating-linear-gradient(45deg,#2f6fd6 0 2px,#6fa8ff 2px 4px);box-shadow:0 3px #1d4ea0}.chip-puff3d{background:radial-gradient(at 40% 30%,#9cc4ff,#2f6fd6 70%);border-radius:8px}.chip-pvcBadge{background:#111;border-radius:6px;box-shadow:inset 0 0 0 4px #111,inset 0 0 0 20px #2f6fd6}.chip-pvcLogo{background:linear-gradient(160deg,#6fa8ff,#2f6fd6 60%,#1d4ea0);border-radius:4px}.chip-raised{background:radial-gradient(circle at 35% 30%,#fff,#9bb8e8 45%,#2f6fd6)}body.bench .layer-card,body.ui-hidden .layer-card{display:none!important}@media (max-width:700px){.layer-card{z-index:3;border-radius:16px 16px 0 0;width:auto;max-height:50vh;inset:auto 0 0;box-shadow:0 -2px 16px #00000024}.card-body{padding:4px 16px 12px}.style-chips button{padding:8px 2px}body.layer-selected .panel,body.layer-selected .look-tiles{display:none}}.brush-ring{pointer-events:none;z-index:1;border-radius:50%;position:fixed;top:0;left:0;box-shadow:0 0 0 1.5px #fffffff2,0 0 0 2.5px #00000059}.brush-ring.erase{box-shadow:0 0 0 1.5px #fffffff2,0 0 0 2.5px #dc282899}.tools button[aria-pressed=true]{color:#fff;background:#1d1d1f;border-color:#1d1d1f}.swatches button{border:1px solid #0000002e;border-radius:50%;width:24px;height:24px;padding:0}.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #1d1d1f}[data-tools][hidden],.brush-ring[hidden],body.bench .brush-ring{display:none}.designs h2{margin:14px 0 6px;font-size:13px}.designs .design-name,.designs .design-state{color:#666;font-weight:400}.design-list{gap:6px;margin:6px 0 0;padding:0;list-style:none;display:grid}.design-list li{grid-template-columns:48px 1fr auto auto;align-items:center;gap:6px;font-size:12px;display:grid}.design-list li.current span{font-weight:600}.design-list img{object-fit:cover;background:#eee;border-radius:6px;width:48px;height:48px}.design-list img:not([src]){visibility:hidden}.clip-box{gap:6px;display:grid}.clip-box output{color:#666;font-size:11px}.export-pop .clip-box label{grid-template-columns:52px 1fr auto}.export-pop .clip-box label.check{grid-template-columns:auto 1fr}.clip-status{color:#555;min-height:1em;font-size:11px}.clip-veil{opacity:0;pointer-events:none;z-index:2;background:#000;position:fixed;inset:0}body.clip-recording:after{content:"Recording clip…";z-index:50;color:#1d1d1f;background:#f5f5f7eb;place-items:center;font:600 15px system-ui,sans-serif;display:grid;position:fixed;inset:0}.flat-labels{pointer-events:none;z-index:2;position:fixed;inset:0}.flat-label{letter-spacing:.08em;text-transform:uppercase;color:#3a3b40;white-space:nowrap;background:#fffc;border-radius:4px;padding:3px 6px;font:600 11px/1 system-ui,sans-serif;position:absolute;top:0;left:0}