/* v007: existing dark artwork stays unchanged in both display modes. */
:root { color-scheme: dark; }
.site-header { flex-wrap: wrap; row-gap: 12px; }
.site-header nav { margin-left: auto; }
.display-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 13px; border: 1px solid #7c6b49; border-radius: 3px; background: transparent; color: var(--gold); font: 14px var(--sans); }
.theme-toggle [data-theme-symbol] { font-size: 18px; line-height: 1; }
.theme-toggle:hover { background: #ffffff0b; }
.theme-toggle[aria-pressed=true] { background: #e4d5b9; }
html[data-theme=light] { color-scheme: light; --deep: #f5f0e7; --ink: #192d2c; --gold: #77551d; --muted: #56635b; --line: #c8c0af; }
[data-theme=light] body { background: var(--deep); color: var(--ink); }
[data-theme=light] .preview-bar { background: #e8e0d1; border-color: #c8c0af; }
[data-theme=light] .preview-bar span { color: #485950; }
[data-theme=light] .site-header { border-color: #c8c0af; }
[data-theme=light] .hero:before { background: linear-gradient(90deg,#f5f0e7 2%,#f5f0e7ed 40%,#f5f0e7b8),url('assets/archive.png') center 52%/cover; opacity: .85; }
[data-theme=light] .byline { color: #49594f; }
[data-theme=light] .hero-description,
[data-theme=light] .section-intro>p:last-child,
[data-theme=light] .inside-grid p,
[data-theme=light] .start-section>div>p:not(.eyebrow):not(.script-wordmark),
[data-theme=light] .sample-context,
[data-theme=light] .section-help,
[data-theme=light] .sidebar-bottom>p:first-child,
[data-theme=light] .page-note,
[data-theme=light] #follow-status { color: #495b52; }
[data-theme=light] .sample-title { color: #69532e; }
[data-theme=light] .button { background: #d9b677; border-color: #93713b; color: #132020; }
[data-theme=light] .button:hover { background: #eac78b; }
[data-theme=light] .button.secondary { background: #fffcf6; color: #223a34; border-color: #8a9684; }
[data-theme=light] .button.secondary:hover { background: #e7e2d5; }
[data-theme=light] .view-switch button[aria-pressed=true] { background: #d9b677; color: #132020; }
[data-theme=light] .book-cover { border-color: #8d7044; box-shadow: -9px 10px 0 #324640,-10px 11px 0 #a58854,0 30px 40px -8px #29362f50,0 56px 65px -24px #29362f60; }
[data-theme=light] .signup-card { background: #fffcf6; border-color: #c5b99f; box-shadow: 0 20px 42px -15px #3b493b38,0 3px 8px #3b493b10; }
[data-theme=light] label { color: #263e35; }
[data-theme=light] input:not([type=checkbox]) { background: #fffefa; color: #192d2c; border-color: #8a9684; }
[data-theme=light] input::placeholder { color: #626c63; opacity: 1; }
[data-theme=light] .check span { color: #3e5147; }
[data-theme=light] .form-note { color: #56635b; }
[data-theme=light] .error { color: #9b2d17; }
[data-theme=light] select,
[data-theme=light] #chapter-select { background: #fffcf6; color: #20382f; border-color: #8a9684; }
[data-theme=light] .view-switch { border-color: #8a9684; }
[data-theme=light] #section-nav a { color: #43574c; border-color: #c8c0af77; }
[data-theme=light] #section-nav a:hover { color: #64440f; }
[data-theme=light] #section-nav a[aria-current=location] { color: #513b14; background: #e6dbc3; box-shadow: inset 3px 0 #876224; }
[data-theme=light] .section-time { color: #71501c; }
[data-theme=light] .follow-controls { background: #eae5d7; border-color: #b4a47e; }
[data-theme=light] .follow-controls p { color: #3c5347; }
[data-theme=light] .page-controls { background: #f8f4eaf7; border-color: #b2ad99; box-shadow: 0 5px 15px -8px #36463430; }
[data-theme=light] .page-stage,
[data-theme=light] .text-reading { box-shadow: 0 26px 48px -12px #283b3550,0 5px 12px #283b3520; outline: 1px solid #b6ac9866; }
[data-theme=light] .audio-dock { background: #faf7eff5; border-color: #a48a59; box-shadow: 0 -6px 22px #37473415; }
[data-theme=light] .audio-dock audio { color-scheme: light; }
[data-theme=light] .follow-row { border-color: #c8c0af; }
[data-theme=light] dialog { background: #fffcf6; color: #192d2c; }
[data-theme=light] .theme-toggle:hover { background: #e8dfcd; }
/* Keep the original designed page and its highlight colors intact. */
@media(max-width:760px) {
  .display-controls { margin-left: auto; }
  .reader-header nav { flex-wrap: wrap; gap: 10px; }
  .theme-toggle { min-height: 44px; }
}