:root{color-scheme:light;font-family:Segoe UI,ui-sans-serif,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(135deg,#fce4ec,#f3e5f5 40%,#e8eaf6);color:#333}#root{display:flex;flex-direction:column;align-items:center}.app{width:100%;max-width:900px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}h1{font-size:2rem;font-weight:700;color:#ad1457;text-shadow:0 1px 2px rgba(0,0,0,.08);letter-spacing:-.02em}.subtitle{color:#8e24aa;font-size:.95rem;margin-top:-.75rem}.stage{position:relative;width:280px;height:420px;background:linear-gradient(180deg,#fff9c4,#fff176);border-radius:1rem;border:3px solid #f9a825;box-shadow:0 8px 32px #0000001f;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage:before{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(180deg,transparent,rgba(249,168,37,.15));border-radius:0 0 .8rem .8rem}.doll{position:relative;width:160px;height:360px;z-index:1}.doll-part{position:absolute;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.doll-hair{top:0;left:50%;transform:translate(-50%);width:120px;height:80px;z-index:5;font-size:70px;line-height:1}.doll-head{top:30px;left:50%;transform:translate(-50%);width:80px;height:80px;border-radius:50%;background:#ffcc80;z-index:3;font-size:12px;flex-direction:column;gap:2px}.face-eyes{display:flex;gap:18px;font-size:16px;margin-top:10px}.face-mouth{font-size:14px;margin-top:2px}.doll-body{top:100px;left:50%;transform:translate(-50%);width:100px;height:130px;border-radius:30px 30px 20px 20px;background:#ffcc80;z-index:2}.doll-clothing{top:100px;left:50%;transform:translate(-50%);width:110px;height:140px;z-index:4;font-size:90px;pointer-events:none}.doll-accessory{top:15px;left:50%;transform:translate(-50%);z-index:6;font-size:36px;pointer-events:none}.doll-shoes{bottom:30px;left:50%;transform:translate(-50%);z-index:4;font-size:40px;pointer-events:none}.doll-arm-left{top:115px;left:10px;width:30px;height:80px;border-radius:15px;background:#ffcc80;z-index:1;transform:rotate(15deg)}.doll-arm-right{top:115px;right:10px;width:30px;height:80px;border-radius:15px;background:#ffcc80;z-index:1;transform:rotate(-15deg)}.doll-leg-left{bottom:0;left:40px;width:30px;height:90px;border-radius:15px;background:#ffcc80;z-index:1}.doll-leg-right{bottom:0;right:40px;width:30px;height:90px;border-radius:15px;background:#ffcc80;z-index:1}.selectors{width:100%;display:flex;flex-direction:column;gap:1rem}.selector-group{background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.75rem;padding:1rem;border:1px solid rgba(0,0,0,.06)}.selector-group h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:#7b1fa2;margin-bottom:.6rem}.selector-options{display:flex;flex-wrap:wrap;gap:.5rem}.selector-btn{width:56px;height:56px;border:2px solid #e0e0e0;border-radius:.6rem;background:#fff;cursor:pointer;font-size:28px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;position:relative}.selector-btn:hover{border-color:#ce93d8;transform:scale(1.08);box-shadow:0 2px 8px #0000001a}.selector-btn.active{border-color:#9c27b0;background:#f3e5f5;box-shadow:0 0 0 2px #9c27b040}.selector-btn.none-btn{font-size:14px;color:#999;font-weight:500}.reset-btn{background:linear-gradient(135deg,#ec407a,#ab47bc);color:#fff;border:none;padding:.7rem 2rem;border-radius:2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #ec407a4d}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ec407a66}.reset-btn:active{transform:translateY(0)}.btn-row{display:flex;gap:.75rem}.random-btn{background:linear-gradient(135deg,#42a5f5,#7e57c2);color:#fff;border:none;padding:.7rem 2rem;border-radius:2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #42a5f54d}.random-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #42a5f566}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}.sparkle{position:absolute;font-size:20px;animation:sparkle 1.5s ease-in-out infinite;pointer-events:none;z-index:10}@media(min-width:640px){.selectors{flex-direction:row;flex-wrap:wrap}.selector-group{flex:1;min-width:200px}}