.illo { display: block; width: 100%; color: var(--charcoal, #3A3A3A); line-height: 0; overflow: hidden; }
.illo svg { display: block; width: 100%; height: auto; overflow: hidden; }

.illo .il-ink { stroke: currentColor; }
.illo [class~="il-ink"][fill]:not([fill="none"]) { fill: currentColor; }

.illo .il-paper { fill: var(--cream, #FBF3E4); }
.illo.illo--on-dark { color: var(--cream, #FBF3E4); }
.illo.illo--on-dark .il-paper { fill: var(--evergreen, #1E3329); }
.illo.illo--on-night { color: var(--cream, #FBF3E4); }
.illo.illo--on-night .il-paper { fill: var(--evergreen-deep, #14241C); }
.illo.illo--on-cream-deep .il-paper { fill: var(--cream-deep, #F4E9D3); }
.illo.illo--on-surface .il-paper { fill: var(--surface, #FFFCF6); }
.illo .il-water { stroke: var(--teal, #2A8C82); }
.illo--on-dark .il-water, .illo--on-night .il-water { stroke: #7FC1B6; }
.illo .il-accent[fill]:not([fill="none"]) { fill: var(--terracotta, #C66B47); }
.illo .il-accent[stroke]:not([stroke="none"]) { stroke: var(--terracotta, #C66B47); }
.illo--on-dark .il-accent[fill]:not([fill="none"]), .illo--on-night .il-accent[fill]:not([fill="none"]) { fill: var(--terracotta-glow, #E08A63); }
.illo--on-dark .il-accent[stroke]:not([stroke="none"]), .illo--on-night .il-accent[stroke]:not([stroke="none"]) { stroke: var(--terracotta-glow, #E08A63); }
.illo path, .illo line, .illo polyline, .illo polygon, .illo circle, .illo ellipse, .illo rect { vector-effect: non-scaling-stroke; }
.illo--fine path, .illo--fine line, .illo--fine polyline, .illo--fine polygon, .illo--fine circle, .illo--fine ellipse, .illo--fine rect { vector-effect: none; }

.illo .il-draw { vector-effect: none; }

.illo .il-sway, .illo .il-sway-slow { transform-box: fill-box; transform-origin: 50% 100%; }
.illo .il-spin, .illo .il-glow, .illo .il-twinkle, .illo .il-bob { transform-box: fill-box; transform-origin: 50% 50%; }
.illo .il-steam { transform-box: fill-box; transform-origin: 50% 100%; }
.illo .il-breach { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes il-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes il-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes il-glide { 0% { transform: translateX(-12%); } 100% { transform: translateX(112%); } }
@keyframes il-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes il-flow { to { stroke-dashoffset: -64; } }
@keyframes il-steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.9); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.1); } }
@keyframes il-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes il-sweep { 0%, 100% { transform: rotate(-22deg); opacity: .18; } 50% { transform: rotate(22deg); opacity: .34; } }
@keyframes il-sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes il-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes il-spin { to { transform: rotate(360deg); } }
@keyframes il-breach { 0%, 60%, 100% { transform: translateY(18px); opacity: 0; } 70% { opacity: 1; } 78% { transform: translateY(0); opacity: 1; } 90% { transform: translateY(14px); opacity: 0; } }

.illo .il-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.illo.is-live .il-draw { animation: il-draw 2.4s cubic-bezier(.45, .05, .35, 1) both; }
.illo.is-live .il-draw:nth-of-type(2n) { animation-delay: .25s; }
.illo .il-sway { animation: il-sway 6s ease-in-out infinite; }
.illo .il-sway:nth-of-type(2n) { animation-duration: 7.2s; animation-delay: -1.8s; }
.illo .il-sway:nth-of-type(3n) { animation-duration: 5.4s; animation-delay: -3.1s; }
.illo .il-sway-slow { animation: il-sway 9s ease-in-out infinite; animation-delay: -2s; }
.illo .il-glide { animation: il-glide 26s linear infinite; }
.illo .il-bob { animation: il-bob 3.2s ease-in-out infinite; }
.illo .il-flow { animation: il-flow 3.5s linear infinite; }
.illo .il-steam { animation: il-steam 3.6s ease-out infinite; }
.illo .il-steam:nth-of-type(2) { animation-delay: 1.2s; }
.illo .il-steam:nth-of-type(3) { animation-delay: 2.4s; }
.illo .il-glow { animation: il-glow 3.8s ease-in-out infinite; }
.illo .il-sweep { animation: il-sweep 7s ease-in-out infinite; }
.illo .il-sink { animation: il-sink 14s ease-in-out infinite; }
.illo .il-twinkle { animation: il-twinkle 3s ease-in-out infinite; }
.illo .il-twinkle:nth-of-type(2n) { animation-delay: -1.1s; }
.illo .il-twinkle:nth-of-type(3n) { animation-delay: -2.2s; }
.illo .il-spin { animation: il-spin 6s linear infinite; }
.illo .il-breach { animation: il-breach 9s ease-in-out infinite; }

.illo.illo-film { position: absolute; inset: 0; height: 100%; background: var(--evergreen, #1E3329); }
.illo.illo-film.illo--on-night { background: var(--evergreen-deep, #14241C); }
.illo.illo-film svg { width: 100%; height: 100%; }

.illo .il-pan { transform-box: view-box; transform-origin: 50% 55%; }
.illo .il-fall { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes il-pan { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.2%, .6%); } }
@keyframes il-ray { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes il-drift { 0%, 100% { transform: translateX(-24px); } 50% { transform: translateX(24px); } }
@keyframes il-fall { 0% { transform: translate(0, -250px) rotate(0deg); opacity: 0; } 10%, 85% { opacity: .9; } 100% { transform: translate(-46px, 340px) rotate(240deg); opacity: 0; } }
.illo .il-pan { animation: il-pan 28s ease-in-out infinite alternate; }
.illo .il-ray { animation: il-ray 7s ease-in-out infinite; }
.illo .il-ray:nth-of-type(2n) { animation-duration: 9s; animation-delay: -2.5s; }
.illo .il-ray:nth-of-type(3n) { animation-delay: -4s; }
.illo .il-drift { animation: il-drift 18s ease-in-out infinite; }
.illo .il-drift:nth-of-type(2n) { animation-duration: 23s; animation-delay: -6s; }
.illo .il-fall { animation: il-fall 16s linear infinite; }
.illo .il-fall-2 { animation-duration: 19s; animation-delay: -5s; }
.illo .il-fall-3 { animation-duration: 14s; animation-delay: -9s; }
.illo .il-fall-4 { animation-duration: 21s; animation-delay: -13s; }

.illo:not(.is-live) * { animation-play-state: paused !important; }
.illo-ready .illo:not(.was-live) .il-draw { stroke-dashoffset: 1; }

@media (prefers-reduced-motion: reduce) {
  .illo * { animation: none !important; }
  .illo .il-draw { stroke-dashoffset: 0 !important; }
  .illo .il-breach { opacity: 1; transform: none; }
}