:root{--surface:#fff;--ink:#2a2a2e;--muted:#7a7a85;--radius:28px;--font-display:"Oxanium", "Be Vietnam Pro", system-ui, sans-serif;font-family:Be Vietnam Pro,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}.card{background:var(--surface);border-radius:var(--radius);padding:28px}.shell-desktop{grid-template-columns:240px 1fr;gap:16px;min-height:100vh;padding:16px;display:grid}.shell-desktop__side{background:var(--surface);border-radius:var(--radius);padding:24px;font-weight:800}.shell-desktop__main{padding:8px}.shell-mobile{min-height:100dvh}.shell-mobile__main{padding:16px}button{font:inherit;cursor:pointer;border:0}.creator{grid-template-columns:1fr 380px;gap:16px;min-height:calc(100vh - 48px);display:grid}.creator__stage{background:#fafafa;grid-template-columns:112px 1fr 88px;align-items:center;padding:24px 20px;display:grid;position:relative}.creator__title{text-align:center;color:#4a4a52;margin:0;font-size:18px;font-weight:700;position:absolute;top:22px;left:0;right:0}.creator__rail,.creator__rail--color{background:#fff;border-radius:40px;flex-direction:column;align-items:center;gap:10px;max-height:calc(100vh - 140px);margin-top:36px;padding:16px 10px;display:flex;overflow:auto;box-shadow:0 6px 24px #0000000d}.rail__label{color:var(--muted);font-size:13px;font-weight:700}.rail__item{border-radius:50%;flex:none;width:64px;height:64px;padding:6px;transition:transform .15s}.rail__item:hover{transform:scale(1.08)}.rail__item.is-active{outline:3px solid var(--accent);outline-offset:2px}.swatch{border-radius:50%;flex:none;width:44px;height:44px;transition:transform .15s}.swatch:hover{transform:scale(1.12)}.swatch.is-active{outline:3px solid var(--accent);outline-offset:3px}.creator__view{perspective:900px;place-items:center;height:100%;min-height:520px;display:grid;position:relative}.creator__halo{border-radius:50%;width:420px;height:420px;position:absolute}.creator__char{width:300px;animation:3.2s ease-in-out infinite bob;position:relative}.creator__char svg{width:100%;height:auto;overflow:visible}.creator__char.is-spinning{animation:1s ease-in-out spin,3.2s ease-in-out 1s infinite bob}.creator__floor{border:1px solid #0000000f;border-radius:50%;width:340px;height:60px;position:absolute;bottom:70px}.creator__spin{color:var(--muted);background:0 0;font-weight:700;position:absolute;bottom:30px}@keyframes bob{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-8px)scale(1.01,.99)}}@keyframes spin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.creator__panel{flex-direction:column;gap:18px;display:flex}.panel__hello{margin:0;font-size:34px;line-height:1.15}.panel__name{width:100%;font:inherit;background:0 0;border:0;border-bottom:3px dashed #e6e6ea;outline:none;padding:2px 0;font-weight:800;display:block}.panel__name:focus{border-bottom-color:var(--accent)}.group__label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-size:13px;font-weight:800}.group__chips{flex-wrap:wrap;gap:8px;display:flex}.chip{color:var(--ink);text-transform:capitalize;background:#f3f3f6;border-radius:999px;padding:8px 14px;font-weight:700}.chip.is-active{background:var(--accent-grad);color:var(--accent-ink)}.panel__actions{gap:10px;margin-top:auto;display:flex}.btn{border-radius:999px;flex:1;padding:14px 20px;font-weight:800}.btn--primary{background:var(--accent-grad);color:var(--accent-ink)}.btn--ghost{background:#f3f3f6}.panel__hint{color:var(--muted);margin:0;font-size:13px}.gender{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.gender__btn{background:#f3f3f6;border-radius:18px;justify-items:center;gap:2px;padding:10px 6px;font-weight:800;display:grid}.gender__btn.is-active{background:var(--accent-grad);color:var(--accent-ink)}.gender__icon{font-size:20px;line-height:1}.tabs{border-bottom:2px solid #f0f0f3;gap:6px;display:flex}.tabs__btn{color:var(--muted);background:0 0;border-bottom:3px solid #0000;margin-bottom:-2px;padding:8px 12px;font-weight:800}.tabs__btn.is-active{color:var(--ink);border-bottom-color:var(--accent)}.panel__body{flex-direction:column;gap:16px;display:flex;overflow:auto}h1,h2,h3,.btn,.chip,.tabs__btn,.gender__btn,.rail__label,.group__label,.creator__spin,.panel__name,.shell-desktop__side{font-family:var(--font-display)}h1,h2,h3{letter-spacing:-.01em;font-weight:800}.panel__hello{letter-spacing:-.02em;font-size:36px;font-weight:900}.panel__name{color:var(--accent-text);font-weight:900}.creator__title{letter-spacing:.06em;text-transform:uppercase;font-size:20px;font-weight:800}.btn{letter-spacing:.02em;text-transform:uppercase;font-size:15px;font-weight:800;transition:transform .1s,box-shadow .1s;box-shadow:0 5px #0000001f}.btn:active{transform:translateY(4px);box-shadow:0 1px #0000001f}.chip,.gender__btn{font-size:14px;font-weight:700;box-shadow:0 3px #00000014}.group__label{letter-spacing:.06em;font-size:14px}.tabs__btn{text-transform:uppercase;letter-spacing:.05em;font-size:14px;font-weight:800}.btn{white-space:nowrap;padding:14px 16px}html,body{height:100%}body{overflow:hidden}.shell-desktop{grid-template-columns:200px minmax(0,1fr);gap:14px;height:100dvh;min-height:0;padding:14px;overflow:hidden}.shell-desktop__main{min-width:0;min-height:0;padding:0}.creator{grid-template-columns:minmax(0,1fr) clamp(320px,26vw,400px);gap:14px;height:100%;min-height:0}.creator__stage{grid-template-columns:clamp(84px,8vw,108px) minmax(0,1fr) clamp(72px,6vw,88px);min-height:0;padding:16px}.creator__rail,.creator__rail--color{gap:clamp(4px,1.1vh,10px);max-height:calc(100% - 48px);margin-top:34px;padding:12px 8px;overflow:hidden}.rail__item{--s:clamp(36px, calc((100dvh - 250px) / 8.4), 64px);width:var(--s);height:var(--s);padding:4px}.swatch{--s:clamp(28px, calc((100dvh - 250px) / 9.4), 44px);width:var(--s);height:var(--s)}.creator__view{height:100%;min-height:0}.creator__halo{width:clamp(220px,56dvh,420px);height:clamp(220px,56dvh,420px)}.creator__char{width:clamp(150px,34dvh,300px)}.creator__floor{width:clamp(200px,46dvh,340px);height:clamp(36px,8dvh,60px);bottom:12%}.creator__spin{bottom:3%}.creator__panel{gap:clamp(8px,1.6dvh,16px);min-height:0;padding:20px;overflow:hidden}.panel__hello{font-size:clamp(24px,4dvh,36px)}.panel__body{flex:1;min-height:0;padding-right:4px;overflow-y:auto}.panel__actions{flex:none;margin-top:0}.panel__hint{flex:none}@media (height<=700px){.panel__hint{display:none}.gender__btn{padding:6px}}.shell-desktop__side{flex-direction:column;gap:14px;padding:18px 12px;display:flex;overflow:auto}.brand{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;padding:0 8px;font-size:20px;font-weight:800}.nav{flex-direction:column;gap:4px;display:flex}.nav__item{color:var(--ink);font-family:var(--font-display);border-radius:16px;align-items:center;gap:10px;padding:10px 12px;font-size:15px;font-weight:700;text-decoration:none;display:flex}.nav__item:hover{background:#f3f3f6}.nav__item.is-active{background:var(--accent-grad);color:var(--accent-ink)}.nav__item.is-soon{color:var(--muted);cursor:default}.nav__item.is-soon:hover{background:0 0}.panel__body{gap:clamp(8px,1.4dvh,14px)}.group__label{margin-bottom:5px}.group__chips{gap:6px}.group__chips .swatch{width:26px;height:26px}.chip{padding:6px 12px}.rail__item{padding:0;display:block;overflow:hidden}.rail__item svg{width:100%;height:100%;display:block}.creator{grid-template-columns:minmax(0,1fr) clamp(340px,28vw,420px)}.group__chips--colors{gap:10px;padding:4px 4px 2px}.group__chips--colors .swatch{width:36px;height:36px;box-shadow:inset 0 0 0 2px #00000014}.group__chips--colors .swatch.is-active{outline-offset:3px;outline-width:3px;transform:scale(1.05)}.group__chips--colors{grid-template-columns:repeat(8,1fr);gap:8px;padding:4px;display:grid}.group__chips--colors .swatch{aspect-ratio:1;width:100%;max-width:40px;height:auto}@media (height<=840px){.panel__hint{display:none}}.namefield{gap:6px;display:grid}.namefield__label{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:13px;font-weight:800}.namefield__box{background:#f6f6f9;border:2.5px solid #e3e3ea;border-radius:18px;align-items:center;gap:8px;padding:0 14px;transition:border-color .15s,background .15s;display:flex}.namefield__box:focus-within{border-color:var(--accent);background:#fff}.namefield__input{min-width:0;font-family:var(--font-display);color:var(--ink);background:0 0;border:0;outline:0;flex:1;padding:10px 0;font-size:22px;font-weight:800}.namefield__input::placeholder{color:#b7b7c2;font-weight:700}.namefield__icon{color:var(--muted);font-size:18px}.sound-toggle{z-index:2;background:#fff;border-radius:50%;width:42px;height:42px;font-size:18px;position:absolute;top:14px;right:18px;box-shadow:0 3px #00000014,0 6px 18px #0000000d}.sound-toggle:active{transform:translateY(2px);box-shadow:0 1px #00000014}