/* Viewer for the class decks: 1920×1080 slides scaled to the window, one at a time; every slide when printed. */
html, body { margin: 0; height: 100%; background: #0c1016; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.stage > section {
  position: absolute; inset: 0; width: 1920px; height: 1080px; box-sizing: border-box; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.stage > section:not(.active) { display: none !important; }
.stage * { margin: 0; box-sizing: border-box; }
.stage img { display: block; max-width: none; }
.stage x-shape, .stage x-icon { display: block; flex: none; }
.stage x-connector { display: none; }
.stage svg { display: block; flex: none; overflow: visible; }
.stage table { border-collapse: collapse; width: 100%; }
.stage th, .stage td { padding: 0.35em 0.6em; border-bottom: 1px solid rgba(22, 32, 43, 0.14); text-align: left; vertical-align: top; }
.stage th { font-weight: 600; }
.stage aside { display: none; }

.bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center;
  padding: 6px 8px; border-radius: 999px; background: rgba(12, 16, 22, 0.78); color: #e8ecf1;
  font: 14px/1 system-ui, sans-serif; opacity: 0; transition: opacity 0.25s; z-index: 5;
}
body:hover .bar, .bar:focus-within, body.show-bar .bar { opacity: 1; }
.bar button { font: inherit; color: inherit; background: transparent; border: 1px solid rgba(232, 236, 241, 0.3); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.bar button:hover { background: rgba(232, 236, 241, 0.12); }
.bar button:focus-visible { outline: 2px solid #f2913f; outline-offset: 2px; }
.bar .count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.notes {
  position: fixed; right: 12px; top: 12px; width: min(460px, 42vw); max-height: 60vh; overflow: auto; padding: 16px 18px;
  border-radius: 12px; background: rgba(251, 249, 244, 0.97); color: #16202b; font: 16px/1.55 system-ui, sans-serif; z-index: 6;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.notes[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { height: auto; overflow: visible; background: none; }
  .stage { position: static; transform: none !important; width: auto; height: auto; }
  .stage > section { position: relative; display: flex !important; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar, .notes { display: none !important; }
}