body {
      background: #f7f1e7;
      color: #2f241c;
    }

    .story-wrap {
      max-width: 820px;
    }

    .story-card {
      background: #fffaf2;
      border: 1px solid #ead9bf;
      border-radius: 1.5rem;
      box-shadow: 0 0.75rem 2rem rgba(75, 50, 25, 0.08);
    }

    .story-badge {
      background: #efe1c8;
      color: #4a3322;
    }

    .parent-note,
    .scene-copy,
    .closing-note {
      background: #f4ead8;
      border-radius: 1rem;
    }

    .scene-image {
      width: 100%;
      border-radius: 1.25rem;
      border: 1px solid #ead9bf;
      background: #f1e5d2;
      display: block;
    }

    .progress-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ddc8a9;
      display: inline-block;
    }

    .progress-dot.active {
      background: #7a4e2d;
    }

    .btn-story {
      background: #7a4e2d;
      border-color: #7a4e2d;
      color: #fff;
    }

    .btn-story:hover,
    .btn-story:focus {
      background: #654025;
      border-color: #654025;
      color: #fff;
    }

    .btn-story-outline {
      background: #ead9bf;
      border-color: #ead9bf;
      color: #3b291d;
    }

    .btn-story-outline:hover,
    .btn-story-outline:focus {
      background: #ddc7a5;
      border-color: #ddc7a5;
      color: #3b291d;
    }

    .quote-mark {
      border-left: 4px solid #7a4e2d;
    }

    @media (max-width: 576px) {
      .story-card {
        border-radius: 1.15rem;
      }
    }