.onboarding{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#ffe4dbcc,#e9e7ffdd);backdrop-filter:blur(8px)}.onboarding.hidden{display:none}.onboarding-card{width:min(440px,100%);min-height:470px;border-radius:28px;background:#fff;padding:36px 42px;text-align:center;box-shadow:0 25px 65px #4e3c5540}.onboarding-brand{font:900 25px Nunito;color:#343247}.onboarding-brand span{display:inline-grid;place-items:center;width:30px;height:29px;margin-right:6px;border-radius:10px 10px 7px 7px;background:#ff6d85;color:#fff}.step-dots{display:flex;justify-content:center;gap:6px;margin:24px 0}.step-dots i{width:7px;height:7px;border-radius:50%;background:#e4e0e8}.step-dots i.active{width:22px;border-radius:7px;background:#ff6d85}.onboarding-step h1{margin:0 0 10px;color:#343247;font:900 29px/1.1 Nunito}.onboarding-step p{margin:0 0 26px;color:#858193;font-size:13px;line-height:1.6}.welcome-emoji{display:grid;place-items:center;width:58px;height:58px;margin:12px auto 20px;border-radius:19px;background:#fff2ce;color:#f5ab48;font-size:28px}.primary{width:100%;border:0;border-radius:13px;background:#ff6d85;padding:14px;color:#fff;font:800 13px Manrope;cursor:pointer;box-shadow:0 8px 18px #ff8aa34d}.text-button{border:0;background:none;margin-top:13px;color:#817d8d;font:700 12px Manrope;cursor:pointer}.onboarding form{text-align:left}.onboarding form h1,.onboarding form p{text-align:center}.onboarding label{display:grid;gap:6px;margin:13px 0;color:#656173;font-size:11px;font-weight:800}.onboarding input{width:100%;border:1px solid #e6e2e9;border-radius:10px;padding:12px 13px;outline:none;color:#403c4d;font:500 13px Manrope}.onboarding input:focus{border-color:#ff8ba0;box-shadow:0 0 0 3px #ff8ba022}.onboarding form .primary{margin-top:10px}.character-preview{display:grid;place-items:end center;height:105px;margin:8px 0 15px;border-radius:17px;background:linear-gradient(#fde0cc 0 70%,#d5a781 70%)}.mini-character{position:relative;width:45px;height:98px}.mini-hair{position:absolute;z-index:2;top:2px;left:3px;width:39px;height:40px;border-radius:50%;background:#673d35}.mini-face{position:absolute;z-index:3;top:14px;left:10px;width:26px;height:29px;border-radius:45%;background:#f1b99e}.mini-body{position:absolute;top:44px;left:3px;width:39px;height:35px;border-radius:12px 12px 3px 3px;background:#f06f85}.mini-legs{position:absolute;top:76px;left:9px;width:28px;height:22px;border-right:10px solid #586275;border-left:10px solid #586275}.appearance{display:flex;gap:8px;margin:8px 0 16px}.appearance button{flex:1;border:1px solid #e6e2e9;border-radius:9px;background:#fff;padding:8px 3px;color:#777286;font:700 9px Manrope;cursor:pointer}.appearance button.selected{border-color:#ff6d85;background:#fff0f3;color:#eb5e78}@media(max-width:520px){.onboarding-card{padding:28px 25px;min-height:440px}}
.character-preview{display:block;height:185px;overflow:hidden;background:#f3ddd0}.character-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%}.character-preview img.hidden{display:none!important}
.gender-select{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}.gender-select button,.asset-grid span{border:1px solid #e4dfe8;border-radius:9px;background:#fff;padding:9px;color:#726d7b;font:700 11px Manrope;cursor:pointer}.gender-select button.selected{border-color:#ff6d85;background:#fff0f3;color:#e85975}.character-preview{height:230px;position:relative;overflow:hidden;border-radius:17px;background:linear-gradient(#f3ddd0,#deb087)}.outfit-layer{position:absolute;bottom:0;left:50%;width:145px;height:230px;transform:translateX(-50%);background-repeat:no-repeat;background-size:500% 200%;filter:drop-shadow(0 8px 8px #53372d44)}.head-layer{position:absolute;z-index:2;top:12px;left:50%;width:125px;height:142px;transform:translateX(-50%);background-repeat:no-repeat;background-size:500% 200%;mask-image:radial-gradient(ellipse 48% 49% at 50% 47%,#000 69%,transparent 100%);filter:drop-shadow(0 4px 6px #53372d35);transition:background-position .18s}.editor-label{margin:9px 0 5px!important;text-align:left!important;font-size:10px!important;font-weight:800}.editor-label span{color:#9a95a3;font-weight:500}.asset-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;font-size:0}.asset-grid span{display:grid;place-items:center;height:27px;padding:0;font-size:9px}.asset-grid span.selected{border-color:#ff6d85;background:#fff0f3;color:#e85975}