html, body { overflow-x: clip; }
/* Narrator base. Each study restyles via the --nr-* tokens. */
.nr {
  position: fixed; left: 0; top: 0; z-index: 50;
  pointer-events: none; will-change: transform;
  --nr-cursor: #1f45d6;
}
.nr-body { position: absolute; left: -2px; top: -2px; transform-origin: 2px 2px; }
.nr-flip .nr-body { transform: scaleX(-1); }
.nr-arrow { display: block; filter: drop-shadow(0 1px 1.5px rgba(20, 20, 40, .18)); }

.nr-bubble {
  position: absolute; left: 22px; top: 26px;
  width: max-content; max-width: var(--nr-max, 15rem);
  padding: var(--nr-pad, .5rem .7rem .55rem);
  font: var(--nr-font, 500 13px/1.38 "Inter", system-ui, sans-serif);
  letter-spacing: var(--nr-track, -0.003em);
  color: var(--nr-ink, #fff);
  background: var(--nr-bg, var(--nr-cursor));
  border: var(--nr-border, 0);
  border-radius: var(--nr-radius, 2px 12px 12px 12px);
  transform-origin: 0 0;
  transform: scale(.6); opacity: 0;
  transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), opacity .16s;
}
.nr-left .nr-bubble { left: auto; right: 22px; transform-origin: 100% 0; border-radius: var(--nr-radius-left, 12px 2px 12px 12px); }
.nr-on .nr-bubble { transform: scale(1); opacity: 1; }
.nr-text:empty::before { content: "\00a0"; }
.nr-thinking .nr-text::before { content: "···"; letter-spacing: .12em; animation: nr-dots 0.9s infinite; }
@keyframes nr-dots { 50% { opacity: .35; } }

/* the "point and tap" when it arrives */
.nr-tap .nr-body { animation: nr-tap .42s cubic-bezier(.3, 1.6, .5, 1); }
.nr-flip.nr-tap .nr-body { animation-name: nr-tap-flip; }
@keyframes nr-tap { 0% { transform: scale(1); } 35% { transform: scale(.82) translate(1px, 1px); } 100% { transform: scale(1); } }
@keyframes nr-tap-flip { 0% { transform: scaleX(-1); } 35% { transform: scaleX(-.82) scaleY(.82); } 100% { transform: scaleX(-1); } }
.nr-tap .nr-body::after {
  content: ""; position: absolute; left: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--nr-cursor); animation: nr-ring .55s ease-out forwards;
}
@keyframes nr-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }

/* map mode: every beat drawn statically */
.nr-map .nr { z-index: 40; }

@media (prefers-reduced-motion: reduce) {
  .nr-bubble { transition: none; }
  .nr-tap .nr-body, .nr-tap .nr-body::after { animation: none; }
}
@media (max-width: 720px) {
  .nr-bubble { --nr-max: 11.5rem; font-size: 12px; }
}

/* companion: the visitor's real cursor, restyled cobalt; the bubble rides beside it */
@media (hover: hover) and (pointer: fine) {
html.nr-cursor, html.nr-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30'%3E%3Cpath d='M1.5 1.5 L1.5 24.5 L7.4 19.2 L11.3 28.2 L15.3 26.4 L11.5 17.6 L19.6 17.2 Z' fill='%231f45d6' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto; }
html.nr-cursor a, html.nr-cursor a *, html.nr-cursor button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M1.5 1.5 L1.5 24.5 L7.4 19.2 L11.3 28.2 L15.3 26.4 L11.5 17.6 L19.6 17.2 Z' fill='%231f45d6' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='6' r='4' fill='%23c4532f' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 2 2, pointer; }
}
@media not all and (hover: hover) and (pointer: fine) {
  .nr, #nr-toggle { display: none !important; }
}
.nr-attached .nr-body { display: none; }
.nr-attached .nr-bubble { transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), opacity .1s; }
.nr-attached.nr-up .nr-bubble { top: auto; bottom: 6px; }
html.nr-cursor.nr-off, html.nr-cursor.nr-off * { cursor: auto; }
html.nr-cursor.nr-off a, html.nr-cursor.nr-off button { cursor: pointer; }