/* Pakratt, round 2: the rat. One walnut line, flat fills, no gradients.
   Every colour is a custom property, so mono, reversed and dark are
   just a different set of values (see theme.css for the defaults). */
.rat {
  overflow: visible; display: block;
  --rat-sw: 2.6;
  --rat-ink: #3a2a1f; --rat-fur: #a98263; --rat-fur-shade: #8a664b; --rat-cream: #f5e6cc; --rat-ear: #eeb4a4;
  --rat-nose: #d97a6c; --rat-blush: #ef9c8c; --rat-paw: #f0d6c4; --rat-white: #fff;
  --rat-accent: #c8572b; --rat-check: #557035; --rat-bag: #c8572b; --rat-bag-dk: #a4431e; --rat-roll: #e2a93b; --rat-paper: #fffdf7;
  --rat-berry: #b03a52; --rat-tire: #3b3532; --rat-rim: #d9d1c5; --rat-hub: #9b9289; --rat-box: #d9ad74; --rat-ground: var(--rat-ink);
}
.rat .r-o { stroke: var(--rat-ink); stroke-width: calc(var(--rat-sw) * 1px); stroke-linejoin: round; stroke-linecap: round; }
.rat .r-thin { stroke-width: calc(var(--rat-sw) * .62px); }
.rat .r-thinner { stroke-width: calc(var(--rat-sw) * .48px); }
.rat .r-fur { fill: var(--rat-fur); }
.rat .r-cream { fill: var(--rat-cream); }
.rat .r-pink { fill: var(--rat-ear); }
.rat .r-fold { stroke-width: 1.4px; opacity: .28; }
.rat .r-shade { fill: var(--rat-fur-shade); opacity: .3; }
.rat .r-bshade { fill: var(--rat-fur-shade); opacity: .26; }
.rat .r-nose { fill: var(--rat-nose); }
.rat .r-mouth { fill: #7a3a33; }
.rat .r-tongue { fill: var(--rat-nose); }
.rat .r-blush { fill: var(--rat-blush); opacity: .55; }
.rat .r-ink { fill: var(--rat-ink); }
.rat .r-white { fill: var(--rat-white); }
.rat .r-line { fill: none; stroke: var(--rat-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9px; }
.rat .r-whisk .r-line { stroke-width: 1.3px; opacity: .55; }
.rat .r-eyeline { stroke-width: 3.6px; }
.rat .r-brow { stroke-width: 2.4px; }
.rat .r-toe { stroke-width: 1.4px; opacity: .7; }
.rat .r-fluff { stroke-width: 1.5px; opacity: .4; }
.rat .r-rule { stroke-width: 1.5px; opacity: .5; }
.rat .r-limb-o { fill: none; stroke: var(--rat-ink); stroke-linecap: round; stroke-width: calc(13px + var(--rat-sw) * 2px); }
.rat .r-limb { fill: none; stroke: var(--rat-fur); stroke-linecap: round; stroke-width: 13px; }
.rat .r-paw, .rat .r-foot { fill: var(--rat-paw); }
.rat .r-tail-o { fill: none; stroke: var(--rat-ink); stroke-linecap: round; stroke-width: calc(21px + var(--rat-sw) * 2px); }
.rat .r-tail { fill: none; stroke: var(--rat-fur-shade); stroke-linecap: round; stroke-width: 21px; }
.rat .r-tail-tip { fill: none; stroke: var(--rat-cream); stroke-linecap: round; stroke-width: 14px; }
.rat .r-ground { fill: var(--rat-ground); opacity: .09; }
/* Props */
.rat .r-paper { fill: var(--rat-paper); }
.rat .r-clip { fill: var(--rat-hub); }
.rat .r-accent-s { fill: none; stroke: var(--rat-accent); stroke-width: 3px; stroke-linecap: round; }
.rat .r-check { fill: none; stroke: var(--rat-check); stroke-width: 1.9px; stroke-linecap: round; stroke-linejoin: round; }
.rat .r-pencil { fill: var(--rat-roll); }
.rat .r-wood { fill: var(--rat-cream); }
.rat .r-eraser { fill: var(--rat-ear); }
.rat .r-tirec { fill: var(--rat-tire); }
.rat .r-tread { fill: none; stroke: #221e1c; stroke-width: 5px; stroke-dasharray: 3 4.6; }
.rat .r-rim { fill: var(--rat-rim); }
.rat .r-hub { fill: var(--rat-hub); }
.rat .r-sheen { fill: #fff; opacity: .2; }
.rat .r-pole { stroke-width: 2.6px; }
.rat .r-berry { fill: var(--rat-berry); }
.rat .r-roll { fill: var(--rat-roll); }
.rat .r-roll-s { fill: none; stroke: var(--rat-ink); stroke-width: 2px; opacity: .3; }
.rat .r-bag { fill: var(--rat-bag); }
.rat .r-strap { fill: none; stroke: var(--rat-bag-dk); stroke-width: 7px; stroke-linecap: round; }
.rat .r-buckle { stroke-width: 2.4px; opacity: .55; }
.rat .r-zip { fill: none; stroke: var(--rat-ink); stroke-width: 2.2px; stroke-linecap: round; opacity: .8; }
.rat .r-stitch { stroke-width: 1.5px; stroke-dasharray: 2 4; opacity: .35; }
.rat .r-patch { fill: var(--rat-roll); }
.rat .r-box { fill: var(--rat-box); }
.rat .r-boxlid { fill: var(--rat-box); }
.rat .r-tape { fill: #fff; opacity: .35; }
.rat .r-paddle { fill: none; stroke: var(--rat-ink); stroke-linecap: round; }
.rat .r-towel { fill: var(--rat-accent); }
.rat .r-spark { fill: var(--rat-roll); stroke: var(--rat-ink); stroke-width: 1.6px; stroke-linejoin: round; }
.rat .r-drop { fill: #bfe0e4; }
.rat .r-motion { stroke-width: 2.2px; opacity: .45; }
.rat .r-zs text { font: italic 400 26px/1 var(--rat-zfont, 'Instrument Serif', Georgia, serif); fill: var(--rat-ink); opacity: .55; }

/* Small sizes: heavier line, no hairlines. */
.rat-small { --rat-sw: 4.2; }
.rat-small .r-fold, .rat-small .r-shade { display: none; }

/* Mono and reversed */
.rat.mono { --rat-fur: #fff; --rat-fur-shade: #fff; --rat-cream: #fff; --rat-ear: #fff; --rat-nose: var(--rat-ink); --rat-blush: transparent; --rat-paw: #fff; --rat-white: #fff; }
.rat.mono .r-shade, .rat.mono .r-bshade { display: none; }
.rat.reversed { --rat-ink: #fbf6ec; --rat-fur: transparent; --rat-fur-shade: transparent; --rat-cream: transparent; --rat-ear: transparent; --rat-nose: #fbf6ec; --rat-blush: transparent; --rat-paw: transparent; --rat-white: #2e2118; }
.rat.reversed .r-ink { fill: #fbf6ec; }
.rat.reversed .r-shade { display: none; }
/* Dark surfaces: fur one step lighter so the silhouette holds on walnut. */
.rat.on-dark, [data-theme="dark"] .rat:not(.mono):not(.reversed):not(.app-ic) { --rat-fur: #b48b69; --rat-fur-shade: #94704f; --rat-ink: #160f0b; --rat-paper: #f3e8d8; --rat-ground: #000; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .rat:not(.mono):not(.reversed):not(.app-ic) { --rat-fur: #b48b69; --rat-fur-shade: #94704f; --rat-ink: #160f0b; --rat-paper: #f3e8d8; --rat-ground: #000; } }
/* The sleeping Zs float off the rat onto the page, so on walnut they take the page's ink, not the rat's. */
[data-theme="dark"] .rat .r-zs text { fill: var(--pk-text-2); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .rat .r-zs text { fill: var(--pk-text-2); } }

/* Life */
.rat .r-lid, .rat .r-ear, .rat .r-zs text, .rat .r-tailg, .rat .r-motion { transform-box: fill-box; }
.rat .r-lid { transform-origin: center; }
.rat.blink .r-lid { animation: r-blink .18s ease-in-out; }
@keyframes r-blink { 50% { transform: scaleY(.08); } }
.rat .r-look { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.rat .r-ear-l { transform-origin: 80% 90%; } .rat .r-ear-r { transform-origin: 20% 90%; }
.rat.twitch .r-ear-l { animation: r-twl .5s ease-in-out; } .rat.twitch .r-ear-r { animation: r-twr .5s ease-in-out .06s; }
@keyframes r-twl { 30% { transform: rotate(-10deg); } 60% { transform: rotate(4deg); } }
@keyframes r-twr { 30% { transform: rotate(10deg); } 60% { transform: rotate(-4deg); } }
.rat.alive .r-tailg { transform-origin: 0% 50%; animation: r-tail 4.6s ease-in-out infinite; }
@keyframes r-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
.rat .r-zs text { animation: r-z 3s ease-in-out infinite; }
.rat .r-zs text:nth-child(2) { animation-delay: .5s; } .rat .r-zs text:nth-child(3) { animation-delay: 1s; }
@keyframes r-z { 0%, 100% { opacity: .12; transform: translateY(4px); } 50% { opacity: .6; transform: translateY(-2px); } }
.rat.alive .r-motion { animation: r-wave 1.3s ease-in-out infinite; }
@keyframes r-wave { 0%, 100% { opacity: .08; } 50% { opacity: .55; } }
.rat.hop { animation: r-hop .55s cubic-bezier(.2, .9, .3, 1.04); transform-origin: 50% 100%; }
@keyframes r-hop { 30% { transform: translateY(-12px) scaleY(1.04); } 62% { transform: translateY(0) scaleY(.95); } 100% { transform: none; } }

/* Construction view: just the shapes it's built from. */
.rat.construct * { fill: transparent !important; stroke: var(--rat-ink) !important; stroke-width: .7px !important; stroke-dasharray: 3 2.5; opacity: 1 !important; }
.rat.construct .r-limb-o, .rat.construct .r-tail-o, .rat.construct .r-tail-tip, .rat.construct .r-whisk { display: none; }
.rat.construct .r-limb, .rat.construct .r-tail { stroke-dasharray: none; }
@media (prefers-reduced-motion: reduce) { .rat, .rat * { animation: none !important; transition: none !important; } }
.rat .r-bagdk { fill: var(--rat-bag-dk); }
.rat .r-wood2 { fill: #d9a35a; }
.rat .r-towel2 { fill: var(--rat-roll); }
.rat .r-ball { fill: #cdd85a; }
.rat .r-boxfront { fill: var(--rat-box); }