/* creature.css from the Margin extension 2.9.0 (product commit 784e56d30d36), pinned by tools/pin_critters.mjs. Do not edit: re-pin. */
/* Tokens from the extension's brand-tokens.css (cream), scoped to the drawing. */
.creature, .creature-swatch {
  --cream: #F5F1E8; --ink: #1A1814; --red: #B83A2E; --pencil: #6B6358;
  --rule-strong: rgba(26, 24, 20, 0.40); --motion-mid: 220ms;
}
.creature { overflow: visible; }
.creature .sn-line  { fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.creature .sn-thin  { stroke-width: 1.3; }
.creature .sn-fill  { fill: var(--cream); }
.creature .sn-fill.sn-line { fill: var(--cream); }
.creature .sn-rule  { fill: none; stroke: var(--rule-strong); stroke-width: 1.2; stroke-linecap: round; }
.creature .sn-dash  { stroke-dasharray: 5 4; }
.creature .sn-ink-fill { fill: var(--ink); stroke: none; }
.creature .sn-red-stroke { fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.creature .sn-red-stroke.sn-thin { stroke-width: 1.4; }
.creature .sn-red-fill { fill: var(--red); stroke: none; }

.creature .sn-line.sn-stalk { stroke-width: 2.7; }
.creature .sn-line.cr-blush { stroke: var(--pencil); }

.creature .cr-leaf .sn-thin { stroke-width: 2.9; }
.creature .cr-ind-sprig .sn-thin { stroke-width: 2.1; }

.creature.creature-small .sn-line, .creature.creature-small .sn-rule, .creature.creature-small .sn-red-stroke { vector-effect: non-scaling-stroke; stroke-width: 1.25px; }
.creature.creature-small .sn-red-stroke { stroke-width: 1.6px; }
.creature.creature-small .sn-thin, .creature.creature-small .sn-line.cr-blush { stroke-width: 1px; }

@keyframes sn-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes sn-drift { 0% { opacity: 0.25; } 50% { opacity: 1; } 100% { opacity: 0.25; } }

@keyframes cr-breathe { from { transform: none; } to { transform: scaleY(1.012); } }
@keyframes cr-blink { 0%, 96% { transform: none; } 97% { transform: scaleY(0.12); } 98.2%, 100% { transform: none; } }
.creature-working .cr-breath, .creature-idle .cr-breath { transform-box: view-box; transform-origin: 50% 81.25%; animation: cr-breathe 6s ease-in-out infinite alternate; }
.creature-working .cr-eye, .creature-idle .cr-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: cr-blink 8s linear infinite; }
.creature.cr-bd-1 .cr-eye { animation-delay: 1s; } .creature.cr-bd-2 .cr-eye { animation-delay: 2s; }
.creature.cr-bd-3 .cr-eye { animation-delay: 3s; } .creature.cr-bd-4 .cr-eye { animation-delay: 4s; }
.creature.cr-bd-5 .cr-eye { animation-delay: 5s; } .creature.cr-bd-6 .cr-eye { animation-delay: 6s; }
.creature.cr-bd-7 .cr-eye { animation-delay: 7s; }
.creature-working .sn-stalks { transform-box: fill-box; transform-origin: 20% 100%; animation: sn-sway 3.6s ease-in-out infinite alternate; }
.creature-away .sn-z1 { animation: sn-drift 4s ease-in-out infinite; }
.creature-away .sn-z2 { animation: sn-drift 4s ease-in-out 0.7s infinite; }
.creature-away .sn-z3 { animation: sn-drift 4s ease-in-out 1.4s infinite; }

.creature, .creature-swatch {
    --coat: var(--cream); --trim: var(--cream);
    --coat-oat: #DCD7CE; --coat-rose: #F3D5DB; --coat-apricot: #F8D6C2; --coat-gilt: #E9DEB8;
    --coat-sage: #D7E3CA; --coat-seafoam: #C2E7E0; --coat-mist: #CCE2ED; --coat-lavender: #E3D9F1;
}
html[data-theme="ink"] .creature, html[data-theme="ink"] .creature-swatch {
    --coat-oat: #3F3B34; --coat-rose: #4B373B; --coat-apricot: #503626; --coat-gilt: #453C21;
    --coat-sage: #35412F; --coat-seafoam: #25443F; --coat-mist: #2D404A; --coat-lavender: #41384F;
}
.creature .cr-coat { fill: var(--coat); stroke: none; }
.creature .cr-trim { fill: var(--trim); stroke: none; }
.creature.coat-oat, .creature-swatch.coat-oat { --coat: var(--coat-oat); }
.creature.coat-rose, .creature-swatch.coat-rose { --coat: var(--coat-rose); }
.creature.coat-apricot, .creature-swatch.coat-apricot { --coat: var(--coat-apricot); }
.creature.coat-gilt, .creature-swatch.coat-gilt { --coat: var(--coat-gilt); }
.creature.coat-sage, .creature-swatch.coat-sage { --coat: var(--coat-sage); }
.creature.coat-seafoam, .creature-swatch.coat-seafoam { --coat: var(--coat-seafoam); }
.creature.coat-mist, .creature-swatch.coat-mist { --coat: var(--coat-mist); }
.creature.coat-lavender, .creature-swatch.coat-lavender { --coat: var(--coat-lavender); }
.creature.trim-oat { --trim: var(--coat-oat); }
.creature.trim-rose { --trim: var(--coat-rose); }
.creature.trim-apricot { --trim: var(--coat-apricot); }
.creature.trim-gilt { --trim: var(--coat-gilt); }
.creature.trim-sage { --trim: var(--coat-sage); }
.creature.trim-seafoam { --trim: var(--coat-seafoam); }
.creature.trim-mist { --trim: var(--coat-mist); }
.creature.trim-lavender { --trim: var(--coat-lavender); }

@keyframes cr-m-open-head { from { transform: rotate(-14deg); } to { transform: none; } }
@keyframes cr-m-open-cover { from { transform: scaleX(0.4); } to { transform: none; } }
@keyframes cr-m-close-cover { from { transform: scaleY(1.2); } to { transform: none; } }
@keyframes cr-m-close-stretch { 0% { transform: none; } 50% { transform: scaleY(1.05); } 100% { transform: none; } }
@keyframes cr-m-check-glance { 0% { transform: none; } 50% { transform: rotate(5deg); } 100% { transform: none; } }
@keyframes cr-m-grew-leaf { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-m-boop-stalks { 0% { transform: none; } 45% { transform: scaleY(0.55); } 100% { transform: none; } }
@keyframes cr-m-boop-lift { 0% { transform: none; } 50% { transform: translateY(-2px); } 100% { transform: none; } }
.cr-m-open .creature .cr-feat { transform-box: fill-box; transform-origin: 20% 100%; animation: cr-m-open-head 900ms ease-out backwards; }
.cr-m-open .creature .sn-book { transform-box: fill-box; transform-origin: 50% 100%; animation: cr-m-open-cover 900ms ease-out backwards; }
.cr-m-close .creature .sn-book { transform-box: fill-box; transform-origin: 50% 100%; animation: cr-m-close-cover 1200ms ease-in-out backwards; }
.cr-m-close .creature .cr-body, .cr-m-close .creature .cr-back { transform-box: view-box; transform-origin: 50% 81%; animation: cr-m-close-stretch 1200ms ease-in-out backwards; }
.cr-m-check .creature .cr-feat { transform-box: fill-box; transform-origin: 20% 100%; animation: cr-m-check-glance 600ms ease-in-out backwards; }
.cr-m-grew .creature .cr-leaf { animation: cr-m-grew-leaf 500ms ease-out backwards; }
.cr-m-boop .creature .cr-feat { transform-box: fill-box; transform-origin: 30% 100%; animation: cr-m-boop-stalks 600ms ease-in-out backwards; }
.cr-m-boop .creature-away .cr-back { transform-box: fill-box; animation: cr-m-boop-lift 600ms ease-in-out backwards; }

.cr-peek .creature .cr-feat { transform-box: fill-box; transform-origin: 30% 100%; transform: scaleY(0.55); }
.cr-peek .creature-away .cr-back { transform-box: fill-box; transform: translateY(-2px); }

.creature .cr-line { opacity: 0; transition: opacity var(--motion-mid) ease-out; }
[data-lines="1"] .creature .cr-line-1 { opacity: 1; }
[data-lines="2"] .creature .cr-line-1, [data-lines="2"] .creature .cr-line-2 { opacity: 1; }
[data-lines="3"] .creature .cr-line-1, [data-lines="3"] .creature .cr-line-2, [data-lines="3"] .creature .cr-line-3 { opacity: 1; }
[data-lines="4"] .creature .cr-line-1, [data-lines="4"] .creature .cr-line-2, [data-lines="4"] .creature .cr-line-3, [data-lines="4"] .creature .cr-line-4 { opacity: 1; }
[data-lines="5"] .creature .cr-line-1, [data-lines="5"] .creature .cr-line-2, [data-lines="5"] .creature .cr-line-3, [data-lines="5"] .creature .cr-line-4, [data-lines="5"] .creature .cr-line-5 { opacity: 1; }
[data-lines="6"] .creature .cr-line-1, [data-lines="6"] .creature .cr-line-2, [data-lines="6"] .creature .cr-line-3, [data-lines="6"] .creature .cr-line-4, [data-lines="6"] .creature .cr-line-5, [data-lines="6"] .creature .cr-line-6 { opacity: 1; }

.critter-glyph { line-height: 0; }
.critter-glyph[hidden] { display: none; }
.critter-glyph .creature { display: block; width: 28px; height: auto; }

.critter-glyph .keep-row { display: flex; align-items: flex-end; gap: 6px; }
.keep-glyph { display: block; overflow: visible; }
.keep-glyph .sn-line { fill: var(--cream); stroke: var(--ink); stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.keep-glyph .sn-thin { stroke-width: 1px; }
.keep-glyph .sn-rule { fill: none; stroke: var(--rule-strong); stroke-width: 1px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.scene { list-style: none; margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
    .creature, .creature *, .scene * { animation: none !important; transition: none !important; }
}
.critters-still .creature, .critters-still .creature *, .critters-still .scene *,
.creature-static, .creature-static * { animation: none !important; transition: none !important; }