.reading-reveal { --reveal-progress: 0; position: relative; height: 100svh; min-height: 480px; max-width: 800px; margin: 24px auto 0; }
.reading-pull { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 12px; border: 0; background: none; color: #89948f; font: inherit; font-size: 11px; cursor: pointer; }
.reading-pull svg { width: min(380px, 80%); height: 48px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.reading-pull:disabled { cursor: default; }
.reading-pull:focus-visible, .reading-panel button:focus-visible { outline: 2px solid #b6cbc0; outline-offset: 3px; }
.reading-panel { position: sticky; top: 15svh; min-height: 55svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 20px; border-top: 1px solid #35423b; background: radial-gradient(ellipse at 50% 65%, color-mix(in srgb, var(--babel-color) 13%, transparent), transparent 70%); opacity: var(--reveal-progress); transform: translateY(calc((1 - var(--reveal-progress)) * 70px)); }
.reading-panel h2 { font-size: clamp(27px, 4vw, 44px); line-height: 1.3; letter-spacing: -1px; max-width: 650px; }
.reading-panel .eyebrow { color: #8c9e94; font-size: 10px; }
.reading-status { color: #c6d5cc; font-size: clamp(17px, 2.5vw, 24px); line-height: 1.7; max-width: 620px; }
.reading-calendar { display: inline-block; margin-top: 20px; font-size: 12px; color: #a3b6aa; text-decoration: underline; text-underline-offset: 5px; }
.reading-panel button { border: 1px solid #748c7e; border-radius: 6px; padding: 10px 16px; color: #eee; background: #1b231e; font: inherit; cursor: pointer; }
.reading-reveal.is-complete .reading-status { animation: reading-glow 1.4s ease-out both; }
.reading-reveal.is-complete .reading-pull { visibility: hidden; }
.reading-reveal.has-error .reading-panel { opacity: 1; transform: none; }
.reading-reveal [hidden] { display: none !important; }
@keyframes reading-glow {
  0% { color: #c6d5cc; text-shadow: none; }
  45% { color: color-mix(in srgb, var(--babel-color) 50%, white); text-shadow: 0 0 12px var(--babel-color), 0 0 36px var(--babel-color); }
  100% { color: color-mix(in srgb, var(--babel-color) 25%, white); text-shadow: 0 0 18px color-mix(in srgb, var(--babel-color) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .reading-panel { transform: none; }
  .reading-reveal.is-complete .reading-status { animation: none; color: color-mix(in srgb, var(--babel-color) 25%, white); }
}