/* Shared Speaker Notes Styles
   Import this + set CSS variables for brand colors.
   Required HTML: <div class="speaker-notes" id="notes">...</div>
   Required JS: speaker-notes.js (or inline [S] key listener)

   Override these variables in your deck's CSS:
   --notes-border-color    (default: #14B8A6)
   --notes-heading-color   (default: #14B8A6)
   --notes-text-color      (default: #94A3B8)
   --notes-bg              (default: rgba(17,24,39,0.97))
   --slide-pad             (default: 40px)
*/

.speaker-notes {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 35vh;
  overflow-y: auto;
  background: var(--notes-bg, rgba(17, 24, 39, 0.97));
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--notes-border-color, #14B8A6);
  padding: 20px var(--slide-pad, 40px);
  z-index: 100;
  font-size: 14px;
  line-height: 1.7;
  color: var(--notes-text-color, #94A3B8);
}

.speaker-notes.visible {
  display: block;
}

.speaker-notes h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--notes-heading-color, #14B8A6);
  margin-bottom: 10px;
}

.speaker-notes ul {
  padding-left: 18px;
}

.speaker-notes li {
  margin-bottom: 6px;
}

.speaker-notes .note-hint {
  position: absolute;
  top: 8px; right: 20px;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.4);
}

/* Key hint (bottom-center of slide) */
.key-hint {
  position: fixed;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(148, 163, 184, 0.3);
  z-index: 5;
  pointer-events: none;
}

.key-hint.hidden {
  display: none;
}