:root {
  color-scheme: light;
  --paper: #fff9ef;
  --paper-strong: #fffdf8;
  --paper-soft: #f5eadb;
  --ink: #2e251e;
  --muted: #7a6a5d;
  --line: #e3d3bf;
  --clay: #9b5f49;
  --rose: #b86a7b;
  --sage: #6f876c;
  --indigo: #4f5f8f;
  --gold: #c58a34;
  --shadow: 0 22px 70px rgb(57 37 22 / 18%);
  --soft-shadow: 0 12px 35px rgb(72 51 33 / 12%);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: ui-serif, Georgia, "Apple SD Gothic Neo", "Malgun Gothic", serif;
  line-height: 1.65;
  background:
    linear-gradient(180deg, rgb(255 250 242 / 84%), rgb(245 234 219 / 82%)),
    url("assets/images/ui/fairytale-world-hero.png") center top / cover fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 12% 14%, rgb(255 232 185 / 58%), transparent 26rem),
    radial-gradient(circle at 86% 8%, rgb(177 188 222 / 42%), transparent 24rem),
    linear-gradient(180deg, rgb(255 251 244 / 72%), rgb(246 238 226 / 92%) 48%, #efe6dc);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.secondary-button {
  min-height: 44px;
  border: 1px solid rgb(91 62 43 / 22%);
  border-radius: 999px;
  padding: 10px 18px;
  background: #2f271f;
  color: #fffaf2;
  cursor: pointer;
  font-weight: 750;
  box-shadow: 0 8px 18px rgb(47 39 31 / 16%);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

button:hover {
  transform: translateY(-1px);
  background: #4c3328;
  box-shadow: 0 12px 24px rgb(47 39 31 / 18%);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgb(79 95 143 / 42%);
  outline-offset: 3px;
}

.secondary-button {
  background: rgb(255 253 248 / 82%);
  color: #3b2d23;
}

.secondary-button:hover {
  background: #fff7ea;
}

.world-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.world-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(197 138 52 / 42%) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgb(184 106 123 / 22%) 0 1px, transparent 1.5px);
  background-position: 0 0, 26px 18px;
  background-size: 72px 72px, 86px 86px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
  opacity: 0.45;
}

.world-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
}

.world-glow-one {
  width: 28vw;
  height: 28vw;
  left: -8vw;
  top: 14vh;
  background: rgb(255 206 132 / 38%);
}

.world-glow-two {
  width: 24vw;
  height: 24vw;
  right: -7vw;
  top: 36vh;
  background: rgb(125 145 193 / 24%);
}

.floating-page {
  position: absolute;
  width: 84px;
  height: 112px;
  border: 1px solid rgb(126 91 56 / 18%);
  border-radius: 8px 18px 10px 16px;
  background:
    linear-gradient(135deg, rgb(255 253 247 / 86%), rgb(239 221 196 / 72%)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgb(119 84 58 / 9%) 12px 13px);
  box-shadow: 0 14px 35px rgb(78 48 25 / 12%);
  opacity: 0.72;
}

.page-one {
  left: 6%;
  top: 26%;
  rotate: -13deg;
}

.page-two {
  right: 8%;
  top: 18%;
  rotate: 12deg;
}

.page-three {
  right: 17%;
  bottom: 18%;
  rotate: -8deg;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(1160px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 26px 0 18px;
}

.site-header > div {
  max-width: 720px;
}

/* While the book is open the page belongs to the story, not to the masthead. The full-size
   title block eats a third of a 720px-tall screen before the first sentence. */
body.reading .site-header {
  padding: 14px 0 10px;
}

body.reading .site-header .eyebrow {
  display: none;
}

body.reading .site-header h1 {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--clay);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

main {
  width: min(1160px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 0 0 56px;
}

.header-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.header-io-status:not(:empty) {
  flex-basis: 100%;
  font-size: 0.86rem;
  text-align: right;
}

.header-io-status.reading-save-error {
  color: #9b3f37;
  font-weight: 760;
}

.ai-connection-dialog {
  width: min(calc(100vw - 32px), 560px);
  max-width: 560px;
  max-height: min(86vh, 760px);
  margin: auto;
  border: 1px solid rgb(86 59 39 / 22%);
  border-radius: 22px;
  padding: 0;
  background: var(--paper-strong);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: auto;
}

.ai-connection-dialog::backdrop {
  background: rgb(35 27 21 / 56%);
  backdrop-filter: blur(4px);
}

.ai-connection-surface {
  display: grid;
  gap: 20px;
  padding: clamp(20px, 4vw, 30px);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.ai-connection-dialog,
.ai-connection-surface,
.secret-field,
.teacher-branch-composer,
.branch-review {
  min-width: 0;
  max-width: 100%;
}

.ai-connection-dialog button,
.ai-connection-dialog input,
.teacher-branch-composer button,
.teacher-branch-composer input {
  min-height: 44px;
}

.ai-connection-header,
.dialog-actions,
.secret-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-connection-header {
  align-items: flex-start;
  justify-content: space-between;
}

.dialog-close {
  flex-shrink: 0;
  white-space: nowrap;
}

#ai-connection-form,
.connected-api-key,
.teacher-advanced-settings {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.class-cloud-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.class-cloud-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.class-cloud-tabs [aria-selected="true"] {
  border-color: #5d412a;
  background: #5d412a;
  color: #fffaf2;
}

#ai-connection-form[hidden],
.connected-api-key[hidden] {
  display: none;
}

.ai-connection-dialog label,
.ai-connection-dialog legend {
  color: #5d412a;
  font-weight: 780;
}

.ai-connection-dialog input,
.ai-connection-dialog select,
.ai-connection-dialog textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fffaf2;
  color: var(--ink);
}

.secret-field input {
  min-width: 0;
  flex: 1;
  min-height: 44px;
}

.ai-connection-dialog fieldset {
  margin: 4px 0;
  border: 1px solid rgb(148 107 72 / 18%);
  border-radius: 16px;
  padding: 16px;
  background: rgb(246 234 219 / 42%);
}

.ai-connection-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ai-connection-error,
#ai-connection-status[aria-live="polite"] {
  min-height: 1.5em;
  margin: 0;
  color: #9b3f37;
}

.danger-button {
  border-color: rgb(155 63 55 / 35%);
  color: #8a342d;
}

.story-selection,
.storybook {
  width: min(1160px, calc(100vw - 32px));
  margin-inline: auto;
}

.teacher-helper-fieldset {
  background: rgb(255 253 248 / 74%);
}

.teacher-helper-copy,
.teacher-prompt-status {
  margin-bottom: 12px;
  color: var(--muted);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.94rem;
}

.quick-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-preset-row .secondary-button {
  min-height: 38px;
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: none;
}

.quick-preset-row .secondary-button.is-selected {
  border-color: rgb(197 138 52 / 54%);
  background: #2f271f;
  color: #fffaf2;
}

.teacher-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.teacher-field-grid label {
  min-width: 0;
}

.teacher-prompt-status {
  margin-top: -8px;
}

.teacher-advanced-settings {
  margin-top: 18px;
  border: 1px solid rgb(148 107 72 / 18%);
  border-radius: 16px;
  padding: 0 16px 16px;
  background: rgb(255 253 248 / 62%);
}

.teacher-advanced-settings summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  color: #4f3828;
  cursor: pointer;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-weight: 820;
}

.teacher-advanced-settings[open] summary {
  margin-bottom: 8px;
}

.lesson-preparation {
  margin: 18px 0;
  border-top: 1px solid rgb(148 107 72 / 22%);
}

.lesson-preparation summary {
  display: flex;
  align-items: center;
  min-height: 46px;
  color: #4f3828;
  cursor: pointer;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-weight: 820;
}

.lesson-preparation-body {
  padding-bottom: 2px;
}

.lesson-preparation-body > :first-child {
  margin-top: 0;
}

.lesson-preparation-body > :last-child {
  margin-bottom: 0;
}

.generation-teaching-note {
  margin: 14px 0 16px;
  border-left: 4px solid var(--sage);
  padding: 10px 12px;
  background: rgb(236 243 232 / 70%);
  color: #42583e;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.95rem;
}

.discussion-question-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
  border: 1px solid rgb(79 95 143 / 16%);
  border-radius: 14px;
  padding: 12px 14px 12px 32px;
  background: rgb(241 243 250 / 68%);
  color: #37405f;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.auth-row,
.api-key-row,
.teacher-actions,
.template-actions,
.io-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.api-key-row .api-key-input {
  flex: 1 1 260px;
  margin: 0;
}

.byok-storage-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 10px 0 12px;
  color: #4d4a5e;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.92rem;
}

.byok-storage-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}

.generation-preview {
  margin-top: 14px;
}

.world-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: center;
  gap: clamp(20px, 5vw, 64px);
  min-height: clamp(430px, 66vh, 620px);
  overflow: hidden;
  border: 1px solid rgb(80 55 37 / 16%);
  border-radius: 28px;
  padding: clamp(26px, 5vw, 64px);
  background:
    linear-gradient(90deg, rgb(255 249 239 / 96%) 0%, rgb(255 249 239 / 82%) 48%, rgb(255 249 239 / 42%) 100%),
    url("assets/images/ui/fairytale-world-hero.png") center / cover;
  box-shadow: var(--shadow);
}

.world-intro::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 22px;
  pointer-events: none;
}

.intro-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.selection-title {
  margin-bottom: 14px;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 1.02;
  text-wrap: balance;
}

.selection-subtitle {
  max-width: 580px;
  margin-bottom: 0;
  color: #5f5045;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.guide-portrait {
  position: relative;
  z-index: 1;
  width: min(100%, 340px);
  justify-self: center;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgb(67 44 28 / 22%);
  transform: rotate(1deg);
}

.story-vignette {
  display: block;
  width: min(720px, 78vw);
  margin: -74px auto -24px;
  border-radius: 22px;
  filter: drop-shadow(0 18px 30px rgb(74 47 26 / 14%));
  mix-blend-mode: multiply;
}

.lesson-mvp {
  margin: 28px 0 28px;
  border: 1px solid rgb(79 95 143 / 18%);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  background: rgb(255 253 248 / 88%);
  box-shadow: var(--soft-shadow);
}

.lesson-mvp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.lesson-mvp h2 {
  margin-bottom: 8px;
  color: #2f271f;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.15;
}

.lesson-mvp h3 {
  margin: 16px 0 8px;
  color: #37405f;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 1rem;
}

.lesson-mvp-objective {
  margin: 0;
  color: #47382e;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 1.04rem;
}

.lesson-mvp-flow,
.lesson-mvp-success {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.teacher-resources {
  margin-top: 18px;
  border-top: 1px solid rgb(79 95 143 / 18%);
  padding-top: 4px;
}

.teacher-resources h3 {
  margin-bottom: 8px;
}

.teacher-resources p {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.94rem;
}

.teacher-resource-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.teacher-resource-list a {
  color: #374b88;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.story-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 44px;
}

.story-card-list {
  display: contents;
}

.story-card {
  overflow: hidden;
  border: 1px solid rgb(91 62 43 / 16%);
  border-radius: 18px;
  background: rgb(255 253 248 / 91%);
  box-shadow: var(--soft-shadow);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.story-card:hover {
  transform: translateY(-5px);
  border-color: rgb(155 95 73 / 34%);
  box-shadow: 0 22px 56px rgb(72 45 27 / 18%);
}

.story-card:focus-visible {
  outline: 3px solid var(--accent, #9b5f49);
  outline-offset: 4px;
}

.story-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-soft);
}

.story-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgb(46 37 30 / 24%));
}

.story-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: scale 260ms ease;
}

.story-card:hover .story-card-media img {
  scale: 1.04;
}

.story-card-body {
  padding: 18px 18px 20px;
}

.story-card-meta {
  margin-bottom: 8px;
  color: var(--clay);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
}

.story-card h3 {
  margin-bottom: 8px;
  font-size: 1.38rem;
  line-height: 1.25;
}

.story-card p {
  color: var(--muted);
}

.value-runes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.value-runes span {
  border: 1px solid rgb(155 95 73 / 18%);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgb(246 234 219 / 66%);
  color: #684a37;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 750;
}

.storybook {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  /* The picture column stops at the picture. Stretching it to the text column's height is
     what let `object-fit: cover` crop the illustration. */
  align-items: start;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(80 55 37 / 16%);
  border-radius: 28px;
  background: rgb(255 253 248 / 94%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.storybook[hidden],
.story-selection[hidden] {
  display: none;
}

.fade-in {
  animation: fadeIn 520ms ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.story-image-container {
  position: relative;
  padding-bottom: 18px;
  background:
    linear-gradient(180deg, rgb(245 234 219 / 30%), rgb(107 76 51 / 18%)),
    var(--paper-soft);
}

.story-image-container::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 1px solid rgb(255 253 248 / 44%);
  border-radius: 20px;
  pointer-events: none;
}

/* A picture book shows the whole picture. The art is authored 16:9, so the frame is 16:9 and
   the column never stretches it — letting the text column set this height is what cropped
   80% of every illustration away. */
.story-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.story-image-fallback {
  display: grid;
  place-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 32px;
  background:
    linear-gradient(135deg, rgb(255 249 239 / 88%), rgb(222 207 186 / 72%)),
    repeating-linear-gradient(45deg, transparent 0 15px, rgb(80 55 37 / 7%) 15px 16px);
  text-align: center;
}

.story-image-fallback strong {
  font-size: 1.5rem;
}

.story-image-fallback span {
  color: var(--muted);
}

.story-content {
  padding: clamp(22px, 2.8vw, 38px);
}

/* The read-aloud control rides the progress row so it costs the page no vertical space. */
.read-aloud-button {
  flex: 0 0 auto;
  min-height: 0;
  padding: 6px 14px;
  font-size: 0.86rem;
}

.story-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--muted);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 750;
}

.path-trail {
  display: flex;
  gap: 7px;
  min-width: 44px;
  min-height: 12px;
}

.path-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgb(197 138 52 / 14%);
}

.path-dot.kindness {
  background: var(--sage);
  box-shadow: 0 0 0 4px rgb(111 135 108 / 14%);
}

.path-dot.courage {
  background: var(--rose);
  box-shadow: 0 0 0 4px rgb(184 106 123 / 14%);
}

.path-dot.wisdom {
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgb(79 95 143 / 14%);
}

.path-dot.honesty {
  background: #7e6194;
  box-shadow: 0 0 0 4px rgb(126 97 148 / 14%);
}

.story-title {
  margin-bottom: 16px;
  color: #2f271f;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  text-wrap: balance;
}

.story-consequence {
  margin-bottom: 22px;
  border: 1px solid rgb(197 138 52 / 26%);
  border-left: 5px solid var(--gold);
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(255 244 218 / 90%), rgb(246 234 219 / 76%));
  color: #68441f;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.discussion-card {
  margin: 18px 0 22px;
  border: 1px solid rgb(79 95 143 / 18%);
  border-left: 5px solid var(--indigo);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgb(241 243 250 / 76%);
  color: #37405f;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.discussion-card h3 {
  margin-bottom: 8px;
  color: #2f3a5f;
  font-size: 0.98rem;
}

.discussion-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.discussion-card li {
  line-height: 1.55;
}

.discussion-card-before {
  margin-bottom: 14px;
}

.discussion-card-reason {
  border-left-color: var(--gold);
  background: rgb(255 244 218 / 70%);
  color: #68441f;
}

.discussion-card-ending {
  border-left-color: var(--sage);
  background: rgb(236 243 232 / 70%);
  color: #42583e;
}

.story-body {
  margin-bottom: 18px;
  /* Korean must not break mid-word, and a storybook measure stays near 25em so a
     line is one comfortable breath rather than a wall. */
  max-width: 30em;
  color: #47382e;
  font-size: clamp(1.04rem, 1.8vw, 1.16rem);
  line-height: 1.72;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.story-line {
  display: block;
  /* Balance each sentence across its lines so a wrapped sentence reads as two even
     lines instead of a long line with a stray tail under it. */
  text-wrap: balance;
}

.story-line + .story-line {
  margin-top: 0.32em;
}

.story-consequence {
  max-width: 26em;
  word-break: keep-all;
}

.saved-reading-slot[hidden] {
  display: none;
}

.saved-reading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: min(1160px, calc(100vw - 32px));
  margin: 0 auto 18px;
  padding: 14px 18px;
  border: 1px solid rgb(80 55 37 / 16%);
  border-radius: 18px;
  background: rgb(255 253 248 / 92%);
}

.saved-reading-title {
  margin: 0;
  font-weight: 800;
  word-break: keep-all;
}

.saved-reading-actions {
  display: flex;
  gap: 8px;
}

.finished-book {
  grid-template-columns: 1fr;
}

.finished-spread {
  margin-bottom: 26px;
}

.finished-spread .story-image {
  /* The art is 384px wide. Blowing it up to the full column turns pixel art into mush. */
  max-width: 680px;
  margin-bottom: 12px;
  border-radius: 14px;
}

.finished-spread .story-body {
  margin-bottom: 0;
}

.classroom-source {
  margin: -6px 0 18px;
  padding: 12px 16px;
  max-width: 30em;
  border-left: 3px solid var(--sage, rgb(66 88 62 / 40%));
  border-radius: 0 10px 10px 0;
  background: rgb(236 243 232 / 60%);
}

.classroom-source-heading {
  margin: 0 0 6px;
  color: #42583e;
  font-size: 0.86rem;
  font-weight: 800;
}

.classroom-source-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.94rem;
  word-break: keep-all;
}

.reading-review {
  display: grid;
  gap: 10px;
  max-width: 30em;
  margin: 20px 0;
  border: 1px solid rgb(79 95 143 / 20%);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgb(241 243 250 / 58%);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.reading-review h3 {
  margin: 0;
  color: #2f3a5f;
  font-size: 1rem;
}

.reading-review-toggle {
  justify-self: start;
}

.reading-review-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.reading-review-spread {
  border-top: 1px solid rgb(79 95 143 / 16%);
  padding-top: 10px;
}

.reading-review-spread h4 {
  margin: 0 0 4px;
  color: #37405f;
  font-size: 0.96rem;
}

.reading-review-spread .story-body {
  margin: 0;
  font-size: 0.98rem;
}

.closing-page {
  margin: 20px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--clay);
  border-radius: 0 14px 14px 0;
  background: rgb(252 246 235 / 88%);
}

.closing-page h3 {
  margin-bottom: 8px;
}

.closing-page-body {
  max-width: 30em;
  margin: 0;
  line-height: 1.72;
  word-break: keep-all;
}

.closing-page-actions {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  justify-items: start;
}

.closing-page-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}

.reader-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

/* A scene is one page. The picture, the title and the choices always stay on screen; only the
   prose turns when a scene runs long. Choices a child has to scroll to find are choices the
   child does not know they have. */
@media (min-width: 901px) {
  /* The finished book is read straight through, so it is the one view that keeps the page's
     own scroll. */
  body.reading .storybook:not(.finished-book) {
    max-height: calc(100vh - 132px);
  }

  body.reading .storybook:not(.finished-book) .story-content {
    max-height: calc(100vh - 132px);
    overflow-y: auto;
  }

  body.reading .choices {
    position: sticky;
    bottom: 0;
    padding-top: 20px;
    background: linear-gradient(180deg, rgb(255 253 248 / 0%) 0, rgb(255 253 248) 20px);
  }
}

.reader-undo-button {
  width: 100%;
}

.choice-button,
.restart-button {
  position: relative;
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  padding: 11px 44px 11px 18px;
  background: rgb(255 249 239 / 88%);
  color: #35291f;
  text-align: left;
  box-shadow: none;
}

.choice-button::after,
.restart-button::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  color: var(--clay);
  font-size: 1.8rem;
  line-height: 1;
}

.choice-button:hover,
.restart-button:hover {
  background: #2f271f;
  color: #fffaf2;
}

@media (max-width: 520px) {
  .reader-navigation {
    grid-template-columns: 1fr;
  }
}

.choice-button[aria-pressed="true"] {
  border-color: var(--gold);
  outline: 4px solid rgb(197 138 52 / 28%);
  outline-offset: 2px;
}

.teacher-branch-composer {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 18px;
  border: 1px solid rgb(197 138 52 / 36%);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(145deg, rgb(255 249 235 / 96%), rgb(247 233 207 / 78%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  transition: border-color 160ms ease, background 160ms ease;
}

.teacher-branch-composer h3,
.branch-review h3,
.branch-review h4 {
  margin: 0;
  color: #5d412a;
  line-height: 1.35;
}

#teacher-branch-form {
  display: grid;
  gap: 9px;
}

#teacher-branch-form label {
  font-weight: 760;
}

#teacher-branch-input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  border: 1px solid rgb(122 90 55 / 30%);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgb(255 253 248 / 94%);
  color: var(--ink);
}

.teacher-branch-composer :focus-visible {
  outline: 3px solid rgb(79 95 143 / 46%);
  outline-offset: 3px;
}

.scene-revision-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid rgb(79 95 143 / 24%);
  padding-top: 14px;
}

.scene-revision-editor h3 {
  margin: 0;
  color: #37405f;
}

.scene-revision-form {
  display: grid;
  gap: 10px;
}

.scene-revision-form label,
.scene-revision-form legend {
  display: grid;
  gap: 5px;
  font-weight: 760;
}

.scene-revision-form input,
.scene-revision-form textarea {
  width: 100%;
  border: 1px solid rgb(122 90 55 / 30%);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgb(255 253 248 / 96%);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}

.scene-revision-form textarea {
  resize: vertical;
}

.scene-revision-form fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid rgb(122 90 55 / 24%);
  border-radius: 12px;
  padding: 10px;
}

.scene-revision-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px;
}

.scene-revision-comparison {
  border-left: 3px solid rgb(79 95 143 / 35%);
  padding: 8px 11px;
  background: rgb(241 243 250 / 70%);
  color: var(--muted);
  font-size: 0.9rem;
}

.scene-revision-comparison p,
.scene-revision-error {
  margin: 0;
}

.scene-revision-error {
  color: #a22d2d;
  font-weight: 700;
}

@media (max-width: 560px) {
  .scene-revision-choice {
    grid-template-columns: 1fr;
  }
}

/* The reading stops here on purpose: the class writes what happens after this choice. */
.live-scene-waiting {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.ai-ending-pending {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  border: 1px solid rgb(79 95 143 / 24%);
  border-left: 5px solid var(--indigo);
  border-radius: 16px;
  padding: 16px;
  background: rgb(241 243 250 / 76%);
  color: #37405f;
}

.ai-ending-pending h3 {
  margin: 0;
  color: #2f3a5f;
}

.ai-ending-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ai-ending-actions {
  margin-top: 4px;
}

.storybook.ai-ending .story-meta > span {
  color: var(--indigo);
}

.teacher-branch-status,
.branch-image-status {
  min-height: 1.4em;
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.branch-magic-loader {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  border: 1px solid rgb(197 138 52 / 42%);
  border-radius: 14px;
  padding: 24px 18px;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 92%), rgb(250 229 184 / 76%));
  color: #6b451f;
}

.branch-magic-visual {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 520px);
  text-align: center;
}

.branch-magic-wand {
  font-size: clamp(2rem, 5vw, 3.2rem);
  filter: drop-shadow(0 8px 14px rgb(125 77 24 / 22%));
  animation: branchMagicWand 1800ms ease-in-out infinite;
}

.branch-magic-sparkles {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-height: 1.4em;
  font-size: 1.15rem;
}

.branch-magic-sparkles span {
  animation: branchMagicSparkle 1200ms ease-in-out infinite alternate;
}

.branch-magic-sparkles span:nth-child(2n) {
  animation-delay: 240ms;
}

.branch-magic-sparkles span:nth-child(3n) {
  animation-delay: 480ms;
}

.branch-magic-phrases {
  position: relative;
  width: 100%;
  min-height: 3.2em;
  font-size: clamp(1rem, 2.5vw, 1.18rem);
  font-weight: 800;
  line-height: 1.45;
}

.branch-magic-phrases span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: branchMagicPhrase 10s steps(1, end) infinite;
}

.branch-magic-phrases span:nth-child(2) {
  animation-delay: -8s;
}

.branch-magic-phrases span:nth-child(3) {
  animation-delay: -6s;
}

.branch-magic-phrases span:nth-child(4) {
  animation-delay: -4s;
}

.branch-magic-phrases span:nth-child(5) {
  animation-delay: -2s;
}

@keyframes branchMagicPhrase {
  0%, 19.999% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}

@keyframes branchMagicSparkle {
  from {
    opacity: 0.35;
    transform: scale(0.76);
  }
  to {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes branchMagicWand {
  0%, 100% {
    transform: rotate(-8deg) translateY(0);
  }
  50% {
    transform: rotate(8deg) translateY(-5px);
  }
}

.branch-image-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  border: 1px solid rgb(197 138 52 / 26%);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgb(255 253 248 / 82%);
  color: #6b4b2f;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.teacher-branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teacher-branch-actions button {
  min-height: 44px;
}

.teacher-branch-actions button:disabled,
.teacher-branch-actions button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

.teacher-branch-actions button:disabled:hover {
  background: #2f271f;
}

.teacher-branch-actions .secondary-button:disabled:hover {
  background: rgb(255 253 248 / 82%);
  color: #3b2d23;
}

.branch-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  overflow: visible;
  border-top: 1px solid rgb(197 138 52 / 24%);
  padding-top: 14px;
  animation: branchSurfaceEntry 180ms ease-out both;
  transition: border-color 160ms ease, background 160ms ease;
}

.branch-review > * {
  min-width: 0;
  max-width: 100%;
}

.branch-review p,
.branch-review li {
  overflow-wrap: anywhere;
}

.branch-review img {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.branch-review ul {
  display: grid;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding-left: 22px;
}

@keyframes branchSurfaceEntry {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

.read-aloud-button[aria-pressed="true"] {
  border-color: rgb(66 88 62 / 42%);
  background: rgb(236 243 232 / 80%);
}

.vocabulary-term {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  border-bottom: 1px dotted currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 760;
  cursor: help;
}

/* The meaning is a note under the page, not a node inside the sentence. Nesting it in the
   term made every screen reader and text extraction read the definition mid-sentence. */
.vocabulary-notes {
  display: grid;
  gap: 6px;
  margin: -14px 0 26px;
  max-width: 30em;
}

.vocabulary-note {
  padding: 8px 12px;
  border-left: 3px solid rgb(66 88 62 / 34%);
  border-radius: 0 8px 8px 0;
  background: rgb(255 253 247 / 88%);
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}

.vocabulary-note[hidden] {
  display: none;
}

.vocabulary-note strong {
  margin-right: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-connection-dialog,
  .ai-connection-dialog::backdrop {
    animation: none;
    transition: none;
  }
  .teacher-branch-composer,
  .branch-review {
    animation: none;
    transition: none;
  }
  .branch-magic-visual * {
    animation: none !important;
    transition: none !important;
  }
  .branch-magic-phrases span {
    display: none;
  }
  .branch-magic-phrases span:first-child {
    position: static;
    display: grid;
    opacity: 1;
    transform: none;
  }
}

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

@media (max-width: 920px) {
  body {
    background-attachment: scroll;
  }

  .site-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .site-header > .header-actions {
    width: 100%;
    max-width: none;
  }

  .world-intro {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .guide-portrait {
    width: min(68vw, 300px);
  }

  .story-cards {
    grid-template-columns: 1fr;
  }

  .storybook {
    grid-template-columns: 1fr;
  }

  .branch-review {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 640px) {
  .ai-connection-dialog {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }

  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dialog-actions button {
    width: 100%;
  }

  .site-header {
    width: min(100% - 24px, 1160px);
    flex-direction: column;
    padding-top: 18px;
  }

  .story-selection,
  .storybook,
  main {
    width: min(100% - 24px, 1160px);
  }

  .world-intro {
    border-radius: 20px;
    padding: 22px;
  }

  .selection-title {
    font-size: 2.3rem;
  }

  .story-vignette {
    width: 96%;
    margin-top: -36px;
  }

  .lesson-mvp-header {
    flex-direction: column;
  }

  .lesson-mvp-header button {
    width: 100%;
    justify-content: center;
  }

  .story-content {
    padding: 22px;
  }

  .story-title {
    font-size: 2rem;
  }

  .auth-row,
  .teacher-actions,
  .template-actions,
  .io-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-field-grid {
    grid-template-columns: 1fr;
  }

  .auth-row button,
  .teacher-actions button,
  .template-actions button,
  .io-actions button,
  .io-actions label {
    width: 100%;
    justify-content: center;
  }
}