/* Interactive demo controller styles (lib/demo.js, 2026-10-27): the ring on the next target, its hint, real buttons. */
button.btn { font: inherit; font-size: 13.5px; font-weight: 500; cursor: default; }
button.btn:focus { outline: none; }
button.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.demo-next { cursor: pointer !important; }
button.btn.primary.demo-next:hover { background: #235a6b; }
button.btn.demo-next:not(.primary):hover { background: #f4f2eb; }

.coach-ring { position: absolute; z-index: 90; pointer-events: none; visibility: hidden; opacity: 0;
  border: 2px solid var(--brand); box-shadow: 0 0 0 0 rgba(48,123,142,.45); animation: coach-pulse 1.6s ease-out infinite; }
@keyframes coach-pulse {
  0% { box-shadow: 0 0 0 0 rgba(48,123,142,.45); }
  70% { box-shadow: 0 0 0 14px rgba(48,123,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,123,142,0); }
}
.coach-tip { position: absolute; z-index: 91; pointer-events: none; visibility: hidden; opacity: 0; max-width: 340px;
  background: #1f1e1a; color: #fff; border-radius: 10px; padding: 11px 15px; font-size: 15px; line-height: 1.4; font-weight: 500;
  box-shadow: 0 12px 30px rgba(31,30,26,.25); white-space: normal; }
.coach-tip small { display: block; font-size: 12.5px; font-weight: 400; color: #c9c5ba; margin-top: 2px; }
.coach-tip::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px; background: #1f1e1a; transform: rotate(45deg); border-radius: 2px; }
.coach-tip[data-side="below"]::before { top: -6px; }
.coach-tip[data-side="above"]::before { bottom: -6px; }
.coach-tip[data-side="left"]::before { top: calc(50% - 7px); left: auto; right: -6px; }
.coach-tip[data-side="right"]::before { top: calc(50% - 7px); left: -6px; }
html.render .coach-ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .coach-ring { animation: none; } }