:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f1eb;
  background: #07121e;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #f1a097; outline-offset: 5px; border-radius: 4px; }
[hidden] { display: none !important; }

/* Keep the existing skeleton routes unchanged. */
body:not(.theme-page):not(.theme-index) {
  color-scheme: light;
  color: #192637;
  background: #fff;
}
body:not(.theme-page):not(.theme-index) main {
  width: min(100% - 2.5rem, 40rem);
  margin: 0 auto;
  padding: 3rem 0;
}
body:not(.theme-page):not(.theme-index) a { color: #174875; }
body:not(.theme-page):not(.theme-index) a:focus-visible {
  outline-color: #174875;
  outline-offset: 5px;
}
body:not(.theme-page):not(.theme-index) h1 {
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  line-height: 1.18;
  margin: 0 0 1.5rem;
  overflow-wrap: anywhere;
}
body:not(.theme-page):not(.theme-index) p { font-size: 1rem; line-height: 1.65; }
body:not(.theme-page):not(.theme-index) .brand { display: inline-block; font-size: 1rem; margin-bottom: 2rem; }
body:not(.theme-page):not(.theme-index) .placeholder,
body:not(.theme-page):not(.theme-index) .date { color: #556172; }
body:not(.theme-page):not(.theme-index) .date,
body:not(.theme-page):not(.theme-index) .reference { font-size: .9375rem; }
body:not(.theme-page):not(.theme-index) .message { font-size: 1.2rem; white-space: pre-line; }
body:not(.theme-page):not(.theme-index) nav ul { list-style: none; margin: 0; padding: 0; }
body:not(.theme-page):not(.theme-index) nav li { border-bottom: 1px solid #e0e5eb; }
body:not(.theme-page):not(.theme-index) nav a { display: block; padding: .9rem 0; font-size: 1rem; line-height: 1.5; }

/* Home */
body.theme-index {
  background:
    radial-gradient(circle at 18% 14%, rgba(184, 216, 238, .11) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 26%, rgba(255, 255, 255, .13) 0 1px, transparent 2px),
    linear-gradient(155deg, #081d31 0%, #04121f 58%, #020a12 100%);
}

.index-page {
  width: min(calc(100% - 2rem), 42rem);
  margin: 0 auto;
  padding: 2.2rem 0 3rem;
}

.index-brand {
  display: inline-block;
  color: #f7f1eb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 700;
  text-decoration: none;
}

.index-kicker {
  margin: 3.5rem 0 .8rem;
  color: #f1a097;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.index-title {
  max-width: 35rem;
  margin: 0;
  color: #f7f4ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 8vw, 4rem);
  line-height: 1.03;
}

.index-intro {
  max-width: 32rem;
  margin: 1.25rem 0 2rem;
  color: #afc0cc;
  font-size: 1.05rem;
  line-height: 1.65;
}

.theme-list {
  display: grid;
  gap: .7rem;
  margin: 0;
}

.theme-list a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: .9rem;
  min-height: 4.25rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(191, 215, 232, .18);
  border-radius: 1rem;
  background: rgba(15, 42, 64, .72);
  color: #f3f1ed;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.theme-list a:hover {
  border-color: rgba(241, 160, 151, .7);
  background: rgba(26, 59, 84, .9);
  transform: translateY(-2px);
}

.theme-list-number {
  color: #f1a097;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.theme-list-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
}

.theme-list-arrow {
  color: #9fb8cb;
  font-size: 1.25rem;
}

.index-footer {
  margin-top: 2rem;
  color: #7f98aa;
  font-size: .9rem;
  line-height: 1.55;
}

/* Shared letter experience */
body.theme-page {
  --accent: #f1a097;
  --accent-strong: #b85f61;
  --paper: #f7f1e8;
  --paper-deep: #ece2d6;
  --ink: #26334a;
  --muted: #697184;
  --night-top: #071b30;
  --night-bottom: #020b13;
  color: #f5f1eb;
  background:
    radial-gradient(circle at 11% 10%, rgba(189, 222, 243, .23) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 22%, rgba(255, 255, 255, .16) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 58%, rgba(255, 255, 255, .13) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 78%, rgba(255, 255, 255, .12) 0 1px, transparent 2px),
    linear-gradient(160deg, var(--night-top) 0%, var(--night-bottom) 100%);
}

body.theme-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .52;
  background-image:
    radial-gradient(circle at 55% 7%, rgba(219, 237, 249, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 48%, rgba(219, 237, 249, .5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 7% 74%, rgba(219, 237, 249, .5) 0 1px, transparent 1.5px);
  background-size: 13rem 11rem, 17rem 15rem, 19rem 18rem;
  z-index: 0;
}

body.theme-anxiety { --accent: #e8847d; --accent-strong: #a84f57; --night-top: #071b30; --night-bottom: #020b13; }
body.theme-courage { --accent: #e5aa70; --accent-strong: #a96d42; --night-top: #211b2d; --night-bottom: #0d1220; }
body.theme-hope { --accent: #d49b70; --accent-strong: #9c6246; --night-top: #241a2c; --night-bottom: #0d1724; }
body.theme-faith { --accent: #d5bf7d; --accent-strong: #97804b; --night-top: #182238; --night-bottom: #080f1c; }
body.theme-gratitude { --accent: #e8b95f; --accent-strong: #a37b2e; --night-top: #30202c; --night-bottom: #101823; }
body.theme-purpose { --accent: #d49d70; --accent-strong: #996347; --night-top: #281e31; --night-bottom: #0e1321; }
body.theme-family { --accent: #dfaa8a; --accent-strong: #a96759; --night-top: #31202b; --night-bottom: #101823; }
body.theme-love { --accent: #e4949f; --accent-strong: #a9566c; --night-top: #321a2a; --night-bottom: #110d1b; }
body.theme-forgive { --accent: #b9a5dc; --accent-strong: #78649d; --night-top: #211d39; --night-bottom: #0b1021; }
body.theme-rest { --accent: #93bfdc; --accent-strong: #5d8eaf; --night-top: #112a3c; --night-bottom: #06141e; }

.letter-page {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), 36rem);
  margin: 0 auto;
  padding: 1.15rem 0 2.8rem;
}

.letter-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.letter-brand {
  color: #f5f1eb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
  font-weight: 700;
  text-decoration: none;
}

.book-index {
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.letter {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 1.2rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 42%),
    linear-gradient(145deg, var(--paper) 0%, #f8f3ec 66%, var(--paper-deep) 100%);
  box-shadow:
    0 2rem 4rem rgba(0, 0, 0, .35),
    0 .35rem 1rem rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background:
    repeating-linear-gradient(0deg, rgba(68, 56, 43, .035) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 90% 8%, rgba(232, 132, 125, .12), transparent 22rem);
}

.letter-inner {
  position: relative;
  padding: clamp(1.25rem, 5vw, 2rem);
}

.cover-frame {
  position: relative;
  width: min(100%, 23rem);
  margin: 0 auto 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(38, 51, 74, .18);
  border-radius: 1.15rem;
  background: #071b30;
  box-shadow: 0 .8rem 1.8rem rgba(30, 41, 55, .18);
}

.cover-image {
  display: block;
  width: 100%;
  height: auto;
}

.cover-title-replacement {
  position: absolute;
  top: 30%;
  left: 4%;
  display: grid;
  place-items: center;
  width: 92%;
  height: 31%;
  text-align: center;
}

.cover-title-replacement::before {
  content: "";
  position: absolute;
  inset: -9% -5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(207, 231, 249, .98) 0 49%,
    rgba(184, 218, 244, .94) 64%,
    rgba(152, 199, 236, .42) 79%,
    transparent 100%);
}

.cover-title-replacement span {
  position: relative;
  z-index: 1;
  max-width: 95%;
  color: #071b30;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 5.2vw, 1.78rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .38);
}

.letter-heading {
  position: relative;
  padding: .25rem 3.2rem 1.35rem;
  text-align: center;
}

.letter-kicker {
  margin: 0 0 .7rem;
  color: var(--accent-strong);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.letter-title {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.04;
  text-wrap: balance;
}

.letter-subtitle {
  max-width: 24rem;
  margin: .9rem auto 0;
  color: #4f5a6d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.45;
}

.letter-seal {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(38, 51, 74, .2);
  border-radius: 50%;
  color: var(--accent-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .76rem;
  letter-spacing: .04em;
  transform: rotate(8deg);
}

.letter-rule {
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(38, 51, 74, .28), transparent);
}

.daily-letter {
  position: relative;
  margin-top: 1.35rem;
  padding: 1.15rem 1.05rem 1.25rem;
  border: 1px solid rgba(38, 51, 74, .18);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .4);
}

.daily-letter::before {
  content: "✦";
  position: absolute;
  top: .8rem;
  right: .9rem;
  color: var(--accent);
  font-size: .9rem;
}

.daily-letter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(38, 51, 74, .16);
}

.daily-label {
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.daily-letter .date {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
  text-align: right;
}

.theme-page .placeholder {
  margin: 1.8rem .2rem 1rem;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}

.daily-letter .message {
  margin: 1.5rem .2rem 1.1rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.24rem, 4.9vw, 1.56rem);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

.daily-letter .reference {
  margin: 0;
  color: var(--accent-strong);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.letter-signoff {
  margin: 1.45rem 0 .1rem;
  color: #566174;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

.letter-signature {
  display: block;
  margin-top: .25rem;
  color: var(--accent-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-style: italic;
}

.midnight-note {
  max-width: 31rem;
  margin: 1.35rem auto 0;
  color: #9eb5c7;
  font-size: .87rem;
  line-height: 1.55;
  text-align: center;
}

.midnight-note span {
  margin-right: .3rem;
  color: var(--accent);
}

.back-link {
  margin: 1.25rem 0 0;
  text-align: center;
}

.back-link a {
  color: #d9e5ed;
  font-size: .95rem;
}

.noscript-note {
  margin-top: 1rem;
  color: var(--accent);
  font-size: .9rem;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .index-page { padding-top: 1.6rem; }
  .index-kicker { margin-top: 2.8rem; }
  .letter-page { padding-top: .9rem; }
  .letter-heading { padding-right: 2.7rem; padding-left: 2.7rem; }
  .daily-letter-header { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .daily-letter .date { text-align: left; }
}