:root {
        color-scheme: dark;
        --bg: #0b0b0e;
        --bg-panel: #141419;
        --bg-raised: #1c1c24;
        --ink: #eceaf2;
        --ink-dim: #9a97a8;
        --ink-faint: #5d5a6e;
        --pivot: #ff3b30;
        --accent: #e8e6f0;
        --line: #26262f;
        --line-strong: #3a3a48;
        --track: #26262f;
        --on-accent: #101014;
        --accent-hover: #ffffff;
        --btn-hover: #262631;
        --highlight: rgba(236, 234, 242, .07);
        --danger: #ff6b62;
        --danger-bg: #221114;
        --danger-border: #4a2320;
        --danger-ink: #ffb3ad;
        --reader-font: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
        --radius: 14px;
      }
      /* Sepia: warm paper for long sessions. */
      html[data-theme="sepia"] {
        color-scheme: light;
        --bg: #f3ead6;
        --bg-panel: #e9dec5;
        --bg-raised: #ddd0b1;
        --ink: #3f3220;
        --ink-dim: #6d5d42;
        --ink-faint: #9c8c6b;
        --pivot: #c0392b;
        --accent: #3f3220;
        --line: #d8c9a8;
        --line-strong: #c2b28a;
        --track: #d8c9a8;
        --on-accent: #faf5e8;
        --accent-hover: #ffffff;
        --btn-hover: #d2c49e;
        --highlight: rgba(63, 50, 32, .09);
        --danger: #b23a2a;
        --danger-bg: #f6e4de;
        --danger-border: #d9a89d;
        --danger-ink: #8f2f24;
      }
      /* True black: pure OLED black. */
      html[data-theme="black"] {
        --bg: #000000;
        --bg-panel: #0a0a0d;
        --bg-raised: #141417;
        --line: #1e1e25;
        --line-strong: #2e2e38;
        --track: #1e1e25;
        --btn-hover: #1f1f27;
        --highlight: rgba(255, 255, 255, .055);
      }
      /* Reading fonts. */
      html[data-font="serif"] { --reader-font: Georgia, "Iowan Old Style", "Times New Roman", serif; }
      html[data-font="sans"] { --reader-font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
      html[data-font="mono"] { --reader-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      button { font: inherit; cursor: pointer; }
      :focus-visible { outline: 2px solid var(--pivot); outline-offset: 3px; border-radius: 6px; }

      /* ---------- Loader ---------- */
      #loader {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(44px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
      }
      .load-card {
        width: min(560px, 100%);
        text-align: center;
      }
      .load-card h1 {
        font-size: clamp(1.7rem, 5vw, 2.4rem);
        font-weight: 650;
        letter-spacing: -0.02em;
        margin: 0 0 10px;
      }
      .load-card h1 .dot { color: var(--pivot); }
      .lede {
        color: var(--ink-dim);
        font-size: 1.02rem;
        line-height: 1.55;
        margin: 0 auto 30px;
        max-width: 44ch;
      }
      .drop-zone {
        border: 1.5px dashed var(--line-strong);
        border-radius: var(--radius);
        background: var(--bg-panel);
        padding: 34px 22px;
        transition: border-color .15s ease, background .15s ease;
      }
      .drop-zone.dragging {
        border-color: var(--pivot);
        background: var(--bg-raised);
      }
      .drop-zone p {
        margin: 0 0 18px;
        color: var(--ink-dim);
        font-size: .98rem;
        line-height: 1.5;
      }
      .btn {
        appearance: none;
        border: 1px solid var(--line);
        background: var(--bg-raised);
        color: var(--ink);
        border-radius: 999px;
        padding: 12px 26px;
        font-size: 1rem;
        font-weight: 600;
        transition: background .15s ease, transform .1s ease;
      }
      .btn:hover { background: var(--btn-hover); }
      .btn:active { transform: scale(.97); }
      .btn-primary {
        background: var(--ink);
        color: var(--on-accent);
        border-color: var(--ink);
      }
      .btn-primary:hover { background: var(--accent-hover); }
      .or {
        display: flex;
        align-items: center;
        gap: 14px;
        color: var(--ink-faint);
        font-size: .82rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin: 26px 0 16px;
      }
      .or::before, .or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
      }
      textarea {
        width: 100%;
        min-height: 110px;
        resize: vertical;
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        color: var(--ink);
        padding: 14px 16px;
        font: inherit;
        font-size: .95rem;
        line-height: 1.5;
      }
      textarea::placeholder { color: var(--ink-faint); }
      .paste-row { margin-top: 12px; display: flex; justify-content: center; }
      .hint {
        margin-top: 26px;
        color: var(--ink-faint);
        font-size: .85rem;
        line-height: 1.6;
      }
      .error-box {
        display: none;
        margin-top: 20px;
        border: 1px solid var(--danger-border);
        background: var(--danger-bg);
        color: var(--danger-ink);
        border-radius: var(--radius);
        padding: 14px 18px;
        font-size: .94rem;
        line-height: 1.5;
        text-align: left;
      }
      .error-box.show { display: block; }
      .busy {
        display: none;
        margin-top: 18px;
        color: var(--ink-dim);
        font-size: .95rem;
      }
      .busy.show { display: block; }

      /* Drag overlay */
      #drag-overlay {
        position: fixed;
        inset: 0;
        background: rgba(8, 8, 11, .88);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 50;
        pointer-events: none;
      }
      #drag-overlay.show { display: flex; }
      #drag-overlay .frame {
        border: 2px dashed var(--pivot);
        border-radius: 20px;
        padding: 48px 64px;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--ink);
      }

      /* ---------- Reader ---------- */
      #reader {
        display: none;
        min-height: 100dvh;
        flex-direction: column;
      }
      #reader.show { display: flex; }
      .topbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: calc(16px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) 16px calc(22px + env(safe-area-inset-left, 0px));
        color: var(--ink-dim);
        font-size: .92rem;
      }
      .topbar .fname {
        color: var(--ink);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw;
      }
      .topbar .spacer { flex: 1; }
      .btn-small {
        padding: 8px 16px;
        font-size: .88rem;
        font-weight: 550;
      }
      select.env-select {
        cursor: pointer;
        max-width: 158px;
        text-overflow: ellipsis;
      }

      .stage {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 12px 16px;
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
      }
      .guide {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .guide::before, .guide::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 2px;
        height: 14px;
        background: var(--line-strong);
        transform: translateX(-50%);
      }
      .guide::before { top: -22px; }
      .guide::after { bottom: -22px; }
      .word {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: baseline;
        width: 100%;
        font-family: var(--reader-font);
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.15;
        white-space: nowrap;
      }
      .word .before { text-align: right; }
      .word .pivot { color: var(--pivot); text-align: center; }
      .word .after { text-align: left; }
      /* A chosen reading font also sets the book view, except the
         default System choice which keeps the classic Georgia page. */
      html[data-font="serif"] .book-text,
      html[data-font="sans"] .book-text,
      html[data-font="mono"] .book-text { font-family: var(--reader-font); }
      .stage .placeholder {
        color: var(--ink-faint);
        font-size: clamp(1.2rem, 3.5vw, 1.8rem);
        font-weight: 500;
        text-align: center;
        line-height: 1.5;
        max-width: 34ch;
      }

      .controls {
        padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
      }
      .progress-wrap { margin-bottom: 6px; }
      .progress-track {
        height: 26px;
        display: flex;
        align-items: center;
        cursor: pointer;
        touch-action: none;
      }
      .progress-rail {
        position: relative;
        height: 5px;
        width: 100%;
        background: var(--track);
        border-radius: 999px;
      }
      .progress-fill {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0%;
        background: linear-gradient(90deg, var(--ink-dim), var(--ink));
        border-radius: 999px;
      }
      .progress-meta {
        display: flex;
        justify-content: space-between;
        color: var(--ink-faint);
        font-size: .84rem;
        font-variant-numeric: tabular-nums;
        margin-bottom: 12px;
      }
      .control-row {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .btn-play {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        border: none;
        background: var(--ink);
        color: var(--on-accent);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        transition: background .15s ease, transform .1s ease;
      }
      .btn-play:hover { background: var(--accent-hover); }
      .btn-play:active { transform: scale(.94); }
      .btn-play svg { width: 30px; height: 30px; display: block; }
      .btn-icon {
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
      }
      .btn-icon svg { width: 20px; height: 20px; display: block; }
      .speed {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1 1 260px;
        max-width: 420px;
        min-width: 220px;
      }
      .speed label {
        color: var(--ink-dim);
        font-size: .88rem;
        white-space: nowrap;
      }
      .speed output {
        font-variant-numeric: tabular-nums;
        font-weight: 650;
        min-width: 4.6ch;
        text-align: right;
      }
      input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        flex: 1;
        height: 5px;
        border-radius: 999px;
        background: var(--track);
        outline-offset: 4px;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--ink);
        border: none;
        cursor: pointer;
      }
      input[type="range"]::-moz-range-thumb {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--ink);
        border: none;
        cursor: pointer;
      }
      .keys-hint {
        text-align: center;
        color: var(--ink-faint);
        font-size: .8rem;
        margin-top: 16px;
      }
      /* ---------- Display settings (theme + font) ---------- */
      .display-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 26px;
        justify-content: center;
        align-items: center;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
      }
      .display-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .display-label {
        color: var(--ink-faint);
        font-size: .8rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        margin-right: 2px;
      }
      .seg-btn {
        appearance: none;
        border: 1px solid var(--line);
        background: var(--bg-panel);
        color: var(--ink-dim);
        border-radius: 999px;
        padding: 7px 16px;
        font-size: .85rem;
        font-weight: 600;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
      }
      .seg-btn:hover { border-color: var(--line-strong); color: var(--ink); }
      .seg-btn.active {
        background: var(--ink);
        color: var(--on-accent);
        border-color: var(--ink);
      }
      kbd {
        background: var(--bg-raised);
        border: 1px solid var(--line);
        border-bottom-width: 2px;
        border-radius: 5px;
        padding: 1px 6px;
        font-family: inherit;
        font-size: .76rem;
      }

      /* ---------- Resume bar ---------- */
      .resume-bar {
        display: none;
        align-items: center;
        gap: 12px;
        padding: 10px 22px;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--line);
        color: var(--ink-dim);
        font-size: .92rem;
      }
      .resume-bar.show { display: flex; }
      .resume-bar span { flex: 1; line-height: 1.45; }

      /* ---------- Chapters overlay ---------- */
      #chapters-overlay {
        position: fixed;
        inset: 0;
        background: rgba(8, 8, 11, .86);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
        z-index: 60;
      }
      #chapters-overlay.show { display: flex; }
      .chapters-panel {
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        width: min(560px, 100%);
        max-height: 82dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .chapters-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid var(--line);
        flex: none;
      }
      .chapters-head h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
      .chapters-close { width: 38px; height: 38px; }
      .chapters-close svg { width: 16px; height: 16px; }
      .chapters-list { overflow-y: auto; }
      .chapter-item {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        text-align: left;
        padding: 14px 20px;
        font-size: .98rem;
        line-height: 1.4;
      }
      .chapter-item:last-child { border-bottom: none; }
      .chapter-item:hover { background: var(--bg-raised); }
      .chapter-item .ch-pos {
        color: var(--ink-faint);
        font-size: .82rem;
        font-variant-numeric: tabular-nums;
        flex: none;
      }
      .chapter-item.current { font-weight: 650; }
      .chapter-item.current .ch-label::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--pivot);
        margin-right: 9px;
        vertical-align: 2px;
      }

      /* ---------- Library ---------- */
      .library {
        width: min(1080px, 100%);
        margin: 10px 0 38px;
      }
      .library-title {
        font-size: 1.15rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        margin: 0 0 16px;
        text-align: left;
      }
      .library.classics {
        border-top: 1px solid var(--line);
        padding-top: 30px;
        margin-top: 6px;
      }
      .classics-sub {
        color: var(--ink-faint);
        font-size: .9rem;
        line-height: 1.5;
        margin: -10px 0 18px;
        text-align: left;
      }
      .lib-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
        gap: 22px 16px;
        align-items: stretch;
      }
      .book-card {
        position: relative;
        background: var(--bg-panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: border-color .15s ease, transform .1s ease;
      }
      .book-card:hover { border-color: var(--line-strong); }
      .book-card:active { transform: scale(.985); }
      .book-cover {
        position: relative;
        aspect-ratio: 2 / 3;
        background: var(--bg-raised);
        flex: none;
      }
      .book-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .cover-ph {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cover-ph span {
        font-size: 3.4rem;
        font-weight: 650;
        color: rgba(236, 234, 242, .88);
        line-height: 1;
      }
      .book-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(10, 10, 14, .72);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .book-remove:hover { background: rgba(10, 10, 14, .92); }
      .book-remove svg { width: 13px; height: 13px; display: block; }
      .book-cover-btn {
        position: absolute;
        left: 8px;
        bottom: 8px;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(10, 10, 14, .72);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .book-cover-btn:hover { background: rgba(10, 10, 14, .92); }
      .book-cover-btn svg { width: 14px; height: 14px; display: block; }
      .book-body {
        padding: 12px 13px 13px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
      }
      .book-title {
        font-weight: 600;
        font-size: .95rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .book-author {
        color: var(--ink-dim);
        font-size: .82rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .book-progress {
        height: 4px;
        background: var(--track);
        border-radius: 999px;
        margin-top: auto;
        padding-top: 0;
        overflow: hidden;
      }
      .book-progress > div {
        height: 100%;
        background: var(--ink);
        border-radius: 999px;
      }
      .book-meta {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        color: var(--ink-faint);
        font-size: .8rem;
        font-variant-numeric: tabular-nums;
      }
      .book-confirm {
        position: absolute;
        inset: 0;
        background: rgba(8, 8, 11, .93);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px;
        text-align: center;
        z-index: 3;
      }
      .book-confirm p { margin: 0; font-size: .9rem; line-height: 1.45; }
      .book-confirm-row { display: flex; gap: 10px; }
      .btn-danger {
        background: var(--danger-bg);
        border-color: var(--danger-border);
        color: var(--danger-ink);
      }
      .btn-danger:hover { background: #4f2723; }
      .add-card {
        appearance: none;
        border: 1.5px dashed var(--line-strong);
        border-radius: var(--radius);
        background: transparent;
        color: var(--ink-dim);
        min-height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: .95rem;
        font-weight: 550;
        transition: border-color .15s ease, color .15s ease;
      }
      .add-card:hover { border-color: var(--pivot); color: var(--ink); }
      .add-card .add-plus { font-size: 2rem; font-weight: 400; line-height: 1; }

      /* ---------- Reading mode toggle ---------- */
      .modebar {
        display: flex;
        gap: 8px;
        justify-content: center;
        padding: 0 16px 12px;
      }
      .mode-btn {
        appearance: none;
        border: 1px solid var(--line);
        background: var(--bg-panel);
        color: var(--ink-dim);
        border-radius: 999px;
        padding: 7px 20px;
        font-size: .9rem;
        font-weight: 600;
        transition: background .15s ease, color .15s ease;
      }
      .mode-btn.active {
        background: var(--ink);
        color: var(--on-accent);
        border-color: var(--ink);
      }

      /* ---------- Book view ---------- */
      #reader.book-mode { height: 100dvh; }
      #bookview {
        display: none;
        flex: 1;
        flex-direction: column;
        min-height: 0;
      }
      #bookview.show { display: flex; }
      .book-scroll {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
      }
      .book-text {
        max-width: 680px;
        margin: 0 auto;
        padding: 30px 24px 90px;
        font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
        font-size: 19px;
        line-height: 1.78;
        color: var(--ink);
      }
      .book-text p { margin: 0 0 1.15em; }
      .book-para {
        border-radius: 8px;
        cursor: pointer;
        transition: background .2s ease, box-shadow .2s ease;
      }
      .book-para.current {
        background: var(--highlight);
        box-shadow: 0 0 0 8px var(--highlight);
      }
      .book-chapter {
        font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
        font-size: 1.28rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        line-height: 1.35;
        margin: 1.7em 0 .85em;
        color: var(--ink);
      }
      .book-chapter:first-child { margin-top: 0; }
      .book-toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 22px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        color: var(--ink-faint);
        font-size: .85rem;
        font-variant-numeric: tabular-nums;
      }
      .book-toolbar .spacer { flex: 1; }
      .book-toolbar .btn-small { min-width: 44px; }

      @media (max-width: 560px) {
        .topbar .fname { max-width: 42vw; }
        #fmeta { display: none; }
        .control-row { gap: 14px; }
        .keys-hint { display: none; }
        .lib-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 12px; }
      }