/* Bedtime stories: a quiet, self-contained visual world for the /fun pages. */
.bedtime-page {
  --bedtime-night: #111522;
  --bedtime-night-soft: #191e31;
  --bedtime-panel: rgb(29 34 53 / 88%);
  --bedtime-panel-edge: rgb(220 211 255 / 12%);
  --bedtime-ink: #f5f0e7;
  --bedtime-muted: #c1bfd0;
  --bedtime-lilac: #c6b6ee;
  --bedtime-gold: #f1d9a2;
  min-block-size: 70vh;
  padding-block-end: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0, rgb(104 96 146 / 16%), transparent 40rem),
    linear-gradient(180deg, #111522 0%, #15192a 38rem, #111522 100%);
  color: var(--bedtime-ink);
}

.bedtime-page [hidden] { display: none !important; }
.bedtime-shell { inline-size: min(calc(100% - var(--shell-pad) - var(--shell-pad)), 72rem); margin-inline: auto; }
.bedtime-page :focus-visible { outline: 2px solid var(--bedtime-gold); outline-offset: 3px; }
.bedtime-hero {
  position: relative;
  min-block-size: 34rem;
  overflow: hidden;
  border-block-end: 1px solid rgb(220 211 255 / 9%);
  background:
    radial-gradient(ellipse at 79% 22%, rgb(186 166 224 / 13%), transparent 28rem),
    linear-gradient(122deg, #171a2b 0%, #22243d 52%, #30304a 100%);
  isolation: isolate;
}
.bedtime-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto -10% -11rem;
  block-size: 19rem;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgb(23 27 43 / 5%), #111522 78%);
  content: '';
}
.bedtime-hero__stars {
  position: absolute;
  inset-block-start: 4rem;
  inset-inline-end: max(8%, calc((100% - 72rem) / 2));
  color: rgb(248 228 184 / 48%);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  letter-spacing: .75rem;
  pointer-events: none;
}
.bedtime-hero__content { position: relative; z-index: 1; padding-block: 2rem 8rem; }
.bedtime-backlink {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 2.75rem;
  color: #d6d0e1;
  font-size: var(--text-sm);
  transition: color var(--dur-base) var(--ease-out);
}
.bedtime-backlink:hover { color: var(--bedtime-gold); }
.bedtime-eyebrow, .bedtime-overline {
  color: var(--bedtime-gold);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .13em;
}
.bedtime-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-block-start: clamp(3rem, 8vw, 6.25rem);
  text-transform: uppercase;
}
.bedtime-eyebrow span { color: #f0dbad; font-size: 1.2rem; }
.bedtime-hero h1 {
  max-inline-size: 11ch;
  margin-block-start: 1.1rem;
  color: #fff8ed;
  font-size: clamp(2.7rem, 6.5vw, 5.8rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-wrap: balance;
}
.bedtime-hero__lede {
  max-inline-size: 34rem;
  margin-block-start: 1.3rem;
  color: #d3cddd;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
  text-wrap: pretty;
}
.bedtime-hero__art { position: absolute; inset-block: 5rem 0; inset-inline-end: 2%; inline-size: min(43%, 28rem); pointer-events: none; }
.bedtime-moon {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 17%;
  inline-size: clamp(6.5rem, 13vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff3d3, #f1d9a2 72%);
  box-shadow: 0 0 4rem rgb(241 217 162 / 23%), 0 0 9rem rgb(192 179 225 / 12%);
  animation: bedtime-moon-drift 12s ease-in-out infinite alternate;
}
.bedtime-moon::after {
  position: absolute;
  inset-block-start: 21%;
  inset-inline-start: 23%;
  inline-size: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(181 155 113 / 12%);
  box-shadow: 1.1rem 1.2rem 0 -.22rem rgb(181 155 113 / 10%), 2.9rem -.4rem 0 -.5rem rgb(181 155 113 / 9%);
  content: '';
}
.bedtime-cloud {
  position: absolute;
  inset-block-end: 18%;
  inline-size: 10rem;
  block-size: 2.2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(213 209 224 / 87%), rgb(171 170 199 / 80%));
  box-shadow: 0 1rem 2rem rgb(7 10 21 / 16%);
}
.bedtime-cloud::before, .bedtime-cloud::after {
  position: absolute;
  inset-block-end: .45rem;
  border-radius: 50%;
  background: inherit;
  content: '';
}
.bedtime-cloud::before { inset-inline-start: 1.5rem; inline-size: 3.4rem; block-size: 3.4rem; }
.bedtime-cloud::after { inset-inline-start: 4.1rem; inline-size: 4.2rem; block-size: 4.2rem; }
.bedtime-cloud--one { inset-inline-end: 0; transform: scale(.92); }
.bedtime-cloud--two { inset-block-end: 5%; inset-inline-start: 0; transform: scale(.68); opacity: .58; }
.bedtime-hero__spark { position: absolute; color: #f4dfab; font-size: 1.5rem; }
.bedtime-hero__spark--one { inset-block-start: 5%; inset-inline-start: 18%; }
.bedtime-hero__spark--two { inset-block-start: 36%; inset-inline-end: 6%; color: #e4d8ff; font-size: 1.2rem; }

.bedtime-workspace { position: relative; z-index: 2; margin-block-start: -2.15rem; }
.bedtime-setup, .bedtime-library, .bedtime-reader {
  padding: clamp(1.35rem, 3vw, 2.5rem);
  border: 1px solid var(--bedtime-panel-edge);
  border-radius: 1.6rem;
  background: linear-gradient(145deg, rgb(30 35 54 / 96%), rgb(23 28 45 / 96%));
  box-shadow: 0 1.5rem 4rem rgb(5 7 16 / 24%);
}
.bedtime-setup { margin-block-end: 1.35rem; }
.bedtime-library { padding-block-end: clamp(1.5rem, 3vw, 2.75rem); }
.bedtime-section-heading { display: flex; align-items: center; gap: 1rem; margin-block-end: 1.65rem; }
.bedtime-step {
  display: grid;
  flex: none;
  inline-size: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(198 182 238 / 35%);
  border-radius: 50%;
  background: rgb(198 182 238 / 9%);
  color: #e0d5f8;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.bedtime-overline { margin-block-end: .25rem; letter-spacing: .1em; }
.bedtime-section-heading h2 { color: #fff9ef; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.35; }
.bedtime-setup__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr); align-items: start; gap: 1.8rem; }
.bedtime-fieldset { min-inline-size: 0; padding: 0; border: 0; }
.bedtime-fieldset legend, .bedtime-name-field {
  display: block;
  margin-block-end: .7rem;
  color: #eee8f5;
  font-size: var(--text-sm);
  font-weight: 650;
}
.bedtime-gender-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.bedtime-choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  min-block-size: 3.65rem;
  padding: .65rem .85rem;
  border: 1px solid rgb(229 222 245 / 14%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  color: #e5e0ed;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bedtime-choice:hover { border-color: rgb(198 182 238 / 55%); transform: translateY(-2px); }
.bedtime-choice[aria-pressed='true'] { border-color: #c6b6ee; background: rgb(198 182 238 / 15%); color: #fff8ed; box-shadow: inset 0 0 0 1px rgb(198 182 238 / 12%); }
.bedtime-choice__icon { display: grid; flex: none; inline-size: 1.8rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: rgb(246 222 177 / 10%); color: #f1d9a2; font-size: 1.05rem; }
.bedtime-name-field input {
  inline-size: 100%;
  min-block-size: 3.15rem;
  padding: .75rem .95rem;
  border: 1px solid rgb(229 222 245 / 19%);
  border-radius: .85rem;
  background: rgb(8 11 21 / 38%);
  color: #fff8ed;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bedtime-name-field input::placeholder { color: #aaa8b9; opacity: 1; }
.bedtime-name-field input:focus { border-color: #d0c1f0; box-shadow: 0 0 0 3px rgb(198 182 238 / 17%); outline: 0; }
.bedtime-hint { margin-block-start: .55rem; color: var(--bedtime-muted); font-size: var(--text-xs); line-height: 1.65; }
.bedtime-personalize { margin-block-start: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid rgb(241 217 162 / 23%); border-radius: 1rem; background: rgb(255 255 255 / 3%); }
.bedtime-personalize h3 { margin-block-end: 1rem; color: #fff8ed; font-size: var(--text-lg); }
.bedtime-personalize__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-block-end: 1rem; }
.bedtime-name-field { display: grid; gap: .5rem; margin: 0; color: #eee8f5; font-size: var(--text-sm); font-weight: 650; }
.bedtime-source-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.bedtime-source-button {
  display: flex;
  align-items: center;
  gap: .95rem;
  min-block-size: 5.15rem;
  padding: .9rem 1rem;
  border: 1px solid rgb(229 222 245 / 14%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  color: #e7e2ed;
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bedtime-source-button:hover { border-color: rgb(198 182 238 / 45%); transform: translateY(-2px); }
.bedtime-source-button[aria-pressed='true'] { border-color: rgb(241 217 162 / 64%); background: linear-gradient(115deg, rgb(241 217 162 / 10%), rgb(198 182 238 / 8%)); box-shadow: inset 0 0 0 1px rgb(241 217 162 / 8%); }
.bedtime-source-button > span:first-child { display: grid; flex: none; inline-size: 2.2rem; aspect-ratio: 1; place-items: center; border-radius: .8rem; background: rgb(241 217 162 / 11%); color: var(--bedtime-gold); font-size: 1.1rem; }
.bedtime-source-button strong, .bedtime-source-button small { display: block; }
.bedtime-source-button strong { color: #fff8ed; font-size: var(--text-sm); font-weight: 650; }
.bedtime-source-button small { margin-block-start: .15rem; color: var(--bedtime-muted); font-size: var(--text-xs); line-height: 1.5; }
.bedtime-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
.bedtime-story-card {
  display: grid;
  grid-template-columns: minmax(7rem, .78fr) minmax(0, 1.22fr);
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid rgb(229 222 245 / 13%);
  border-radius: 1.15rem;
  background: linear-gradient(130deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
  color: inherit;
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bedtime-story-card:hover { border-color: rgb(241 217 162 / 46%); box-shadow: 0 .75rem 2rem rgb(7 9 17 / 24%); transform: translateY(-3px); }
.bedtime-story-card__image { inline-size: 100%; block-size: 100%; min-block-size: 10rem; object-fit: cover; background: #30334a; }
/* personalization: placeholder for story-specific input panel styles (to be added near the story card image) */
.bedtime-story-card__detail { display: flex; min-inline-size: 0; flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem; }
.bedtime-story-card__tag { color: #decfa9; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bedtime-story-card__title { margin-block-start: .4rem; color: #fff8ed; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 650; line-height: 1.35; text-wrap: balance; }
.bedtime-story-card__description { margin-block-start: .45rem; color: #c5c0d0; font-size: var(--text-xs); line-height: 1.65; }
.bedtime-story-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; inline-size: 100%; margin-block-start: auto; padding-block-start: .85rem; color: #d1c9de; font-size: .68rem; }
.bedtime-story-card__action { color: #f1d9a2; font-weight: 700; }
.bedtime-length-picker { margin-block-start: 1.2rem; padding: clamp(1.1rem, 2.5vw, 1.7rem); border: 1px solid rgb(241 217 162 / 23%); border-radius: 1.1rem; background: linear-gradient(135deg, rgb(241 217 162 / 6%), rgb(198 182 238 / 7%)); }
.bedtime-length-picker__heading { margin-block-end: 1rem; }
.bedtime-length-picker__heading h3 { color: #fff8ed; font-size: var(--text-xl); font-weight: 650; line-height: 1.4; }
.bedtime-length-picker__heading .bedtime-hint { max-inline-size: 40rem; }
.bedtime-length-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.bedtime-length-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: .25rem .5rem;
  min-inline-size: 0;
  min-block-size: 5.2rem;
  padding: .85rem 1rem;
  border: 1px solid rgb(229 222 245 / 17%);
  border-radius: .95rem;
  background: rgb(13 16 29 / 52%);
  color: #f5f0e7;
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bedtime-length-option:hover { border-color: rgb(241 217 162 / 63%); background: rgb(241 217 162 / 9%); transform: translateY(-2px); }
.bedtime-length-option__label { color: #fff8ed; font-size: var(--text-sm); font-weight: 700; }
.bedtime-length-option__estimate { color: #c7c1d2; font-size: var(--text-xs); line-height: 1.5; }
.bedtime-length-option__arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--bedtime-gold); font-size: 1.1rem; }
.bedtime-length-picker__back { margin-block-start: .75rem; }
.bedtime-empty-state, .bedtime-loading, .bedtime-error { color: #d0c9db; font-size: var(--text-sm); line-height: 1.75; }
.bedtime-empty-state { grid-column: 1 / -1; padding: 1.4rem 1.5rem; border: 1px dashed rgb(229 222 245 / 22%); border-radius: 1rem; text-align: center; }
.bedtime-loading { text-align: center; }
.bedtime-error { padding: 1rem; border: 1px solid rgb(240 153 151 / 38%); border-radius: .9rem; background: rgb(240 153 151 / 8%); color: #ffe0de; }
.bedtime-reader { padding: clamp(1rem, 3vw, 2rem); }
.bedtime-reader__topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: 1.2rem; }
.bedtime-text-button, .bedtime-mode-button { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; padding: .55rem .75rem; border: 1px solid transparent; border-radius: .8rem; color: #eee8f4; font-size: var(--text-xs); font-weight: 600; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.bedtime-text-button:hover, .bedtime-mode-button:hover, .bedtime-mode-button[aria-pressed='true'] { border-color: rgb(229 222 245 / 18%); background: rgb(255 255 255 / 6%); }
.bedtime-mode-button span { color: var(--bedtime-gold); font-size: 1rem; }
.bedtime-reading-card {
  max-inline-size: 54rem;
  margin-inline: auto;
  padding: clamp(1.2rem, 4vw, 3.4rem);
  border: 1px solid #eadfcd;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #fffaf0, #f4eadb);
  color: #393446;
  box-shadow: 0 1.5rem 4rem rgb(5 7 16 / 22%);
  transition: background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.bedtime-reading-card__header { max-inline-size: 39rem; margin: 0 auto 1.6rem; text-align: center; }
.bedtime-reading-card__header .bedtime-overline { color: #76678e; }
.bedtime-reading-card__header h2 { color: #302a3b; font-size: clamp(1.75rem, 4vw, 2.8rem); font-weight: 650; line-height: 1.25; text-wrap: balance; }
.bedtime-reading-card__note { margin-block-start: .6rem; color: #726b7a; font-size: var(--text-sm); }
.bedtime-story-text { max-inline-size: 42rem; margin-inline: auto; color: #484250; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 2.05; }
.bedtime-story-text > p { margin-block: 1.25rem; }
.bedtime-story-text > p:first-child { margin-block-start: 0; }
.bedtime-story-text__heading { margin-block: 1.6rem .75rem; color: #5c4c72; font-size: 1.35rem; font-weight: 650; line-height: 1.45; }
.bedtime-story-illustration { overflow: hidden; margin-block: 1.65rem; border: 1px solid rgb(82 67 102 / 12%); border-radius: 1.1rem; background: #d9d2d8; box-shadow: 0 .7rem 2rem rgb(67 54 79 / 12%); }
.bedtime-story-illustration img { inline-size: 100%; max-block-size: 25rem; object-fit: cover; }
.bedtime-story-text em { color: #76648c; }
.bedtime-reading-card__footer { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-block-start: 2rem; padding-block-start: 1.2rem; border-block-start: 1px solid rgb(83 70 99 / 13%); color: #716681; font-size: var(--text-xs); text-align: center; }
.bedtime-reading-card__footer span:first-child, .bedtime-reading-card__footer span:last-child { color: #aa8d59; font-size: 1rem; }
.bedtime-page.is-dimmed .bedtime-reading-card { border-color: #40394d; background: linear-gradient(145deg, #222332, #1b1d2a); color: #e4dfee; }
.bedtime-page.is-dimmed .bedtime-reading-card__header h2 { color: #f6efff; }
.bedtime-page.is-dimmed .bedtime-reading-card__header .bedtime-overline,
.bedtime-page.is-dimmed .bedtime-story-text em { color: #c6b6ee; }
.bedtime-page.is-dimmed .bedtime-reading-card__note,
.bedtime-page.is-dimmed .bedtime-story-text { color: #d9d4e1; }
.bedtime-page.is-dimmed .bedtime-story-illustration { border-color: rgb(229 222 245 / 18%); background: #333247; }
.bedtime-page.is-dimmed .bedtime-reading-card__footer { border-color: rgb(229 222 245 / 15%); color: #c9c1d5; }
.bedtime-saved-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-block-start: 1.4rem; color: #bbb6c8; font-size: var(--text-xs); text-align: center; }
.bedtime-saved-note span { color: #e4c9a1; font-size: 1rem; }
.bedtime-page.is-reading .bedtime-saved-note { display: none; }

html[dir='rtl'] .bedtime-page { font-feature-settings: 'kern'; }
html[dir='rtl'] .bedtime-page .bedtime-eyebrow, html[dir='rtl'] .bedtime-page .bedtime-overline { letter-spacing: 0; }
html[dir='rtl'] .bedtime-page .bedtime-hero h1 { letter-spacing: 0; line-height: 1.4; }
html[dir='rtl'] .bedtime-page .bedtime-choice, html[dir='rtl'] .bedtime-page .bedtime-source-button { text-align: right; }
html[dir='rtl'] .bedtime-page .bedtime-story-card__tag { letter-spacing: 0; }
html[dir='rtl'] .bedtime-page .bedtime-hero__stars { letter-spacing: .25rem; }

@keyframes bedtime-moon-drift { from { transform: translateY(0); } to { transform: translateY(.8rem); } }

@media (max-width: 58rem) {
  .bedtime-hero { min-block-size: 31rem; }
  .bedtime-hero__art { inset-inline-end: 0; inline-size: 40%; opacity: .82; }
  .bedtime-setup__grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .bedtime-name-field { max-inline-size: 38rem; }
}

@media (max-width: 42rem) {
  .bedtime-hero { min-block-size: 35rem; }
  .bedtime-hero__content { padding-block-start: 1.15rem; }
  .bedtime-hero__art { inset-block-start: auto; inset-block-end: 0; inline-size: 66%; block-size: 15rem; opacity: .66; }
  .bedtime-hero__stars { inset-block-start: 5rem; inset-inline-end: 5%; font-size: 1rem; }
  .bedtime-eyebrow { margin-block-start: 3.8rem; font-size: .65rem; }
  .bedtime-hero h1 { max-inline-size: 10ch; font-size: clamp(2.8rem, 13vw, 4rem); }
  .bedtime-hero__lede { max-inline-size: 28rem; font-size: .95rem; }
  .bedtime-workspace { margin-block-start: -1.6rem; }
  .bedtime-setup, .bedtime-library { border-radius: 1.25rem; }
  .bedtime-gender-options { grid-template-columns: 1fr; }
  .bedtime-choice { min-block-size: 3.2rem; }
  .bedtime-choice__icon { inline-size: 1.55rem; }
  .bedtime-source-switch, .bedtime-story-grid { grid-template-columns: 1fr; }
  .bedtime-length-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bedtime-length-option { min-block-size: 4.4rem; padding: .75rem; }
  .bedtime-source-button { min-block-size: 4.7rem; }
  .bedtime-story-card { grid-template-columns: minmax(6.5rem, .72fr) minmax(0, 1.28fr); }
  .bedtime-story-card__image { min-block-size: 9.5rem; }
  .bedtime-story-card__detail { padding: .8rem .85rem; }
  .bedtime-story-card__footer { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .bedtime-reader { padding: .75rem; }
  .bedtime-reader__topline { align-items: flex-start; }
  .bedtime-text-button, .bedtime-mode-button { padding-inline: .45rem; font-size: .7rem; }
  .bedtime-reading-card { border-radius: 1rem; }
  .bedtime-story-illustration { margin-block: 1.1rem; }
  .bedtime-story-text { font-size: 1rem; line-height: 2; }
}

@media (max-width: 22rem) {
  .bedtime-length-options { grid-template-columns: 1fr; }
  .bedtime-story-card { grid-template-columns: 1fr; }
  .bedtime-story-card__image { block-size: 10rem; min-block-size: 0; }
  .bedtime-story-card__footer { flex-direction: row; }
  .bedtime-reader__topline { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .bedtime-moon { animation: none; }
  .bedtime-page *, .bedtime-page *::before, .bedtime-page *::after { scroll-behavior: auto; }
}