.vg-reader {
  --reader-bg: var(--ivory);
  --reader-text: var(--midnight);
  --reader-accent: var(--accent);
  --reader-border: var(--border);
  --reader-size: 1.125rem;
  --reader-line: 1.8;
  --reader-width: 43.75rem;
  background: var(--reader-bg);
  color: var(--reader-text);
  border: 1px solid var(--reader-border);
  border-radius: var(--radius);
  transition: background-color var(--ease), color var(--ease);
}
.vg-reader[data-theme=light] { --reader-bg: var(--elevated); }
.vg-reader[data-theme=dark] { --reader-bg: #202724; --reader-text: #e8e1d4; --reader-accent: #e6b88f; --reader-border: #59665e; }
.vg-reader-toolbar, .vg-reader-nav { padding: var(--s4); border-bottom: 1px solid var(--reader-border); }
.vg-reader-toolbar .vg-row { align-items: end; }
.vg-reader-toolbar .vg-label { flex: 1 1 9rem; min-width: 0; }
.vg-reader :is(.vg-button, a) { color: var(--reader-text); }
.vg-reader .vg-button:hover:not(:disabled) { background: var(--reader-text); color: var(--reader-bg); }
.vg-reader :is(button,input,select):focus-visible { outline-color: var(--reader-accent); }
.vg-reader input, .vg-reader progress { accent-color: var(--reader-accent); }
.vg-reader input[type=range] { width: 100%; min-height: 44px; margin: 0; }
.vg-reader-copy { width: min(100% - 2 * var(--s4),var(--reader-width)); margin-inline: auto; padding-block: var(--s10); font: 400 var(--reader-size)/var(--reader-line) var(--serif); }
.vg-reader-copy :where(h3,p) { margin-bottom: 1.05em; }
.vg-reader-copy p:last-child { margin-bottom: 0; }
.vg-reader-nav { border-bottom: 0; border-top: 1px solid var(--reader-border); }
@media (min-width: 48rem) {
  .vg-reader { --reader-size: 1.1875rem; }
  .vg-reader-copy { width: min(100% - 2 * var(--s8),var(--reader-width)); padding-block: var(--s16); }
}
.vg-reader .vg-button:disabled { color: var(--muted); opacity: 1; }