:root {
  --paper: #f5f4ef;
  --ink: #0b0b0b;
  --muted: #6b6a65;
  --red: #ff2d22;
  --measure: 720px;
  --reader-size: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; transition: background .2s ease, color .2s ease; }
body.dark { --paper: #111; --ink: #eee; --muted: #aaa; }
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 10; height: 4px; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--red); }
.reader-header { position: sticky; top: 0; z-index: 9; min-height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); }
.reader-header > a { font-family: Arial Black, sans-serif; font-size: 12px; letter-spacing: .08em; text-decoration: none; }
.reader-header > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.reader-tools { justify-self: end; display: flex; gap: 4px; }
.reader-tools button { min-width: 34px; height: 30px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.reader-tools button:hover { background: var(--red); color: #0b0b0b; }
main { padding: 0 20px; }
.story-heading { max-width: 980px; margin: 0 auto; padding: 12vh 0 9vh; border-bottom: 1px solid var(--ink); }
.story-heading > p:first-child { margin: 0 0 24px; color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.story-heading h1 { max-width: 950px; margin: 0; font-family: Arial Black, "PingFang SC", sans-serif; font-size: clamp(70px, 15vw, 180px); line-height: .78; letter-spacing: -.09em; }
.novel-player { max-width: 980px; min-height: 112px; display: grid; grid-template-columns: 78px minmax(150px, .8fr) minmax(280px, 1.6fr) minmax(110px, .55fr); align-items: center; gap: 20px; margin: 28px auto 0; padding: 14px 18px; border-radius: 5px; background: #090909; color: white; box-shadow: 0 8px 25px rgba(0,0,0,.16); }
.novel-player > img { width: 78px; height: 78px; border-radius: 3px; object-fit: cover; }
.novel-track-info { min-width: 0; }
.novel-track-info strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.novel-track-info span { display: block; margin-top: 7px; color: #a7a7a7; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.novel-transport { display: grid; justify-items: center; gap: 9px; }
.novel-play { width: 46px; height: 46px; display: grid; place-items: center; padding: 0 0 0 3px; border: 0; border-radius: 50%; background: var(--red); color: #090909; font-size: 19px; cursor: pointer; transition: transform .15s ease; }
.novel-play:hover { transform: scale(1.07); }
.novel-play:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.novel-play.is-playing { padding-left: 0; font-size: 16px; font-weight: 900; }
.novel-timeline { width: 100%; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; }
.novel-timeline time { color: #bdbdbd; font-size: 10px; text-align: center; }
.novel-player input[type="range"] { height: 4px; margin: 0; accent-color: var(--red); cursor: pointer; }
.novel-volume { display: flex; align-items: center; gap: 8px; color: var(--red); }
.novel-volume input { min-width: 0; width: 100%; }
.novel-audio { display: none; }
.story-body { max-width: var(--measure); margin: 0 auto; padding: 10vh 0 14vh; }
.story-body p { margin: 0 0 1.45em; font-family: Georgia, "Noto Serif CJK SC", "Songti SC", serif; font-size: var(--reader-size); line-height: 2; text-align: justify; text-indent: 2em; overflow-wrap: anywhere; }
.story-nav { max-width: 980px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: 0 auto 80px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.story-nav a { font-size: 12px; font-weight: 800; text-decoration: none; }
.story-nav a:last-child { text-align: right; }
.story-nav .all-works { padding: 8px 14px; border: 1px solid var(--ink); }

/* Keep the reading pages typographic and remove decorative rules. */
.reader-header,
.story-heading,
.story-nav,
.story-nav .all-works { border: 0; }
.reader-tools button { border: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.story-nav .all-works { background: var(--red); color: #090909; text-decoration: none; }
.story-nav a:hover { color: var(--red); }
footer { padding: 28px 22px; background: var(--red); color: #0b0b0b; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-align: center; }

@media (max-width: 640px) {
  .reader-header { padding: 0 12px; }
  .story-heading { padding: 70px 0 55px; }
  .story-heading h1 { font-size: 25vw; }
  .novel-player { grid-template-columns: 58px 1fr; gap: 12px; padding: 12px; }
  .novel-player > img { width: 58px; height: 58px; }
  .novel-transport { grid-column: 1 / -1; }
  .novel-volume { grid-column: 1 / -1; }
  .story-body { padding: 60px 0 90px; }
  .story-body p { line-height: 1.9; }
  .story-nav { grid-template-columns: 1fr 1fr; }
  .story-nav .all-works { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Chinese reading labels remain black/white; red is reserved for UI surfaces. */
.story-heading > p:first-child { color: var(--ink); }
.story-nav a:hover { color: var(--ink); text-decoration: underline; }