:root{font-family:Arial,Helvetica,sans-serif;color:#242721;background:#f8f7f3;font-synthesis:none;--line:#dfdfd6;--green:#344c3c}*{box-sizing:border-box}body{margin:0}button,.button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);background:transparent;border-radius:7px;padding:10px 15px;text-align:center;font-size:12px;font-weight:600;transition:background .2s}button:hover,.button:hover{background:#e5e7df}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible,.button:focus-within{outline:3px solid #9baf84;outline-offset:3px}.header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 36px}.title{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:22px}.title span{font-size:16px;font-weight:600}.tag,.eyebrow{font-size:9px;letter-spacing:2px;color:#74776b}.tag{margin-left:auto}.primary{background:var(--green);border-color:var(--green);color:white}.primary:hover{background:#263d2d}main{display:grid;grid-template-columns:minmax(0,1fr) 355px;max-width:1800px;margin:auto}.stage{position:sticky;top:0;height:calc(100dvh - 80px);min-height:570px;background:radial-gradient(ellipse at 50% 45%,#f4f3ec,#e5e5da);overflow:hidden}.stage-top{position:absolute;top:35px;left:36px;right:32px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:1}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:46px;line-height:1.02;letter-spacing:-1.5px;margin:12px 0}.model-tag{font-size:10px;border:1px solid #cfd0c5;border-radius:20px;padding:9px 12px;color:#656a5c}#viewport{position:absolute;inset:0;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}#status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;background:#f8f7f3e8;padding:14px 18px;border-radius:10px;max-width:80%;text-align:center;pointer-events:none}#status:empty{display:none}.stage-bottom{position:absolute;bottom:54px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:10px}.hint{font-size:10px;color:#737769}.view-controls{display:flex;gap:4px;border:1px solid #d9d9cf;border-radius:10px;padding:4px;background:#f8f7f3dd}.view-controls button{border:0;font-size:11px;padding:9px 12px}.view-controls button[aria-pressed=true]{background:#344c3c;color:white}.credits{position:absolute;bottom:20px;left:20px;right:20px;text-align:center;font-size:9px;color:#777c70}.credits a{color:inherit}.panel{padding:32px 28px;border-left:1px solid var(--line);background:#faf9f5}.panel-heading{margin-bottom:30px}h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.6px;margin:10px 0}p{font-size:12px;line-height:1.6;color:#7a7d72;margin:0}aside section{border-top:1px solid var(--line);padding:24px 0}h3{font-weight:400;color:#8c9183;font-size:10px;display:flex;gap:12px;align-items:center;margin:0 0 18px}h3 span{font-size:13px;font-weight:600;color:#2c3327}.section-label{display:flex;justify-content:space-between;align-items:baseline}.section-label>span{font-size:10px;color:#73786a}#swatches{display:flex;gap:10px;flex-wrap:wrap}.swatch{width:29px;height:29px;border:1px solid #0001;border-radius:50%;padding:0;position:relative}.swatch:hover{background:var(--swatch)!important}.swatch[aria-pressed=true]:after{content:'';position:absolute;inset:-4px;border:1px solid #758465;border-radius:50%}.custom-color{display:flex;align-items:center;gap:10px;font-size:10px;color:#7b8074;margin-top:20px}.custom-color input{border:0;background:none;width:26px;height:24px;padding:0;cursor:pointer}#hex{margin-left:auto;font-size:9px;letter-spacing:1px}.tabs{display:flex;background:#eeeee7;border-radius:7px;padding:3px;margin-bottom:16px}.tabs button{flex:1;border:0}.tabs .active{background:#fff;box-shadow:0 1px 3px #0001}.tabs span.filled{display:inline-block;width:5px;height:5px;border-radius:50%;background:#61804f;vertical-align:middle;margin-left:4px}.upload{min-height:132px;border:1px dashed #c8cdbd;border-radius:9px;background:#f0f1e9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;position:relative;cursor:pointer;overflow:hidden}.upload:hover{background:#e9ede0}.upload input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.upload:focus-within{outline:3px solid #9baf84}.upload strong{font-size:12px}.upload span:last-child{font-size:9px;color:#8b9080}.upload-icon{font-size:23px;font-weight:200;color:#707f61}.art-meta{display:flex;align-items:center;gap:8px;margin:9px 0 18px;min-height:20px}.art-meta span{font-size:9px;color:#888d7f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:215px}.art-meta button{font-size:9px;border:0;padding:4px 0;margin-left:auto}.adjustments{display:grid;gap:16px}.adjustments label{font-size:10px;color:#737a68;display:block}.adjustments output{float:right;color:#2e3a28}input[type=range]{display:block;width:100%;height:3px;margin:12px 0 3px;accent-color:#526d42;cursor:pointer}.small{font-size:10px;line-height:1.7;margin-top:16px}.text-button{padding:10px 0 0;border:0;color:#4d6842;font-size:10px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-grid button,.tool-grid .button{font-size:10px;padding:12px 8px}.footnote{font-size:9px;line-height:1.8}dialog{border:1px solid var(--line);border-radius:16px;padding:30px;max-width:480px;width:calc(100% - 30px);background:#faf9f5;color:#242721}dialog::backdrop{background:#1f291f66;backdrop-filter:blur(4px)}.close{float:right;border:0;padding:0;font-size:24px}dialog label{display:block;font-size:12px;margin:20px 0 12px}dialog input,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:6px;background:white;font:12px Arial;margin-top:8px}textarea{height:110px;resize:vertical}body.embed .header,body.embed .panel,body.embed .stage-top,body.embed .hint{display:none}body.embed main{display:block}body.embed .stage{height:100dvh;min-height:280px}body.embed .stage-bottom{justify-content:center;bottom:48px}body.embed .credits{font-size:8px}body.embed .stage{border:0}body.embed .view-controls{max-width:100%}@media(min-width:1500px){.stage-top{left:50px;top:45px}h1{font-size:58px}}@media(max-width:1000px){.stage-bottom{flex-direction:column}.stage-top{top:24px;left:24px}h1{font-size:36px}.model-tag{display:none}.header{padding:0 24px}.tag{display:none}.header>.primary{margin-left:auto}}@media(max-width:720px){.header{height:64px;padding:0 18px}.title span{font-size:13px}.header .primary{font-size:10px;padding:10px}main{display:block}.stage{position:relative;height:65dvh;min-height:420px;max-height:650px}.stage-top{top:18px;left:20px}h1{font-size:30px}.stage-top .eyebrow{font-size:8px}.stage-bottom{bottom:44px}.credits{bottom:13px;font-size:8px}.hint{display:none}.panel{border-left:0;padding:28px 24px}.panel-heading{margin-bottom:24px}aside section{padding:24px 0}.adjustments{grid-template-columns:1fr 1fr;gap:20px}.tool-grid{grid-template-columns:repeat(4,1fr)}body.embed .stage{height:100dvh;max-height:none;min-height:280px}}

.palette-label{display:block;font-size:10px;color:#73786a;margin-top:19px}#garment-color{width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#2c3327;font:12px Arial}.palette-note{font-size:9px;line-height:1.5;margin-top:8px}select:focus-visible{outline:3px solid #9baf84;outline-offset:3px}

#garment{width:100%;margin-top:8px;padding:11px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#2c3327;font:12px Arial}.garment-section .palette-label{margin-top:0}body.embed .garment-section{display:none}.model-tag{max-width:220px;text-align:right}
@media(max-width:720px){.stage-top h1,.stage-top .eyebrow{display:none}.stage-top .model-tag{display:block;font-size:9px;max-width:90%;padding:7px 10px}}

#garment-size,#decoration,dialog select{display:block;width:100%;margin:8px 0 12px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;font:12px Arial;color:#2c3327}dialog{max-height:90dvh;overflow:auto}#platform-route{font-size:12px;display:block;margin-top:12px}#platform-docs{display:inline-block;color:#425d3d}#decoration{margin-bottom:8px}.art-section>.palette-label{margin-top:0}

#garment{margin-bottom:16px}
