:root{--graphite:#26282b;--graphite-2:#323539;--paper:#f3f4f2;--ink:#1f2a36;--slate:#5f6a75;--rule:#d7dad6;--tape:#e3b23c;--tape-ink:#3a2c06;--warn:#9a5b00;--radius-control:6px;--display:"Bricolage Grotesque", "Manrope", system-ui, sans-serif;--body:"Manrope", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--body);color:var(--ink);background:var(--graphite);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--tape);outline-offset:2px}.app{grid-template-columns:minmax(0,1fr) 360px;height:100%;display:grid}.app-empty{grid-template-columns:1fr;place-items:center;padding:24px 16px;overflow:auto}.stage{color:#e9ebe8;flex-direction:column;gap:12px;min-height:0;padding:16px 20px;display:flex}.stage-bar,.toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar{justify-content:center}.stage-frame{width:min(100%, calc((100vh - 170px) * var(--ratio,1.5)));background:var(--graphite-2);touch-action:none;border-radius:4px;margin:0 auto;position:relative;overflow:hidden}.stage-frame canvas,.stage-frame .corners{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-error{color:var(--ink);border-radius:var(--radius-control);background:#fff;margin:0;padding:12px 14px;position:absolute;inset:auto 16px 16px}.corners .quad{fill:#e3b23c14;stroke:var(--tape);stroke-dasharray:6 4;vector-effect:non-scaling-stroke}.corners .quad.is-invalid{stroke:#ff6b5a}.corners .handle{fill:var(--tape);stroke:var(--graphite);cursor:grab}.corners .handle:active{cursor:grabbing}.corners .handle:focus-visible{stroke:#fff;outline:none}.messages{flex-direction:column;align-items:center;gap:6px;min-height:0;display:flex}.msg{color:#c9cdc8;text-align:center;max-width:70ch;margin:0;font-size:.875rem}.msg-warn{color:var(--tape)}.btn{color:#e9ebe8;border-radius:var(--radius-control);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #4a4e53;padding:8px 14px;font-size:.9rem;font-weight:600}.btn:hover{background:#33373b}.btn:disabled{opacity:.55;cursor:progress}.btn-on{color:var(--graphite);background:#e9ebe8;border-color:#e9ebe8}.btn-on:hover{background:#fff}.btn-primary{background:var(--tape);color:var(--tape-ink);border-color:var(--tape)}.btn-primary:hover{background:#edc261}.btn-ghost{color:#c9cdc8;border-color:#0000;padding-left:0}.window-pick{align-items:center;gap:8px;margin-left:auto;font-size:.9rem;display:flex}.window-pick select{background:var(--graphite-2);border-radius:var(--radius-control);border:1px solid #4a4e53;padding:6px 8px}.uploader{color:#e9ebe8;flex-direction:column;gap:40px;width:min(760px,100%);display:flex}.dropzone{border:2px dashed #4f5458;border-radius:10px;flex-direction:column;align-items:flex-start;gap:16px;padding:56px 32px;display:flex}.dropzone.is-drag{border-color:var(--tape);background:#e3b23c0f}.dropzone h1{font-family:var(--display);letter-spacing:-.02em;max-width:16ch;margin:0;font-size:clamp(2rem,5vw,3.25rem);font-weight:700;line-height:1.05}.dropzone p{color:#c9cdc8;max-width:52ch;margin:0;line-height:1.55}.dropzone .demo-note{color:var(--tape);font-weight:600}.dropzone .hint{color:#9aa09b;font-size:.85rem}.error{color:#ffb4a8!important}.samples h2{font-family:var(--body);color:#c9cdc8;margin:0 0 12px;font-size:.95rem;font-weight:600}.sample-row{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.sample{cursor:pointer;aspect-ratio:4/3;background:0 0;border:0;border-radius:6px;padding:0;overflow:hidden}.sample img{object-fit:cover;width:100%;height:100%;transition:transform .2s;display:block}.sample:hover img{transform:scale(1.04)}.sidebar{background:var(--paper);border-left:1px solid #000;padding:8px 20px 32px;overflow-y:auto}.panel{border-bottom:1px solid var(--rule);padding:18px 0}.panel:last-child{border-bottom:0}.panel h2{font-family:var(--display);letter-spacing:-.01em;margin:0 0 12px;font-size:1.35rem;font-weight:700}.family+.family{margin-top:14px}.family h3{color:var(--slate);margin:0 0 8px;font-size:.85rem;font-weight:600}.swatch-row{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.swatch{cursor:pointer;text-align:left;background:0 0;border:0;flex-direction:column;gap:6px;padding:0;display:flex}.swatch-back,.swatch-cloth{aspect-ratio:1;width:100%;display:block}.swatch-back.is-sheer{background:linear-gradient(160deg,#8d9aa6 0%,#56616c 100%)}.swatch-back,.swatch-cloth{--z:6px;clip-path:polygon(0 0, 8% var(--z), 16% 0, 24% var(--z), 32% 0, 40% var(--z), 48% 0, 56% var(--z), 64% 0, 72% var(--z), 80% 0, 88% var(--z), 96% 0, 100% 0, 100% 100%, 92% calc(100% - var(--z)), 84% 100%, 76% calc(100% - var(--z)), 68% 100%, 60% calc(100% - var(--z)), 52% 100%, 44% calc(100% - var(--z)), 36% 100%, 28% calc(100% - var(--z)), 20% 100%, 12% calc(100% - var(--z)), 4% 100%, 0 100%)}.swatch-cloth{background-blend-mode:overlay;background-repeat:repeat}.swatch-back{transition:transform .15s}.swatch:hover .swatch-back{transform:translateY(-2px)}.swatch-name{color:var(--ink);font-size:.78rem;font-weight:500;line-height:1.25}.swatch.is-selected .swatch-name{font-weight:700}.swatch.is-selected .swatch-name:before{content:"";background:var(--tape);vertical-align:1px;border-radius:50%;width:8px;height:8px;margin-right:5px;display:inline-block}.palette{grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:8px;display:grid}.chip{aspect-ratio:1;cursor:pointer;border:1px solid #0000002e;border-radius:50%;padding:0;position:relative}.chip.is-selected{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink)}.chip-custom{background:conic-gradient(#d9534f,#f0ad4e,#e8e35a,#5cb85c,#5bc0de,#6f5bd6,#d9534f);overflow:hidden}.chip-custom input{opacity:0;cursor:pointer;width:100%;height:100%}.tape{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:.92rem;font-weight:600;display:flex}.tape-field{background:repeating-linear-gradient(90deg, var(--tape-ink) 0 1px, transparent 1px 6px) bottom / 100% 5px no-repeat, var(--tape);color:var(--tape-ink);border-radius:3px;align-items:center;gap:6px;padding:4px 10px 4px 4px;font-weight:700;display:inline-flex}.tape-field input{text-align:right;background:#ffffff8c;border:0;border-radius:2px;width:64px;padding:4px 6px;font-weight:700}.tape-field input::placeholder{color:#3a2c0699}.note{color:var(--slate);max-width:42ch;margin:4px 0 12px;font-size:.82rem;line-height:1.45}.slider{flex-direction:column;gap:6px;font-size:.92rem;font-weight:600;display:flex}.slider input{accent-color:var(--ink)}@media (width<=860px){.app{grid-template-columns:1fr;height:auto}.stage{z-index:2;background:var(--graphite);gap:8px;padding:10px 16px 12px;position:sticky;top:0}.msg:not(.msg-warn){display:none}.toolbar .btn{padding:6px 10px;font-size:.82rem}.stage-frame{width:min(100%, calc(46vh * var(--ratio,1.5)))}.sidebar{border-left:0;padding:4px 16px 32px}.toolbar .btn{flex:auto}.swatch-row{grid-template-columns:repeat(4,1fr)}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}