.reader-title {
    text-align: center;
    margin-bottom: 25px;
}

.reader-title h2 {
    font-size: 21px;
    margin: 13px 0;
}

.reader-toolbar {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.reader-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0;
}

.disabled {
    opacity: .6;
}

.reader-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 20px;
    font-size: 14px;
}

.reader-options button {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 12px;
}

.reader-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reader-options input {
    width: 110px;
    accent-color: var(--accent);
}

.reader-panels {
    width: min(var(--reader-width, 800px), 100%);
    margin: 0 auto;
}

.reader-panels figure {
    margin: 0;
}

.reader-panels img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.reader-panels img:not(.image-loaded) {
    min-height: 400px;
}

.reader-panels figcaption {
    text-align: center;
    padding: 7px;
    background: var(--surface);
}

.reader-page.dark {
    --paper: #121622;
    --surface: #1e2534;
    --ink: #ecedf4;
    --muted: #b1b9cb;
    --line: #343e50;
}

.dark .guess {
    background: var(--surface);
}

.dark .site-footer {
    background: var(--surface);
}

@media (max-width: 600px) {
    .reader-toolbar { padding: 16px 10px; }
    .reader-nav { gap: 8px; }
    .reader-nav .button { padding: 9px 12px; font-size: 13px; }
    .reader-title h1 { font-size: 25px; }
    .reader-title .muted { font-size: 13px; }
    .reader-panels img:not(.image-loaded) { min-height: 240px; }
}