.character-choice{display:grid;grid-template-columns:minmax(200px,.85fr) minmax(380px,1.35fr);align-items:center;gap:12px 25px;background:#f8faf1;border:1px solid #dee6d2;border-radius:15px;padding:18px 22px;margin-bottom:22px}.choice-intro h2{font:500 20px/1.5 Georgia,'Songti SC','SimSun',serif;margin:6px 0}.choice-intro p{font-size:10px;color:#96a18a;margin:0}.character-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.character-option{display:flex;align-items:center;gap:12px;padding:10px 12px;text-align:left;min-width:0;background:#fffef9;border:1px solid #e0e6d5;border-radius:12px}.character-option strong{display:block;font-size:15px;font-weight:500;white-space:nowrap}.character-option small{font-size:9px;color:#98a68b;font-weight:400;margin-left:4px}.character-option em{display:block;font-size:9px;color:#94a084;font-style:normal;white-space:nowrap;margin-top:3px}.character-option>b{font-size:17px;font-weight:400;color:#a1b18c;margin-left:auto}.character-option.selected{box-shadow:0 0 0 1px #a6bd8e inset}.character-option.selected>b{font-size:0}.character-option.selected>b:after{content:'✓';font-size:15px}.choice-portrait{display:block;flex-shrink:0;position:relative;width:53px;height:61px;background:#e9efdf;border-radius:35% 35% 10px 10px;overflow:hidden}.mini-head{position:absolute;top:12px;left:15px;width:25px;height:32px;background:#efd0b2;border-radius:40% 40% 37% 37%;z-index:2}.mini-hair{position:absolute;top:8px;left:12px;width:31px;height:36px;background:#3e493d;border-radius:45% 45% 25% 25%}.mini-hair:after{content:'';position:absolute;left:0;top:0;width:31px;height:18px;background:#3e493d;z-index:4;border-radius:45% 45% 40% 2%;clip-path:polygon(0 0,100% 0,100% 65%,87% 50%,60% 70%,50% 46%,12% 100%,0 92%)}.mini-eyes{position:absolute;top:27px;left:21px;width:3px;height:2px;border-radius:50%;background:#53604d;z-index:5;box-shadow:11px 0 #53604d}.mini-shirt{position:absolute;bottom:-8px;left:5px;width:44px;height:27px;background:#7b9470;border-radius:15px 15px 0 0;z-index:3}.female-preview{background:#f0e7e2}.female-preview .mini-hair{height:50px;left:10px;width:35px;border-radius:45% 45% 12% 12%;background:#4b413c}.female-preview .mini-hair:after{background:#4b413c;width:35px;clip-path:polygon(0 0,100% 0,100% 96%,85% 70%,65% 35%,20% 90%,0 100%)}.female-preview .mini-head{border-radius:45% 45% 48% 48%;width:24px;left:16px}.female-preview .mini-shirt{width:40px;left:7px;background:#a98f92}.gender-neutral{grid-column:2;padding:0;border:0;background:transparent;text-align:left;font-size:9px;color:#9aa58d;justify-self:start}.gender-neutral:hover{background:none;text-decoration:underline}.portrait-scene[data-gender=male] .face{left:62px;width:122px;border-radius:42% 42% 32% 32%;height:147px}.portrait-scene[data-gender=male] .brow{height:4px;width:21px;opacity:.8}.portrait-scene[data-gender=male] .brow-left{left:23px}.portrait-scene[data-gender=male] .brow-right{right:23px}.portrait-scene[data-gender=male] .eye-left{left:27px}.portrait-scene[data-gender=male] .eye-right{right:27px}.portrait-scene[data-gender=male] .nose{left:59px}.portrait-scene[data-gender=male] .mouth{left:52px;width:19px}.portrait-scene[data-gender=male] .body-clothes{left:11px;width:224px;border-radius:63px 63px 0 0}.portrait-scene[data-gender=male] .hair-front{left:57px;width:133px;clip-path:polygon(0 0,100% 0,100% 88%,87% 67%,81% 40%,65% 69%,57% 42%,35% 84%,13% 93%,9% 70%,0 100%)}.portrait-scene[data-gender=male][data-hair=short] .hair-back{left:54px;width:138px}.portrait-scene[data-gender=female]{--hair:#494039}.portrait-scene[data-gender=female] .face{left:68px;width:110px;border-radius:45% 45% 48% 48%}.portrait-scene[data-gender=female] .brow{height:2px;width:20px;opacity:.7}.portrait-scene[data-gender=female] .eye{width:14px;height:7px;box-shadow:0 -1px #505045}.portrait-scene[data-gender=female] .eye-left{left:21px}.portrait-scene[data-gender=female] .eye-right{right:21px}.portrait-scene[data-gender=female] .mouth{left:46px;border-color:#b17673;width:19px}.portrait-scene[data-gender=female] .nose{left:52px}.portrait-scene[data-gender=female] .hair-front{left:58px;width:131px;transform:rotate(-3deg);clip-path:polygon(0 0,100% 0,100% 100%,86% 82%,71% 38%,63% 45%,38% 79%,17% 93%,8% 95%,0 100%)}.portrait-scene[data-gender=female][data-hair=long] .hair-back{background:linear-gradient(90deg,#39352f,var(--hair),#39352f);border-radius:48% 48% 12% 12%;height:265px}.portrait-scene[data-gender=female] .body-clothes{left:25px;width:196px;border-radius:65px 65px 0 0}.portrait-scene[data-gender=female] .neck{width:32px;left:107px}.portrait-scene[data-gender=female] .earring{display:block;position:absolute;right:59px;top:139px;width:6px;height:9px;border-radius:50%;background:#cbbb91;z-index:6}.portrait-scene[data-gender=female][data-outfit=punk] .earring{border:2px solid #c3caca;width:12px;height:19px;background:none;right:56px}.portrait-scene[data-gender=female][data-outfit=ancient] .body-clothes{left:10px;width:226px}.portrait-scene[data-gender=male][data-outfit=ancient] .body-clothes{left:4px;width:238px}@media(max-width:1150px){.character-choice{grid-template-columns:1fr 1.6fr;padding:16px;gap:10px 15px}.character-option{gap:7px;padding:9px}.character-option strong{font-size:13px}.character-option em{font-size:8px}.choice-intro h2{font-size:18px}.choice-portrait{width:45px}.mini-head{left:11px}.mini-hair{left:8px}.mini-eyes{left:17px}.mini-shirt{left:1px}.female-preview .mini-head{left:12px}.female-preview .mini-hair{left:6px}.female-preview .mini-shirt{left:3px}}@media(max-width:780px){.character-choice{grid-template-columns:1fr;padding:18px}.gender-neutral{grid-column:1}.character-option{padding:10px 12px}.choice-intro h2{font-size:20px}.character-option em{font-size:9px}}@media(max-width:400px){.character-options{gap:7px}.character-option{gap:6px;padding:9px 7px}.character-option strong{font-size:13px}.character-option small{font-size:8px;margin-left:2px}.character-option em{font-size:8px;white-space:normal}.character-option>b{display:none}.choice-portrait{width:39px;height:57px}.mini-head{left:8px}.mini-hair{left:5px}.mini-eyes{left:14px}.mini-shirt{left:-2px}.female-preview .mini-head{left:9px}.female-preview .mini-hair{left:3px}.female-preview .mini-shirt{left:0}.character-choice{padding:16px}.choice-intro h2{font-size:19px}.choice-intro p{font-size:9px}}

/* Distinct garment construction for each character and each wardrobe. */
.portrait-scene{height:385px}.portrait{height:355px}
.body-clothes>span{position:absolute;display:none;pointer-events:none}
.portrait-scene[data-gender=male] .body-clothes{top:203px;left:5px;width:236px;height:166px;border-radius:43px 43px 8px 8px;box-shadow:inset 18px 0 #00000009,inset -18px 0 #00000010}
.portrait-scene[data-gender=female] .body-clothes{top:202px;left:23px;width:200px;height:169px;border-radius:57px 57px 8px 8px;box-shadow:none}
.portrait-scene[data-gender=male][data-outfit=modern] .body-clothes{background:color-mix(in srgb,var(--cloth) 75%,#263d34);border-top:2px solid #ffffff25}
.portrait-scene[data-gender=male][data-outfit=modern] .wardrobe-shirt{display:block;left:79px;top:-4px;width:79px;height:168px;border-radius:18px 18px 0 0;background:var(--accent);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);box-shadow:inset 0 8px #00000009}
.portrait-scene[data-gender=male][data-outfit=modern] .collar{z-index:3;top:-4px;width:33px;height:153px;background:color-mix(in srgb,var(--cloth) 50%,#263c30);transform:none;clip-path:polygon(0 0,65% 5%,100% 100%,35% 100%);border-right:2px solid #a7b7a080}
.portrait-scene[data-gender=male][data-outfit=modern] .left-collar{left:54px}
.portrait-scene[data-gender=male][data-outfit=modern] .right-collar{left:auto;right:54px;transform:scaleX(-1)}
.portrait-scene[data-gender=male][data-outfit=modern] .necklace{display:none}
.portrait-scene[data-gender=male][data-outfit=modern] .wardrobe-pocket{display:block;left:26px;top:49px;width:38px;height:32px;border:1px solid #e1e9d83d;border-radius:0 0 8px 8px;background:#ffffff06}
.portrait-scene[data-gender=male][data-outfit=modern] .wardrobe-pocket:before{content:'';position:absolute;left:0;right:0;top:4px;border-top:3px solid #d4dec68a}
.portrait-scene[data-gender=male][data-outfit=modern] .wardrobe-pin{display:block;right:37px;top:38px;width:8px;height:8px;border:2px solid #c5cba5;border-radius:50%}
.portrait-scene[data-gender=male][data-outfit=modern] .jacket-detail{z-index:4;left:83px;top:19px;height:125px;transform:rotate(-5deg);border-left:1px dashed #c7d2b18f}
.portrait-scene[data-gender=male][data-outfit=modern] .wardrobe-sleeve{display:block;top:26px;width:29px;height:125px;border-bottom:12px solid #304d3e60;border-radius:15px 15px 0 0;border-right:1px solid #ffffff18}
.portrait-scene[data-gender=male][data-outfit=modern] .sleeve-left{left:0;transform:rotate(5deg)}
.portrait-scene[data-gender=male][data-outfit=modern] .sleeve-right{right:0;transform:rotate(-5deg)}
.portrait-scene[data-gender=female][data-outfit=modern] .body-clothes{background:var(--accent);border-radius:58px 58px 12px 12px}
.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-shirt{display:block;left:43px;top:38px;width:114px;height:135px;background:var(--cloth);border-radius:12px 12px 0 0;box-shadow:inset 9px 0 #ffffff0a,inset -10px 0 #00000009}
.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-shirt:before,.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-shirt:after{content:'';position:absolute;top:-32px;width:14px;height:60px;background:var(--cloth);border-radius:4px;box-shadow:inset 2px 0 #ffffff18}
.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-shirt:before{left:3px;transform:rotate(-8deg)}
.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-shirt:after{right:3px;transform:rotate(8deg)}
.portrait-scene[data-gender=female][data-outfit=modern] .collar{z-index:4;top:-3px;width:34px;height:33px;background:color-mix(in srgb,var(--accent) 85%,white);clip-path:none;transform:none;box-shadow:0 2px 0 #6b77521a}
.portrait-scene[data-gender=female][data-outfit=modern] .left-collar{left:65px;border-radius:4px 3px 23px 23px;transform:rotate(14deg)}
.portrait-scene[data-gender=female][data-outfit=modern] .right-collar{right:65px;border-radius:3px 4px 23px 23px;transform:rotate(-14deg)}
.portrait-scene[data-gender=female][data-outfit=modern] .necklace{z-index:5;left:86px;top:20px;width:28px;height:20px;font-size:0;background:color-mix(in srgb,var(--cloth) 70%,#485239);clip-path:polygon(0 0,50% 35%,100% 0,100% 70%,60% 58%,70% 100%,48% 85%,30% 100%,40% 58%,0 70%)}
.portrait-scene[data-gender=female][data-outfit=modern] .jacket-detail{left:97px;top:55px;height:94px;border-left:1px solid #ffffff24;transform:none;z-index:3}
.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-belt{display:block;z-index:3;left:41px;top:100px;width:118px;height:7px;background:color-mix(in srgb,var(--cloth) 70%,#42583b);border-radius:4px}
.portrait-scene[data-gender=female][data-outfit=modern] .wardrobe-sleeve{display:block;top:24px;width:38px;height:110px;background:var(--accent);border-radius:55% 55% 40% 40%;box-shadow:inset -5px 0 #9b9c7c0e;border-bottom:10px solid #c8cbb340}
.portrait-scene[data-gender=female][data-outfit=modern] .sleeve-left{left:1px;transform:rotate(6deg)}
.portrait-scene[data-gender=female][data-outfit=modern] .sleeve-right{right:1px;transform:rotate(-6deg)}
.portrait-scene[data-gender=male][data-outfit=ancient] .body-clothes{left:-4px;width:254px;background:color-mix(in srgb,var(--cloth) 80%,#304737);border-radius:35px 35px 0 0}
.portrait-scene[data-gender=male][data-outfit=ancient] .wardrobe-shirt{display:block;left:100px;top:-8px;width:52px;height:148px;background:var(--accent);clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}
.portrait-scene[data-gender=male][data-outfit=ancient] .collar{z-index:3;top:-4px;height:128px;width:44px;transform:none;background:color-mix(in srgb,var(--accent) 75%,#b8be9f)}
.portrait-scene[data-gender=male][data-outfit=ancient] .left-collar{left:72px;clip-path:polygon(0 0,35% 0,100% 100%,65% 100%)}
.portrait-scene[data-gender=male][data-outfit=ancient] .right-collar{right:63px;clip-path:polygon(65% 0,100% 0,35% 100%,0 100%)}
.portrait-scene[data-gender=male][data-outfit=ancient] .wardrobe-belt{display:block;z-index:5;left:30px;top:112px;width:194px;height:18px;border:2px solid #b7be9866;background:#40533e;border-radius:4px}
.portrait-scene[data-gender=male][data-outfit=ancient] .wardrobe-belt:after{content:'';position:absolute;top:2px;left:83px;width:18px;height:10px;border:2px solid #cbbd89;border-radius:2px}
.portrait-scene[data-gender=male][data-outfit=ancient] .necklace{font-size:0;z-index:6;left:163px;top:125px;width:12px;height:18px;border-radius:50%;border:2px solid #b7bc8f;background:#879e77}
.portrait-scene[data-gender=male][data-outfit=ancient] .necklace:after{content:'';position:absolute;left:3px;top:16px;width:3px;height:20px;background:#c2b07d;box-shadow:3px 0 #c2b07d}
.portrait-scene[data-gender=male][data-outfit=ancient] .jacket-detail{display:none}
.portrait-scene[data-gender=male][data-outfit=ancient] .wardrobe-sleeve{display:block;top:27px;width:43px;height:122px;background:#ffffff08;border-bottom:23px solid #314b3d88;border-radius:15px 15px 2px 2px}
.portrait-scene[data-gender=male][data-outfit=ancient] .sleeve-left{left:0;transform:rotate(7deg)}
.portrait-scene[data-gender=male][data-outfit=ancient] .sleeve-right{right:0;transform:rotate(-7deg)}
.portrait-scene[data-gender=female][data-outfit=ancient] .body-clothes{left:5px;width:236px;background:var(--accent);border-radius:40px 40px 0 0}
.portrait-scene[data-gender=female][data-outfit=ancient] .wardrobe-shirt{display:block;left:40px;top:64px;width:156px;height:110px;background:repeating-linear-gradient(95deg,var(--cloth) 0,var(--cloth) 12px,color-mix(in srgb,var(--cloth) 75%,#314333) 13px,var(--cloth) 15px);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.portrait-scene[data-gender=female][data-outfit=ancient] .collar{z-index:3;top:-4px;width:35px;height:80px;background:color-mix(in srgb,var(--cloth) 40%,var(--accent));transform:none}
.portrait-scene[data-gender=female][data-outfit=ancient] .left-collar{left:79px;clip-path:polygon(0 0,35% 0,100% 100%,60% 100%)}
.portrait-scene[data-gender=female][data-outfit=ancient] .right-collar{right:75px;clip-path:polygon(65% 0,100% 0,40% 100%,0 100%)}
.portrait-scene[data-gender=female][data-outfit=ancient] .wardrobe-belt{display:block;left:53px;top:61px;width:130px;height:13px;background:color-mix(in srgb,var(--cloth) 65%,#435339);border-radius:4px;z-index:5}
.portrait-scene[data-gender=female][data-outfit=ancient] .wardrobe-belt:before{content:'';position:absolute;left:48px;top:2px;width:34px;height:16px;background:var(--accent);clip-path:polygon(0 0,50% 25%,100% 0,100% 80%,55% 50%,45% 50%,0 80%)}
.portrait-scene[data-gender=female][data-outfit=ancient] .wardrobe-belt:after{content:'';position:absolute;left:59px;top:12px;width:7px;height:72px;background:var(--accent);transform:rotate(9deg);box-shadow:10px 0 color-mix(in srgb,var(--accent) 80%,white)}
.portrait-scene[data-gender=female][data-outfit=ancient] .necklace{display:none}
.portrait-scene[data-gender=female][data-outfit=ancient] .wardrobe-pin{display:block;z-index:5;left:75px;top:32px;width:11px;height:11px;border:2px solid #c2b57f;border-radius:4px;background:#d6c99e;transform:rotate(45deg)}
.portrait-scene[data-gender=female][data-outfit=ancient] .wardrobe-sleeve{display:block;top:13px;width:51px;height:139px;background:var(--accent);border-bottom:9px solid color-mix(in srgb,var(--cloth) 30%,var(--accent));border-radius:30px 30px 9px 9px;box-shadow:inset -2px 0 #93a17b15}
.portrait-scene[data-gender=female][data-outfit=ancient] .sleeve-left{left:0;transform:rotate(9deg)}
.portrait-scene[data-gender=female][data-outfit=ancient] .sleeve-right{right:0;transform:rotate(-9deg)}
.portrait-scene[data-gender=female][data-outfit=ancient] .jacket-detail{display:none}
.portrait-scene[data-gender=male][data-outfit=punk] .body-clothes{background:#2f373b;border-radius:32px 32px 0 0;border-top:3px solid #a3aeba44}
.portrait-scene[data-gender=male][data-outfit=punk] .wardrobe-shirt{display:block;left:87px;top:0;width:69px;height:160px;background:#b5c0b1;clip-path:polygon(0 0,80% 0,100% 100%,0 100%)}
.portrait-scene[data-gender=male][data-outfit=punk] .collar{top:-4px;z-index:3;width:72px;height:103px;background:#424e50;border-bottom:2px solid #a7b2af;transform:none}
.portrait-scene[data-gender=male][data-outfit=punk] .left-collar{left:34px;clip-path:polygon(0 0,65% 0,100% 88%,47% 100%,68% 52%)}
.portrait-scene[data-gender=male][data-outfit=punk] .right-collar{right:32px;clip-path:polygon(35% 0,100% 0,32% 48%,50% 100%,0 90%)}
.portrait-scene[data-gender=male][data-outfit=punk] .jacket-detail{z-index:4;top:39px;left:142px;height:125px;border-left:3px solid #c0c7c4;transform:rotate(16deg)}
.portrait-scene[data-gender=male][data-outfit=punk] .wardrobe-pin{display:block;top:18px;left:28px;width:5px;height:5px;background:#bfc7c4;box-shadow:12px 3px #bfc7c4,24px 7px #bfc7c4,151px 0 #bfc7c4,139px 3px #bfc7c4,127px 7px #bfc7c4;border-radius:1px;z-index:5}
.portrait-scene[data-gender=male][data-outfit=punk] .wardrobe-pocket{display:block;left:31px;top:72px;width:43px;height:29px;border-top:3px solid #b7c2bf;border-bottom:1px solid #778b8450;transform:rotate(-10deg)}
.portrait-scene[data-gender=male][data-outfit=punk] .wardrobe-chain{display:block;left:35px;top:100px;width:85px;height:32px;border:2px dashed #aebdb7;border-top:none;border-radius:0 0 50% 50%;z-index:5}
.portrait-scene[data-gender=male][data-outfit=punk] .necklace{top:12px;left:112px;z-index:4;color:#d1dad5;font-size:13px}
.portrait-scene[data-gender=female][data-outfit=punk] .body-clothes{background:repeating-linear-gradient(0deg,transparent 0,transparent 17px,#c3cdb22b 18px,#c3cdb22b 20px),repeating-linear-gradient(90deg,#414d46 0,#414d46 18px,#74806a 19px,#74806a 22px);border-radius:44px 44px 0 0}
.portrait-scene[data-gender=female][data-outfit=punk] .body-clothes:before{content:'';position:absolute;left:0;right:0;top:0;height:106px;background:#373b45;border-radius:44px 44px 8px 8px;z-index:1;box-shadow:0 4px 0 #bbc3b5}
.portrait-scene[data-gender=female][data-outfit=punk] .wardrobe-shirt{display:block;left:73px;top:-5px;width:55px;height:106px;background:var(--accent);z-index:2;border-radius:12px 12px 0 0}
.portrait-scene[data-gender=female][data-outfit=punk] .collar{z-index:3;top:-3px;width:37px;height:51px;transform:none;background:var(--cloth);border-bottom:2px solid #c0c9bd;clip-path:polygon(0 0,75% 0,100% 100%,0 70%)}
.portrait-scene[data-gender=female][data-outfit=punk] .left-collar{left:47px}
.portrait-scene[data-gender=female][data-outfit=punk] .right-collar{right:47px;transform:scaleX(-1)}
.portrait-scene[data-gender=female][data-outfit=punk] .necklace{display:block;z-index:5;left:93px;top:16px;width:13px;height:76px;font-size:0;background:#3f484b;clip-path:polygon(20% 0,80% 0,70% 16%,100% 85%,50% 100%,0 85%,30% 16%)}
.portrait-scene[data-gender=female][data-outfit=punk] .jacket-detail{z-index:4;left:57px;top:55px;height:45px;border-left:2px solid #c0c9c5;transform:rotate(-12deg)}
.portrait-scene[data-gender=female][data-outfit=punk] .wardrobe-belt{display:block;z-index:5;left:22px;top:112px;width:155px;height:12px;background:#303a34;border:1px solid #acb7aa;border-radius:3px}
.portrait-scene[data-gender=female][data-outfit=punk] .wardrobe-belt:after{content:'';position:absolute;left:68px;top:1px;width:20px;height:8px;border:2px solid #c6cfbd}
.portrait-scene[data-gender=female][data-outfit=punk] .wardrobe-chain{display:block;right:19px;top:69px;width:48px;height:26px;border:2px dashed #bdc6c4;border-top:none;border-radius:0 0 50% 50%;z-index:5}
.portrait-scene[data-gender=female][data-outfit=punk] .wardrobe-pin{display:block;left:29px;top:24px;width:6px;height:6px;border-radius:50%;background:#b6c2bd;box-shadow:0 12px #b6c2bd;z-index:5}
.male-preview .mini-shirt{background:linear-gradient(90deg,#5c715b 0 36%,#ece8d2 37% 63%,#5c715b 64%);border-radius:10px 10px 0 0}
.female-preview .mini-shirt{background:linear-gradient(90deg,#ede6d4 0 23%,#899779 24% 76%,#ede6d4 77%);border-radius:16px 16px 0 0}
@media(max-width:600px){.portrait-scene{height:340px}.portrait{height:340px}}
.portrait-scene .scene-caption{top:12px;bottom:auto;left:auto;right:14px;transform:none;font-size:8px;padding:5px 9px}.portrait-scene .scene-caption .live-dot{width:4px;height:4px}@media(max-width:600px){.portrait-scene .scene-caption{top:6px;right:9px;padding:4px 8px}}