/* Color the Jungle — theme styles */
.scene.themed { background:linear-gradient(180deg,#DFF0DA 0%, #CDE8C9 46%, #B7DCB4 100%); }
#scene-intro.themed { background:linear-gradient(180deg,#CFE9F6 0%, #DFF0DA 48%, #B7DCB4 100%); }

.easel { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:14px; padding-top:54px; padding-bottom:14px; }
.art-frame { position:relative; width:min(96vw, 620px); aspect-ratio:400/260; max-height:100%;
  background:var(--cream); border:6px solid #fff; border-radius:18px; box-shadow:0 10px 26px rgba(30,42,74,.24); }
@media (min-aspect-ratio:5/4) { .art-frame { width:min(80vw, 720px); } }
.line-art { position:absolute; inset:0; width:100%; height:100%; }
.line-art .region { fill:#FFFDF8; stroke:#1E2A4A; stroke-width:3; stroke-linejoin:round;
  transition:fill .55s cubic-bezier(.4,.1,.3,1); }
.line-art .region.splashing { animation:splash-in .6s cubic-bezier(.34,1.56,.64,1); transform-box:fill-box; transform-origin:center; }
@keyframes splash-in { 0%{transform:scale(.9)} 55%{transform:scale(1.03)} 100%{transform:scale(1)} }
.line-art .ink { fill:none; stroke:#1E2A4A; stroke-width:3; stroke-linecap:round; }
.markers { position:absolute; inset:0; }
.art-frame.finished { animation:frame-glow 1.2s ease-in-out 2; }
@keyframes frame-glow { 0%,100%{ box-shadow:0 10px 26px rgba(30,42,74,.24) } 50%{ box-shadow:0 0 0 8px rgba(232,195,106,.75), 0 10px 30px rgba(30,42,74,.3) } }

@media (prefers-reduced-motion:reduce) {
  .line-art .region.splashing, .art-frame.finished { animation:none; }
}
@media (max-height:600px) { .easel { padding-top:48px; } }