/* ============================================================
   Screen viewer shared by both decks.

   Two rules keep the PDF safe. Nothing here restructures the DOM, so the
   page breaks that produce the PDF are untouched. And slides are hidden
   with a class whose `display:none` lives inside @media screen, never with
   the `hidden` attribute, which would hide nine slides out of ten when
   Chrome runs this same file through print-to-pdf.
   ============================================================ */

@media screen {
  html { background: #E9E4F6; }
  body { margin: 0; padding: 0 !important; display: block !important; gap: 0 !important; }

  /* one slide at a time, centred and scaled to the viewport */
  .slide, .seq {
    position: fixed; top: calc(50% + 26px); left: 50%;
    transform: translate(-50%, -50%) scale(var(--dk-k, 1));
    transform-origin: center center;
    margin: 0 !important;
    border-radius: 6px;
    box-shadow: 0 16px 46px -16px rgba(26, 6, 64, .30) !important;
  }
  .dk-off { display: none !important; }

  /* ---------- top bar ---------- */
  .dk-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 50;
    display: flex; align-items: center; gap: 16px; padding: 0 18px;
    background: #FFFFFF;
    border-bottom: 1px solid #E6E1F8;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: #8A7FBE;
  }
  .dk-bar a { color: inherit; text-decoration: none; }
  .dk-home { display: flex; align-items: center; gap: 9px; color: #1A0640; flex: none; }
  .dk-home .g { display: inline-flex; gap: 2.5px; height: 12px; align-items: stretch; }
  .dk-home .g b { width: 3px; border-radius: 1px; transform: skewX(-11.5deg); display: block; }
  .dk-home .g b:nth-child(1) { background: #FF0059; }
  .dk-home .g b:nth-child(2) { background: #461FBF; }
  .dk-home .g b:nth-child(3) { background: #00F8FF; }
  .dk-home:hover { color: #461FBF; }
  .dk-title { color: #1A0640; flex: none; }
  .dk-bar .sp { flex: 1; }

  .dk-btn {
    border: 1px solid #CFC4F0; border-radius: 100px; padding: 7px 13px;
    background: #fff; color: #564A90; cursor: pointer;
    font: inherit; letter-spacing: .12em; text-transform: uppercase;
    line-height: 1; white-space: nowrap; display: inline-block;
  }
  .dk-btn:hover { border-color: #461FBF; color: #1A0640; }
  .dk-btn[aria-current="page"] { background: #461FBF; border-color: #461FBF; color: #fff; }
  .dk-btn:disabled { opacity: .3; cursor: default; }
  .dk-btn:disabled:hover { border-color: #CFC4F0; color: #564A90; }
  .dk-btn:focus-visible { outline: 2px solid #461FBF; outline-offset: 2px; }
  .dk-group { display: flex; gap: 6px; align-items: center; flex: none; }
  .dk-count { min-width: 58px; text-align: center; color: #1A0640; }

  .dk-hint {
    position: fixed; bottom: 12px; left: 0; right: 0; text-align: center;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: #8A7FBE; pointer-events: none; z-index: 40;
  }

  @media (max-width: 720px) {
    .dk-bar { gap: 10px; padding: 0 10px; font-size: 9px; }
    .dk-title, .dk-hint { display: none; }
  }
}

/* the injected chrome must never reach the PDF */
@media print {
  .dk-bar, .dk-hint { display: none !important; }
}