:root{
  --ink:#2f3650;--muted:#7c849a;--line:#e7e8f1;--panel:rgba(255,255,255,.92);--shadow:0 28px 70px rgba(60,74,120,.18);
  --pink:#ff9fc8;--violet:#a89cff;--blue:#9ddcff;--cream:#fff7ee;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;color:var(--ink);background:#c8eeff}button,input{font:inherit}button{cursor:pointer}
body:before{content:"";position:fixed;inset:0;background:
radial-gradient(circle at 14% 12%,rgba(255,255,255,.8),transparent 22%),
radial-gradient(circle at 82% 20%,rgba(255,205,229,.48),transparent 24%),
linear-gradient(180deg,#a7e0ff 0%,#ddf6ff 56%,#f8e9ff 100%);z-index:-2}
body:after{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.7) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.28;z-index:-1}
.hidden{display:none!important}.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.85);box-shadow:0 12px 32px rgba(58,83,130,.12)}
.topbar{position:fixed;z-index:20;top:max(14px,env(safe-area-inset-top));left:18px;right:18px;height:62px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:9px 12px 9px 16px}.brand{display:flex;align-items:center;gap:11px}.brand-orb{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#fff,#efe8ff);font-size:20px;color:#8d82ee;box-shadow:0 8px 18px rgba(107,100,195,.16)}.brand strong{display:block;font-size:18px;line-height:1}.brand span{display:block;font-size:10px;letter-spacing:.12em;color:#8990a4;font-weight:900;margin-top:3px}.top-actions{display:flex;gap:8px}.icon-btn,.soft-btn{border:0;background:white;border-radius:14px;height:40px;padding:0 13px;font-weight:800;color:#566077;box-shadow:0 6px 18px rgba(58,74,120,.12)}.icon-btn{width:40px;padding:0}
main{width:100%;height:100%}.creator-shell{position:absolute;inset:92px 18px 18px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:18px;max-width:1280px;margin:0 auto}.panel{background:var(--panel);border:1px solid rgba(255,255,255,.92);border-radius:30px;box-shadow:var(--shadow)}.creator-left{padding:26px 28px;overflow:auto}.creator-heading h1{margin:0 0 8px;font-size:clamp(29px,3vw,42px);letter-spacing:-.03em}.creator-heading p{margin:0;color:var(--muted);line-height:1.55}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:10px!important;font-weight:900;color:#9d8eea!important;margin-bottom:8px!important}.gender-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.gender-card{border:1px solid var(--line);background:#fbfbfe;border-radius:20px;padding:15px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;text-align:left;gap:2px 10px;color:var(--ink);transition:.2s}.gender-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(82,91,140,.09)}.gender-card.active{border-color:#a99df7;box-shadow:0 0 0 3px rgba(169,157,247,.18);background:linear-gradient(135deg,#fff,#f8f5ff)}.gender-emoji{grid-row:1/3;font-size:31px;align-self:center}.gender-card b{font-size:14px}.gender-card small{color:#9097aa}.tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}.tabs button{border:0;background:#f5f6fa;color:#747d93;border-radius:12px;padding:9px 13px;font-size:12px;font-weight:900}.tabs button.active{background:#eeeaff;color:#7567dd}.options-panel{padding:18px 0 6px;display:grid;gap:18px}.option-group h3{margin:0 0 9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#81899e}.choice-grid{display:flex;flex-wrap:wrap;gap:9px}.choice{border:1px solid #e3e5ee;background:white;border-radius:14px;padding:10px 12px;font-size:12px;font-weight:800;color:#586177;min-width:48px}.choice.active{border-color:#a99cf6;box-shadow:0 0 0 3px rgba(169,156,246,.17);color:#6b5bd5}.swatch{width:36px;height:36px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #d9dce7}.swatch.active{box-shadow:0 0 0 3px #9f93f0}.name-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.name-row label{display:grid;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#81899e;font-weight:900}.name-row input{border:1px solid var(--line);background:white;border-radius:14px;padding:13px 14px;font-size:15px;outline:none}.name-row input:focus{border-color:#a99cf6;box-shadow:0 0 0 3px rgba(169,156,246,.15)}.primary{border:0;border-radius:16px;padding:13px 18px;background:linear-gradient(135deg,#ff94c2,#9b95ff);color:white;font-weight:900;box-shadow:0 12px 26px rgba(174,110,190,.24)}
.preview-card{padding:18px;display:flex;flex-direction:column;min-height:0}.preview-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:900;color:#687187}.pill{background:#f1edff;color:#7669d5;padding:7px 10px;border-radius:12px;font-size:11px}.preview-stage{position:relative;flex:1;min-height:440px;border-radius:24px;overflow:hidden;background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.88),transparent 24%),linear-gradient(180deg,#c6edff 0 58%,#c7df9b 58% 100%)}.preview-stage:before{content:"";position:absolute;left:8%;right:8%;bottom:21%;height:13%;border-radius:50%;background:#b2d783;opacity:.75}.preview-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.45) 49%,transparent 50%);opacity:.12}.preview-shadow{position:absolute;width:164px;height:42px;border-radius:50%;background:rgba(78,99,89,.18);left:50%;bottom:14%;transform:translateX(-50%);filter:blur(3px)}.character-host{position:absolute;left:50%;bottom:10%;width:270px;height:410px;transform:translateX(-50%);animation:idleBob 3s cubic-bezier(.4,0,.2,1) infinite}.preview-tip{padding:12px 8px 0;color:#767f94;font-size:12px;line-height:1.5}@keyframes idleBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
.char-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 15px 18px rgba(48,62,96,.15))}.char-eye{transform-box:fill-box;transform-origin:center}.char-blush{opacity:.58}.char-mouth{fill:none;stroke:#855b64;stroke-width:2.8;stroke-linecap:round}.char-body{transform-origin:115px 255px}.hair-sway{transform-box:fill-box;transform-origin:50% 12%}.accessory-float{transform-box:fill-box;transform-origin:center}.cloth-stitch{fill:none;stroke-linecap:round;stroke-linejoin:round}.walking .char-body{animation:walkBody .35s ease-in-out infinite alternate}.walking .leg-left{animation:legL .35s ease-in-out infinite alternate;transform-origin:101px 284px}.walking .leg-right{animation:legR .35s ease-in-out infinite alternate;transform-origin:129px 284px}.walking .arm-left{animation:armL .35s ease-in-out infinite alternate;transform-origin:82px 220px}.walking .arm-right{animation:armR .35s ease-in-out infinite alternate;transform-origin:148px 220px}@keyframes walkBody{from{transform:translateY(0)}to{transform:translateY(-3px)}}@keyframes legL{from{transform:rotate(5deg)}to{transform:rotate(-12deg)}}@keyframes legR{from{transform:rotate(-12deg)}to{transform:rotate(5deg)}}@keyframes armL{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}@keyframes armR{from{transform:rotate(8deg)}to{transform:rotate(-6deg)}}
.test-scene{position:absolute;inset:0;overflow:hidden}.test-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.scene-banner{position:absolute;z-index:4;left:18px;top:92px;border-radius:18px;padding:12px 16px;display:flex;gap:22px;align-items:center}.scene-banner small{display:block;color:#8991a3;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.scene-banner strong{font-size:17px}.scene-help{font-size:11px;color:#747d91}.scene-card{position:absolute;z-index:4;right:18px;top:92px;width:285px;border-radius:20px;padding:14px 16px}.scene-card b{display:block;margin:5px 0 4px}.scene-card p{font-size:11px;line-height:1.45;color:#7d8496;margin:0}.scene-badge{font-size:9px;font-weight:900;letter-spacing:.11em;color:#786bd4}.mobile-joystick{display:none;position:absolute;z-index:5;left:22px;bottom:26px;width:108px;height:108px;border-radius:50%;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(10px);touch-action:none}.mobile-joystick:before{content:"";position:absolute;width:42px;height:42px;border-radius:50%;background:rgba(129,138,170,.15);left:33px;top:33px}.mobile-joystick>div{position:absolute;width:46px;height:46px;border-radius:50%;background:white;left:31px;top:31px;box-shadow:0 8px 18px rgba(64,76,120,.18)}.toast{position:fixed;z-index:50;left:50%;bottom:26px;transform:translateX(-50%);background:#31394e;color:white;padding:11px 16px;border-radius:14px;font-size:12px;font-weight:800;box-shadow:0 14px 30px rgba(35,42,63,.22)}
@media(max-width:900px){.creator-shell{grid-template-columns:1fr;overflow:auto}.preview-card{min-height:540px}.creator-left{overflow:visible}.creator-shell{padding-bottom:18px}.topbar{left:10px;right:10px}.scene-card{display:none}.scene-banner{right:10px;left:10px;top:88px;justify-content:space-between}.mobile-joystick{display:block}}
@media(max-width:620px){.creator-shell{inset:84px 10px 10px}.creator-left{padding:20px 16px}.gender-switch{grid-template-columns:1fr 1fr}.gender-card{grid-template-columns:34px 1fr;padding:12px}.gender-emoji{font-size:24px}.name-row{grid-template-columns:1fr}.preview-stage{min-height:430px}.character-host{width:250px;height:385px;bottom:9%}.brand span{font-size:8px}.soft-btn{padding:0 10px}}

/* Premium character motion */
.preview-stage .char-body{animation:premiumBreath 3.2s cubic-bezier(.42,0,.38,1) infinite;transform-origin:115px 255px}
.preview-stage .char-eye{animation:premiumBlink 5.4s infinite;transform-origin:center}
.preview-stage .hair-sway{animation:premiumHair 4.2s ease-in-out infinite}
.preview-stage .accessory-float{animation:premiumAccessory 3.4s ease-in-out infinite}
.preview-stage .char-svg g[fill="#ff8fb9"]{transform-origin:64px 79px}
@keyframes premiumBreath{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.8px) scaleY(1.005)}}
@keyframes premiumBlink{0%,42%,44%,100%{transform:scaleY(1)}43%{transform:scaleY(.08)}}
@keyframes premiumHair{0%,100%{transform:rotate(-.45deg)}50%{transform:rotate(.55deg)}}
@keyframes premiumAccessory{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-1.4px) rotate(1deg)}}
.character-host{filter:drop-shadow(0 18px 20px rgba(57,72,110,.10))}
.preview-stage{box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.choice{transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.choice:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(72,82,122,.08)}
.swatch{transition:transform .14s ease, box-shadow .14s ease}.swatch:hover{transform:scale(1.08)}

/* v2.2 character framing */
.preview-shadow{width:154px;height:38px}
.character-host{width:255px;height:410px;bottom:9%}
@media(max-width:620px){.character-host{width:238px;height:390px;bottom:8%}}