/* Cadence demos: the question marks, the explanation cards, the canvas spots and the embedded
   rule. The same file on every demo page; colours follow the page's theme where it names them. */
.cx-q {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; vertical-align: 1px;
  border: 1px solid color-mix(in oklab, var(--primary, #4fe3e8) 55%, transparent); border-radius: 50%;
  background: rgba(6, 10, 14, 0.82); color: var(--primary, #4fe3e8);
  font: 700 9px/1 ui-monospace, "IBM Plex Mono", Menlo, monospace; cursor: help; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.cx-q:hover { background: var(--primary, #4fe3e8); color: #061014; }
.cx-q.cx-at { position: absolute; margin: 0; z-index: 3; }
.cx-q.cx-at.top-right { right: -7px; top: -7px; }
.cx-q.cx-at.top-left { left: -7px; top: -7px; }
.cx-q.cx-at.bottom-right { right: -7px; bottom: -7px; }
.cx-spot { position: absolute; z-index: 2; display: block; border-radius: 8px; cursor: help; outline: none; }
.cx-spot:hover, .cx-spot:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary, #4fe3e8) 45%, transparent); }
.cx-card {
  position: fixed; z-index: 2147483000; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--primary, #4fe3e8) 35%, #26323a); border-radius: 8px;
  background: rgba(9, 14, 18, 0.96); color: #dfeef0; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  font: 12.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; pointer-events: none;
}
.cx-card.kept { pointer-events: auto; }
.cx-card .cx-title { display: block; margin-bottom: 4px; color: var(--primary, #4fe3e8); font: 600 12px/1.4 ui-monospace, "IBM Plex Mono", Menlo, monospace; }
.cx-card p { margin: 0 0 6px; } .cx-card p:last-child { margin-bottom: 0; }
html.embedded [data-standalone] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cx-q { transition: none; } }