*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#fafafa;--bg-secondary:#fff;--text-primary:#333;--text-secondary:#666;--accent:#ff6b6b;--accent-hover:#ff5252;--border:#e0e0e0;--shadow:rgba(0,0,0,.1);--space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--touch-target:3rem;--touch-target-lg:4rem;--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem;--radius-full:9999px}html{font-size:16px}body{background:var(--bg-primary);color:var(--text-primary);font-family:system-ui,-apple-system,sans-serif;min-height:100dvh;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn,button{align-items:center;background:var(--accent);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:inline-flex;font-size:1.125rem;font-weight:600;justify-content:center;min-height:var(--touch-target);min-width:var(--touch-target);padding:var(--space-sm) var(--space-md);transition:transform .1s,background .2s}button:active{transform:scale(.95)}button:hover{background:var(--accent-hover)}button:disabled{cursor:not-allowed;opacity:.5}.editor,.landing{margin:0 auto;max-width:480px;padding:var(--space-md)}.landing{align-items:center;display:flex;flex-direction:column;gap:var(--space-lg);justify-content:center;min-height:100dvh;text-align:center}.landing h1{color:var(--text-primary);font-size:2rem}.landing p{color:var(--text-secondary);font-size:1.125rem}.create-form{gap:var(--space-sm);max-width:300px;width:100%}.create-form,.editor{display:flex;flex-direction:column}.editor{gap:var(--space-md);min-height:100dvh}.preview{align-items:center;display:flex;flex:0 0 auto;flex-direction:column;padding:var(--space-md)}.preview svg{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:0 4px 12px var(--shadow);height:200px;width:200px}.avatar-name{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-top:var(--space-sm)}.selector{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-sm)}.categories{flex:0 0 auto;padding-bottom:env(safe-area-inset-bottom,var(--space-sm))}.category-tabs{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:0 -2px 10px var(--shadow);display:flex;gap:var(--space-xs);justify-content:space-around;padding:var(--space-sm)}.category-tab{align-items:center;background:transparent;border:2px solid transparent;border-radius:var(--radius-md);color:var(--text-primary);display:flex;font-size:1.5rem;height:var(--touch-target-lg);justify-content:center;width:var(--touch-target-lg)}.category-tab.active{background:var(--accent);border-color:var(--accent)}.part-nav{align-items:center;display:flex;gap:var(--space-md);justify-content:center;padding:var(--space-sm)}.nav-arrow{border:2px solid var(--border);color:var(--text-primary);font-size:2rem;height:var(--touch-target-lg);width:var(--touch-target-lg)}.nav-arrow,.nav-arrow:hover{background:var(--bg-secondary)}.nav-arrow:hover{border-color:var(--accent)}.part-label{color:var(--text-secondary);font-size:1rem;min-width:120px;text-align:center}.color-options{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;padding:var(--space-sm)}.color-circle{border:3px solid transparent;border-radius:var(--radius-full);cursor:pointer;height:var(--touch-target);transition:transform .1s,border-color .2s;width:var(--touch-target)}.color-circle:hover{transform:scale(1.1)}.color-circle.selected{border-color:var(--text-primary);box-shadow:0 0 0 3px var(--bg-primary),0 0 0 6px currentColor}input[type=text]{background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);font-size:1.25rem;padding:var(--space-sm) var(--space-md);text-align:center;width:100%}input[type=text]:focus{border-color:var(--accent);outline:none}.loading{align-items:center;color:var(--text-secondary);display:flex;font-size:1.125rem;justify-content:center;min-height:200px}.error{background:#fee;border-radius:var(--radius-md);color:#c00;padding:var(--space-md);text-align:center}