*{box-sizing:border-box}body{margin:0;background:#f8f6f1;color:#182f37;font:16px system-ui}main{max-width:1080px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:15px}header b{font-size:24px}header span{font-size:11px;letter-spacing:2px;color:#547d7b}h1{font-size:42px;line-height:1.1;margin-bottom:12px}p,small{line-height:1.5;color:#596d72}.studio{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.studio section{padding:22px;background:white;border:1px solid #dce3df;border-radius:20px}h2{font-size:18px;margin:0 0 16px}#original{max-height:220px;width:100%;object-fit:contain;margin:16px 0}#moods{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:20px}button,a{font:inherit;border:1px solid #ccdad7;border-radius:10px;padding:12px 8px;min-height:44px;background:white;color:#244b50;cursor:pointer;text-decoration:none;text-align:center}button[aria-pressed=true]{background:#d5eae5;border-color:#30706b}button:disabled{opacity:.5;cursor:wait}#generate,#download{display:block;width:100%;background:#24675f;color:white;font-weight:700;margin-top:16px}img{max-width:100%;border-radius:10px}footer{font-size:12px;color:#596d72;margin:24px 0}#engine{background:#e8efdf;border-radius:10px;padding:12px}input{max-width:100%}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.studio{grid-template-columns:1fr}.studio section{padding:16px}h1{font-size:34px}#moods button{font-size:12px}}

#moods button{padding:0 0 8px;overflow:hidden;display:flex;flex-direction:column;gap:6px;align-items:center} .mood-example{display:block;width:100%;height:86px;background-image:url(reference.png);background-repeat:no-repeat} .example-note{font-size:12px}

.mood-0{background-size:341.333% 691.892%;background-position:0.000% 0.000%;}

.mood-1{background-size:423.140% 691.892%;background-position:38.363% 0.000%;}

.mood-2{background-size:423.140% 691.892%;background-position:69.309% 0.000%;}

.mood-3{background-size:426.667% 691.892%;background-position:100.000% 0.000%;}

.mood-4{background-size:341.333% 704.587%;background-position:0.000% 19.272%;}

.mood-5{background-size:423.140% 704.587%;background-position:38.363% 19.272%;}

.mood-6{background-size:423.140% 704.587%;background-position:69.309% 19.272%;}

.mood-7{background-size:426.667% 704.587%;background-position:100.000% 19.272%;}

.mood-8{background-size:341.333% 707.834%;background-position:0.000% 38.135%;}

.mood-9{background-size:423.140% 707.834%;background-position:38.363% 38.135%;}

.mood-10{background-size:423.140% 707.834%;background-position:69.309% 38.135%;}

.mood-11{background-size:426.667% 707.834%;background-position:100.000% 38.135%;}

.mood-12{background-size:341.333% 701.370%;background-position:0.000% 56.948%;}

.mood-13{background-size:423.140% 701.370%;background-position:38.363% 56.948%;}

.mood-14{background-size:423.140% 701.370%;background-position:69.309% 56.948%;}

.mood-15{background-size:426.667% 701.370%;background-position:100.000% 56.948%;}

.mood-16{background-size:341.333% 701.370%;background-position:0.000% 75.778%;}

.mood-17{background-size:423.140% 701.370%;background-position:38.363% 75.778%;}

.mood-18{background-size:423.140% 701.370%;background-position:69.309% 75.778%;}

.mood-19{background-size:426.667% 701.370%;background-position:100.000% 75.778%;}

.mood-20{background-size:341.333% 679.646%;background-position:0.000% 95.267%;}

.mood-21{background-size:423.140% 679.646%;background-position:38.363% 95.267%;}

.mood-22{background-size:423.140% 679.646%;background-position:69.309% 95.267%;}

.mood-23{background-size:426.667% 679.646%;background-position:100.000% 95.267%;}



label[for=outfit]{display:block;margin:18px 0 8px;font-weight:650}#outfit{width:100%;font:inherit;min-height:46px;padding:10px;border:1px solid #ccdad7;border-radius:10px;background:white;color:#244b50;margin-bottom:22px}

header span,.example-note,footer{font-size:14px} @media(max-width:650px){#moods button{font-size:14px}} #inAppHelp{padding:12px;background:#fff2cb;border-radius:10px;margin:12px 0} a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #d18a00;outline-offset:3px}


.fabric-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.fabric-controls label{display:block;font-weight:650;font-size:14px;margin-bottom:8px}.fabric-controls select{width:100%;min-height:44px;padding:8px;font:inherit;border:1px solid #ccdad7;border-radius:10px;background:white;color:#244b50}.fabric-swatch{width:130px;height:64px;border-radius:8px;border:1px solid #879998;background-color:var(--fabric);margin-top:10px}.color-navy{--fabric:#263e67}.color-black{--fabric:#24272b}.color-white{--fabric:#f5f5f2}.color-grey{--fabric:#aaaeb4}.color-blue{--fabric:#6d9ec4}.color-green{--fabric:#347858}.color-red{--fabric:#b64046}.color-pink{--fabric:#eba2b4}.color-beige{--fabric:#d1b894}.color-purple{--fabric:#86529b}.pattern-pinstripe{background-image:repeating-linear-gradient(90deg,transparent 0 9px,#ffffffc9 9px 11px)}.pattern-stripe{background-image:repeating-linear-gradient(0deg,transparent 0 10px,#ffffffd9 10px 20px)}.pattern-check{background-image:repeating-linear-gradient(90deg,transparent 0 14px,#ffffffb0 14px 16px),repeating-linear-gradient(0deg,transparent 0 14px,#ffffffb0 14px 16px)}

.background-label{display:block;font-weight:650;margin:18px 0 8px}#background{width:100%;min-height:46px;padding:10px;font:inherit;border:1px solid #ccdad7;border-radius:10px;background:white;color:#244b50}


.device-notice{padding:16px;border:1px solid #ccdad7;border-radius:12px}.device-notice label{display:flex;gap:12px;align-items:center}.device-notice input{width:20px;height:20px}.example-note,footer{font-size:14px}#cancel{width:100%;margin-top:12px}
[hidden]{display:none!important}#generationMode{width:100%;padding:12px;margin:8px 0 14px;font:inherit;border:1px solid #ccdad7;border-radius:10px;background:white;color:#244b50}


#artStyle{width:100%;min-height:46px;padding:10px;font:inherit;border:1px solid #ccdad7;border-radius:10px;background:white;color:#244b50}