:root{color:#252638;font-synthesis:none;--accent:#6550e8;--border:#e5e6ed;--muted:#858697;background:#f6f7fa;font-family:DM Sans,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;transition:background .18s,border-color .18s}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #aa9bff}a{color:inherit;text-decoration:none}svg{flex-shrink:0}.studio{max-width:1600px;margin:auto}header{border-bottom:1px solid var(--border);background:#fff;justify-content:space-between;align-items:center;height:86px;padding:0 5%;display:flex}.brand{letter-spacing:-1.5px;align-items:center;font-family:Space Grotesk,sans-serif;font-size:32px;font-weight:700;display:flex}.brand-icon{background:var(--accent);color:#fff;border-radius:10px;place-items:center;width:36px;height:36px;margin-right:12px;display:grid}.brand-icon svg{width:24px;height:24px}.brand-dot{color:var(--accent)}.brand i{background:var(--border);width:1px;height:23px;margin:0 23px}.brand small{letter-spacing:1.9px;color:#9091a0;font-family:DM Sans,sans-serif;font-size:11px;font-weight:600}.header-actions{align-items:center;gap:27px;display:flex}.header-actions>span{color:var(--muted);font-size:14px}.button{background:#fff;border:1px solid #dddfe9;border-radius:9px;justify-content:center;align-items:center;gap:9px;min-height:43px;padding:10px 17px;font-size:14px;font-weight:600;display:flex}.button svg{width:17px;height:17px}.button.primary{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 3px 5px #6550e815}.button.primary:hover{background:#5540d4}main{padding:40px 5% 0}.page-heading{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.eyebrow{letter-spacing:2.2px;color:var(--accent);margin-bottom:11px;font-size:11px;font-weight:650}h1{letter-spacing:-1.4px;margin:0;font-family:Space Grotesk,sans-serif;font-size:34px;font-weight:600;line-height:1.2}h1 span{color:var(--accent)}.page-heading p{color:var(--muted);margin:9px 0 0;font-size:16px}.surprise{background:0 0;margin-top:20px}.workspace{grid-template-columns:minmax(0,1.45fr) minmax(380px,1fr);align-items:start;gap:28px;display:grid}.preview-section{min-width:0}.canvas{border:1px solid var(--border);background:#fff;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 300px);min-height:660px;max-height:850px;display:flex;position:relative;overflow:hidden}.canvas.transparent{background-image:linear-gradient(45deg,#f0f1f6 25%,#0000 25%),linear-gradient(-45deg,#f0f1f6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f0f1f6 75%),linear-gradient(-45deg,#0000 75%,#f0f1f6 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.canvas.dark{color:#eeeef7;background:#171924}.canvas-top{justify-content:space-between;align-items:center;display:flex;position:absolute;top:20px;left:22px;right:18px}.canvas-top>span{color:#9697a6;letter-spacing:1.6px;align-items:center;gap:8px;font-size:11px;font-weight:650;display:flex}.canvas-top>span svg{width:15px;height:15px}.canvas-top>div{gap:7px;display:flex}.icon-button{border:1px solid var(--border);color:#7f8092;background:#ffffffd9;border-radius:8px;place-items:center;width:34px;height:34px;display:grid}.icon-button svg{width:16px;height:16px}.avatar{justify-content:center;width:100%;display:flex}.avatar>svg{filter:drop-shadow(0 15px 25px #503ac21a);width:min(92%,440px);height:auto;overflow:visible}.avatar-caption{color:#8c8d9c;flex-direction:column;align-items:center;gap:10px;margin-top:-13px;font-size:14px;display:flex}.name-tag{color:#625682;background:#ffffffe8;border:1px solid #e5e0f5;border-radius:6px;padding:6px 10px;font-size:13px;font-weight:550}.playback{border:1px solid var(--border);color:#747689;background:#fff;border-radius:11px;align-items:center;gap:12px;padding:11px 13px;font-size:14px;display:flex;position:absolute;bottom:22px;left:22px;right:22px}.playback button{color:var(--accent);background:#efebfc;border:none;border-radius:7px;place-items:center;width:32px;height:32px;display:grid}.playback svg{width:15px;height:15px}.playback small{letter-spacing:1px;color:#9b9dac;margin-left:auto;font-size:10px}.canvas-settings{color:#77798c;justify-content:space-between;align-items:center;padding:20px 2px;font-size:14px;display:flex}.follow{cursor:pointer;align-items:center;gap:9px;display:flex}.follow input{opacity:0;width:35px;height:23px;position:absolute}.switch{background:#d9dae4;border-radius:20px;width:33px;height:19px;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:13px;height:13px;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0002}.follow input:checked+.switch:after{left:17px}.follow input:focus-visible+.switch{outline-offset:3px;outline:3px solid #aa9bff}.backgrounds{align-items:center;gap:9px;display:flex}.backgrounds>span{margin-right:4px}.backgrounds button{background:#fff;border:1px solid #dcdde7;border-radius:6px;width:23px;height:23px}.backgrounds .dark{background:#171924}.backgrounds .transparent{background:conic-gradient(#dedfe9 25%,white 0 50%,#dedfe9 0 75%,white 0);background-size:10px 10px}.backgrounds .selected{outline:2px solid var(--accent);outline-offset:3px}.preview-note{color:#9b9dac;justify-content:center;align-items:center;gap:7px;padding-top:3px;font-size:13px;display:flex}.preview-note svg{width:14px;height:14px}.customizer{border:1px solid var(--border);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px #20223403}.tabs{border-bottom:1px solid var(--border);gap:29px;height:62px;padding:0 25px;display:flex}.tabs button{color:#9596a3;background:0 0;border:none;align-items:center;gap:8px;padding:0 1px;font-size:14px;font-weight:550;display:flex;position:relative}.tabs button.active:after{content:"";background:var(--accent);border-radius:2px;height:3px;position:absolute;bottom:-1px;left:0;right:0}.tabs svg{width:17px;height:17px}.tabs small{color:#9294a2;background:#f1f2f7;border-radius:5px;padding:2px 5px;font-size:11px}.panel-content{padding:24px 25px}.group+.group{margin-top:25px}.group-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px;display:flex}.group-heading h2{margin:0;font-size:14px;font-weight:650}.group-heading>span{color:#9596a5;font-size:12px}.group-heading>.hex{letter-spacing:.5px;font-family:monospace;font-size:11px}.shape-grid,.mood-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.shape-grid button,.mood-grid button,.motion-grid button{background:#fff;border:1px solid #e8e9f0;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:0;padding:5px 2px 9px;display:flex}.shape-grid button.selected,.mood-grid button.selected,.motion-grid button.selected{border-color:var(--accent);background:#f3f0ff;box-shadow:0 0 0 1px #6550e815}.shape-grid button>span,.mood-grid button>span,.motion-grid button>span{color:#7f8091;font-size:14px}.shape-grid button.selected>span,.mood-grid button.selected>span,.motion-grid button.selected>span{color:var(--accent);font-weight:550}.color-grid{grid-template-columns:repeat(12,1fr);gap:8px;padding:4px 3px;display:grid}.color-grid button{aspect-ratio:1;background:var(--swatch);color:#fff;border:1px solid #0000000c;border-radius:50%;place-items:center;width:100%;min-width:0;padding:0;display:grid}.color-grid button.selected{outline:2px solid var(--swatch);outline-offset:3px}.color-grid button svg{filter:drop-shadow(0 1px 2px #0007);width:14px;height:14px}.mood-grid{gap:7px}.mood-grid button{padding:4px 1px 9px}.mood-grid button>span{font-size:12px}.export-section{border-top:1px solid var(--border);background:#fafbfe;padding:23px 25px}.export-section .group-heading>svg{color:#9b9dab;width:17px}.export-options{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;display:grid}.export-options label{color:#9293a3;flex-direction:column;gap:7px;font-size:12px;display:flex}.export-options select{color:#626578;background:#fff;border:1px solid #e1e2eb;border-radius:7px;width:100%;padding:9px 10px;font-size:14px}.full{width:100%;min-height:45px}.export-hint{text-align:center;color:#a0a1af;margin:11px 0 0;font-size:11px}.motion-help{color:#9091a1;margin:0 0 18px;font-size:14px;line-height:1.6}.motion-grid{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.back{width:100%;margin-top:20px}footer{color:#999baa;justify-content:space-between;gap:15px;padding:30px 5% 24px;font-size:12px;display:flex}footer b{margin:0 9px;font-weight:400}.toast{color:#fff;z-index:10;background:#252638;border-radius:10px;align-items:center;gap:10px;max-width:90vw;padding:14px 20px;font-size:14px;display:flex;position:fixed;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 8px 35px #0002}@media (width<=1100px){header{height:78px;padding:0 4%}.header-actions>span{display:none}main{padding:33px 4% 0}.workspace{grid-template-columns:minmax(0,1.2fr) minmax(345px,1fr);gap:20px}h1{font-size:30px}.canvas{min-height:650px}.panel-content,.export-section{padding:21px 18px}.color-grid{grid-template-columns:repeat(6,1fr);gap:10px}.color-grid button{justify-self:center;max-width:27px}.playback small{display:none}.playback>span,.shape-grid button>span,.canvas-settings{font-size:12px}.backgrounds{gap:7px}.brand i{margin:0 14px}.brand small{font-size:10px}}@media (width<=760px){header{height:72px}.brand{font-size:28px}.brand i,.brand small{display:none}.header-actions .button{min-height:38px;padding:8px 11px;font-size:12px}.page-heading{align-items:flex-start;gap:15px;margin-bottom:23px}h1{letter-spacing:-1px;max-width:280px;font-size:28px}.eyebrow{font-size:10px}.page-heading p{font-size:14px}.surprise{margin-top:30px;padding:10px}.surprise>span{display:none}.workspace{grid-template-columns:1fr;gap:24px}.canvas{height:480px;min-height:480px}.avatar>svg{width:330px;max-width:90%}.avatar-caption{margin-top:-15px}.canvas-settings{font-size:14px}.preview-note{padding-top:0}.panel-content{padding:23px}.shape-grid button{padding:8px 2px 11px}.shape-grid button>span{font-size:14px}.mood-grid button{padding:7px 1px 10px}.mood-grid button>span{font-size:12px}.color-grid{grid-template-columns:repeat(12,1fr);gap:6px}.color-grid button{max-width:none}.export-section{padding:23px}footer{flex-direction:column;gap:8px;font-size:11px;line-height:1.6}.playback>span{font-size:14px}}@media (width<=380px){.color-grid{grid-template-columns:repeat(6,1fr);gap:11px}.color-grid button{max-width:28px}.backgrounds>span{display:none}.mood-grid button>span{font-size:11px}.canvas{height:430px;min-height:430px}.avatar>svg{width:300px}.header-actions .button{font-size:11px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.brand{letter-spacing:-1px;font-size:26px}.color-grid{row-gap:13px}.shape-grid button>span{font-size:13px}@media (width<=760px){.brand{font-size:23px}.header-actions .button{width:39px;height:39px;padding:10px;font-size:0}.header-actions .button svg{width:18px;height:18px}}:root{--accent:#fd0f23;--border:#292929;--muted:#a7a7a5;color:#f1f1ef;background:#080808}header{background:#080808;border-bottom-color:#202020;height:96px}.brand{letter-spacing:-1px;gap:15px;font-family:DM Sans,sans-serif;font-weight:550}.official-logo{object-fit:contain;width:72px;height:54px}.product-name{font-size:25px}.brand i{margin:0 6px}.brand small{color:#a7a7a5}main{padding-top:38px}.eyebrow{color:#bdbdbb;letter-spacing:1.8px}.eyebrow:before{content:"";background:#fd0f23;width:23px;height:1px;margin:0 10px 4px 0;display:inline-block}h1{letter-spacing:-1.8px;font-family:DM Sans,sans-serif;font-size:40px;font-weight:500}h1 em{font-family:Georgia,Times New Roman,serif;font-weight:400}.page-heading p{color:#a7a7a5}.button{color:#f1f1ef;box-shadow:none;background:#151515;border-color:#444;border-radius:6px}.button:hover{background:#242424;border-color:#777}.button.primary{color:#111;box-shadow:none;background:#f0f0ee;border-color:#f0f0ee}.button.primary:hover{background:#fff;border-color:#fff}.surprise{background:0 0}.customizer{box-shadow:none;background:#121212;border-color:#292929;border-radius:12px}.tabs{border-bottom-color:#292929}.tabs button{color:#a7a7a5}.tabs button.active{color:#f1f1ef}.tabs button.active:after{background:#fd0f23}.tabs small{color:#bbb;background:#252525}.canvas{background:#0d0d0d;border-color:#292929;border-radius:12px}.canvas.transparent{background-color:#0b0b0b;background-image:linear-gradient(45deg,#141414 25%,#0000 25%),linear-gradient(-45deg,#141414 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#141414 75%),linear-gradient(-45deg,#0000 75%,#141414 75%)}.canvas.white{background:#fff}.canvas.dark{background:#171924}.avatar>svg{filter:drop-shadow(0 12px 27px #0005)}.canvas-top>span{color:#aaa}.icon-button{color:#bcbcbc;background:#181818;border-color:#353535}.icon-button:hover{background:#292929}.name-tag{color:#f1f1ef;background:#181818e8;border-color:#353535}.avatar-caption{color:#a7a7a5}.playback{color:#c5c5c3;background:#151515;border-color:#303030}.playback button{color:#fd0f23;background:#2b1115}.playback small{color:#a7a7a5}.canvas-settings{color:#bcbcbc}.switch{background:#444}.follow input:checked+.switch{background:#fd0f23}.follow input:focus-visible+.switch{outline-color:#fd0f23}.backgrounds button{border-color:#656565}.backgrounds .selected{outline-color:#fd0f23}.preview-note{color:#929290}.group-heading>span{color:#aaa}.shape-grid button,.mood-grid button,.motion-grid button{background:#181818;border-color:#333;border-radius:7px}.shape-grid button>span,.mood-grid button>span,.motion-grid button>span{color:#bcbcbc}.shape-grid button:hover,.mood-grid button:hover,.motion-grid button:hover{background:#242424;border-color:#626262}.shape-grid button.selected,.mood-grid button.selected,.motion-grid button.selected{box-shadow:none;background:#291014;border-color:#fd0f23}.shape-grid button.selected>span,.mood-grid button.selected>span,.motion-grid button.selected>span{color:#f1f1ef}.color-grid button{border-color:#ffffff1a}.export-section{background:#101010;border-top-color:#292929}.export-options label{color:#aaa}.export-options select{color:#e5e5e3;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#191919;border-color:#3a3a3a}.export-hint{color:#999}.motion-help{color:#aaa}.back{background:#181818}footer{color:#929290}footer a{color:#bcbcbc}footer a:hover{color:#fff}.toast{color:#111;background:#eeeeec;border:1px solid #fff}.toast svg{color:#fd0f23}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-color:#fd0f23}@media (width<=1100px){header{height:86px}.product-name{font-size:22px}.brand{gap:11px}.official-logo{width:60px;height:45px}.brand i{margin:0 3px}h1{font-size:35px}}@media (width<=760px){header{height:80px}.brand{gap:10px}.official-logo{width:54px;height:40px}.product-name{font-size:21px}main{padding-top:29px}h1{max-width:280px;font-size:32px}.page-heading p{max-width:240px;font-size:14px}.eyebrow{letter-spacing:1.2px;font-size:10px}.eyebrow:before{width:17px;margin-right:8px}.surprise{margin-top:29px}.canvas{height:480px;min-height:480px}}.preview-section{align-self:start;position:sticky;top:16px}.canvas{height:min(660px,100dvh - 190px);min-height:0;padding:60px 0 95px}.avatar>svg{width:min(92%,440px,100dvh - 420px)}@media (width<=760px){.preview-section{z-index:2;background:#080808;padding-bottom:8px;top:8px}.canvas{height:clamp(180px,32dvh,260px);padding:42px 0}.canvas-top{top:10px;left:12px;right:12px}.canvas-top>span{letter-spacing:1px;font-size:10px}.icon-button{width:27px;height:27px}.avatar>svg{width:clamp(92px,32dvh - 88px,170px);max-width:90%}.avatar-caption,.preview-note{display:none}.playback{gap:8px;padding:5px 8px;bottom:10px;left:12px;right:12px}.playback button{width:24px;height:24px}.playback>span{font-size:11px}.canvas-settings{padding:12px 2px}}