[data-mode='present'] .tlm-header,
[data-mode='present'] .sidenav,
[data-mode='present'] .drawer-toggle,
[data-mode='present'] .progress,
[data-mode='present'] .tlm-footer { display: none; }

[data-mode='present'] body { overflow: hidden; }

[data-mode='present'] .shell { grid-template-columns: 1fr; }

[data-mode='present'] .chapter {
  padding-block: 0;
  border: 0;
}
[data-mode='present'] .chapter__head { display: none; }

[data-mode='present'] .scene {
  position: fixed;
  inset: 0;
  display: none;
  place-content: center;
  align-content: center;
  max-inline-size: none;
  padding: clamp(var(--s-6), 6vw, var(--s-9));
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-mode='present'] .scene[data-active='true'] {
  display: grid;
  animation: sceneIn var(--dur-slow) var(--ease-out) both;
}

[data-mode='present'] .scene__body {
  max-inline-size: var(--content-wide);
  margin-inline: auto;
  inline-size: 100%;
}

[data-mode='present'] .scene h2 { font-size: var(--fs-2xl); }
[data-mode='present'] .scene { font-size: var(--fs-md); }

@keyframes sceneIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.present-bar {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 120;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-4);
  padding-block-end: calc(var(--s-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  transition: opacity var(--dur) var(--ease);
}

[data-mode='present'] .present-bar { display: flex; }
[data-mode='present'] .present-bar[data-idle='true'] { opacity: 0; }
.present-bar:focus-within { opacity: 1 !important; }

.present-bar__count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;              
  min-inline-size: 7ch;
  text-align: center;
}

.present-bar__title {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  max-inline-size: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.present-rail {
  display: none;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 120;
  background: rgba(255,255,255,.08);
}
[data-mode='present'] .present-rail { display: block; }
.present-rail__fill {
  block-size: 100%;
  background: var(--accent);
  inline-size: 0%;
  transition: inline-size var(--dur) var(--ease);
}

@media (max-width: 640px) {
  [data-mode='present'] .scene { padding: var(--s-5); align-content: start; padding-block-start: var(--s-7); }
}