/* ==========================================================================
   BotBox — cartoon cooler illustration.

   Ported from the supplied "Cartoon Cooler" component. Kept in its ORIGINAL
   candy palette on purpose: it is quarantined inside .cooler-stage with its
   own mint backdrop, so the color break reads as a deliberate illustration
   rather than the site palette falling apart. Nothing in here leaks — every
   selector is scoped under .cooler.

   Built from ~134 divs of inline style, deduped to the rules below. All
   lengths are in em against .cooler's font-size, so the entire machine scales
   from that single value.
   ========================================================================== */

/* No frame, no background of its own. The hero section carries the mint
   radial that used to live in here, so the machine stands in the page instead
   of inside a pasted-in panel. That box was the single biggest reason the
   earlier build read as two designs stapled together. */
.cooler-stage {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}

/* One knob drives the whole illustration. 47em == the machine's 470px width. */
.cooler {
  font-size: 6.1px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  line-height: 1;
  flex: none;
}
@media (min-width: 420px)  { .cooler { font-size: 7.2px; } }
@media (min-width: 900px)  { .cooler { font-size: 7.6px; } }
@media (min-width: 1120px) { .cooler { font-size: 8.9px; } }

@keyframes bob   { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-1em) rotate(.4deg); } }
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes led   { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* The machine idles, blinks, and pulses. None of that should happen for
   someone who asked their OS to stop moving things. */
@media (prefers-reduced-motion: reduce) {
  .cooler *, .cooler { animation: none !important; }
}

/* ---- generated: deduped from the source component's inline styles ---- */
.cooler .bb-c1 { position: relative; animation: bob 4.5s ease-in-out infinite; }
.cooler .bb-c2 { position: absolute; left: 50%; bottom: -2.6em; width: 44em; height: 4.4em; transform: translateX(-50%); background: rgba(20,18,40,.18); border-radius: 50%; filter: blur(0.6em); }
.cooler .bb-c3 { position: relative; width: 47em; padding: 1.6em; border: 0.6em solid #0b0c11; border-radius: 4em; background: linear-gradient(155deg, #3b3e4b 0%, #22242c 34%, #14151a 100%); box-shadow: inset 0 -1.4em 0 rgba(0,0,0,.35), inset 1.4em 0 0 rgba(255,255,255,.06), 0 1.8em 0 #0b0c11; }
.cooler .bb-c4 { position: absolute; top: 2.6em; left: 3.4em; width: 4.4em; height: 30em; border-radius: 3em; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.cooler .bb-c5 { display: flex; flex-direction: column; align-items: center; gap: 0.8em; padding: 1.4em 0 1.8em; }
.cooler .bb-c6 { display: flex; gap: 2.6em; align-items: center; padding-bottom: 0.2em; }
.cooler .bb-c7 { width: 3.4em; height: 3.4em; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; display: flex; align-items: center; justify-content: center; animation: blink 5.2s infinite; }
.cooler .bb-c8 { width: 1.3em; height: 1.3em; border-radius: 50%; background: #0b0c11; transform: translate(0.2em, 0.2em); }
.cooler .bb-c9 { width: 3.4em; height: 3.4em; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; display: flex; align-items: center; justify-content: center; animation: blink 5.2s .15s infinite; }
.cooler .bb-c10 { display: flex; align-items: center; gap: 1.2em; }
.cooler .bb-c11 { width: 1.8em; height: 1.8em; border-radius: 0.5em; background: #fffdf7; transform: rotate(45deg); }
.cooler .bb-c12 { color: #fffdf7; font-size: 3em; font-weight: 800; letter-spacing: 0.05em; }
.cooler .bb-c13 { display: flex; gap: 1.2em; align-items: stretch; }
.cooler .bb-c14 { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.8em; padding: 1.2em 1em; border: 0.6em solid #0b0c11; border-radius: 2.2em; background: linear-gradient(160deg, #eaf7ff 0%, #cfe8f8 55%, #bcdcf1 100%); box-shadow: inset 0 0 0 0.4em rgba(255,255,255,.5); }
.cooler .bb-c15 { height: 7.8em; display: flex; align-items: flex-end; justify-content: center; gap: 0.8em; border-bottom: 0.6em solid #f6fbff; box-shadow: 0 0.6em 0 rgba(11,12,17,.85); }
.cooler .bb-c16 { width: 5.2em; height: 6.6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #ff7a3c 0 1em, #ff9660 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.14); transition: transform .18s; }
.cooler .bb-h17:hover { transform: translateY(-0.6em) rotate(-3deg); }
.cooler .bb-c18 { height: 0.8em; margin: 0.3em 0.6em 0; border-radius: 0.4em; background: rgba(255,255,255,.7); }
.cooler .bb-c19 { width: 2.6em; height: 2.6em; margin: 1em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c20 { width: 4.8em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #ffd23f 0 1em, #ffe27a 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-h21:hover { transform: translateY(-0.6em) rotate(3deg); }
.cooler .bb-c22 { width: 2.4em; height: 2.4em; margin: 0.8em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c23 { width: 5.4em; height: 6.8em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #ff5c8a 0 1em, #ff86a9 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.14); transition: transform .18s; }
.cooler .bb-h24:hover { transform: translateY(-0.6em) rotate(-2deg); }
.cooler .bb-c25 { width: 2.8em; height: 2.8em; margin: 1em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c26 { width: 4.8em; height: 6.2em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #7ed957 0 1em, #a2e884 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-c27 { width: 2.4em; height: 2.4em; margin: 0.9em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c28 { width: 5em; height: 6.4em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #4cc9f0 0 1em, #86dcf6 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-c29 { width: 2.6em; height: 2.6em; margin: 0.9em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c30 { height: 7.2em; display: flex; align-items: flex-end; justify-content: center; gap: 0.9em; border-bottom: 0.6em solid #f6fbff; box-shadow: 0 0.6em 0 rgba(11,12,17,.85); }
.cooler .bb-c31 { width: 4.6em; height: 5.8em; border: 0.3em solid #0b0c11; border-radius: 0.6em; background: linear-gradient(180deg, #f6f1e4 0 40%, #e35d3c 40% 100%); box-shadow: inset 0 -0.6em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-h32:hover { transform: translateY(-0.6em); }
.cooler .bb-c33 { width: 3em; height: 1.2em; margin: 0.8em auto 0; border-radius: 0.6em; background: #0b0c11; opacity: .18; }
.cooler .bb-c34 { width: 4.4em; height: 5.4em; border: 0.3em solid #0b0c11; border-radius: 0.6em; background: linear-gradient(180deg, #cfe4ff 0 45%, #3f7ad6 45% 100%); box-shadow: inset 0 -0.6em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-c35 { width: 2.8em; height: 1.2em; margin: 0.8em auto 0; border-radius: 0.6em; background: #0b0c11; opacity: .18; }
.cooler .bb-c36 { width: 5em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.6em; background: linear-gradient(180deg, #ffe9b8 0 42%, #f2a53c 42% 100%); box-shadow: inset 0 -0.6em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-c37 { width: 3.2em; height: 1.2em; margin: 0.9em auto 0; border-radius: 0.6em; background: #0b0c11; opacity: .18; }
.cooler .bb-c38 { width: 4.4em; height: 5.6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #b07cf0 0 1em, #c9a2f7 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-c39 { width: 2.2em; height: 2.2em; margin: 0.7em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c40 { width: 4.4em; height: 5.2em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: repeating-linear-gradient(115deg, #58c7a8 0 1em, #8adfc7 1em 2em); box-shadow: inset 0 -0.8em 0 rgba(0,0,0,.12); transition: transform .18s; }
.cooler .bb-c41 { width: 2.2em; height: 2.2em; margin: 0.6em auto 0; border-radius: 50%; background: #fffdf7; border: 0.3em solid #0b0c11; }
.cooler .bb-c42 { height: 6em; display: flex; align-items: flex-end; justify-content: center; gap: 0.7em; border-bottom: 0.6em solid #f6fbff; box-shadow: 0 0.6em 0 rgba(11,12,17,.85); }
.cooler .bb-c43 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #e23b3b 0 55%, #ff7a7a 55% 75%, #e23b3b 75%); transition: transform .18s; }
.cooler .bb-c44 { height: 0.6em; margin: 0.2em 0.3em 0; border-radius: 0.3em; background: #e6e9ef; }
.cooler .bb-c45 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #2f6fe0 0 55%, #7ba7f2 55% 75%, #2f6fe0 75%); transition: transform .18s; }
.cooler .bb-c46 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #3aa76d 0 55%, #7fd3a3 55% 75%, #3aa76d 75%); transition: transform .18s; }
.cooler .bb-c47 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #f0a02c 0 55%, #ffca75 55% 75%, #f0a02c 75%); transition: transform .18s; }
.cooler .bb-c48 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #9b59d0 0 55%, #c795ec 55% 75%, #9b59d0 75%); transition: transform .18s; }
.cooler .bb-c49 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #d6dae2 0 55%, #f2f5fa 55% 75%, #d6dae2 75%); transition: transform .18s; }
.cooler .bb-c50 { width: 2.7em; height: 4.6em; border: 0.3em solid #0b0c11; border-radius: 0.8em; background: linear-gradient(90deg, #ff5c8a 0 55%, #ff9ab7 55% 75%, #ff5c8a 75%); transition: transform .18s; }
.cooler .bb-c51 { height: 7.4em; display: flex; align-items: flex-end; justify-content: center; gap: 0.8em; border-bottom: 0.6em solid #f6fbff; box-shadow: 0 0.6em 0 rgba(11,12,17,.85); }
.cooler .bb-c52 { width: 3.2em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: linear-gradient(90deg, #1f8f4d 0 52%, #6fd396 52% 72%, #1f8f4d 72%); transition: transform .18s; }
.cooler .bb-c53 { height: 0.7em; margin: 0.2em 0.4em 0; border-radius: 0.4em; background: #e6e9ef; }
.cooler .bb-c54 { height: 1.2em; margin: 1.4em 0 0; background: rgba(255,255,255,.75); }
.cooler .bb-c55 { width: 3.2em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: linear-gradient(90deg, #0f4fa8 0 52%, #6d9fee 52% 72%, #0f4fa8 72%); transition: transform .18s; }
.cooler .bb-c56 { width: 3.2em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: linear-gradient(90deg, #c72f2f 0 52%, #ff8585 52% 72%, #c72f2f 72%); transition: transform .18s; }
.cooler .bb-c57 { width: 3.2em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: linear-gradient(90deg, #16a3b8 0 52%, #74dfec 52% 72%, #16a3b8 72%); transition: transform .18s; }
.cooler .bb-c58 { width: 3.2em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: linear-gradient(90deg, #e0782a 0 52%, #ffb875 52% 72%, #e0782a 72%); transition: transform .18s; }
.cooler .bb-c59 { width: 3.2em; height: 6em; border: 0.3em solid #0b0c11; border-radius: 0.9em; background: linear-gradient(90deg, #5b5f6b 0 52%, #adb3bf 52% 72%, #5b5f6b 72%); transition: transform .18s; }
.cooler .bb-c60 { height: 7.8em; display: flex; align-items: flex-end; justify-content: center; gap: 1em; border-bottom: 0.6em solid #f6fbff; box-shadow: 0 0.6em 0 rgba(11,12,17,.85); }
.cooler .bb-c61 { display: flex; flex-direction: column; align-items: center; transition: transform .18s; }
.cooler .bb-c62 { width: 1.4em; height: 0.9em; border: 0.3em solid #0b0c11; border-radius: 0.3em 0.3em 0 0; background: #ffd23f; }
.cooler .bb-c63 { width: 2.6em; height: 5.2em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 0.8em 0.8em 1em 1em; background: linear-gradient(90deg, #9fd8b0 0 50%, #d6f0dd 50% 68%, #9fd8b0 68%); }
.cooler .bb-c64 { width: 1.4em; height: 0.9em; border: 0.3em solid #0b0c11; border-radius: 0.3em 0.3em 0 0; background: #ff5c8a; }
.cooler .bb-c65 { width: 2.6em; height: 5.6em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 0.8em 0.8em 1em 1em; background: linear-gradient(90deg, #f2a9c2 0 50%, #ffdbe6 50% 68%, #f2a9c2 68%); }
.cooler .bb-c66 { width: 1.4em; height: 0.9em; border: 0.3em solid #0b0c11; border-radius: 0.3em 0.3em 0 0; background: #4cc9f0; }
.cooler .bb-c67 { width: 2.6em; height: 5em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 0.8em 0.8em 1em 1em; background: linear-gradient(90deg, #a8d9ef 0 50%, #ddf1fb 50% 68%, #a8d9ef 68%); }
.cooler .bb-c68 { width: 1.4em; height: 0.9em; border: 0.3em solid #0b0c11; border-radius: 0.3em 0.3em 0 0; background: #f0a02c; }
.cooler .bb-c69 { width: 2.6em; height: 5.8em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 0.8em 0.8em 1em 1em; background: linear-gradient(90deg, #f6cf8f 0 50%, #ffeccb 50% 68%, #f6cf8f 68%); }
.cooler .bb-c70 { width: 1.4em; height: 0.9em; border: 0.3em solid #0b0c11; border-radius: 0.3em 0.3em 0 0; background: #7ed957; }
.cooler .bb-c71 { width: 2.6em; height: 5.2em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 0.8em 0.8em 1em 1em; background: linear-gradient(90deg, #b7e6a0 0 50%, #e4f7da 50% 68%, #b7e6a0 68%); }
.cooler .bb-c72 { width: 1.4em; height: 0.9em; border: 0.3em solid #0b0c11; border-radius: 0.3em 0.3em 0 0; background: #b07cf0; }
.cooler .bb-c73 { width: 2.6em; height: 5.4em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 0.8em 0.8em 1em 1em; background: linear-gradient(90deg, #cbb0ef 0 50%, #ece0fb 50% 68%, #cbb0ef 68%); }
.cooler .bb-c74 { height: 8.8em; display: flex; align-items: flex-end; justify-content: center; gap: 1em; }
.cooler .bb-c75 { width: 1.8em; height: 1em; border: 0.3em solid #0b0c11; border-radius: 0.4em 0.4em 0 0; background: #e23b3b; }
.cooler .bb-c76 { width: 3.6em; height: 6.8em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 1em 1em 1.4em 1.4em; background: linear-gradient(90deg, #7a2222 0 48%, #c95252 48% 66%, #7a2222 66%); }
.cooler .bb-c77 { height: 1.6em; margin: 2.2em 0 0; background: #fffdf7; border-top: 0.3em solid #0b0c11; border-bottom: 0.3em solid #0b0c11; }
.cooler .bb-c78 { width: 1.8em; height: 1em; border: 0.3em solid #0b0c11; border-radius: 0.4em 0.4em 0 0; background: #3aa76d; }
.cooler .bb-c79 { width: 3.6em; height: 7.2em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 1em 1em 1.4em 1.4em; background: linear-gradient(90deg, #2b6f4a 0 48%, #6cb98f 48% 66%, #2b6f4a 66%); }
.cooler .bb-c80 { height: 1.6em; margin: 2.4em 0 0; background: #fffdf7; border-top: 0.3em solid #0b0c11; border-bottom: 0.3em solid #0b0c11; }
.cooler .bb-c81 { width: 1.8em; height: 1em; border: 0.3em solid #0b0c11; border-radius: 0.4em 0.4em 0 0; background: #f0a02c; }
.cooler .bb-c82 { width: 3.6em; height: 6.6em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 1em 1em 1.4em 1.4em; background: linear-gradient(90deg, #d98b1f 0 48%, #ffc86e 48% 66%, #d98b1f 66%); }
.cooler .bb-c83 { height: 1.6em; margin: 2em 0 0; background: #fffdf7; border-top: 0.3em solid #0b0c11; border-bottom: 0.3em solid #0b0c11; }
.cooler .bb-c84 { width: 1.8em; height: 1em; border: 0.3em solid #0b0c11; border-radius: 0.4em 0.4em 0 0; background: #2f6fe0; }
.cooler .bb-c85 { width: 3.6em; height: 7.4em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 1em 1em 1.4em 1.4em; background: linear-gradient(90deg, #1c4a97 0 48%, #6d9fee 48% 66%, #1c4a97 66%); }
.cooler .bb-c86 { height: 1.6em; margin: 2.6em 0 0; background: #fffdf7; border-top: 0.3em solid #0b0c11; border-bottom: 0.3em solid #0b0c11; }
.cooler .bb-c87 { width: 1.8em; height: 1em; border: 0.3em solid #0b0c11; border-radius: 0.4em 0.4em 0 0; background: #ff5c8a; }
.cooler .bb-c88 { width: 3.6em; height: 7em; margin-top: -0.3em; border: 0.3em solid #0b0c11; border-radius: 1em 1em 1.4em 1.4em; background: linear-gradient(90deg, #b8365c 0 48%, #ff8fb0 48% 66%, #b8365c 66%); }
.cooler .bb-c89 { height: 1.6em; margin: 2.3em 0 0; background: #fffdf7; border-top: 0.3em solid #0b0c11; border-bottom: 0.3em solid #0b0c11; }
.cooler .bb-c90 { position: absolute; inset: 0; overflow: hidden; border-radius: 1.6em; pointer-events: none; }
.cooler .bb-c91 { position: absolute; top: -6em; left: 2.6em; width: 5.2em; height: 62em; background: rgba(255,255,255,.42); transform: rotate(16deg); }
.cooler .bb-c92 { position: absolute; top: -6em; left: 9.6em; width: 2.2em; height: 62em; background: rgba(255,255,255,.28); transform: rotate(16deg); }
.cooler .bb-c93 { width: 8.2em; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.8em 0; border-radius: 1.8em; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25)); }
.cooler .bb-c94 { width: 4.4em; height: 4.4em; border-radius: 1.2em; background: #fffdf7; transform: rotate(45deg); box-shadow: 0 0 2.4em rgba(255,255,255,.35); }
.cooler .bb-c95 { display: flex; flex-direction: column; align-items: center; gap: 0.8em; padding: 1.2em 0.8em; border: 0.4em solid #0b0c11; border-radius: 1.4em; background: #23252e; }
.cooler .bb-c96 { width: 1em; height: 1em; border-radius: 50%; background: #7ed957; animation: led 1.6s infinite; }
.cooler .bb-c97 { width: 3.4em; height: 2.2em; border: 0.3em solid #0b0c11; border-radius: 0.6em; background: #fffdf7; }
.cooler .bb-c98 { color: #fffdf7; font-size: 1.1em; font-weight: 700; letter-spacing: 0.1em; }
.cooler .bb-c99 { width: 0.6em; height: 9em; border-radius: 0.4em; background: rgba(255,255,255,.14); }
.cooler .bb-c100 { margin-top: 1.4em; height: 7.4em; border: 0.5em solid #0b0c11; border-radius: 2em; background: linear-gradient(180deg, #26282f, #101116); display: flex; align-items: center; justify-content: center; }
.cooler .bb-c101 { width: 30em; height: 2.6em; border-radius: 1.3em; background: rgba(255,255,255,.07); box-shadow: inset 0 0.3em 0 rgba(0,0,0,.4); }
.cooler .bb-c102 { display: flex; justify-content: space-between; padding: 0 4.6em; margin-top: -0.6em; }
.cooler .bb-c103 { width: 4.6em; height: 2.6em; border: 0.5em solid #0b0c11; border-top: none; border-radius: 0 0 1.6em 1.6em; background: #1b1d24; }