.blob-mascot {
  --jelly-body-stroke: #e07a12;
  position: relative;
  display: inline-block;
  width: 120px;
  max-width: 100%;
  line-height: 0;
}
.blob-svg {
  width: 100%;
  height: auto;
  display: block;
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  filter: drop-shadow(0 6px 8px rgba(80, 45, 15, .22));
  -webkit-user-drag: none;
  user-select: none;
}
.blob-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
  color: #3a2410;
  border: 1px solid var(--jelly-body-stroke);
  border-radius: 12px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(120, 70, 20, .18);
  z-index: 2;
  animation: blob-bubble-in .18s ease both;
}
.blob-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}
@keyframes blob-bubble-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.blob-modal-scrim { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(40, 22, 8, .42); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; }
.blob-modal-scrim.is-open { opacity: 1; }
.blob-modal { position: relative; width: min(380px, 100%); background: #fffdfa; border: 1px solid #f0dcc8; border-radius: 24px; padding: 40px 26px 24px; text-align: center; color: #2b211c; box-shadow: 0 30px 70px rgba(80, 45, 15, .28); transform: translateY(10px) scale(.97); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.blob-modal-scrim.is-open .blob-modal { transform: none; }
.blob-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f4e7db; color: #6a4a2c; font-size: 18px; line-height: 1; cursor: pointer; }
.blob-modal-close:hover { background: #ecd8c6; }
.blob-modal-mascot { width: 116px; margin: 2px auto 4px; }
.blob-modal-eyebrow { display: block; color: var(--lx-orange); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.blob-modal h2 { margin: 6px 0 8px; font-size: 24px; letter-spacing: -.03em; }
.blob-modal-copy { margin: 0 0 20px; color: #6f6157; font-size: 13.5px; }
.blob-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.blob-modal-actions form { margin: 0; }
.blob-modal-actions .blob-btn-stay,
.blob-modal-actions .blob-btn-out { width: 100%; height: 46px; min-width: 0; border-radius: 13px; font-weight: 800; font-size: 14px; cursor: pointer; padding: 0; }
.blob-modal-actions .blob-btn-stay { background: #fff; border: 1px solid #e6d7c6; color: #2b211c; }
.blob-modal-actions .blob-btn-stay:hover { background: #fff2ea; border-color: #ff7a2e; color: #d8451f; }
.blob-modal-actions .blob-btn-out { background: linear-gradient(135deg, #ff7a2e, #ff4d2d); color: #fff; border: 0; }
.blob-modal-actions .blob-btn-out:hover { filter: brightness(1.05); box-shadow: 0 10px 22px rgba(219, 72, 39, .3); }
.blob-toast {
  position: fixed; right: 0; bottom: 18%; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: min(300px, 82vw);
  transform: translateX(120%); opacity: 0;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.25), opacity .3s ease;
  pointer-events: none;
}
.blob-toast.is-open { transform: translateX(0); opacity: 1; }
.blob-toast-bubble {
  pointer-events: auto; position: relative; margin-right: 16px; max-width: 100%;
  background: #fffdf7; color: #241a12;
  border: 3px solid #241a12; border-radius: 20px;
  padding: 12px 14px 10px; box-shadow: 4px 4px 0 rgba(36, 26, 18, .9);
}
.blob-toast-bubble b { display: block; font-size: 13px; font-weight: 900; letter-spacing: -.01em; color: var(--lx-orange); }
.blob-toast-bubble > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; font-weight: 600; word-break: break-word; }
.blob-toast-bubble::before, .blob-toast-bubble::after {
  content: ""; position: absolute; right: 28px; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
}
.blob-toast-bubble::before { bottom: -16px; border-top: 16px solid #241a12; }
.blob-toast-bubble::after { bottom: -11px; border-top: 13px solid #fffdf7; }

.blob-toast-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.blob-toast-go { border: 2px solid #241a12; border-radius: 999px; padding: 5px 14px; background: var(--lx-orange); color: #fff; font-weight: 800; font-size: 12px; cursor: pointer; }
.blob-toast-go:hover { filter: brightness(1.05); }
.blob-toast-close { margin-left: auto; width: 24px; height: 24px; border: 2px solid #241a12; border-radius: 50%; background: #fff; color: #241a12; font-size: 14px; line-height: 1; cursor: pointer; }
.blob-toast-mascot { width: 94px; margin-right: -22px; pointer-events: none; }
.blob-toast-mascot .blob-mascot { width: 100%; }

@media (max-width: 720px) {
  .blob-toast { bottom: auto; top: 74px; width: min(280px, 80vw); }
  .blob-toast-mascot { width: 82px; }
}
.blob-toast.is-center {
  right: auto; left: 50%; bottom: auto; top: 50%;
  align-items: center; width: min(320px, 86vw); z-index: 350;
  transform: translate(-50%, -50%) translateY(14px) scale(.95);
}
.blob-toast.is-center.is-open { transform: translate(-50%, -50%) scale(1); }
.blob-toast.is-center .blob-toast-bubble { margin-right: 0; text-align: center; }
.blob-toast.is-center .blob-toast-actions { justify-content: center; }
.blob-toast.is-center .blob-toast-bubble::before,
.blob-toast.is-center .blob-toast-bubble::after { right: auto; left: 50%; transform: translateX(-50%); }
.blob-toast.is-center .blob-toast-mascot { margin-right: 0; width: 122px; }
.camio-welcome {
  position: fixed; top: 50%; left: 128%; z-index: 360;
  width: min(300px, 84vw); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, -50%); pointer-events: auto;
}
.camio-welcome-mascot { width: 150px; }
.camio-welcome-mascot .blob-mascot { width: 100%; }
.camio-welcome-bubble {
  position: relative; max-width: 100%; text-align: center;
  background: #fffdf7; color: #241a12; border: 3px solid #241a12;
  border-radius: 20px; padding: 12px 18px 11px; box-shadow: 4px 4px 0 rgba(36, 26, 18, .9);
}
.camio-welcome-bubble b { display: block; font-size: 15px; font-weight: 900; letter-spacing: -.01em; color: var(--lx-orange); }
.camio-welcome-bubble span { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; word-break: break-word; }
.camio-welcome-bubble::before, .camio-welcome-bubble::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent;
}
.camio-welcome-bubble::before { bottom: -16px; border-top: 16px solid #241a12; }
.camio-welcome-bubble::after { bottom: -11px; border-top: 13px solid #fffdf7; }
@media (max-width: 720px) {
  .camio-welcome { width: min(270px, 82vw); }
  .camio-welcome-mascot { width: 122px; }
}
.blob-spark {
  position: absolute; left: 50%; top: 50%;
  color: #ffcf3f; line-height: 1; pointer-events: none; z-index: 3;
  text-shadow: 0 0 7px rgba(255, 179, 54, .95), 0 0 2px #fff;
  will-change: transform, opacity;
}