:root {
  --legible-font-adjustment: 2pt;
}

.md-typeset { font-size: calc(.85rem + var(--legible-font-adjustment)); }
.md-typeset h1 { font-size: calc(2.05rem + var(--legible-font-adjustment)); }
.md-typeset h2 { font-size: calc(1.3rem + var(--legible-font-adjustment)); }
.md-typeset h3 { font-size: calc(1.02rem + var(--legible-font-adjustment)); }
.md-typeset pre { font-size: calc(.78rem + var(--legible-font-adjustment)); }
.md-typeset table:not([class]) { font-size: calc(.73rem + var(--legible-font-adjustment)); }
.md-typeset .reading-card__subtitle { font-size: calc(.88rem + var(--legible-font-adjustment)); }
.md-typeset .technical-note { font-size: calc(.76rem + var(--legible-font-adjustment)); }
.md-typeset .format-example { font-size: calc(.8rem + var(--legible-font-adjustment)); }

.legible-font-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  color: #444;
  font: 500 13px/1.4 Geist, Arial, sans-serif;
}
.legible-font-controls[hidden] { display: none; }
.legible-font-controls__buttons {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
  background: #fff;
}
.md-typeset .legible-font-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #262626;
  font: 600 15px/1 Geist, Arial, sans-serif;
  cursor: pointer;
}
.md-typeset .legible-font-controls button + button { border-left: 1px solid #e5e5e5; }
.md-typeset .legible-font-controls button:hover:not(:disabled) { background: #f2f2f2; }
.md-typeset .legible-font-controls button:focus-visible {
  outline: 2px solid #333 !important;
  outline-offset: -4px;
}
.md-typeset .legible-font-controls button:disabled { opacity: .4; cursor: default; }
.legible-font-controls__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 44.9em) {
  .md-typeset { font-size: calc(.82rem + var(--legible-font-adjustment)); }
  .md-typeset h1 { font-size: calc(1.8rem + var(--legible-font-adjustment)); }
  .md-typeset .format-example { font-size: calc(.82rem + var(--legible-font-adjustment)); }
}
@media print {
  .legible-font-controls { display: none; }
}
