/* Footer ek-chala: theme tokens, paint classes and the sketch layer used while the lines draw. */
.ff-wrap{max-width:980px;margin:0 auto 1.2rem;aspect-ratio:1100/752;position:relative}
.ff-art{display:block;width:100%;height:100%;overflow:visible}

/* ---------- tokens: dark (default) ---------- */
.ff-wrap{
  --ff-line:#ffd27a;--ff-ink:#2a0410;--ff-sketch:#ffd27a;--ff-goldline:#ffc24d;
  --ff-panel:#3e0614;--ff-band:#6e0c22;--ff-glowc:#ff9a2a;--ff-halo:#ffcf6e;--ff-halodisc:#8e1129;--ff-ray:#d2452f;
  --ff-skinD:#f3b53c;--ff-skin:#fbd8ad;--ff-skinG:#f8cfb6;--ff-skinK:#f0bf73;
  --ff-red:#c8102e;--ff-gold:#e8a21e;--ff-hair:#1b0206;--ff-eye:#fff8ea;--ff-pink:#f39bb3;
  --ff-green:#2f8a4c;--ff-white:#fff3e0;--ff-owl:#fff0d8;--ff-wood:#9b4a1c;--ff-swan:#fffaf2;
  --ff-flame:#ff9a1f;--ff-clay:#b5522a;--ff-lion:#e9a83a;--ff-mane:#c25d18;--ff-mouse:#bfa58c;
  --ff-yellow:#f2b31b;--ff-blue:#1d5cc0;--ff-teal:#1a8f86;
}
/* ---------- tokens: light ---------- */
:where(html[data-theme="light"]) .ff-wrap{
  --ff-line:#5e0b1c;--ff-ink:#2a0410;--ff-sketch:#b3122b;--ff-goldline:#b06d00;
  --ff-panel:#fff4e2;--ff-ray:#e9604f;--ff-band:#fcd98f;--ff-glowc:#ffb84a;--ff-halo:#ffd36b;
  --ff-white:#fffdf8;--ff-owl:#fffaf0;
}

/* ---------- paint ---------- */
.ff-art :is(path,circle,ellipse,rect){stroke:var(--ff-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;fill:none}
.ff-art .th{stroke-width:1.2}
.ff-art .lw{stroke-width:3.5}
.ff-art .ns{stroke:none}
.ff-art .k{stroke:var(--ff-ink)}
.ff-art .lid{stroke-width:2.2}
.ff-art .red{stroke:var(--ff-red)}
.ff-art .gl{stroke:var(--ff-goldline);stroke-width:2.4}
.ff-art .bowl{stroke:var(--ff-gold);stroke-width:7}
.ff-art .dash{stroke-dasharray:2 5}
.ff-art .f-band{fill:var(--ff-band)}.ff-art .f-panel{fill:var(--ff-panel)}.ff-art .f-glow{fill:url(#ffGlowGrad)}
.ff-art .f-halo{fill:var(--ff-halo)}.ff-art .f-halodisc{fill:var(--ff-halodisc)}.ff-art .f-ray{fill:var(--ff-ray)}.ff-art .f-skinD{fill:var(--ff-skinD)}.ff-art .f-skin{fill:var(--ff-skin)}
.ff-art .f-skinG{fill:var(--ff-skinG)}.ff-art .f-skinK{fill:var(--ff-skinK)}.ff-art .f-red{fill:var(--ff-red)}
.ff-art .f-gold{fill:var(--ff-gold)}.ff-art .f-hair{fill:var(--ff-hair)}.ff-art .f-eye{fill:var(--ff-eye)}
.ff-art .f-ink{fill:var(--ff-ink)}.ff-art .f-pink{fill:var(--ff-pink)}.ff-art .f-green{fill:var(--ff-green)}
.ff-art .f-white{fill:var(--ff-white)}.ff-art .f-owl{fill:var(--ff-owl)}.ff-art .f-wood{fill:var(--ff-wood)}
.ff-art .f-swan{fill:var(--ff-swan)}.ff-art .f-flame{fill:var(--ff-flame)}.ff-art .f-clay{fill:var(--ff-clay)}
.ff-art .f-lion{fill:var(--ff-lion)}.ff-art .f-mane{fill:var(--ff-mane)}.ff-art .f-mouse{fill:var(--ff-mouse)}
.ff-art .f-yellow{fill:var(--ff-yellow)}.ff-art .f-blue{fill:var(--ff-blue)}.ff-art .f-teal{fill:var(--ff-teal)}
.ff-art .halo,.ff-art .flame{transform-box:fill-box;transform-origin:50% 50%}
.ff-art .flame{transform-origin:50% 100%}

/* ---------- sketch: the patua's gold line, drawn before the colour arrives ---------- */
.ff-art .ff-sketch :is(path,circle,ellipse,rect){fill:none!important;stroke:var(--ff-sketch)!important;stroke-width:1.5!important}
.ff-art .ff-sketch .f-panel,.ff-art .ff-sketch .f-band,.ff-art .ff-sketch .f-glow{display:none}

/* before the script runs and for reduced motion the finished painting shows; the script hides it only to animate */
@media (prefers-reduced-motion:reduce){.ff-art .ff-sketch{display:none}}