/* One illustrated fashion-doll SVG is shared by creation, Home, and the compact portrait. */
.character {
  --skin: #eec8a6;
  --skin-line: #9f715f;
  --hair: #705344;
  --hair-dark: #4f3b39;
  --hair-light: #a7836a;
  --iris: #8a7050;
  --shirt: #d88f7b;
  --shirt-line: #a66860;
  --bottom-color: #708ba1;
  --bottom-line: #526e84;
  --bottom-seam: #a9bdc7;
  --shoe-line: #8b7167;
}
.character.skin-warm { --skin: #c99574; --skin-line: #835a4a; }
.character.skin-deep { --skin: #8c604d; --skin-line: #563d37; }
.character.hair-black { --hair: #383941; --hair-dark: #292b32; --hair-light: #73747a; }
.character.hair-blond { --hair: #d7b475; --hair-dark: #a58457; --hair-light: #f0d79e; }
.character.hair-auburn { --hair: #aa684f; --hair-dark: #824b3e; --hair-light: #d59678; }
.character.hair-silver { --hair: #a8a6ae; --hair-dark: #797782; --hair-light: #d7d3d9; }
.character.hair-rose { --hair: #be8292; --hair-dark: #945e70; --hair-light: #e3b3ba; }
.character.iris-green { --iris: #659079; }
.character.iris-blue { --iris: #698ca7; }
.character.iris-brown { --iris: #775846; }
.character.color-blue { --shirt: #83a9bf; --shirt-line: #5e849e; }
.character.color-yellow { --shirt: #e6bf75; --shirt-line: #b18d52; }
.character.color-lilac { --shirt: #b09cbc; --shirt-line: #887395; }
.character.color-mint { --shirt: #87b9a1; --shirt-line: #60927b; }
.character.color-rose { --shirt: #d898a9; --shirt-line: #ac7187; }
.character.bottom-shorts { --bottom-color: #a2a9aa; --bottom-line: #778488; --bottom-seam: #d5d7d0; }
.character.bottom-skirt { --bottom-color: #8c9e85; --bottom-line: #6b826b; --bottom-seam: #bad1ab; }
/* Store garments reuse the existing layered silhouettes with distinct palettes. */
.character.clothing-top-meadow-cardigan .layer-top { --shirt: #8eaf94; --shirt-line: #5e8068; }
.character.clothing-top-berry-hoodie .layer-top { --shirt: #ad7898; --shirt-line: #805a77; }
.character.clothing-top-ocean-tee .layer-top { --shirt: #6d9fba; --shirt-line: #477b99; }
.character.clothing-bottom-forest-jeans .layer-bottoms { --bottom-color: #587c70; --bottom-line: #3c6156; --bottom-seam: #91ad9b; }
.character.clothing-bottom-rose-skirt .layer-bottoms { --bottom-color: #ba8190; --bottom-line: #8e5d70; --bottom-seam: #e3b4bd; }
.character.clothing-shoes-mint-sneakers .shoes-sneakers path:nth-child(2),
.character.clothing-shoes-mint-sneakers .shoes-sneakers path:nth-child(5) { fill: #80b7a6; }
.character.clothing-shoes-cocoa-boots .shoes-boots > path:nth-child(-n+2) { fill: #9c7055; }
.character .avatar-art { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(2px 5px 2px #43544d34); }
.character .hair-back-long,
.character .hair-back-waves,
.character .hair-back-bob,
.character .hair-back-ponytail,
.character .hair-back-curly,
.character .hair-back-buns,
.character .hair-front-look,
.character .bottom-look,
.character .shoe-look,
.character .top-look,
.character .eye-look,
.character .accessory-look { display:none; }
.character .frame-shape,
.character .frame-face,
.character .brow-shape,
.character .mouth-shape { display:none; }
.character.frame-femme .frame-femme,
.character.frame-masc .frame-masc,
.character.frame-femme .brow-femme,
.character.frame-masc .brow-masc,
.character.frame-femme .mouth-femme,
.character.frame-masc .mouth-masc { display:inline; }
.character.frame-masc .layer-eyebrows { stroke-width:2.6; }
.character.frame-masc .layer-face ellipse { opacity:.14; }
.character.style-long .hair-back-long,
.character.style-long .hair-front-long,
.character.style-waves .hair-back-waves,
.character.style-waves .hair-front-waves,
.character.style-bob .hair-back-bob,
.character.style-bob .hair-front-bob,
.character.style-ponytail .hair-back-ponytail,
.character.style-ponytail .hair-front-ponytail,
.character.style-curly .hair-back-curly,
.character.style-curly .hair-front-curly,
.character.style-buns .hair-back-buns,
.character.style-buns .hair-front-buns,
.character.style-short .hair-front-short,
.character.bottom-jeans .bottom-jeans,
.character.bottom-shorts .bottom-shorts,
.character.bottom-skirt .bottom-skirt,
.character.shoes-sneakers .shoes-sneakers,
.character.shoes-boots .shoes-boots,
.character.shoes-flats .shoes-flats,
.character.shoes-sandals .shoes-sandals,
.character.top-sweater .top-sweater,
.character.top-tee .top-tee,
.character.top-hoodie .top-hoodie,
.character.top-jacket .top-jacket,
.character.top-overalls .top-overalls,
.character.top-dress .top-dress,
.character.eye-soft .eye-soft,
.character.eye-bright .eye-bright,
.character.eye-calm .eye-calm,
.character.accessory-hat .accessory-hat,
.character.accessory-scarf .accessory-scarf,
.character.accessory-bag .accessory-bag,
.character.accessory-crown .accessory-crown { display:inline; }
.character.top-dress .bottom-look { display:none; }
.avatar { position:absolute; left:50%; bottom:7px; width:200px; height:350px; transform:translateX(-50%); z-index:1; }
.studio-scene .avatar { bottom:7px; transform:translateX(-50%) scale(1.05); transform-origin:bottom center; filter:none; }
.portrait-scene { height:370px; }
.portrait-scene .avatar { bottom:7px; transform:translateX(-50%); transform-origin:bottom center; }
.character.mini-avatar { display:block; flex:none; width:35px; height:35px; position:relative; overflow:hidden; border:2px solid #d9bfb0; border-radius:50%; background:#f8eadb; font-size:initial; color:initial; }
.character.mini-avatar .avatar-art { width:100%; height:100%; filter:none; }
.swatch.mint { background:#87b9a1; }
.swatch.rose { background:#d898a9; }
.swatch.hair-silver { background:#a8a6ae; }
.swatch.hair-rose { background:#be8292; }
.swatch.eye-hazel { background:#8a7050; }
.swatch.eye-green { background:#659079; }
.swatch.eye-blue { background:#698ca7; }
.swatch.eye-brown { background:#775846; }
.create-content .option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.create-content .swatches { flex-wrap:wrap; }
.create-content .style-options span { min-height:34px; }
@media (max-width:650px) {
  .studio-scene .avatar { bottom:1px; transform:translateX(-50%) scale(.7); }
  .create-content .option-grid { gap:12px; }
  .create-content .style-options { gap:6px; }
  .create-content .style-options span { padding:7px 9px; }
}