@import url("/brand/fonts.css");
:root {
  font-family: "Nunito", sans-serif; font-size: 18px; color: #1b1a2e; background: #fff4de;
  font-synthesis: none; color-scheme: light;
  --paper: #fff4de; --ink: #1b1a2e; --muted: #514962;
  --green: #6a3fd1; --line: #1b1a2e; --soft: #dccffa;
  --orange: #ff6b2c; --white: #ffffff; --sun: #ffc531; --aqua: #21b7c4;
  --sky: #bfe9f2; --blush: #ffd9c7; --leaf: #6fbf4a; --radius: 20px;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: var(--green);
  text-underline-offset: 4px;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}
::selection {
  background: var(--sun);
}
input,
textarea {
  caret-color: var(--green);
}
* {
  scrollbar-color: var(--green) var(--paper);
  scrollbar-width: thin;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2 {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  line-height: 1.12;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.05rem;
}
p {
  line-height: 1.65;
  max-width: 68ch;
}
.muted,
small {
  color: var(--muted);
}
small {
  font-size: 0.83rem;
  line-height: 1.5;
}
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: white;
  padding: 16px;
}
.skip:focus {
  top: 10px;
}
.loading {
  padding: 80px;
}
.brand {
  font-family: "Fredoka", sans-serif;
  font-size: 1.9rem;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.brand svg {
  width: 32px;
  height: 32px;
}
.shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100dvh;
}
.sidebar {
  border-right: 1px solid var(--line);
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: var(--sun);
}
.sidebar .brand {
  font-size: 1.7rem;
}
.side-caption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.nav {
  display: grid;
  gap: 8px;
}
.nav button {
  border: 0;
  background: none;
  color: var(--muted);
  text-align: left;
  padding: 14px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav button.active {
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
}
.nav button:hover {
  background: var(--paper);
}
.nav svg {
  width: 20px;
  height: 20px;
}
.side-bottom {
  margin-top: auto;
  font-size: 0.85rem;
}
.side-bottom p {
  margin-bottom: 12px;
}
.text-button {
  border: 0;
  background: none;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--green);
  min-height: 44px;
}
.workspace {
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.crumb {
  color: var(--muted);
  font-size: 0.88rem;
}
.profile-switch {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--soft);
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.profile-switch select {
  background: transparent;
  border: 0;
  padding: 8px 24px 8px 0;
  font-weight: 600;
  color: var(--ink);
  max-width: 190px;
}
.main {
  padding: 44px 48px 70px;
  max-width: 1200px;
  margin: auto;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 34px;
}
.heading p {
  margin-top: 14px;
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  white-space: normal;
}
.button:hover {
  background: var(--sun);
}
.button.secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button.secondary:hover {
  background: var(--paper);
}
.button.light {
  background: var(--white);
  color: var(--green);
}
.button svg {
  width: 20px;
  height: 20px;
}
.button.danger {
  color: var(--ink);
  background: var(--blush);
}
.buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.language-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  overflow: auto;
}
.language-tabs button {
  padding: 16px 22px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  color: var(--muted);
  min-height: 52px;
}
.language-tabs button.active {
  color: var(--green);
  border-color: var(--green);
  font-weight: 600;
}
.language-tabs span {
  display: block;
  font-size: 0.75rem;
  margin-top: 4px;
  font-weight: 400;
}
.welcome-panel {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--blush);
  margin: 12px 0 38px;
}
.welcome-copy {
  padding: 34px;
}
.welcome-copy h2 {
  font-size: 2.3rem;
  max-width: 420px;
}
.welcome-copy p {
  margin: 14px 0 24px;
}
.language-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 12px;
  padding: 28px;
  color: var(--ink);
  transform: rotate(-3deg);
}
.language-art div {
  background: var(--white);
  border-radius: 12px;
  min-height: 86px;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 1.8rem;
}
.language-art div:nth-child(2) {
  background: var(--sun);
}
.language-art div:nth-child(3) {
  background: var(--sky);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 20px;
}
.section-head h2 {
  font-size: 1.65rem;
}
.lesson-list {
  display: grid;
  gap: 0;
}
.lesson-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.lesson-art {
  width: 72px;
  height: 72px;
  background: var(--sky);
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.lesson-art svg {
  width: 44px;
  height: 44px;
}
.lesson-row h3 {
  margin-bottom: 6px;
}
.lesson-row p {
  font-size: 0.88rem;
  color: var(--muted);
}
.badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--sun);
  color: var(--ink);
  margin-left: 8px;
  font-weight: 500;
}
.block {
  display: block;
  margin-top: 4px;
}
.badge.assigned {
  background: var(--leaf);
  color: var(--ink);
}
.empty {
  padding: 34px 0;
}
.empty h2 {
  margin-bottom: 12px;
}
.empty p {
  margin-bottom: 22px;
  color: var(--muted);
}
.note {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9rem;
  margin: 20px 0;
  line-height: 1.6;
}
.note.error {
  color: var(--ink);
  background: var(--blush);
  border-color: var(--ink);
}
.auth {
  max-width: 1020px;
  min-height: 100dvh;
  margin: auto;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.auth-copy h1 {
  margin: 38px 0 22px;
}
.auth-copy p {
  color: var(--muted);
}
.auth-copy .language-art {
  padding: 40px 0;
}
.auth-form {
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.auth-form h2 {
  margin-bottom: 14px;
}
.form {
  max-width: 760px;
}
.field {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
}
.field label,
legend {
  font-weight: 600;
  font-size: 0.9rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink);
  padding: 13px 14px;
  min-height: 48px;
}
.field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}
.field small {
  margin-top: -2px;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.checks input {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.draft-phrase {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.draft-phrase .field {
  margin-bottom: 12px;
}
.draft-phrase .phrase-number {
  font-size: 0.8rem;
  margin-bottom: 12px;
  color: var(--muted);
}
.native {
  font-family: "Nunito", sans-serif;
  font-size: 1.5rem;
  line-height: 1.7;
}
.native[lang="fa"] {
  font-size: 1.9rem;
}
.detail-top {
  margin: 20px 0 32px;
}
.detail-top h1 {
  margin: 18px 0;
}
.detail-top p {
  color: var(--muted);
}
.phrase-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.phrase-row small {
  display: block;
}
.circle-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--green);
  flex-shrink: 0;
}
.circle-button:hover {
  background: var(--soft);
}
.circle-button svg {
  width: 21px;
  height: 21px;
}
.practice-wrap {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.practice-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-bottom: 24px;
}
.practice-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px;
  margin: 20px 0;
}
.practice-card h2 {
  font-size: 1.7rem;
}
.practice-card .native {
  font-size: 2.3rem;
  margin: 12px 0;
}
.cue {
  width: 126px;
  height: 126px;
  margin: 8px auto 22px;
  border-radius: 50%;
  background: var(--sun);
  display: grid;
  place-items: center;
}
.cue svg {
  width: 75px;
  height: 75px;
}
.practice-card .buttons {
  justify-content: center;
  margin-top: 24px;
}
.rating-buttons,
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.rating-buttons button,
.choices button {
  min-height: 68px;
}
.rating-buttons small {
  display: block;
  color: inherit;
  font-weight: 400;
}
.choice-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.choice-content svg {
  width: 35px;
  height: 35px;
}
.practice-caption {
  font-size: 0.88rem;
  margin-top: 16px;
  color: var(--muted);
}
.audio-panel {
  padding: 32px;
  background: var(--sky);
  border-radius: var(--radius);
  margin: 24px 0;
}
.audio-panel h2 {
  margin-bottom: 14px;
}
.audio-panel p {
  margin: 12px 0 20px;
}
.audio-panel audio {
  width: 100%;
  margin: 18px 0;
}
.progress-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 100px);
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.progress-row:first-child {
  color: var(--muted);
  font-size: 0.8rem;
}
.progress-row span:not(:first-child) {
  text-align: right;
}
.family-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.family-name {
  display: flex;
  align-items: center;
  gap: 14px;
}
.family-name small {
  display: block;
  margin-top: 4px;
}
#notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  border-radius: 10px;
  padding: 14px 22px;
  max-width: min(90vw, 600px);
  z-index: 50;
  box-shadow: 5px 5px 0 var(--ink);
  display: none;
}
#notice.visible {
  display: block;
}
.back {
  margin-bottom: 16px;
}
.busy {
  padding: 38px 0;
}
.busy p {
  margin-top: 14px;
}
.footer-note {
  margin-top: 30px;
  color: var(--muted);
  font-size: 0.85rem;
}
.hidden {
  display: none !important;
}
@media (min-width: 1400px) {
  .main {
    padding-top: 56px;
  }
  .topbar {
    padding-inline: 56px;
  }
}
@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 184px 1fr;
  }
  .sidebar {
    padding: 28px 18px;
  }
  .main {
    padding: 32px 28px 60px;
  }
  .topbar {
    padding: 20px 28px;
  }
  .heading {
    align-items: flex-start;
  }
  .welcome-copy {
    padding: 26px;
  }
  .language-art {
    padding: 20px;
    gap: 8px;
  }
  .language-art div {
    font-size: 1.5rem;
    min-height: 72px;
  }
  .language-tabs button {
    padding: 14px 17px;
  }
}
@media (max-width: 700px) {
  .shell {
    display: block;
  }
  .sidebar {
    padding: 18px 20px;
    gap: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar .brand {
    font-size: 1.6rem;
  }
  .side-caption,
  .side-bottom {
    display: none;
  }
  .nav {
    display: flex;
    gap: 4px;
  }
  .nav button {
    font-size: 0.85rem;
    padding: 11px 12px;
  }
  .nav svg {
    width: 18px;
  }
  .topbar {
    padding: 14px 20px;
  }
  .main {
    padding: 28px 20px 56px;
  }
  .heading {
    display: block;
    margin-bottom: 24px;
  }
  .heading .button {
    margin-top: 20px;
  }
  .heading h1 {
    font-size: 2.5rem;
  }
  .welcome-panel {
    grid-template-columns: 1fr;
  }
  .welcome-copy {
    padding: 26px;
  }
  .welcome-copy h2 {
    font-size: 2rem;
  }
  .welcome-panel .language-art {
    display: none;
  }
  .language-tabs {
    margin-bottom: 24px;
  }
  .language-tabs button {
    flex: 1;
    padding: 12px 10px;
    font-size: 0.85rem;
  }
  .lesson-row {
    grid-template-columns: 54px 1fr;
    gap: 14px;
  }
  .lesson-art {
    width: 54px;
    height: 54px;
  }
  .lesson-art svg {
    width: 32px;
    height: 32px;
  }
  .lesson-row > .button {
    grid-column: 2;
    justify-self: start;
    min-height: 44px;
    padding: 10px 16px;
  }
  .auth {
    display: block;
    padding: 28px 20px;
  }
  .auth-copy h1 {
    font-size: 2.7rem;
    margin-top: 28px;
  }
  .auth-copy .language-art {
    display: none;
  }
  .auth-form {
    padding: 24px;
    margin-top: 30px;
  }
  .auth-copy p {
    max-width: 420px;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .family-row {
    flex-wrap: wrap;
  }
  .family-row .buttons {
    margin-left: 52px;
  }
  .progress-row {
    grid-template-columns: 1fr repeat(3, 65px);
    gap: 4px;
    font-size: 0.85rem;
  }
  .progress-row:first-child {
    font-size: 0.7rem;
  }
  .practice-card {
    padding: 28px 18px;
  }
  .practice-card .native {
    font-size: 1.9rem;
  }
  .audio-panel {
    padding: 24px;
  }
  .button {
    font-size: 0.9rem;
  }
  .rating-buttons,
  .choices {
    gap: 9px;
  }
  .detail-top h1 {
    font-size: 2.5rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button,
  a {
    transition: background-color 140ms ease-out;
  }
  .practice-card {
    animation: arrive 180ms ease-out;
  }
  @keyframes arrive {
    from {
      transform: translateY(5px);
    }
    to {
      transform: translateY(0);
    }
  }
}

.voice-settings {
  min-width: 0;
  margin: 28px 0;
}
.voice-settings legend {
  font-weight: 700;
  padding: 0 8px;
}
#ai-settings h2 {
  margin-top: 36px;
}
@media (max-width: 700px) {
  .nav {
    flex-wrap: wrap;
  }
  .nav button {
    flex: 0 1 auto;
  }
}

/* Direct reading feedback: no easing, momentum, or moving text. */
.reading-guide { margin: 24px auto; max-width: 36rem; }
.reading-surface { position: relative; padding: 8px 0 16px; touch-action: none; user-select: none; cursor: crosshair; }
.reading-text { overflow-wrap: anywhere; line-height: 1.8; }
.reading-marker { position: absolute; top: 0; left: 0; height: 5px; border-radius: 4px; background: var(--green); pointer-events: none; }
.syllable-0 { color: #145967; }
.syllable-1 { color: #963b1b; }
.syllable-2 { color: var(--green); }
.reading-label, .reading-help { display: block; font-size: 0.85rem; color: var(--muted); }
.reading-label, .reading-help { direction: ltr; }
.reading-position { display: block; width: 100%; min-height: 48px; padding: 0; accent-color: var(--green); cursor: grab; }
.reading-position:active { cursor: grabbing; }
.reading-position:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
@media (forced-colors: active) { .reading-marker { background: Highlight; } }

.story-card { text-align: center; }
.story-card .story-scene { font-size: 1.3rem; line-height: 1.65; max-width: 36rem; margin: 20px auto; }
.story-context { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.story-card details { margin: 20px 0; }
.story-card summary { cursor: pointer; padding: 12px; }
.story-card > .button { margin: 16px 4px; }
.story-editor { margin-bottom: 28px; }
.story-editor section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

.builder-wrap { max-width: 760px; }
.builder-steps { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 0 0 28px; color: var(--muted); font-size: 0.9rem; }
.builder-steps [aria-current="step"] { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 7px; }
.builder-continuity { margin: 24px 0; }
.builder-continuity summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.builder-options { max-height: 18rem; overflow-y: auto; }
.builder-options label { display: block; padding: 12px 0; }
.builder-options input { width: auto; min-height: 0; margin-inline-end: 8px; }
.builder-resume { margin-top: 48px; }
.builder-resume-row { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 16px 0; }
.builder-resume-row p { flex: 1; overflow-wrap: anywhere; }
@media (max-width: 700px) { .builder-resume-row { align-items: flex-start; flex-direction: column; gap: 8px; } }
.builder-review { max-width: 760px; margin: 28px 0; }
.builder-dialogue { padding: 20px 0; border-bottom: 1px solid var(--line); }
.builder-dialogue h3 { margin-bottom: 8px; }
.builder-dialogue p { margin: 6px 0; }
.builder-review summary, .builder-edit summary { padding: 16px 0; cursor: pointer; font-weight: 600; }

/* Modular lesson activities. */
.series-entry { border-top: 1px solid var(--line, #d9ded5); padding: 1.5rem 0; margin-top: 1rem; }
.series-entry input[readonly], .series-entry textarea[readonly] { background: transparent; }
.block-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.block-choice { text-align: left; display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--line, #d9ded5); border-radius: 12px; background: transparent; color: inherit; cursor: pointer; }
.block-choice span:first-child { font-size: .8rem; }
.block-choice strong { font-size: 1.1rem; }
.block-choice:hover { background: #e9eee3; }
.lesson-blocks { margin: 2rem 0; }
.tile-tray { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem; min-height: 80px; border: 1px dashed #83927c; border-radius: 12px; margin: 1rem 0; }
.letter-tile { min-width: 44px; min-height: 48px; padding: .65rem; font-size: 1.25rem; background: #e4eadc; border: 1px solid #9eac95; border-radius: 8px; color: #263c30; cursor: grab; }
.reading-passage { font-size: 1.35rem; line-height: 1.9; white-space: pre-wrap; margin: 1.5rem 0; }
.conversation-turn { border-inline-start: 3px solid #b5c2a9; padding: .25rem 1rem; margin: 1rem 0; }
.task-edit { border-inline-start: 2px solid #d9ded5; padding-inline-start: 1rem; margin: 1rem 0; }
.activity-player .buttons { margin-top: 1.5rem; }
@media (max-width: 500px) { .block-list { grid-template-columns: 1fr; } .tile-tray { padding: .6rem; } }

/* Goftegu brand kit: flat color, ink contours and physical press feedback. */
h1 { font-weight: 700; }
h2 { font-weight: 500; line-height: 1.25; }
h3 { font-weight: 800; }
.brand { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 2.25rem; letter-spacing: -.02em; }
.brand span { font-family: "Vazirmatn", sans-serif; font-size: 1.3rem; font-weight: 700; }
.sidebar { border-right: 4px solid var(--ink); padding-inline: 20px; }
.shell { grid-template-columns: 250px minmax(0,1fr); }
.nav { gap: 16px; }
.nav button { min-height: 56px; color: var(--ink); font-weight: 800; border: 3px solid transparent; border-radius: 12px; font-size: .9rem; }
.nav button.active { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.topbar { background: var(--white); border-bottom: 3px solid var(--ink); }
.avatar { background: var(--soft); border: 3px solid var(--ink); width: 48px; height: 48px; }
.main { padding: 40px 40px 72px; }
.button { min-height: 64px; border: 4px solid var(--ink); border-radius: 999px; background: var(--orange); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); font-family: "Fredoka", sans-serif; font-size: 1.15rem; font-weight: 500; padding: 12px 24px; }
.button.secondary { background: var(--white); border-color: var(--ink); }
.button.secondary:hover { background: var(--sun); }
.button.light { color: var(--ink); }
.button:disabled { opacity: 1; background: #e4dfd5; color: #625d70; border-color: #625d70; box-shadow: none; cursor: not-allowed; }
.buttons { gap: 16px; margin-block: 20px; }
.text-button { min-height: 56px; font-weight: 800; }
.language-tabs { gap: 16px; border: 0; margin-top: 32px; padding: 0 5px 6px 0; }
.language-tabs button { border: 3px solid var(--ink); border-radius: 20px; color: var(--ink); background: var(--white); min-width: 110px; min-height: 80px; }
.language-tabs button.active { border-color: var(--ink); background: var(--soft); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.language-tabs span { font-size: .9rem; }
.welcome-panel, .audio-panel { border: 4px solid var(--ink); border-radius: 28px; box-shadow: 7px 7px 0 var(--ink); }
.welcome-panel { overflow: visible; background: var(--paper); }
.mascot-pair { display: flex; justify-content: center; align-items: center; gap: 0; padding: 24px; }
.mascot-pair img { width: 50%; max-width: 200px; height: auto; min-width: 120px; }
.auth .mascot-pair { padding: 24px 0 0; justify-content: flex-start; }
.lesson-list { gap: 24px; }
.lesson-row { border: 4px solid var(--ink); border-radius: 20px; padding: 24px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); }
.lesson-art { border: 3px solid var(--ink); border-radius: 20px; }
.badge { color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; font-size: .75rem; font-weight: 800; padding: 4px 10px; }
.badge.assigned { color: var(--ink); }
.note { background: var(--sky); border: 2px solid var(--ink); border-radius: 20px; font-size: 1rem; }
.auth { max-width: 1200px; gap: 56px; }
.auth-form { border: 4px solid var(--ink); border-radius: 28px; box-shadow: 7px 7px 0 var(--ink); }
.field input,.field select,.field textarea,.activity-player textarea,.activity-player input { border: 2px solid var(--ink); border-radius: 12px; padding: 16px; background: var(--white); color: var(--ink); min-height: 56px; max-width: 100%; }
.field label, legend { font-weight: 800; font-size: 1rem; }
.checks { gap: 16px; }
.checks label { min-height: 56px; }
.native { font-family: "Nunito", sans-serif; }
[lang="fa"], .native[lang="fa"] { font-family: "Vazirmatn", sans-serif; line-height: 1.65; letter-spacing: 0; }
.practice-card { border: 4px solid var(--ink); border-radius: 28px; box-shadow: 7px 7px 0 var(--ink); }
.practice-card p,.practice-caption,.reading-help,.reading-label,.story-context { font-size: 1rem; }
.circle-button { height: 64px; width: 64px; background: var(--aqua); color: var(--ink); border: 4px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.rating-buttons,.choices { gap: 16px; }
.block-list { gap: 20px; }
.block-choice { min-height: 130px; border: 4px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); background: var(--white); color: var(--ink); padding: 20px; }
.block-choice:hover { background: var(--paper); }
.block-choice strong { font-family: "Fredoka", sans-serif; font-size: 1.35rem; font-weight: 500; }
.block-choice span { color: var(--ink); }
.block-choice[data-kind="audio"] { background: var(--sky); }
.block-choice[data-kind="conversation"],.block-choice[data-kind="qa"] { background: var(--blush); }
.block-choice[data-kind="reading"],.block-choice[data-kind="writing"] { background: var(--soft); }
.letter-tile { min-width: 64px; min-height: 64px; border: 3px solid var(--ink); border-radius: 12px; background: var(--sun); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 1.3rem; }
.tile-tray { gap: 16px; border-color: var(--ink); padding: 20px; }
.activity-player { font-size: 1rem; }
.activity-player h1 { margin-block: 16px; }
.activity-player h2 { margin-top: 24px; }
.activity-player textarea { display: block; width: 100%; margin: 12px 0 24px; min-height: 110px; }
.activity-player .reading-passage { background: var(--white); padding: 24px; border: 3px solid var(--ink); border-radius: 20px; line-height: 1.8; }
.lesson-progress { width: 100%; height: 28px; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--white); margin: 20px 0 28px; }
.lesson-progress::-webkit-progress-bar { background: var(--white); }
.lesson-progress::-webkit-progress-value { background: var(--leaf); border-right: 3px solid var(--ink); }
.lesson-progress::-moz-progress-bar { background: var(--leaf); }
.check-summary { margin-block: 24px; padding: 24px; background: var(--sky); border: 3px solid var(--ink); border-radius: 20px; }
.challenge-hero { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.challenge-hero img { width: 140px; height: auto; }
.conversation-turn { border-color: var(--ink); }
.eyebrow { font-size: .9rem; letter-spacing: .03em; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
 .button,.circle-button,.letter-tile,.block-choice { transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out; }
 .button:active:not(:disabled),.circle-button:active,.letter-tile:active,.block-choice:active { transform: scale(.96); box-shadow: 2px 2px 0 var(--ink); }
}
@media (max-width: 1050px) {
 .shell { grid-template-columns: 210px minmax(0,1fr); }
 .sidebar { padding-inline: 12px; }
 .sidebar .brand { font-size: 1.6rem; }
 .sidebar .brand span { font-size: 1rem; }
 .main { padding-inline: 28px; }
 .lesson-row { grid-template-columns: 64px minmax(0,1fr); }
 .lesson-row > .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 700px) {
 .shell { display: block; }
 .sidebar { padding: 20px; border-right: 0; border-bottom: 4px solid var(--ink); }
 .nav { flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding: 0 5px 5px 0; }
 .nav button { flex: 0 0 auto; min-height: 56px; }
 .main { padding: 28px 20px 56px; }
 .topbar { flex-wrap: wrap; padding: 16px 20px; }
 .profile-switch { flex-wrap: wrap; gap: 16px; }
 .profile-switch select { max-width: 150px; min-height: 56px; }
 .button { font-size: 1.05rem; min-height: 64px; }
 .lesson-row > .button { min-height: 64px; }
 .lesson-row { padding: 20px; gap: 16px; grid-template-columns: 1fr; }
 .lesson-row > .button { grid-column: 1; }
 .lesson-art { display: none; }
 .badge { display: table; margin: 10px 0 0; }
 .language-tabs button { flex: 0 0 auto; padding-inline: 16px; }
 .heading h1,.detail-top h1 { font-size: 2.3rem; }
 .auth-copy h1 { font-size: 2.6rem; }
 .auth .mascot-pair { display: none; }
 .welcome-panel .mascot-pair { padding-top: 0; }
 .rating-buttons,.choices { grid-template-columns: 1fr; }
 .challenge-hero { align-items: flex-start; gap: 16px; }
 .challenge-hero img { width: 120px; }
 .challenge-hero h2 { font-size: 1.7rem; }
 .family-row .buttons { margin-left: 0; }
}
.series-list .lesson-row { grid-template-columns: minmax(0,1fr) auto; }
.challenge-hero > div { min-width: 0; }
@media (max-width: 700px) {
 .challenge-hero { flex-direction: column; margin-top: 16px; }
 .challenge-hero h1 { font-size: 2.3rem; }
 .challenge-hero img { align-self: center; }
 .series-list .lesson-row { grid-template-columns: minmax(0,1fr); }
}

.conversation-turn { border-inline-start: 0; border-bottom: 1px solid var(--ink); padding: 16px 0; }
.earlier-turns summary,.written-response summary { min-height: 56px; padding: 16px 0; cursor: pointer; font-weight: 800; }
@media (max-width: 700px) {
 .shell--practice .sidebar { display: none; }
 .shell--practice .topbar { padding: 8px 20px; }
 .shell--practice .crumb,.shell--practice .avatar { display: none; }
 .shell--practice .profile-switch { flex-wrap: nowrap; }
 .shell--practice .main { padding-top: 12px; }
 .shell--practice .activity-player h1 { font-size: 2rem; margin-block: 12px; }
 .shell--practice .activity-player h2 { font-size: 1.5rem; margin-top: 16px; }
 .shell--practice .lesson-progress { margin: 8px 0 16px; height: 24px; }
 .shell--practice .buttons { margin-block: 16px; }
}
/* Module-based learning: reference interaction, Goftegu's own brand. */
.shell--practice { display: block; }
.shell--practice .sidebar,.shell--practice .topbar { display: none; }
.shell--practice .main { max-width: 1000px; padding-top: 24px; }
.queue-toolbar { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; max-width: 760px; }
.learning-queue { display: grid; gap: 24px; }
.queue-row { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 28px 0; border-bottom: 2px solid var(--ink); }
.queue-number { width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); display: grid; place-items: center; font-weight: 800; }
.queue-row h2 { font-size: 1.7rem; margin: 8px 0; }
.queue-label { font-size: .9rem; font-weight: 800; }
.module-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 28px 0 48px; }
.module-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 4px solid var(--ink); border-radius: 28px; background: var(--sky); color: var(--ink); padding: 24px 20px; box-shadow: 5px 5px 0 var(--ink); text-align: center; }
.module-tile[data-kind=story],.module-tile[data-kind=final] { background: var(--blush); }
.module-tile[data-kind=writing],.module-tile[data-kind=reading] { background: var(--soft); }
.module-tile[data-kind=flashcards],.module-tile[data-kind=quick_review] { background: var(--sun); }
.module-tile strong { font: 500 1.4rem/1.3 'Fredoka',sans-serif; }
.module-tile > span:not(.module-art) { font-size: 1rem; }
.module-art { display: grid; place-items: center; height: 88px; width: 88px; background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; }
.module-art svg { width: 50px; height: 50px; stroke-width: 1.8; }
.module-status { margin-top: auto; padding-top: 12px; font-weight: 800; }
.module-tile.is-complete .module-status { background: var(--leaf); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 12px; }
.module-progress { margin-top: 24px; }
.module-progress .lesson-progress { margin: 12px 0; height: 22px; }
.audio-hub { display: flex; gap: 24px; align-items: center; padding: 28px; border: 4px solid var(--ink); border-radius: 28px; background: var(--sky); }
.audio-part { padding: 24px 0 32px; border-bottom: 2px solid var(--ink); }
.audio-part audio { width: 100%; margin: 20px 0; }
.audio-focus h1 { margin-top: 20px; }
.module-tile:hover { transform: translateY(-2px); }
@media (max-width: 900px) { .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .queue-row { grid-template-columns: 52px minmax(0,1fr); } .queue-row > .button { grid-column: 2; justify-self: start; } }
@media (max-width: 700px) {
 .queue-toolbar { grid-template-columns: 1fr; gap: 0; }
 .module-grid { gap: 20px; }
 .module-tile { padding: 20px 10px; border-radius: 20px; }
 .module-tile strong { font-size: 1.15rem; }
 .module-art { width: 72px; height: 72px; }
 .module-tile > span:not(.module-art) { font-size: 1rem; }
 .audio-hub { flex-direction: column; align-items: flex-start; }
 .shell--practice .main { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .module-tile:hover { transform: none; } }
.learning-home h1 { margin-bottom: 8px; }
.learning-home .queue-intro { margin: 0 0 16px; }
.learning-home .language-tabs { margin: 16px 0; }
.learning-home .language-tabs button { min-height: 64px; padding: 12px 20px; }
.queue-filters { margin: 0 0 8px; }
.queue-filters summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.queue-filters[open] .queue-toolbar { margin-top: 16px; }
.learning-home .queue-row { padding: 16px 0 24px; }
.learning-home .queue-row p { margin: 8px 0; }
.learning-home .demo-label { margin-top: 28px; }
.audio-part > .button { margin-top: 12px; min-width: 180px; }
@media (max-width: 700px) {
 .learning-home .queue-row { grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
 .learning-home .queue-number { width: 36px; height: 36px; font-size: .9rem; }
 .learning-home .queue-row h2 { font-size: 1.4rem; }
 .learning-home .queue-row .queue-label { font-size: .8rem; }
}
/* Child-led practice: physical cards, whole sound stops, a saved-work celebration. */
:root { --play-ease: cubic-bezier(0.23,1,0.32,1); }
.quick-player { max-width: 640px; }
.quick-player h1 { font-size: 2rem; margin: 16px 0 8px; }
.quick-player > p { margin: 8px 0 20px; }
.flashcard-stack { position: relative; isolation: isolate; margin: 24px 8px 28px 0; }
.flashcard-stack::before { content: ''; position: absolute; inset: 8px -8px -8px 8px; border: 3px solid var(--ink); border-radius: 28px; background: var(--sun); z-index: -1; transform: rotate(2deg); }
.flashcard { min-height: 340px; display: grid; align-items: center; padding: 32px; border: 4px solid var(--ink); border-radius: 28px; background: var(--white); text-align: center; }
.flashcard-cue { display: grid; place-items: center; color: var(--ink); margin-bottom: 20px; }
.flashcard-cue svg { width: 48px; height: 48px; }
.flashcard-question,.flashcard-native { font: 500 clamp(2rem,4vw,3rem)/1.3 'Fredoka',sans-serif; margin: 16px 0 28px; }
.flashcard-native[lang=fa] { font-family: 'Vazirmatn',sans-serif; font-size: clamp(2.1rem,5vw,3.3rem); line-height: 1.6; }
.flashcard-flip { border: 0; border-radius: 999px; background: var(--sky); color: var(--ink); padding: 12px 20px; min-height: 64px; font-weight: 800; display: inline-flex; align-items: center; gap: 12px; }
.flashcard-flip svg { width: 22px; height: 22px; }
.flashcard.is-turned { background: var(--sky); }
.flashcard-count { text-align: center; color: var(--muted); font-size: 1rem; }
#quick-rating { text-align: center; }
#quick-rating .buttons { justify-content: center; }
.syllable-0 { color: #22603d; }
.syllable-1 { color: #6a3fd1; }
.reading-text { line-height: 1.9; }
[data-reading-unit] { border-radius: 4px; }
[data-reading-unit].is-reading { background: #ffda68; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.reading-marker { display: none; }
.reading-stops { display: flex; justify-content: space-between; padding: 0 7px; margin: -8px 0 16px; }
.reading-stops span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.celebration { text-align: center; max-width: 680px; padding-block: 32px; }
.celebration-art { position: relative; width: 260px; height: 220px; margin: 0 auto 24px; display: grid; place-items: center; }
.celebration-art img { width: 180px; height: 180px; object-fit: contain; }
.reward-seal { position: absolute; bottom: 0; right: 24px; width: 64px; height: 64px; border: 4px solid var(--ink); border-radius: 50%; background: var(--leaf); display: grid; place-items: center; }
.reward-seal svg { width: 36px; height: 36px; }
.reward-spark { position: absolute; width: 16px; height: 32px; border: 3px solid var(--ink); border-radius: 8px; background: var(--sun); }
.spark-one { left: 10px; top: 30px; transform: rotate(-25deg); }
.spark-two { right: 10px; top: 0; background: var(--sky); transform: rotate(30deg); }
.spark-three { left: 25px; bottom: 5px; height: 16px; border-radius: 50%; background: var(--tangerine); }
.celebration h1 { font-size: clamp(2rem,5vw,3rem); }
.celebration p { margin-inline: auto; }
.saved-practice { font-size: 1rem; color: var(--muted); }
.celebration .button { min-width: 200px; }
.library-intro { display: flex; align-items: center; gap: 24px; margin: 20px 0; }
.curriculum-tier { margin-top: 40px; }
.curriculum-module { border-bottom: 2px solid var(--ink); padding: 20px 0; }
.curriculum-module summary { cursor: pointer; min-height: 64px; }
.curriculum-module summary span { font: 500 1.5rem 'Fredoka',sans-serif; }
.curriculum-module summary small { display: block; padding: 8px 24px; }
.curriculum-module li,.curriculum-rhythm li { margin-block: 12px; }
@media (prefers-reduced-motion: no-preference) {
 .flashcard { animation: card-arrive 200ms var(--play-ease); }
 .flashcard.is-turned { animation: card-turn 240ms var(--play-ease); }
 .celebration-art img { animation: mascot-cheer 600ms var(--play-ease) both; }
 .reward-seal { animation: seal-arrive 280ms var(--play-ease) 120ms both; }
 .reward-spark { animation: spark-pop 260ms var(--play-ease) 180ms both; }
 .spark-two { animation-delay: 220ms; }
 .spark-three { animation-delay: 260ms; }
 .letter-tile:active,.flashcard-flip:active { transform: scale(.96); transition: transform 120ms var(--play-ease); }
}
@keyframes card-arrive { from { transform: translateX(12px); opacity: .65; } to { transform: translateX(0); opacity: 1; } }
@keyframes card-turn { from { transform: perspective(900px) rotateY(-12deg); opacity: .65; } to { transform: perspective(900px) rotateY(0); opacity: 1; } }
@keyframes mascot-cheer { 0% { transform: translateY(12px) rotate(-6deg); } 55% { transform: translateY(-10px) rotate(4deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes seal-arrive { from { transform: scale(.9) rotate(-12deg); opacity: .2; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes spark-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .flashcard,.reward-seal { transition: background-color 150ms ease; } }
@media (max-width: 700px) {
 .flashcard { min-height: 300px; padding: 24px 20px; }
 .quick-player h1 { font-size: 1.8rem; }
 .quick-player .practice-top { margin-bottom: 16px; }
 .library-intro { align-items: flex-start; gap: 16px; }
 .library-intro img { width: 80px; height: 100px; }
 .library-intro h1 { font-size: 2rem; }
 .celebration-art { margin-top: 24px; }
 .reading-text { font-size: 1.8rem; }
}
.story-buddy { display: flex; align-items: center; gap: 24px; margin: 16px 0; }
.story-buddy img { width: 96px; height: 100px; object-fit: contain; }
.story-payoff { background: var(--sun); border-radius: 16px; padding: 16px 20px; }
@media (prefers-reduced-motion: no-preference) { .story-payoff { animation: card-arrive 200ms var(--play-ease); } }

/* Picture-book extension: the supplied Goftegu world remains the visual authority. */
.visual-series-entry{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.4fr);gap:32px;padding:28px 0;border-bottom:2px solid var(--ink)}
.series-concept{align-self:start;background:var(--sky,#b7dfff);border-radius:28px;overflow:hidden;text-align:center;padding:24px}
.series-concept>img{max-height:200px;width:auto;max-width:100%;object-fit:contain}
.series-concept .story-picture{width:100%;max-height:none;aspect-ratio:3/2}
.series-card-content{min-width:0}.series-card-content h2{margin-top:0}.series-detail{margin:24px 0}.series-detail summary{font-weight:800;padding:16px 0;cursor:pointer}.series-detail[open] summary{margin-bottom:16px}
.word-flashcard{max-width:740px;margin:24px auto;padding:28px;background:white;border:4px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--sun,#ffda68);text-align:center}
.word-flashcard>.story-picture{width:100%;max-height:250px;object-fit:contain;background:var(--cream);border-radius:20px}.word-meaning{margin:20px 0}.word-meaning summary{cursor:pointer;font-weight:800;min-height:56px;display:list-item;align-content:center}.word-meaning p{font-size:1.3rem}
.is-speaking{background:#ffda68!important;color:#211b3c!important;border-radius:4px;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.answer-slots{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.answer-slot{position:relative;min-width:76px;min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 12px 14px;background:white;border:3px dashed var(--ink);border-radius:12px;font-family:inherit;font-size:1.6rem;cursor:pointer;touch-action:none}.slot-number{position:absolute;top:4px;font-family:Nunito,sans-serif;font-size:1rem}.slot-hint{font-size:1rem;line-height:1.2;margin-top:8px}.slot-correct{background:#d0edbf;border-style:solid}.slot-retry{background:#ffd4d7;border-style:solid}.tile-selected{outline:4px solid #6a3fd1;outline-offset:3px}.letter-tile{touch-action:none}.answer-slot:focus-visible{outline:4px solid #6a3fd1;outline-offset:3px}
.picture-book{max-width:1180px;margin:0 auto;padding:24px}.picture-book h1{font-size:clamp(1.8rem,3vw,2.7rem);margin:16px 0}.book-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:20px 0}.book-spread{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:32px;align-items:center}.book-spread figure{margin:0;min-width:0}.story-picture{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:28px}.book-spoken{font-family:Fredoka,Nunito,sans-serif;font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.6}.book-spoken[lang=fa]{font-family:Vazirmatn,sans-serif}.book-copy{min-width:0}.book-reading .book-spread{grid-template-columns:minmax(220px,.75fr) minmax(0,1.4fr);align-items:start}.book-reading .book-spoken{font-size:clamp(1.6rem,2.5vw,2.4rem)}.picture-pending{background:#d8cff5;border-radius:28px;min-height:230px;display:grid;place-items:center;padding:24px;text-align:center}.picture-pending img{max-height:130px;width:auto}.storyboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:32px 0}.storyboard-grid article{min-width:0}.storyboard-grid h2{font-size:1.6rem}.illustration-entry{margin:32px 0;padding:24px 0;border-bottom:2px solid var(--ink)}
@media(max-width:700px){.visual-series-entry{grid-template-columns:1fr;gap:20px}.series-concept{display:none}.series-concept:has(.story-picture){display:block;padding:0}.book-spread,.book-reading .book-spread{grid-template-columns:1fr;gap:16px}.picture-book{padding:16px}.book-reading figure{max-width:220px}.storyboard-grid{grid-template-columns:1fr}.word-flashcard{padding:20px 12px}.answer-slot{min-width:64px;min-height:100px;padding-inline:8px}.book-toolbar .button{flex:1}.book-toolbar .text-button{font-size:1rem}.book-spoken{margin-top:0}}
@media(prefers-reduced-motion:no-preference){.story-picture{animation:book-page-arrive 240ms cubic-bezier(.23,1,.32,1)}.answer-slot{transition:background-color 160ms ease-out,transform 120ms ease-out}.answer-slot:active{transform:scale(.97)}@keyframes book-page-arrive{from{transform:translateX(8px);opacity:.6}to{transform:none;opacity:1}}}

/* Keep the learning content primary; help stays nearby and optional. */
.learning-help,.activity-guidance,.reading-disclaimer{font-size:.875rem;line-height:1.5;color:var(--ink);opacity:.8}
.learning-help{margin:12px 0}.learning-help summary{cursor:pointer;font-size:inherit}
.activity-guidance{padding:12px 16px;background:var(--sky);border-radius:12px;margin:16px 0;max-width:65ch}
.activity-instructions{margin-bottom:20px}
.word-gap{flex:0 0 20px;align-self:stretch}
.writing-input{display:block;width:100%;min-height:150px;font-size:1.5rem;line-height:1.6;padding:18px;margin-top:8px}
.answer-reveal{margin:24px 0;padding:24px;border:3px solid var(--ink);border-radius:20px;background:var(--white)}
.answer-reveal h3{font-size:1rem;margin:0 0 12px}.answer-reveal .native{margin:0 0 16px}.answer-reveal .buttons{margin-top:16px}
.book-spread figure #book-play{margin-top:16px}.reading-disclaimer{display:block;margin-top:12px}
.story-translation{font-size:1rem;margin-top:16px}.story-translation summary{cursor:pointer}.story-translation p{margin-top:8px}
.story-word{display:inline;padding:0;min-height:0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer;box-shadow:none;text-align:inherit}
.story-word:hover{background:var(--sky)}.story-word:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(max-width:700px){.word-gap{flex-basis:14px}.answer-reveal{padding:18px}.book-spread figure #book-play{margin-top:12px}}