*{box-sizing:border-box}html{background:#111218}body{margin:0;background:#111218;color:#fff;font-family:var(--font-outfit,"Outfit"),Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img,svg{display:block}:root{--ci-primary-color:#35f4df;--ci-secundary-color:#09a0e0}
.avatar-page{min-height:100vh;background:#111218;padding-bottom:74px;overflow:hidden}.avatar-top{height:53px;border-bottom:1px solid #ffffff14;background:#09090d;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:0 10px}.avatar-back{width:32px;height:32px;display:grid;place-items:center;color:#757575}.avatar-title{text-align:center;font-size:16px;font-weight:600}.avatar-panel{margin:10px 8px 0;background:#09090d;border:1px solid #ffffff08;border-radius:8px;padding:37px 29px 28px}.avatar-gender{display:flex;justify-content:center;gap:11px;margin-bottom:29px}.gender-btn{height:35px;min-width:143px;border-radius:18px;border:1px solid #ffffff14;background:transparent;color:#757575;font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px}.gender-btn span{font-size:16px;line-height:1}.gender-btn.active{border:0;background:linear-gradient(100deg,#35f4df,#09a0e0);color:#fff}.gender-btn:not(.active) span{color:#ff48d2}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 21px}.avatar-grid.hidden{display:none}.avatar-choice{border:0;background:transparent;padding:0;border-radius:9px;aspect-ratio:1;overflow:hidden}.avatar-choice img{width:100%;height:100%;object-fit:cover;border-radius:9px}.avatar-choice.selected{outline:2px solid #35f4df;outline-offset:2px}.avatar-actions{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#09090d;padding:8px}.avatar-save{height:48px;border-radius:8px;background:linear-gradient(100deg,#35f4df,#09a0e0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:400}
@media(max-width:390px){.avatar-panel{padding-left:29px;padding-right:29px}.gender-btn{min-width:0;width:143px}.avatar-grid{gap:20px 21px}}
@media(min-width:540px){body{display:flex;justify-content:center}.avatar-page{width:451px}.avatar-actions{left:50%;right:auto;width:451px;transform:translateX(-50%)}}