@media (max-width: 720px) {
  .reader-chrome { min-height: 56px; gap: 10px; padding: 7px 10px 7px 13px; border-radius: 16px; }
  .reader-chrome-back, .reader-chrome-context { font-size: 11px; }
  .reader-settings-trigger, .reader-progress { width: 42px; height: 42px; }
  .reader-settings-trigger { font-size: 19px; }
  .reader-progress span { font-size: 9px; }
}
.reader-onboarding-hint { position: fixed; z-index: 245; top: calc(76px + env(safe-area-inset-top)); left: 50%; width: min(320px, calc(100vw - 38px)); padding: 11px 13px; border: 1px solid #d5d0c4; border-radius: 10px; background: rgba(255,253,248,.96); box-shadow: 0 12px 28px rgba(35,30,23,.14); color: #5d584f; font: 12px/1.4 var(--sans); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,-7px); transition: opacity .22s ease, transform .22s ease; }
.reader-onboarding-hint.is-visible { opacity: 1; transform: translate(-50%,0); }
.reader-onboarding-hint strong { color: #485d20; }
@media (prefers-reduced-motion: reduce) { .reader-onboarding-hint { transition: none; } }

/* The reader keeps only adjustments that change the actual reading surface. */
.reader-settings .reader-legacy-setting[hidden] { display: none; }
.reader-settings { width: min(414px, calc(100vw - 28px)); }
.reader-settings > .reader-tuning { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 13px; min-width: 0; margin: 4px 0 13px; }
.reader-settings > .reader-tuning .reader-range-control { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; color: #655f55; font: 700 10px/1.2 var(--sans); letter-spacing: .045em; text-transform: uppercase; }
.reader-range-control > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reader-range-control output { color: #53672d; font-variant-numeric: tabular-nums; }
.reader-range-control input { width: 100%; margin: 0; accent-color: #647d30; }
.reader-tuning-note { margin: -2px 0 0; color: #827a6e; font: 500 10px/1.42 var(--sans); letter-spacing: 0; text-transform: none; }
.reader-settings > .reader-tuning .reader-advanced-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; padding: 10px 0 0; border-top: 1px solid #e4dfd4; }
.reader-advanced-settings summary { cursor: pointer; color: #5a6042; font: 700 10px/1 var(--sans); letter-spacing: .055em; text-transform: uppercase; }
.reader-advanced-settings[open] summary { margin-bottom: 2px; }
.reader-settings > .reader-tuning .reader-font-choice { display: flex; align-items: center; gap: 6px; min-width: 0; }
.reader-font-choice > span { flex: 1 1 auto; color: #655f55; font: 700 10px/1 var(--sans); letter-spacing: .045em; text-transform: uppercase; }
.reader-font-choice button, .reader-settings-reset { min-height: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; color: var(--ink); padding: 0 8px; font: 700 10px/1 var(--sans); cursor: pointer; }
.reader-font-choice button.is-active { border-color: #8da35a; background: #f0f5df; color: #4e6030; }
.reader-settings-reset { justify-self: start; border-color: transparent; color: #7b756b; padding-left: 0; }
.quiet-story .reader-prose { max-width: min(100%, var(--reader-line-width, 62ch)) !important; }
.quiet-story .reader-chapter-body p { margin-bottom: var(--reader-paragraph-space, calc(var(--reader-copy-size) * 1.32)); text-indent: var(--reader-paragraph-indent, 0); letter-spacing: var(--reader-letter-spacing, normal); word-spacing: var(--reader-word-spacing, normal); }
.quiet-reader[data-reader-focus="on"] .reader-range-control { color: #d5d1c5; }
.quiet-reader[data-reader-focus="on"] .reader-range-control output { color: #d1e58c; }
.quiet-reader[data-reader-focus="on"] .reader-tuning-note { color: #bbb6aa; }
.quiet-reader[data-reader-focus="on"] .reader-advanced-settings { border-color: #515044; }
.quiet-reader[data-reader-focus="on"] .reader-advanced-settings summary, .quiet-reader[data-reader-focus="on"] .reader-font-choice > span, .quiet-reader[data-reader-focus="on"] .reader-settings-reset { color: #d5d1c5; }
.quiet-reader[data-reader-focus="on"] .reader-font-choice button { border-color: #5d5d51; background: #34342e; color: #ece9df; }
.quiet-reader[data-reader-focus="on"] .reader-font-choice button.is-active { border-color: #93a661; background: #414a31; color: #eff2df; }