.kw{--kw-accent:#a8c6ab;--kw-line:#34433e;--kw-muted:#a5ada9;scroll-margin-top:80px}
.kw *{box-sizing:border-box}
.kw [hidden]{display:none!important}
.kw .kw-heading{margin-bottom:12px;gap:12px;align-items:center}
.kw .kw-heading h1{font-size:clamp(1.2rem,2vw,1.65rem);margin:0}
.kw .kw-heading p{margin:3px 0 0;color:var(--kw-muted);font-size:.85rem}
.kw .kw-actions,.kw .kw-primary,.kw .kw-facing,.kw .kw-dialog-heading{display:flex;align-items:center;gap:6px}
.kw button,.kw select,.kw input{font:inherit}
.kw button{min-height:42px;cursor:pointer}
.kw button:disabled{cursor:default;opacity:.45}
.kw button[aria-pressed=true]{border-color:var(--kw-accent);color:#dcf0dd;background:#26392f}
.kw :focus-visible{outline:2px solid #d3b979;outline-offset:3px}
.kw .kw-workspace{display:grid;grid-template-columns:minmax(250px,360px) minmax(0,1fr);gap:16px;align-items:start}
.kw .kw-preview{padding:12px;position:sticky;top:12px;min-width:0}
.kw .kw-stage{height:324px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--kw-line);border-radius:7px;background:radial-gradient(ellipse at 50% 45%,#334c4a,#152321 75%)}
.kw .kw-stage[data-background=jade]{background:radial-gradient(ellipse,#577968,#243c31)}
.kw .kw-stage[data-effect=true]{overflow:auto;align-items:safe center;justify-content:safe center}
.kw .kw-stage[data-photo=true]{overflow:hidden;align-items:center;justify-content:center}
.kw .kw-stage[data-background=paper]{background:radial-gradient(ellipse,#e0d5b7,#a69b81)}
.kw .kw-stage[data-background=grid]{background-color:#a8a8a8;background-image:conic-gradient(#c9c9c9 25%,transparent 0 50%,#c9c9c9 0 75%,transparent 0);background-size:20px 20px}
.kw #kw-canvas{display:block;max-width:none;image-rendering:pixelated;flex:none;width:720px;height:540px;pointer-events:none}
.kw .kw-loading{position:absolute;inset:auto 8px 8px;display:flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid var(--kw-line);border-radius:5px;background:#152321e8;color:#c9d8ce;text-align:center;font-size:.8rem}
.kw .kw-loading[hidden]{display:none}
.kw .kw-facing{justify-content:center;margin:8px 0}
.kw .kw-facing button{width:42px;padding:0}
.kw .kw-primary{flex-wrap:wrap;margin:8px 0}
.kw .kw-primary>*{flex:1 1 auto;white-space:nowrap}
.kw .kw-appearance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:10px 0;align-items:end}
.kw .kw-appearance label{display:grid;gap:5px;min-width:0;font-size:.8rem}
.kw .kw-appearance select{width:100%;min-width:0;min-height:42px}
.kw .kw-appearance-label{display:flex;align-items:center;gap:6px}
.kw .kw-appearance-swatch{width:14px;height:14px;border:1px solid #ffffff66;border-radius:50%;background:var(--swatch)}
.kw .kw-appearance button{font-size:.8rem;min-width:0}
.kw .kw-appearance .kw-caption{font-size:.75rem;line-height:1.45;margin:0;align-self:center}
.kw .kw-message{min-height:1.3em;margin:8px 0;color:var(--kw-muted);font-size:.8rem;line-height:1.45}
.kw .tool-disclosure{margin-top:10px}
.kw .tool-disclosure summary{font-size:.86rem;padding-block:10px}
.kw .tool-disclosure summary span{color:var(--kw-muted);font-size:.75rem;margin-left:5px}
.kw #kw-wearing{display:grid;gap:4px;padding:5px 0}
.kw .kw-piece{display:flex;gap:6px;align-items:center}
.kw .kw-piece button:first-child{flex:1;text-align:left;font-size:.8rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw .kw-piece .kw-piece-remove{flex:0 0 40px}
.kw .kw-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0}
.kw .kw-options .kw-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.85rem;min-height:40px}
.kw .kw-check input{width:18px;height:18px}
.kw .kw-closet{padding:12px;min-width:0;overflow:hidden}
.kw .kw-categories{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--kw-line)}
.kw .kw-categories button{font-size:.8rem;padding:7px 11px;white-space:nowrap}
.kw .kw-closet-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.kw .kw-closet-heading h2{font-size:1rem;margin:0}
.kw .kw-closet-heading button{font-size:.8rem}
.kw .kw-mini-preview{display:none}
.kw .kw-search{display:flex;gap:8px;margin:10px 0}
.kw .kw-search-field{flex:1;min-width:0}
.kw .kw-search input{width:100%;min-width:0;min-height:42px}
.kw #kw-lock{font-size:.8rem;padding:6px 10px}
.kw .kw-colors{margin:10px 0}
.kw .kw-color-heading{display:flex;align-items:center;gap:8px}
.kw .kw-color-heading h3{font-size:.85rem;margin:0}
.kw #kw-color-name{font-size:.75rem;color:var(--kw-muted)}
.kw #kw-dye-reset{margin-left:auto;font-size:.8rem;min-height:36px;padding:4px 10px}
.kw .kw-dyes{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0;align-items:center}
.kw .kw-dyes button{flex:0 0 40px;width:40px;min-height:40px;padding:6px;border-radius:5px;display:flex;align-items:center;justify-content:center}
.kw .kw-dyes span{display:block;width:20px;height:20px;border-radius:50%;border:1px solid #ffffff55;background:var(--swatch)}
.kw .kw-dyes button[aria-pressed=true]{outline:1px solid #d4d9c9;outline-offset:1px}
.kw .kw-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;min-height:120px;max-height:min(640px,65dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;align-content:start}
.kw .kw-style{height:132px;padding:6px 2px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;background:#19231f}
.kw .kw-style canvas{width:80px;height:96px;image-rendering:pixelated;pointer-events:none}
.kw .kw-style span{font-size:.72rem;line-height:1.2;color:#c6cec7}
.kw .kw-empty{grid-column:1/-1;padding:24px 8px;color:var(--kw-muted);font-size:.9rem}
.kw .kw-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.kw .kw-pagination p{color:var(--kw-muted);font-size:.8rem;text-align:center;margin:0}
.kw .kw-pagination button{min-width:44px}
.kw .kw-caption{font-size:.8rem;color:var(--kw-muted);margin:8px 0}
.kw #kw-saved{max-height:288px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.kw .kw-deleted{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0;font-size:.8rem}
.kw .kw-deleted p{margin:0;overflow-wrap:anywhere}
.kw .kw-deleted button{flex:none}
.kw .kw-saved-row{display:flex;gap:5px;margin:6px 0}
.kw .kw-saved-row button:first-child{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kw .kw-file{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:6px 12px;background:#26332d;border:1px solid var(--kw-line);border-radius:5px;cursor:pointer}
.kw .kw-file input{max-width:0;width:0;opacity:0;position:absolute}
.kw .kw-file:focus-within{outline:2px solid #d3b979;outline-offset:3px}
.kw .kw-dialog{background:#18231f;color:#e2e8df;border:1px solid #526356;border-radius:10px;width:min(520px,calc(100% - 24px));max-height:85dvh;padding:20px;line-height:1.65}
.kw .kw-dialog::backdrop{background:#000b}
.kw .kw-dialog h2{font-size:1.1rem;margin:0 0 12px}
.kw .kw-dialog-heading{justify-content:space-between}
.kw .kw-dialog-heading button{width:42px}
.kw .kw-dialog p{font-size:.9rem}
.kw .kw-dialog input{width:100%}
.kw .kw-dialog a{color:#c5ddc6}
.kw .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.kw .kw-gallery{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
@media(max-width:950px){.kw .kw-workspace{grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:10px}.kw .kw-preview,.kw .kw-closet{padding:9px}.kw .kw-stage{height:324px}}
@media(max-width:680px){.kw .kw-heading{margin-bottom:8px}.kw .kw-heading p{display:none}.kw .kw-heading h1{font-size:1.15rem}.kw .kw-actions{gap:3px}.kw .kw-workspace{display:flex;flex-direction:column;gap:10px}.kw .kw-preview,.kw .kw-closet{width:100%;position:static;padding:8px}.kw .kw-stage{height:224px}.kw #kw-canvas{width:480px;height:360px}.kw .kw-facing{margin:5px 0}.kw .kw-primary{margin:5px 0}.kw .kw-message{margin:5px 0}.kw .kw-categories{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;overscroll-behavior-x:contain}.kw .kw-gallery{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}.kw .kw-style{height:125px}.kw .kw-categories button{padding:7px 9px}.kw .kw-current:not([open]){margin-top:3px}.kw .tool-disclosure{margin-top:5px}.kw .kw-options{gap:8px}.kw .kw-dialog{padding:16px}}
@media(prefers-reduced-motion:reduce){.kw *{scroll-behavior:auto}}
@media(max-width:680px){
 .kw .kw-closet{overflow:clip}
 .kw .kw-closet-controls{position:sticky;top:64px;z-index:3;background:var(--panel,#19231f);padding-bottom:6px}
 .kw .kw-mini-preview{display:flex;flex-direction:column;align-items:center;flex:none;width:96px;min-height:112px;padding:0 0 4px;gap:0;font-size:.7rem}
 .kw .kw-mini-preview canvas{display:block;width:96px;height:112px;image-rendering:pixelated;pointer-events:none}
 .kw .kw-closet-heading h2{margin-right:auto}
 .kw .kw-dyes{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:3px}
 .project-tool-private .kw .kw-closet-controls{top:0}
}
@media(min-width:681px) and (max-height:500px){.kw .kw-stage{height:clamp(140px,calc(100dvh - 230px),220px)!important}}
