:root {
    --reader-bg: #f1eadc;
    --reader-text: #28251f;
    --reader-muted: color-mix(in srgb, var(--reader-text) 58%, transparent);
    --reader-line: color-mix(in srgb, var(--reader-text) 18%, transparent);
    --reader-font-size: 20px;
    --reader-toolbar-height: 58px;
    --reader-accent: #8d652b;
    --reader-note: #d9ba54;
    --reader-locked: #ff425d;
}

* { box-sizing: border-box; }

.reader-html,
.reader-body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.reader-body {
    color: var(--reader-text);
    background: var(--reader-bg);
    font-family: Georgia, "Times New Roman", serif;
    transition: color 180ms ease, background-color 180ms ease;
}

button,
input { font: inherit; }

.reader-toolbar {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr) minmax(100px, 1fr);
    align-items: center;
    height: var(--reader-toolbar-height);
    padding: 0 24px;
    border-bottom: 1px solid var(--reader-line);
    background: color-mix(in srgb, var(--reader-bg) 88%, transparent);
    backdrop-filter: blur(12px);
}

.reader-exit,
.reader-nav-button { color: inherit; text-decoration: none; }

.reader-exit {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-self: start;
    opacity: .66;
    font: 13px system-ui, sans-serif;
}

.reader-exit:hover,
.reader-exit:focus-visible { opacity: 1; }

.reader-toolbar-title {
    min-width: 0;
    text-align: center;
    font-family: system-ui, sans-serif;
    line-height: 1.15;
}

.reader-toolbar-title span,
.reader-toolbar-title strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-toolbar-title span {
    margin-bottom: 3px;
    color: var(--reader-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.reader-toolbar-title strong { font-size: 13px; font-weight: 600; }

.reader-icon-button {
    justify-self: end;
    min-width: 42px;
    height: 34px;
    border: 1px solid var(--reader-line);
    border-radius: 18px;
    color: inherit;
    background: transparent;
    font-family: Georgia, serif;
    font-weight: 700;
    cursor: pointer;
}

.reader-icon-button:hover,
.reader-icon-button:focus-visible {
    border-color: color-mix(in srgb, var(--reader-accent) 65%, transparent);
    color: var(--reader-accent);
}

.reader-settings {
    position: fixed;
    z-index: 80;
    top: calc(var(--reader-toolbar-height) + 12px);
    right: 18px;
    width: min(360px, calc(100vw - 36px));
    padding: 20px;
    border: 1px solid var(--reader-line);
    border-radius: 14px;
    color: var(--reader-text);
    background: color-mix(in srgb, var(--reader-bg) 94%, #808080 6%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
    font-family: system-ui, sans-serif;
}

.reader-settings-header,
.reader-setting-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.reader-settings-header { margin-bottom: 22px; }

.reader-settings-header button,
.reader-comment-dialog header button {
    padding: 0 4px;
    border: 0;
    color: inherit;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.reader-setting-row,
.reader-setting-group {
    color: var(--reader-muted);
    font-size: 13px;
    font-weight: 600;
}

.reader-setting-row output { color: var(--reader-text); font-variant-numeric: tabular-nums; }
.reader-range { width: 100%; margin: 10px 0 22px; accent-color: var(--reader-accent); }
.reader-setting-group { margin-bottom: 22px; }

.reader-color-options {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.reader-color-options button,
.reader-color-options input {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--reader-text) 16%, transparent);
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
}

.reader-color-options button.is-active { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
.reader-color-options input { overflow: hidden; }

.reader-reset {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--reader-line);
    border-radius: 8px;
    color: var(--reader-text);
    background: transparent;
    cursor: pointer;
}

.reader-viewport {
    position: fixed;
    top: var(--reader-toolbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 9vw;
    padding: clamp(30px, 5vh, 64px) 5vw 72px;
    overflow: hidden;
    touch-action: pan-y;
}

.reader-sheet { position: relative; height: 100%; min-height: 0; overflow: clip; }
.reader-right-sheet::before { position: fixed; top: calc(var(--reader-toolbar-height) + 30px); bottom: 72px; left: 50%; width: 1px; background: var(--reader-line); content: ''; }

.reader-flow {
    display: flow-root;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--reader-font-size);
    line-height: 1.72;
    text-rendering: optimizeLegibility;
    will-change: transform;
}

.reader-chapter-header { margin: 0 0 2.4em; break-inside: avoid; }
.reader-chapter + .reader-chapter { padding-top: 2.6em; }
.reader-chapter h1 { scroll-margin-top: 24px; }

.reader-chapter-type,
.reader-subscription {
    display: inline-block;
    margin: 0 8px 12px 0;
    font: 700 .58em system-ui, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.reader-chapter-type { color: var(--reader-accent); }

.reader-subscription {
    padding: 3px 8px;
    border: 1px solid var(--reader-line);
    border-radius: 999px;
    color: var(--reader-muted);
}

.reader-chapter-header h1 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(1.75em, 4vw, 2.65em);
    font-weight: 500;
    line-height: 1.08;
}

.reader-general-notes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.5em; }
.reader-general-notes:empty { display: none; }

.reader-general-note {
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--reader-note) 55%, transparent);
    border-radius: 999px;
    color: var(--reader-text);
    background: color-mix(in srgb, var(--reader-note) 18%, transparent);
    font: 700 .58em system-ui, sans-serif;
    cursor: pointer;
}

.reader-general-note.is-locked {
    border-color: color-mix(in srgb, var(--reader-locked) 62%, transparent);
    background: color-mix(in srgb, var(--reader-locked) 18%, transparent);
}

.reader-text {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hanging-punctuation: first last;
    text-align: justify;
    text-align-last: start;
    text-justify: inter-word;
    -webkit-hyphens: none;
    hyphens: none;
}
.reader-text p { margin: 0 0 .72em; orphans: 3; widows: 3; }
.reader-text > p { text-indent: 1.25em; }
.reader-text h1,
.reader-text h2,
.reader-text h3,
.reader-text h4,
.reader-text h5,
.reader-text h6 {
    margin: 1.5em 0 .7em;
    font-weight: 600;
    line-height: 1.25;
    break-after: avoid;
    text-align: start;
}
.reader-text h1 { font-size: 1.7em; }
.reader-text h2 { font-size: 1.45em; }
.reader-text h3 { font-size: 1.2em; }
.reader-text h4,
.reader-text h5,
.reader-text h6 { font-size: 1em; }
.reader-text blockquote {
    margin: 1.2em 0;
    padding: .3em 0 .3em 1em;
    border-left: 3px solid var(--reader-line);
    font-style: italic;
}
.reader-text ul,
.reader-text ol { margin: .8em 0; padding-left: 1.6em; }
.reader-text li { margin-bottom: .25em; }
.reader-text hr { margin: 1.8em auto; width: 45%; border: 0; border-top: 1px solid var(--reader-line); }
.reader-text a { color: inherit; text-decoration-color: var(--reader-accent); text-underline-offset: .15em; }
.reader-text code { padding: .08em .2em; background: var(--reader-line); font-size: .85em; }
.reader-text pre { margin: 1em 0; padding: .8em; background: var(--reader-line); white-space: pre-wrap; text-align: start; hyphens: none; }
.reader-text pre code { padding: 0; background: none; }
.reader-text img { display: block; max-width: 100%; max-height: 60vh; margin: 1em auto; object-fit: contain; }
.reader-text table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: .85em; text-align: start; }
.reader-text th,
.reader-text td { padding: .35em .5em; border: 1px solid var(--reader-line); }
.reader-text .footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--reader-line); font-size: .85em; }

.reader-annotation {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    color: inherit;
    background: linear-gradient(to top, color-mix(in srgb, var(--reader-note) 54%, transparent) 0 42%, transparent 42%);
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.reader-annotation:hover,
.reader-annotation:focus-visible {
    background-color: color-mix(in srgb, var(--reader-note) 28%, transparent);
    outline: 2px solid color-mix(in srgb, var(--reader-note) 70%, transparent);
}

.reader-annotation.is-locked {
    background: color-mix(in srgb, var(--reader-locked) 30%, transparent);
    box-shadow: inset 0 -3px 0 var(--reader-locked);
}

.reader-annotation.is-locked:hover,
.reader-annotation.is-locked:focus-visible {
    background: color-mix(in srgb, var(--reader-locked) 43%, transparent);
    outline-color: var(--reader-locked);
}

.reader-end {
    display: grid;
    gap: 14px;
    justify-items: start;
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid var(--reader-line);
    break-inside: avoid;
    font: .68em system-ui, sans-serif;
}

.reader-end span { color: var(--reader-muted); letter-spacing: .12em; text-transform: uppercase; }
.reader-end a { color: var(--reader-accent); }

.reader-navigation {
    position: fixed;
    z-index: 45;
    right: 22px;
    bottom: 18px;
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 6px;
    border: 1px solid var(--reader-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--reader-bg) 88%, transparent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    backdrop-filter: blur(12px);
    font-family: system-ui, sans-serif;
}

.reader-nav-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--reader-text);
    background: transparent;
    cursor: pointer;
}

.reader-nav-button:hover,
.reader-nav-button:focus-visible { background: var(--reader-line); }
.reader-nav-button:disabled { opacity: .24; cursor: default; }
.reader-progress { min-width: 56px; color: var(--reader-muted); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }

.reader-comment-modal[hidden],
.reader-comment-preview[hidden],
.reader-settings[hidden] { display: none; }

.reader-comment-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.reader-comment-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .66); backdrop-filter: blur(4px); }

.reader-comment-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: min(78vh, 780px);
    overflow: auto;
    border: 1px solid rgba(183, 154, 98, .46);
    border-radius: 14px;
    color: #e9e4da;
    background: #11161f;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .58);
    font-family: system-ui, sans-serif;
}

.reader-comment-dialog header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(17, 22, 31, .96);
}

.reader-comment-dialog header span { display: block; margin-bottom: 4px; color: #b99b62; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.reader-comment-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.reader-comment-list { display: grid; gap: 16px; padding: 22px; }
.reader-comment-item { padding: 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .035); }
.reader-comment-level { display: inline-block; margin-bottom: 12px; padding: 4px 8px; border: 1px solid rgba(183, 154, 98, .38); border-radius: 999px; color: #cfb77f; font-size: 11px; font-weight: 700; }
.reader-comment-copy,
.reader-comment-locked { margin: 0; line-height: 1.65; white-space: pre-wrap; }
.reader-comment-locked { color: #ff9eaa; }
.reader-comment-image { display: block; max-width: 100%; max-height: 54vh; margin-top: 16px; border-radius: 8px; object-fit: contain; }

.reader-comment-preview {
    position: fixed;
    z-index: 1050;
    width: min(360px, calc(100vw - 24px));
    max-height: min(420px, calc(100dvh - 100px));
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(183, 154, 98, .5);
    border-radius: 10px;
    color: #e9e4da;
    background: #11161f;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
    font: 14px/1.55 system-ui, sans-serif;
    overscroll-behavior: contain;
}
.reader-preview-item + .reader-preview-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .15); }
.reader-preview-item::after { display: table; clear: both; content: ''; }
.reader-preview-image { float: right; max-width: 88px; max-height: 88px; margin: 0 0 10px 12px; border-radius: 5px; object-fit: contain; }
.reader-preview-copy { margin: 0; white-space: pre-wrap; }
.reader-comment-expand { display: none; margin: 12px 0 0; padding: 0; border: 0; color: #cfb77f; background: transparent; font-size: 12px; text-decoration: underline; cursor: pointer; }

.reader-swipe-stage {
    position: fixed;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
    background: var(--reader-bg);
    contain: layout paint;
}
.reader-swipe-view { position: absolute; inset: 0; overflow: hidden; background: var(--reader-bg); will-change: transform; }
.reader-swipe-canvas { width: 100%; pointer-events: none; }

@media (max-width: 767.98px) {
    :root { --reader-toolbar-height: 54px; }
    .reader-toolbar { grid-template-columns: 42px minmax(0, 1fr) 42px; padding: 0 10px; }
    .reader-exit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .reader-exit { justify-content: center; width: 38px; height: 38px; font-size: 20px; }
    .reader-toolbar-title span { display: none; }
    .reader-toolbar-title strong { font-size: 12px; }
    .reader-settings { top: calc(var(--reader-toolbar-height) + 8px); right: 10px; }
    .reader-viewport { display: block; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    .reader-sheet { height: auto; overflow: visible; padding: 42px 8vw 110px; }
    .reader-right-sheet { display: none; }
    .reader-flow { width: 100%; transform: none !important; font-size: var(--reader-font-size); line-height: 1.68; will-change: auto; }
    .reader-chapter-header { margin-bottom: 2em; }
    .reader-navigation { right: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(50%); }
    .reader-progress { min-width: 76px; }
    .reader-comment-modal { align-items: end; padding: 0; }
    .reader-comment-dialog { width: 100%; max-height: 86dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; }
    .reader-comment-expand { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .reader-viewport,
    .reader-body { scroll-behavior: auto; transition: none; }
}