/* ── Zandria — shared design tokens & base styles ────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #060a10;
  --bg-alt:    #0d1520;
  --cyan:      #0891b2;
  --cyan-light:#67e8f9;
  --text:      #cffafe;
  --fog:       #4fa0c3;
  --border:    #164e63;
  --dim:       #0e3040;
  --prose:     #b8dce6;
}

html { scroll-behavior: smooth; font-size: 120%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Star-field background ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1px 1px at  7% 14%, #cffafe22, transparent),
    radial-gradient(1px 1px at 23% 67%, #22d3ee18, transparent),
    radial-gradient(1px 1px at 41%  9%, #cffafe1a, transparent),
    radial-gradient(1px 1px at 55% 44%, #67e8f914, transparent),
    radial-gradient(1px 1px at 71% 81%, #cffafe12, transparent),
    radial-gradient(1px 1px at 83% 29%, #22d3ee16, transparent),
    radial-gradient(1px 1px at 92% 58%, #cffafe10, transparent),
    radial-gradient(1px 1px at 14% 91%, #0891b220, transparent),
    radial-gradient(1px 1px at 33% 35%, #67e8f910, transparent),
    radial-gradient(1px 1px at 63% 72%, #22d3ee12, transparent),
    radial-gradient(1.5px 1.5px at 47% 22%, #cffafe18, transparent),
    radial-gradient(1.5px 1.5px at 78% 55%, #67e8f914, transparent);
  pointer-events: none; z-index: 0;
}

/* ── Container base ── */
.container {
  position: relative; z-index: 1;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}

/* ── Chapter end marker ── */
.chapter-end {
  text-align: center;
  margin-top: 2.5rem;
}
.chapter-end-label {
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--border);
}

.vol-slider, .s-vol-slider {
  -webkit-appearance: none; appearance: none;
  height: 2px;
  background: var(--border); outline: none; border-radius: 2px; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb,
.s-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); cursor: pointer; transition: background 0.2s;
}
.vol-slider::-webkit-slider-thumb:hover,
.s-vol-slider::-webkit-slider-thumb:hover { background: var(--cyan-light); }
.vol-slider::-moz-range-thumb,
.s-vol-slider::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan); cursor: pointer; border: none;
}