/* Only screen typography changes; printed documents keep their original sizing. */
@media screen {
    html[data-hero-font-size] { font-size: var(--hero-font-size); }
}
.hero-font-panel { color: #334155; padding: 12px; width: 200px; font-size: 14px; }
.hero-font-heading { display: block; margin-bottom: 8px; font-weight: 600; }
.hero-font-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-font-controls button, .hero-font-reset { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; color: inherit; font-size: 14px; }
.hero-font-controls button { width: 36px; height: 36px; font-weight: 600; }
.hero-font-controls output { margin: 0; font-variant-numeric: tabular-nums; }
.hero-font-reset { margin-top: 10px; padding: 6px 8px; width: 100%; }
.hero-font-panel button:hover:not(:disabled) { background: #e2e8f0; }
.hero-font-panel button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.hero-font-panel button:disabled { opacity: .45; cursor: default; }
@media screen {
    html[data-theme="dark"] .hero-font-panel { color: #e2e8f0; }
    html[data-theme="dark"] .hero-font-panel button { background: #334155; border-color: #475569; }
    html[data-theme="dark"] .hero-font-panel button:hover:not(:disabled) { background: #475569; }
}
@media print {
    .hero-font-menu { display: none; }
}