.story-reader { margin: 1rem auto; max-width: 42rem; text-align: center; }
    .story-reader button { font: inherit; font-weight: 600; padding: .7rem 1.2rem; min-height: 44px; border: 1px solid #0066cc; border-radius: .6rem; background: #0066cc; color: #fff; cursor: pointer; }
    .story-reader button:hover { background: #0054a8; }
    .story-reader button:focus-visible { outline: 3px solid #e5a100; outline-offset: 3px; }
    .story-reader button:disabled { opacity: .65; cursor: not-allowed; }
    .story-reader p { font-size: .9rem; line-height: 1.5; }
    .story-reader p:empty { display: none; }
    .reader-container[data-theme="dark"] .story-reader button { background: #165ea6; border-color: #90c2ff; }
    .reader-dock[data-placement="blocked"] { visibility: hidden; }
    .reader-dock[hidden] { display: none; }
    .reader-dock { position: fixed; z-index: 9998; inset-inline: 8px; top: calc(var(--reader-dock-top, 8px) + env(safe-area-inset-top, 0px)); margin-inline: auto; box-sizing: border-box; width: calc(100% - 16px); max-width: 740px; padding: 6px 10px; background: #fff; color: #26384b; border: 1px solid #c4d2df; border-radius: 10px; box-shadow: 0 3px 14px #0002; max-height: calc(100dvh - 24px); overflow: auto; }
    .reader-dock-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
    .reader-dock button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: .95rem; min-height: 44px; padding: 8px 12px; border: 1px solid #b7cadc; border-radius: 8px; color: #174d80; background: #f3f7fb; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
    .reader-dock #reader-pause { background: #0066cc; color: #fff; border-color: #0066cc; }
    .reader-dock button:focus-visible, .reader-dock input:focus-visible { outline: 3px solid #e5a100; outline-offset: 2px; }
    .reader-follow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .9rem; cursor: pointer; }
    .reader-follow input { width: 18px; height: 18px; }
    #reader-progress { font-size: .8rem; color: #52667c; white-space: nowrap; }
    #reader-dock-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    #reader-dock-status:empty { display: none; }
    .reader-current { background: #fff0af; color: #302500; box-shadow: 0 2px 0 #d89720; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .reader-container[data-theme="dark"] .reader-current { background: #654d14; color: #fff5cd; box-shadow: 0 2px 0 #edc560; }
    .reader-dock[data-theme="dark"] { background: #1f2933; color: #edf2f7; border-color: #596c7e; }
    .reader-dock[data-theme="dark"] button { background: #263b4d; color: #e5f1ff; border-color: #7891a5; }
    .reader-dock[data-theme="dark"] #reader-progress { color: #bacadb; }
    html { scroll-padding-top: var(--reader-reserved, 0px); scroll-padding-bottom: var(--reader-bottom-clearance, 0px); }
    @media (max-width: 600px), (max-height: 450px) {
        .reader-dock { padding: 5px 6px; }
        .reader-dock-actions { flex-wrap: nowrap; gap: 6px; }
        .reader-dock button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 1.2rem; }
        .reader-caption, #reader-progress { display: none; }
        .reader-follow { min-width: 0; max-width: 130px; font-size: .85rem; }
        .reader-follow input { flex-shrink: 0; }
        .reader-follow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }
    /* A narrow toolbar leaves room beside corner video ads on landscape phones. */
    @media (max-height: 450px) {
        .reader-dock { max-width: 390px; }
    }

.story-reader[hidden] { display: none; }
.reader-header .header-actions { flex-shrink: 0; }
.reader-header .back-link { min-width: 0; flex: 1; }
.reader-spacer { overflow-anchor: none; pointer-events: none; }