/* LOCKED: preserve the supplied storybook layout. See AGENTS.md. */

    :root {
      --paper: #f5ecde;
      --paper-shadow: #dfcfb8;
      --ink: #32271d;
      --muted: #7e6b58;
      --line: #cfbea5;
      --brand: #4db969;
      --brand-deep: #2b6d40;
      --display-serif: "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
      --reading-serif: Georgia, "Times New Roman", "Palatino Linotype", "Book Antiqua", serif;
      --label-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang HK", "PingFang TC", "Microsoft JhengHei", sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      overflow: hidden;
      background:
        radial-gradient(circle at 15% 20%, rgba(77, 185, 105, 0.12), transparent 22%),
        radial-gradient(circle at 80% 15%, rgba(217, 168, 78, 0.14), transparent 20%),
        linear-gradient(180deg, #ede2cf 0%, #f6efe3 45%, #efe4d0 100%);
      color: var(--ink);
      font-family: var(--label-sans);
    }

    .site-logo {
      display: block;
      width: min(80vw, 265px);
      height: 56px;
      margin: 0 auto 12px;
      object-fit: contain;
    }

    .title-bar {
      margin-bottom: 14px;
      color: var(--muted);
      font-family: var(--reading-serif);
      font-size: 16px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      text-align: center;
    }

    .book-wrapper {
      position: relative;
      display: flex;
      width: min(92vw, 1120px);
      height: min(74vh, 560px);
      box-shadow:
        0 18px 48px rgba(58, 40, 18, 0.18),
        0 6px 16px rgba(58, 40, 18, 0.12);
    }

    .book-wrapper::after {
      content: "";
      position: absolute;
      top: 8%;
      bottom: 8%;
      left: 60%;
      width: 3px;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(153, 129, 102, 0.16) 12%,
        rgba(153, 129, 102, 0.28) 50%,
        rgba(153, 129, 102, 0.16) 88%,
        transparent 100%
      );
      z-index: 2;
      pointer-events: none;
    }

    .illustration-panel {
      position: relative;
      flex: 3;
      overflow: hidden;
      border-radius: 6px 0 0 6px;
      background: #34291f;
    }

    .illustration-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, transparent 58%, rgba(20, 12, 6, 0.18) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .page-image {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.7s ease;
    }

    .page-image.active { opacity: 1; }

    .page-image img,
    .page-image video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .caption-panel {
      position: relative;
      flex: 2;
      overflow: hidden;
      border-radius: 0 6px 6px 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.46)),
        linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 100%);
      box-shadow: inset 0 0 0 1px rgba(163, 136, 102, 0.12);
    }

    .caption-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 36px,
        rgba(173, 154, 132, 0.06) 36px,
        rgba(173, 154, 132, 0.06) 37px
      );
      pointer-events: none;
    }

    .caption-page {
      position: absolute;
      inset: 0;
      padding: 42px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.7s ease;
      font-family: var(--reading-serif);
      line-height: 1.9;
      color: var(--story-ink);
      z-index: 1;
    }

    .caption-page.active {
      opacity: 1;
      position: relative;
    }

    .cover-kicker {
      color: var(--brand-deep);
      font-family: var(--label-sans);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .cover-title {
      font-family: var(--display-serif);
      font-size: clamp(30px, 3.8vw, 44px);
      line-height: 1.18;
      margin-bottom: 14px;
    }

    .cover-divider {
      width: 42px;
      height: 2px;
      border-radius: 999px;
      background: var(--line);
      margin: 6px 0 18px;
    }

    .caption-page p {
      font-size: clamp(17px, 1.7vw, 22px);
    }

    .caption-page .cover-subtitle {
      font-size: clamp(13px, 1.1vw, 15px);
    }

    .caption-page p + p {
      margin-top: 14px;
    }

    .caption-page .quote {
      margin-top: 18px;
      color: var(--muted);
      font-style: italic;
      font-size: clamp(15px, 1.5vw, 18px);
    }

    .page-label {
      color: var(--brand-deep);
      font-family: var(--label-sans);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    .nav-btn,
    .audio-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1.5px solid var(--line);
      background: rgba(255, 250, 242, 0.86);
      color: var(--muted);
      font: inherit;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .audio-btn svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .audio-btn[hidden],
    .audio-btn svg[hidden] { display: none; }

    .nav-btn:hover:not(:disabled),
    .audio-btn:hover {
      transform: scale(1.05);
      background: var(--brand-deep);
      color: #fffaf2;
      border-color: var(--brand-deep);
    }

    .nav-btn:disabled {
      opacity: 0.28;
      cursor: default;
    }

    .page-indicator {
      min-width: 84px;
      text-align: center;
      color: var(--muted);
      font-family: var(--reading-serif);
      font-size: 15px;
    }

    .dots {
      display: flex;
      gap: 7px;
      justify-content: center;
      width: 100%;
    }

    .dot {
      width: 7px;
      height: 7px;
      border: 0;
      border-radius: 50%;
      background: #d3c3ab;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .dot.active {
      background: var(--brand-deep);
      transform: scale(1.35);
    }

    .credit {
      margin-top: 14px;
      color: rgba(50, 39, 29, 0.62);
      font-size: 13px;
      text-align: center;
    }

    .usage-notice {
      width: min(92vw, 1120px);
      margin-top: 6px;
      line-height: 1.6;
    }

    @media (max-width: 760px) {
      body { overflow: auto; justify-content: flex-start; }

      .book-wrapper {
        flex-direction: column;
        width: 95vw;
        height: auto;
      }

      .book-wrapper::after { display: none; }

      .illustration-panel {
        flex: none;
        aspect-ratio: 4 / 3;
        border-radius: 6px 6px 0 0;
      }

      .caption-panel {
        flex: none;
        min-height: 300px;
        border-radius: 0 0 6px 6px;
      }

      .caption-page {
        padding: 26px 22px;
      }
    }
  
/* Template behavior and media fitting: teacher-maintained. */
[hidden] { display: none !important; }
.page-image:not(.active), .caption-page:not(.active) { visibility: hidden; pointer-events: none; }
.caption-page.active { min-height: 100%; }
.caption-panel { overflow-y: auto; }
.site-logo { object-fit: contain; }
.page-image img, .page-image video { object-fit: contain; }
.media-placeholder { display: grid; place-items: center; height: 100%; padding: 24px; color: #fffaf2; text-align: center; }
body { overflow-y: auto; }