.mascot-guide {
  position: fixed;
  z-index: 39;
  left: max(18px, env(safe-area-inset-left, 0px));
  bottom: var(--mascot-guide-bottom, 100px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
  color: var(--theme-text, #244d68);
  font-family: var(--round, inherit);
  pointer-events: none;
}
.mascot-guide[hidden] { display: none !important; }
.mascot-guide * { box-sizing: border-box; }
.mascot-guide-image { display: block; flex: 0 0 66px; width: 66px; height: 84px; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mascot-guide-bubble { position: relative; flex: 1; min-width: 0; padding: 18px 15px 9px; border: 1px solid var(--theme-line, #bfdde8); border-radius: 19px 19px 19px 8px; background: var(--theme-surface, #f5fbff); box-shadow: 0 5px 20px #13374c1c; pointer-events: auto; }
.mascot-guide-close { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--theme-muted, #617e91); font: 500 21px/1 var(--round, inherit); cursor: pointer; }
.mascot-guide-title { margin: 4px 32px 7px 0; padding: 0; color: var(--theme-text, #244d68); font: 750 15px/1.35 var(--round, inherit); letter-spacing: -.015em; overflow-wrap: anywhere; }
.mascot-guide-description { margin: 0; color: var(--theme-muted, #617e91); font: 500 12px/1.55 var(--round, inherit); overflow-wrap: anywhere; }
.mascot-guide-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 8px; margin-top: 6px; }
.mascot-guide-link, .mascot-guide-today { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; margin: 0; padding: 7px 0; border: 0; background: transparent; font: 650 11px/1.45 var(--round, inherit); text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.mascot-guide-link { color: var(--theme-cyan, #1d779b); font-weight: 800; }
.mascot-guide-today { color: var(--theme-muted, #617e91); text-align: left; }
.mascot-guide-link:hover, .mascot-guide-today:hover { text-decoration: underline; }
.mascot-guide :focus-visible { outline: 3px solid var(--theme-cyan, #2782a8); outline-offset: 3px; }
@media (max-width:600px) {
  .mascot-guide { left: max(10px, env(safe-area-inset-left, 0px)); width: min(340px, calc(100vw - 20px)); gap: 6px; }
  .mascot-guide-image { flex-basis: 52px; width: 52px; height: 72px; }
  .mascot-guide-bubble { padding: 15px 12px 7px; }
  .mascot-guide-title { font-size: 14px; }
  .mascot-guide-description { font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) {
  .mascot-guide, .mascot-guide * { animation: none !important; transition: none !important; }
}