.storybody {
  font-family: "Nunito", sans-serif;
  background: #e7efe7;
  color: #253f44;
}
.theme-bella {
  --accent: #865b76;
  --accent-2: #a97590;
}
.theme-abby {
  --accent: #35675a;
  --accent-2: #5b8a71;
}
.start-gate {
  padding: 28px 20px 70px;
}
.start-card {
  max-width: 840px;
  width: 100%;
  padding: 25px;
  background: #fffdf3;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 8px 0 #c6d5c5;
  backdrop-filter: none;
}
.reader-home {
  display: block;
  text-align: left;
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 20px;
  color: #466356;
}
.story-cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 38%;
  border-radius: 18px;
}
.start-card h1 {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  color: #253f44;
  max-width: 630px;
  margin: 12px auto;
  font-size: 36px;
}
.start-eyebrow {
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-top: 22px;
}
.start-actions {
  max-width: 580px;
  margin: 24px auto 5px;
}
.choice-btn {
  min-height: 96px;
  box-shadow: 0 4px 0 #c5cbbc;
  border-radius: 18px;
}
.choice-icon {
  display: none;
}
.choice-btn--quiet {
  border: 1px solid #ccd5c5;
  background: #eaf0df;
}
.book {
  max-width: 1250px;
}
.book-header {
  background: #e7efe7;
  border: 0;
}
.story-title {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
}
.page-card {
  background: #fffdf3;
  border: 0;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 5px 0 #c6d5c5;
}
.page-text {
  font-family: "Andika", "Nunito", sans-serif;
}
.illustration-wrap {
  border: 0;
  border-radius: 15px;
}
.book-dock {
  background: #fffdf3f5;
  border: 1px solid #d3ddca;
  box-shadow: 0 -4px 25px #2241;
}
.narration-status {
  font:
    700 13px "Nunito",
    sans-serif;
  color: #6e4a38;
  text-align: center;
  margin: 0;
  padding: 0 15px;
  max-width: 580px;
}
.narration-status:not(:empty) {
  padding: 10px 15px;
}
.daily-story-clock {
  font-family: "Nunito", sans-serif !important;
}
.settings-panel small {
  display: block;
  font-size: 11px;
  margin-top: 16px;
  font-weight: 500;
}
.start-note {
  color: #536a5d;
}
.home-link,
.reader-settings > summary {
  box-shadow: none;
  background: #fffdf3;
}
.page-kicker {
  background: #e8ecdc;
}
@media (min-width: 900px) {
  .page-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 30px;
  }
  .illustration-wrap {
    grid-row: 1/4;
    aspect-ratio: 1.05;
  }
  .page-kicker {
    justify-self: start;
  }
  .page-text {
    font-size: clamp(19px, 1.85vw, 25px);
    line-height: 1.85;
  }
  .theme-bella .page-text {
    font-size: 29px;
  }
  .book-stage {
    padding-top: 25px;
  }
  .page-image {
    object-fit: cover;
  }
}
@media (max-width: 600px) {
  .story-cover {
    height: 230px;
  }
  .start-card h1 {
    font-size: 29px;
  }
  .start-card {
    padding: 18px;
  }
  .page-card {
    padding: 14px;
  }
  .start-actions {
    gap: 10px;
  }
  .choice-btn strong {
    font-size: 16px;
  }
}
body.theme-abby {
  --accent: #35675a;
  --accent-2: #5b8a71;
}
body.theme-bella {
  --accent: #865b76;
  --accent-2: #a97590;
}
.page-text {
  text-align: left;
}
.page-text .word {
  padding: 0;
}
.story-title {
  color: var(--accent);
}
.book-header {
  position: relative;
}
.daily-story-clock--reading {
  display: none !important;
}
@media (min-width: 900px) {
  .page-text {
    font-size: 22px;
    line-height: 1.75;
  }
  .page-card {
    gap: 22px;
  }
  .book-dock {
    padding: 8px 12px;
  }
  .dock-action--primary {
    min-height: 66px;
  }
  .dock-action {
    min-height: 58px;
  }
}

/* A book to settle into, with full illustrations and room for the words. */
.storybody {
  background: #f9f1e4;
  color: #493d52;
  font-family: "Nunito", sans-serif;
}
.storybody.theme-abby {
  background: #e7efec;
  --accent: #315e62;
  --accent-2: #547e79;
}
.storybody.theme-bella {
  background: #f8e9ed;
  --accent: #765377;
  --accent-2: #946688;
}
.daily-story-clock {
  display: none !important;
}
.start-gate {
  padding: 35px;
  min-height: 100svh;
  background: url("../assets/worlds-panorama.png") center/cover;
  position: relative;
  isolation: isolate;
}
.start-gate:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #292c455c;
  z-index: -1;
}
.start-card {
  max-width: 1120px;
  border-radius: 26px;
  padding: 28px;
  background: #fff9ed;
  box-shadow: 0 25px 80px #24253d55;
}
.reader-home {
  color: #685771;
  font-size: 13px;
  text-decoration: none;
  margin: 0 0 23px;
  text-align: left;
}
.cover-layout {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 36px;
  align-items: center;
}
.story-cover {
  height: auto;
  aspect-ratio: 1.2;
  object-fit: contain;
  background: #eee2ce;
  border-radius: 6px 22px 22px 6px;
  box-shadow:
    7px 6px 0 #e4d8c4,
    0 10px 25px #6f526922;
}
.cover-copy {
  text-align: left;
  padding: 10px 15px 15px 0;
}
.cover-copy h1 {
  font-size: clamp(32px, 3.3vw, 47px);
  line-height: 1.08;
  color: #493c54;
  margin: 15px 0;
}
.cover-copy .start-note {
  font-size: 16px;
  color: #766776;
  margin: 0;
  line-height: 1.55;
}
.cover-copy .start-eyebrow {
  font-size: 10px;
  letter-spacing: 0.13em;
  margin: 0;
  color: #8a6c65;
}
.resume-note {
  font-size: 13px;
  font-weight: 800;
  color: #846845;
  margin: 18px 0 0;
}
.start-actions {
  margin: 24px 0 0;
  gap: 10px;
}
.choice-btn {
  min-height: 86px;
  border-radius: 16px;
  text-decoration: none;
}
.choice-btn--quiet {
  background: #f1ebe1;
  color: #5d4963;
  border: 1px solid #dacecf;
  box-shadow: 0 4px 0 #e1d6cf;
}
.reader-text-button {
  font:
    800 13px "Nunito",
    sans-serif;
  color: #73596c;
  background: transparent;
  border: 0;
  text-decoration: underline;
  padding: 16px 0;
  min-height: 44px;
  cursor: pointer;
}
.book {
  max-width: 1280px;
  min-height: 100svh;
  padding: 0 24px;
}
.book-header {
  background: transparent;
  box-shadow: none;
  padding: 20px 5px 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 18px;
  z-index: 30;
}
.book-header .home-link {
  font-size: 32px;
}
.story-title {
  font-size: 22px;
  line-height: 1.2;
}
.reader-contents {
  position: relative;
  font-size: 13px;
  font-weight: 800;
}
.reader-contents summary {
  padding: 12px 15px;
  border-radius: 15px;
  cursor: pointer;
  background: #fff9ed;
  list-style: none;
}
.reader-contents[open] #page-jumps {
  position: absolute;
  right: 0;
  top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 8px;
  background: #fff9ed;
  box-shadow: 0 10px 25px #493d5233;
  padding: 15px;
  border-radius: 18px;
}
#page-jumps button {
  height: 44px;
  border-radius: 12px;
  background: #efe5e8;
  color: #654d69;
  font:
    800 16px "Nunito",
    sans-serif;
}
#page-jumps button[aria-current="page"] {
  background: var(--accent);
  color: #fff9ed;
}
.read-progress {
  height: 5px;
  margin-top: 4px;
}
.book-stage {
  padding: 15px 0 28px;
  align-items: center;
  flex: 1;
}
.page-card {
  border-radius: 10px 24px 24px 10px;
  padding: 24px;
  background: #fffaf0;
  box-shadow:
    0 5px 0 #e3d7c6,
    0 15px 30px #4a3a5115;
  align-items: center;
  gap: 28px;
}
.page-copy {
  width: 100%;
  padding: 15px 10px;
}
.page-copy .page-kicker {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 20px;
  background: #eee5d9;
  color: #8b7169;
  font-size: 11px;
  margin: 0 0 18px;
}
.page-text,
body.theme-bella .page-text {
  max-width: none;
  line-height: 1.8;
  text-align: left;
  font-family: "Andika", sans-serif;
  font-size: clamp(21px, 2vw, 27px);
}
.illustration-wrap {
  grid-row: auto !important;
  aspect-ratio: 1.6;
  border-radius: 14px;
  background: #f0e7d5;
}
.page-image {
  object-fit: contain !important;
}
.book-dock {
  position: relative;
  bottom: auto;
  max-width: 740px;
  margin: 0 auto 20px;
  border: 1px solid #e3d7cf;
  border-radius: 24px;
  padding: 10px 15px;
  background: #fff9ed;
  box-shadow: 0 6px 20px #493d5212;
  backdrop-filter: none;
}
.dock-main {
  gap: 20px;
}
.dock-action {
  box-shadow: none;
  background: #f0e9e1;
  min-height: 54px;
  min-width: 58px;
  border-radius: 16px;
}
.dock-action--primary {
  min-height: 62px;
  min-width: 95px;
  background: var(--accent);
}
.dock-action--stop {
  min-width: 48px;
}
.dock-sub {
  font-size: 12px;
}
.page-indicator {
  font-size: 12px;
  background: transparent;
  color: #7a667a;
}
.settings-panel {
  z-index: 40;
}
.narration-status {
  color: #785e48;
  font-size: 12px;
}
.story-ending {
  max-width: 860px;
  width: calc(100% - 40px);
  margin: 35px auto;
  padding: 28px;
  background: #fff9ed;
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 12px 35px #493d5220;
}
.story-ending[hidden] {
  display: none !important;
}
.story-ending img {
  width: 100%;
  max-height: 330px;
  object-fit: contain;
  border-radius: 16px;
}
.story-ending h1 {
  font:
    500 40px/1.12 "Fredoka",
    sans-serif;
  margin: 15px 0;
}
.story-ending p {
  margin: 12px 0;
  color: #786679;
}
.ending-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 25px;
}
@media (min-width: 900px) {
  .page-card {
    grid-template-columns: 1.12fr 1fr;
    min-height: 420px;
  }
  .page-copy .page-text {
    font-size: 23px;
  }
  body.theme-bella .page-copy .page-text {
    font-size: 27px;
  }
}
@media (max-width: 899px) {
  .cover-layout {
    grid-template-columns: 1fr;
  }
  .story-cover {
    aspect-ratio: 1.6;
  }
  .cover-copy {
    padding: 0 10px;
  }
  .cover-copy h1 {
    font-size: 34px;
  }
  .cover-copy .start-note {
    font-size: 15px;
  }
  .start-card {
    max-width: 650px;
  }
  .page-copy {
    padding: 0 4px;
  }
  .book-stage {
    align-items: flex-start;
  }
  .book {
    padding: 0 15px;
  }
  .book-header {
    gap: 10px;
  }
  .book-dock {
    width: 100%;
  }
}
@media (max-width: 550px) {
  .start-gate {
    padding: 20px 15px;
  }
  .start-card {
    padding: 20px;
    border-radius: 22px;
  }
  .cover-layout {
    gap: 24px;
  }
  .cover-copy {
    padding: 0;
  }
  .cover-copy h1 {
    font-size: 31px;
  }
  .start-actions {
    margin-top: 20px;
  }
  .choice-btn {
    min-height: 80px;
    padding: 12px 10px;
  }
  .choice-btn small {
    font-size: 11px;
  }
  .choice-btn strong {
    font-size: 15px;
  }
  .book-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px 52px;
    gap: 6px;
    padding-top: 12px;
  }
  .story-title {
    font-size: 17px;
  }
  .reader-contents summary {
    padding: 12px 8px;
  }
  .page-card {
    padding: 13px;
    gap: 12px;
  }
  .page-copy .page-kicker {
    margin-bottom: 12px;
  }
  .page-text,
  body.theme-bella .page-text {
    font-size: 23px;
    line-height: 1.75;
  }
  .dock-main {
    gap: 12px;
  }
  .dock-action {
    min-width: 52px;
  }
  .dock-action--primary {
    min-width: 80px;
  }
  .book-dock {
    padding: 9px 7px;
    border-radius: 20px;
    margin-bottom: 15px;
  }
  .story-ending h1 {
    font-size: 31px;
  }
  .ending-actions {
    grid-template-columns: 1fr;
  }
  .story-ending {
    padding: 20px;
  }
  .reader-settings > summary {
    width: 38px;
  }
}

.atlas-frame {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: var(--art-aspect, 1.5) !important;
}
img[data-atlas="true"] {
  position: absolute !important;
  width: 200% !important;
  height: var(--art-height, 300%) !important;
  max-width: none !important;
  max-height: none !important;
  left: calc(var(--art-column) * -100%) !important;
  top: var(--art-top, 0%) !important;
  object-fit: fill !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cover-art-frame {
  border-radius: 8px 20px 20px 8px;
  overflow: hidden;
  background: #eee2ce;
}
.cover-art-frame img {
  display: block;
}
.ending-art-frame {
  max-width: 660px;
  margin: auto;
  border-radius: 16px;
  overflow: hidden;
}
.hidden-story-star {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 1px solid #ffe8a180;
  border-radius: 50%;
  background: #faf1b530;
  color: #ffea9b;
  text-shadow: 0 1px 5px #554135;
  font-size: 27px;
  cursor: pointer;
}
.hidden-story-star:disabled {
  opacity: 0.6;
  color: #fff;
  background: #56977b;
}
.hidden-story-star:focus-visible {
  outline: 3px solid #65409a;
}
.reader-star-status {
  font-size: 11px;
  color: #8b7351;
  margin: 0;
}
.reader-play {
  width: 100%;
  border-top: 1px solid #e6dccc;
  padding-top: 10px;
  margin-top: 8px;
}
.reader-play summary {
  cursor: pointer;
  font:
    800 13px "Nunito",
    sans-serif;
  color: #735477;
  padding: 8px 0;
}
.reader-play p {
  font-size: 12px;
  line-height: 1.5;
  color: #8a7682;
  margin: 8px 0 15px;
}
.reader-play canvas {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #e1d6e7;
  border-radius: 16px;
  display: block;
}
.drawing-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.drawing-tools button {
  min-height: 38px;
  border: 1px solid #e2d8e5;
  border-radius: 10px;
  background: #f3edf3;
  font:
    700 11px "Nunito",
    sans-serif;
  color: #6c5873;
  padding: 7px 10px;
}
.drawing-tools .drawing-colour {
  width: 38px;
  border: 4px solid #fff;
  padding: 0;
  border-radius: 50%;
}
.drawing-colour[aria-pressed="true"] {
  outline: 2px solid #65477e;
}
.drawing-status {
  display: block;
  font-size: 11px;
  color: #8a7682;
  margin-top: 8px;
}
.art-dialog {
  border: 0;
  border-radius: 24px;
  background: #fff9ed;
  width: min(95vw, 1100px);
  max-height: 94svh;
  padding: 18px;
}
.art-dialog::backdrop {
  background: #182639c9;
}
.zoom-frame {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.zoom-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78svh;
  object-fit: contain;
}
.story-invitation { position: relative; margin: 22px 0; padding: 22px; background: #eee9f6; border: 1px solid #d4c7e5; border-radius: 20px; overflow: hidden; }
.invitation-label { display: block; font: 800 10px "Nunito", sans-serif; letter-spacing: .12em; color: #705285; padding-right: 30px; }
.story-invitation h3 { font: 700 21px/1.3 "Nunito", sans-serif; margin: 10px 0 16px; color: #40364e; }
.invitation-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.invitation-actions button { flex: 1 1 130px; min-height: 48px; padding: 12px 15px; border: 1px solid #bda9d0; border-radius: 13px; background: #fffdf9; color: #513762; font: 700 14px/1.4 "Nunito", sans-serif; cursor: pointer; }
.invitation-actions button[aria-pressed="true"] { background: #705285; color: white; border-color: #705285; }
.invitation-actions button:focus-visible { outline: 3px solid #c38625; outline-offset: 3px; }
.invitation-feedback { font: 600 14px/1.65 "Nunito", sans-serif; color: #53445e; margin: 15px 0 0; }
.invitation-feedback:empty { display: none; }
.invitation-token { position: absolute; right: 19px; top: 10px; font-size: 34px; color: #997baf; transition: transform .5s, color .5s; }
.story-invitation[data-solved="true"] { background: #e9f3e8; border-color: #bcd4bc; }
.story-invitation[data-solved="true"] .invitation-token { transform: rotate(180deg) scale(1.25); color: #4d8562; }
@media (prefers-reduced-motion: reduce) { .invitation-token { transition: none; } }