:root{--bg: #fdf6ec;--text: #2d2d2d;--accent: #e8985e;--accent-hover: #d47e44;--card-bg: #fff;--border: #e0d5c7;--shadow: rgba(0, 0, 0, .08);--palette-bg: #f5ead8}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem 2rem;gap:1.25rem;max-width:700px;margin:0 auto}.header{text-align:center}.header h1{font-size:2rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;text-shadow:1px 1px 0 rgba(0,0,0,.04)}.subtitle{font-size:.95rem;color:#876;margin-top:.25rem}.color-palette{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;background:var(--palette-bg);padding:.75rem 1rem;border-radius:1rem;border:2px solid var(--border);max-width:420px}.color-swatch{width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;box-shadow:0 2px 4px var(--shadow)}.color-swatch:hover{transform:scale(1.2);box-shadow:0 3px 8px #00000026}.color-swatch.active{border-color:var(--text);transform:scale(1.25);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}.animal-nav{display:flex;align-items:center;gap:1rem}.nav-btn{background:var(--card-bg);border:2px solid var(--border);border-radius:.5rem;padding:.4rem 1rem;font-size:1.25rem;cursor:pointer;transition:background .15s,border-color .15s;color:var(--text)}.nav-btn:hover{background:var(--palette-bg);border-color:var(--accent)}.animal-name{font-size:1.35rem;font-weight:700;color:var(--accent);min-width:120px;text-align:center}.canvas-area{background:var(--card-bg);border:3px solid var(--border);border-radius:1.25rem;padding:1.5rem;width:100%;max-width:420px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--shadow);position:relative;overflow:hidden}.canvas-area:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,#e0d5c7 1px,transparent 1px);background-size:20px 20px;opacity:.35;pointer-events:none}.animal-svg{width:100%;height:100%;position:relative;z-index:1}.animal-part{cursor:pointer;transition:fill .2s ease,stroke-width .15s ease;stroke-linejoin:round}.animal-part:hover{stroke-width:3;filter:brightness(.92)}.animal-part.selected{stroke:var(--accent);stroke-width:3;stroke-dasharray:4 2;animation:pulse-stroke 1.2s ease-in-out infinite}@keyframes pulse-stroke{0%,to{stroke-dashoffset:0}50%{stroke-dashoffset:6}}.actions{display:flex;gap:.75rem}.reset-btn{background:var(--card-bg);border:2px solid var(--border);border-radius:.65rem;padding:.5rem 1.25rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;color:var(--text)}.reset-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}@media(max-width:480px){.header h1{font-size:1.5rem}.canvas-area{max-width:320px;padding:1rem}.color-swatch{width:26px;height:26px}.animal-name{font-size:1.1rem;min-width:90px}}