.hm-guide-hot { outline: 2px solid #56e4d0; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(86, 228, 208, .14); }
.hm-guide-pointer {
  position: fixed; z-index: 80; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: #56e4d0; color: #06221e;
  font: 800 13px "Avenir Next", "PingFang SC", sans-serif; pointer-events: none;
  box-shadow: 0 8px 24px rgba(86, 228, 208, .28);
}
.hm-guide {
  position: fixed; z-index: 80; left: 0; top: 0; width: 48px; height: 56px;
  color: #effafa; font-family: "Avenir Next", "PingFang SC", sans-serif;
}
.hm-guide-orb {
  position: relative; z-index: 2; width: 48px; height: 56px; padding: 0; border: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; color: #d7e4ea; cursor: grab; touch-action: none;
}
.hm-guide-orb:active { cursor: grabbing; }
.hm-guide-face {
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: block; flex: none;
  background: var(--mint, #56e4d0);
  box-shadow: 0 6px 14px rgba(2, 8, 20, .28), inset 0 -5px 8px rgba(2, 8, 20, .12);
}
.hm-guide-face i {
  position: absolute; top: 15px; width: 10px; height: 10px; border-radius: 50%;
  background: #06221e; transform-origin: center;
}
.hm-guide-face i:first-child { left: 6px; }
.hm-guide-face i:nth-child(2) { right: 6px; }
.hm-guide-face i::after {
  content: ""; position: absolute; top: 2px; left: 3.5px; width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
}
.hm-guide-name {
  padding: 0 4px; border-radius: 999px; background: var(--deck, #071525); color: var(--mint, #56e4d0);
  border: 1px solid color-mix(in srgb, var(--mint, #56e4d0) 45%, transparent); white-space: nowrap;
  font: 600 9px/1.35 "Avenir Next", "PingFang SC", sans-serif; letter-spacing: .02em;
}
.hm-guide-orb.hm-guide-awake .hm-guide-face { animation: hm-guide-pulse 1.2s ease-out 1; }
.hm-guide-face i { animation: hm-guide-blink 6.8s infinite; }
.hm-guide-say {
  display: none; pointer-events: none; position: absolute; z-index: 1; left: 0; top: 0;
  width: min(320px, calc(100vw - 20px)); max-height: min(280px, 46vh); overflow: auto;
  background: #0b1d30; border: 1px solid rgba(86, 228, 208, .28); border-radius: 16px;
  padding: 12px; box-shadow: 0 16px 50px rgba(0, 0, 0, .35); touch-action: auto;
}
.hm-guide.is-open .hm-guide-say { display: block; pointer-events: auto; }
.hm-guide-kicker { font: 700 10px ui-monospace, monospace; letter-spacing: .14em; color: #56e4d0; }
.hm-guide-say p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.hm-guide form { display: flex; gap: 6px; margin-top: 10px; }
.hm-guide input {
  flex: 1; min-width: 0; background: #04101c; color: #effafa;
  border: 1px solid rgba(86, 228, 208, .28); border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 13px;
}
.hm-guide button[type="submit"] {
  border: 0; border-radius: 8px; background: #56e4d0; color: #06221e; font: inherit; font-weight: 700; padding: 0 12px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .hm-guide-orb.hm-guide-awake .hm-guide-face,
  .hm-guide-face i { animation: none; }
}
@keyframes hm-guide-pulse {
  0% { box-shadow: 0 6px 14px rgba(2, 8, 20, .28), 0 0 0 0 rgba(86, 228, 208, .4); }
  100% { box-shadow: 0 6px 14px rgba(2, 8, 20, .28), 0 0 0 8px rgba(86, 228, 208, 0); }
}
@keyframes hm-guide-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.12); }
}