:root {
  --navy-950: #0c1728;
  --navy-900: #132742;
  --navy-800: #1c3554;
  --navy-700: #28466a;
  --paper: #f7f3eb;
  --paper-deep: #eee7da;
  --ink: #24334a;
  --muted: #708097;
  --gold: #e8b85d;
  --gold-soft: #f4dba2;
  --red: #ef6954;
  --green: #4fc59f;
  --white: #fffdfa;
  --shadow: 0 18px 48px rgba(8, 19, 36, 0.18);
  --font-scale: 1;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--navy-950);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--navy-950); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--navy-950) 0, #162d4a 37%, var(--paper) 37%, var(--paper) 100%);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

[hidden] { display: none !important; }

.view { min-height: 100vh; }
.site-header, .home-main, .reader-header, .reader-main { width: min(100% - 32px, 760px); margin: 0 auto; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 14px;
  color: rgba(255, 253, 250, 0.76);
}

.brand-lockup { display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand-name { margin-left: 5px; font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; }
.header-note { font-size: 11px; color: rgba(255, 253, 250, 0.5); white-space: nowrap; }
.brand-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.brand-dot--red { background: var(--red); }
.brand-dot--green { background: var(--green); }
.brand-track { width: 26px; height: 1px; margin-left: 2px; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); }

.home-main { padding-bottom: 154px; }

.hero-card {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 26px;
  background: var(--navy-800);
  box-shadow: 0 22px 56px rgba(4, 13, 28, 0.32);
  isolation: isolate;
}

.hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; opacity: 0.92; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 21, 39, 0.02) 15%, rgba(9, 21, 39, 0.35) 48%, rgba(9, 21, 39, 0.96) 100%); }
.hero-copy { position: absolute; left: 24px; right: 24px; bottom: 28px; color: var(--white); }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
.hero-copy h1 { margin: 0; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(40px, 11vw, 64px); font-weight: 500; line-height: 1.02; letter-spacing: -0.06em; }
.hero-copy h1 em { color: var(--gold-soft); font-style: normal; }
.hero-description { max-width: 310px; margin: 16px 0 0; color: rgba(255, 253, 250, 0.8); font-size: 13px; line-height: 1.7; }
.hero-wheel { position: absolute; width: 88px; height: 88px; border: 10px solid rgba(255, 255, 255, 0.1); border-radius: 50%; opacity: 0.65; }
.hero-wheel::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; }
.hero-wheel--one { top: 26px; right: 24px; }
.hero-wheel--two { top: 84px; right: 82px; width: 48px; height: 48px; border-width: 6px; }

.continue-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 32px; padding: 19px 18px; border: 1px solid rgba(35, 51, 74, 0.1); border-radius: 18px; background: rgba(255, 253, 250, 0.82); box-shadow: 0 10px 32px rgba(27, 49, 76, 0.09); }
.continue-card h2, .section-heading h2 { margin: 0; color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.continue-card .section-kicker { margin-bottom: 5px; color: var(--muted); letter-spacing: 0.08em; }
.muted-copy { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.primary-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--navy-900); color: var(--white); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(19, 39, 66, 0.2); transition: transform 180ms ease, background 180ms ease; }
.primary-button:hover { background: var(--navy-700); transform: translateY(-1px); }
.button-icon { color: var(--gold); font-size: 10px; }

.episode-section { padding-bottom: 24px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.section-heading .section-kicker { margin-bottom: 6px; color: var(--muted); letter-spacing: 0.08em; }
.episode-count { padding: 6px 9px; border-radius: 99px; background: var(--paper-deep); color: var(--muted); font-size: 10px; }
.episode-list { display: grid; gap: 10px; }
.episode-card { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 82px; padding: 13px 14px 13px 12px; border: 1px solid rgba(35, 51, 74, 0.09); border-radius: 16px; background: rgba(255, 253, 250, 0.9); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(23, 45, 73, 0.045); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.episode-card::after { content: "→"; position: absolute; right: 16px; color: #aab4c2; font-size: 18px; }
.episode-card:hover, .episode-card:focus-visible { border-color: rgba(232, 184, 93, 0.8); box-shadow: 0 10px 24px rgba(23, 45, 73, 0.11); transform: translateY(-1px); }
.episode-card--current { border-color: rgba(79, 197, 159, 0.6); background: #fffdf9; }
.episode-index { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--navy-900); color: var(--gold-soft); font-family: Georgia, serif; font-size: 16px; }
.episode-card--current .episode-index { background: var(--green); color: var(--navy-950); }
.episode-copy { min-width: 0; padding-right: 24px; }
.episode-title { display: block; overflow: hidden; font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.episode-theme { display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.episode-meta { display: block; margin-top: 7px; color: #98a3b2; font-size: 10px; }

.view--reader { background: var(--paper); }
.reader-header { display: flex; align-items: center; gap: 11px; padding: 18px 0 16px; }
.reader-header-copy { min-width: 0; flex: 1; }
.reader-episode-label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; }
.reader-header h1 { overflow: hidden; margin: 0; color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(35, 51, 74, 0.11); border-radius: 12px; background: rgba(255, 253, 250, 0.65); color: var(--navy-700); font-size: 19px; cursor: pointer; }
.icon-button:last-child { font-family: Georgia, serif; font-size: 12px; font-weight: 700; }
.reader-main { padding-bottom: 178px; }
.chapter-intro { padding: 23px 4px 14px; }
.chapter-number { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; background: var(--navy-900); color: var(--gold-soft); font-size: 11px; letter-spacing: 0.05em; }
.chapter-theme { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.chapter-rule { position: relative; height: 18px; margin-top: 14px; }
.chapter-rule::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(232, 184, 93, 0.95), rgba(232, 184, 93, 0)); }
.chapter-rule span { position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border: 2px solid var(--gold); border-radius: 50%; background: var(--paper); }
.reader-settings { display: grid; gap: 15px; margin: 0 0 20px; padding: 14px; border: 1px solid rgba(35, 51, 74, 0.1); border-radius: 15px; background: rgba(255, 253, 250, 0.75); }
.settings-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-group--voice { align-items: center; }
.settings-label { color: var(--muted); font-size: 11px; }
.settings-buttons { display: flex; align-items: center; gap: 6px; }
.settings-buttons button { min-width: 37px; min-height: 29px; padding: 0 8px; border: 1px solid rgba(35, 51, 74, 0.14); border-radius: 9px; background: transparent; color: var(--navy-700); font-size: 11px; cursor: pointer; }
.settings-buttons button.is-active { border-color: var(--gold); background: var(--gold-soft); color: var(--navy-950); font-weight: 700; }
#settings-voices { width: min(68%, 230px); min-height: 32px; padding: 0 9px; border: 1px solid rgba(35, 51, 74, 0.14); border-radius: 9px; background: var(--white); color: var(--navy-700); font-size: 11px; }
#settings-voices:disabled { color: var(--muted); opacity: 0.75; }
.reader-content { font-size: calc(17px * var(--font-scale)); line-height: 2.05; letter-spacing: 0.025em; }
.reader-content p { margin: 0; padding: 0.72em 0.82em; border-left: 3px solid transparent; border-radius: 0 10px 10px 0; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.reader-content p.is-speaking { border-left-color: var(--gold); background: rgba(244, 219, 162, 0.33); color: #1c2b42; }
.reader-content p.is-read { color: #64758c; }
.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.chapter-nav-button { display: flex; align-items: center; gap: 9px; min-height: 65px; padding: 12px; border: 1px solid rgba(35, 51, 74, 0.12); border-radius: 15px; background: rgba(255, 253, 250, 0.65); color: var(--navy-700); text-align: left; cursor: pointer; }
.chapter-nav-button--next { justify-content: flex-end; text-align: right; }
.chapter-nav-button:disabled { cursor: not-allowed; opacity: 0.4; }
.chapter-nav-button small, .chapter-nav-button strong { display: block; }
.chapter-nav-button small { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.chapter-nav-button strong { max-width: 120px; overflow: hidden; font-family: Georgia, "Songti SC", serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.player { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); background: rgba(12, 23, 40, 0.97); color: var(--white); box-shadow: 0 -10px 30px rgba(7, 17, 31, 0.14); backdrop-filter: blur(18px); }
.player-progress { height: 3px; background: rgba(255, 255, 255, 0.11); }
.player-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); transition: width 240ms ease; }
.player-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; width: min(100% - 32px, 760px); min-height: 82px; margin: 0 auto; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.player-context { display: flex; align-items: center; gap: 9px; min-width: 0; }
.player-live-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(232, 184, 93, 0.12); }
.player--playing .player-live-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(79, 197, 159, 0.13); }
.player-episode, .player-status { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-episode { color: var(--gold-soft); font-family: Georgia, "Songti SC", serif; font-size: 12px; font-weight: 600; }
.player-status { margin-top: 4px; color: rgba(255, 253, 250, 0.55); font-size: 10px; }
.player-controls { display: flex; align-items: center; gap: 10px; }
.player-options { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.play-button, .player-secondary, .pill-button { border: 0; cursor: pointer; }
.play-button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--navy-950); font-size: 16px; box-shadow: 0 6px 18px rgba(232, 184, 93, 0.24); }
.player-secondary { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: transparent; color: rgba(255, 253, 250, 0.62); font-size: 17px; }
.player-stop { color: rgba(255, 253, 250, 0.42); font-size: 11px; }
.pill-button { min-width: 39px; min-height: 28px; padding: 0 8px; border: 1px solid rgba(255, 253, 250, 0.19); border-radius: 99px; background: transparent; color: rgba(255, 253, 250, 0.65); font-size: 10px; }
.pill-button--active { border-color: rgba(79, 197, 159, 0.5); color: var(--green); }
.speech-notice { width: min(100% - 32px, 760px); margin: -1px auto 0; padding: 7px 0 calc(7px + env(safe-area-inset-bottom)); color: rgba(255, 253, 250, 0.62); font-size: 10px; line-height: 1.45; }
.noscript-message { margin: 20px; padding: 16px; border-radius: 12px; background: var(--paper); color: var(--ink); }

@media (max-width: 520px) {
  .continue-card { align-items: flex-start; flex-direction: column; }
  .primary-button { width: 100%; justify-content: center; }
  .player-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .player-context { grid-column: 1; }
  .player-controls { grid-column: 2; grid-row: 1; }
  .player-options { grid-column: 1 / -1; justify-content: space-between; margin-top: -1px; }
  .player-options .pill-button { flex: 1; }
  .player-options .player-stop { flex: 0 0 28px; }
  .reader-content p { padding-right: 0.2em; padding-left: 0.68em; }
}

@media (min-width: 700px) {
  .site-header { padding-top: 30px; }
  .hero-card { min-height: 470px; }
  .home-main { padding-bottom: 170px; }
  .episode-list { grid-template-columns: 1fr 1fr; }
  .reader-content { font-size: calc(18px * var(--font-scale)); }
}