*{box-sizing:border-box}body{margin:0;background:#f6f3ed;color:#34352f;font-family:Arial,sans-serif}main{max-width:980px;margin:auto;padding:30px 24px}header{text-align:center}header .eyebrow{letter-spacing:4px}h1{font-family:Georgia,serif;font-size:48px;font-weight:normal;letter-spacing:-2px;margin:8px 0}h1 span{color:#a6ac79;font-size:32px;margin-left:16px}p{font-size:14px;color:#797b70;line-height:1.6}header p{margin:0 0 24px}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px}nav{display:flex;justify-content:center;gap:12px;margin-bottom:24px}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #68834f;outline-offset:4px}.person{display:flex;text-align:left;align-items:center;gap:12px;border:1px solid #dfdfd4;background:transparent;border-radius:14px;padding:12px 22px;min-width:230px}.person.active{background:#e6ead8;border-color:#a5ae89}.person small,.item small{display:block;font-size:11px;color:#7a7d70;margin-top:6px}.portrait{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#4a493e;color:white;font-family:Georgia,serif}.portrait.audrey{background:#e7c28d;color:#634c39}.layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}.studio{position:relative;min-height:580px;background:#e9e8df;border-radius:120px 120px 20px 20px;overflow:hidden;padding:28px 24px 20px;text-align:center;background:radial-gradient(ellipse at 50% 50%,#f9f8f1,#e5e5d9)}.studio-label{font-size:9px;letter-spacing:2px;margin-top:5px;color:#777c6c}.studio-label span{margin-left:18px}#speech{position:relative;z-index:2;background:#fffef9;border:1px solid #e1e2d8;border-radius:18px;padding:14px 16px;max-width:310px;min-height:48px;margin:22px auto 0;font-size:14px;box-shadow:0 5px 14px #646b4910}#speech:after{content:'';position:absolute;bottom:-8px;left:48%;width:14px;height:14px;background:#fffef9;transform:rotate(45deg);border-right:1px solid #e1e2d8;border-bottom:1px solid #e1e2d8}.figure{width:240px;height:370px;position:relative;z-index:1;margin:8px auto 0;transform-origin:50% 90%}.figure svg{height:100%;width:100%;overflow:visible}.platform{width:230px;height:24px;border-radius:50%;background:#bdc3a877;margin:-12px auto 15px}.nameplate strong{display:block;font-family:Georgia,serif;font-size:22px;font-weight:normal}.nameplate span{display:block;font-size:12px;color:#7a7d6e;margin-top:8px}.wardrobe{background:#fffef9;border:1px solid #e4e3d9;border-radius:20px;padding:32px 26px;align-self:stretch}h2{font:normal 32px Georgia,serif;margin:10px 0}.wardrobe>p{margin-bottom:26px}.clothes{display:grid;gap:12px}.item{display:flex;align-items:center;gap:14px;background:#faf9f4;border:1px solid #e8e7de;border-radius:12px;padding:14px 12px;text-align:left;width:100%}.item:hover{background:#eeefdf}.item.selected{border-color:#94a174;background:#f0f3e7}.item strong{font-size:13px;font-weight:500}.check{margin-left:auto;color:#8a9470}.swatch{width:46px;height:52px;border-radius:8px;display:grid;place-items:center;font-size:32px;flex-shrink:0}.white{background:#eeece4;color:#fff;text-shadow:0 1px 2px #aaa}.denim{background:#dde6ed;color:#6889a7}.gray{background:#e8e7e4;color:#9b9e9f}.hint{display:flex;gap:12px;align-items:center;margin:24px 0;color:#8b9968}.hint p{font-size:12px}.reset{background:none;border:0;border-bottom:1px solid #a9ac9c;padding:5px 0;font-size:12px;color:#797d6d}footer{display:flex;justify-content:space-between;margin-top:20px;font-size:9px;letter-spacing:2px;color:#8b8e80}.angry{animation:none}.disgust{animation:none}.happy{animation:pose 1s 2}.happy .arm-left{animation:clap-left .35s 4;transform-origin:87px 141px}.happy .arm-right{animation:clap-right .35s 4;transform-origin:153px 141px}.calm{animation:nod .5s}@keyframes lean{50%{transform:translateX(10px) rotate(7deg)}}@keyframes pose{30%{transform:translateY(-9px) rotate(-4deg)}70%{transform:rotate(5deg)}}@keyframes clap-left{50%{transform:rotate(-60deg)}}@keyframes clap-right{50%{transform:rotate(60deg)}}@keyframes nod{50%{transform:translateY(4px)}}@media(max-width:640px){main{padding:22px 14px}h1{font-size:40px}.layout{grid-template-columns:1fr}nav{gap:8px}.person{min-width:0;flex:1;padding:10px;gap:8px}.person small{font-size:10px}.studio{min-height:550px}.wardrobe{padding:24px}footer{letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

nav{flex-wrap:wrap}.portrait.mia{background:#c9b68e;color:#584638}.blush{animation:blush-in 2s both}.shy{animation:shy-turn 2s both}.gentle{animation:nod .7s}@keyframes blush-in{0%,35%{opacity:0}100%{opacity:.65}}@keyframes shy-turn{0%,30%{transform:rotate(0)}100%{transform:translateY(4px) rotate(-3deg)}}@media(max-width:640px){.person{flex:1 1 140px}}

.figure{height:420px;width:260px}.figure svg{filter:drop-shadow(0 7px 5px #30231d30)}.studio{min-height:650px;background:#e9e8df}.studio-label,#speech,.figure,.platform,.nameplate{position:relative;z-index:2}#room{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}#room svg{width:100%;height:100%;display:block}.pink{background:#f5dbe5;color:#c77c9b}.olive{background:#e1e5d2;color:#71774b}.happy .arm-left,.happy .arm-right{animation:none}.clapping-left{animation:applause-left .4s 5;transform-origin:116px 150px}.clapping-right{animation:applause-right .4s 5;transform-origin:124px 150px}@keyframes applause-left{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}@keyframes applause-right{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}.shy .original-head{transform:rotate(-3deg);transform-origin:120px 105px}.character-head{display:none}
.sam-dislike .original-head,.sam-dislike .back-hair,.sam-dislike .head-accessory,.sam-dislike .hairstyle{animation:sam-dislike-head 1.2s ease-in-out;transform-origin:120px 92px}@keyframes sam-dislike-head{0%,100%{transform:rotate(0)}35%,70%{transform:translateX(-2px) rotate(-4deg)}}
.cute{animation:cute-bounce 1.2s ease-in-out}.cute .original-head,.cute .back-hair,.cute .head-accessory,.cute .hairstyle{animation:cute-head 1.2s ease-in-out;transform-origin:120px 92px}@keyframes cute-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}55%{transform:translateY(0)}75%{transform:translateY(-3px)}}@keyframes cute-head{0%,100%{transform:rotate(0)}30%,75%{transform:rotate(-5deg)}55%{transform:rotate(4deg)}}
.audrey-dislike{animation:audrey-indignation 1.35s ease-in-out}.audrey-dislike .original-head,.audrey-dislike .back-hair,.audrey-dislike .head-accessory,.audrey-dislike .hairstyle{animation:audrey-head-no 1.15s ease-in-out;transform-origin:120px 92px}@keyframes audrey-indignation{0%,100%{transform:translateX(0) rotate(0)}25%,70%{transform:translateX(3px) rotate(1.5deg)}}@keyframes audrey-head-no{0%,100%{transform:rotate(0)}22%{transform:translateX(-2px) rotate(-5deg)}48%{transform:translateX(2px) rotate(5deg)}72%{transform:translateX(-1px) rotate(-3deg)}}
.happy .hand-bag{animation:bag-clap .4s 5 ease-in-out}@keyframes bag-clap{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-3px) rotate(-3deg)}}
.boho{background:#e9dfc5;color:#85704d}.hotpink{background:#f3d5e1;color:#c57899}.tee{background:#e3ddd5;color:#746b61}
.silk{background:linear-gradient(135deg,#eeeaff,#aaa5cf,#faf8ff);color:#fff;text-shadow:0 1px 2px #777}.brown{background:#ead9c7;color:#896548}.sport{background:#dce1e5;color:#59636e}.blue{background:#dceff7;color:#65a9ca}.pearl{background:#f5f2e9;color:#b8d9e6}.gold{background:#fff0b9;color:#c89418}
.black{background:#dedede;color:#202124}.rabbit{background:#fff4f5;color:#d78d9b}
.hairdo{background:#eee3db;color:#705346;font-family:Georgia,serif}
.warm{background:#ead8ca;color:#93654f}.sand{background:#eee1c9;color:#9b815e}.bright{background:linear-gradient(135deg,#ff6b8f,#ffd74f,#64cde8);color:#fff}.look-actions{display:grid;grid-template-columns:1fr;gap:8px;margin:18px 0}.look-actions button{border:1px solid #aab18f;border-radius:10px;background:#eef1e5;padding:11px;font-size:12px}.look-actions button:hover{background:#dfe6cf}
.front-hair,.back-hair,.hairstyle{filter:drop-shadow(0 2px 1px #24181555) url(#hairDepth)}
.nameplate{display:inline-block;min-width:230px;padding:12px 20px 11px;border:1px solid #ffffffbb;border-radius:16px;background:#fffdf0e8;box-shadow:0 6px 18px #24191240;backdrop-filter:blur(5px)}.nameplate strong{color:#2f302b;text-shadow:0 1px #fff}.nameplate span{color:#55594d;font-weight:600}
.braid{transform-box:view-box;transform-origin:147px 54px;transform:translateX(-10px)}.braid-sam{transform:translateX(-10px) scale(.84)}.braid-mia{transform:translateX(-10px) scaleX(.9) scaleY(.7)}
.category-tabs{display:flex;gap:6px;margin:18px 0 16px;padding-bottom:10px;overflow-x:auto;border-bottom:1px solid #deddd3}.category-tab{flex:0 0 auto;border:0;border-radius:999px;background:#f1efe8;padding:9px 12px;color:#818276;font-size:10px;letter-spacing:.5px}.category-tab.active{background:#7d8665;color:#fff}.wardrobe-section{margin-top:0}.category-panel[hidden]{display:none}.wardrobe-section h3{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #deddd3;color:#696c61;font:600 10px Arial,sans-serif;letter-spacing:2.2px;text-transform:uppercase}.empty-section{min-height:130px;padding:24px 18px;border:1px dashed #d9d7ca;border-radius:12px;background:#faf9f4;text-align:center}.empty-section h3{margin:0;border:0;padding:0}.empty-section p{margin:12px 0 0;font-size:11px;color:#aaa99e}.wardrobe{max-height:650px;overflow-y:auto;scrollbar-color:#c6c5b9 transparent;scrollbar-width:thin}