/* ── Variables ── */
    :root {
      --ink:      #0e0d0b;
      --paper:    #f5f0e8;
      --cream:    #ede7d9;
      --sepia:    #b89a6a;
      --rust:     #b94a2c;
      --shadow:   rgba(14,13,11,.12);
      --serif:    'Playfair Display', Georgia, serif;
      --mono:     'DM Mono', 'Courier New', monospace;
    }

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

    html { scroll-behavior: smooth; }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 14px;
      min-height: 100vh;
      /* Subtle paper texture */
      background-image:
        radial-gradient(ellipse at 20% 10%, rgba(184,154,106,.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(185,74,44,.08) 0%, transparent 50%);
    }

    /* ── Layout ── */
    .page {
      max-width: 820px;
      margin: 0 auto;
      padding: 60px 24px 100px;
    }

    /* ── Header ── */
    header {
      border-left: 3px solid var(--rust);
      padding-left: 20px;
      margin-bottom: 56px;
      animation: slideIn .5s ease both;
    }
    header .eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sepia);
      margin-bottom: 8px;
    }
    header h1 {
      font-family: var(--serif);
      font-size: clamp(2rem, 5vw, 3.2rem);
      line-height: 1.1;
      font-weight: 700;
    }
    header h1 em {
      font-style: italic;
      color: var(--rust);
    }
    header p {
      margin-top: 10px;
      color: #6b6355;
      font-size: 13px;
      line-height: 1.6;
    }

    /* ── Section blocks ── */
    .section {
      margin-bottom: 44px;
      animation: fadeUp .4s ease both;
    }
    .section:nth-child(2) { animation-delay: .05s; }
    .section:nth-child(3) { animation-delay: .10s; }
    .section:nth-child(4) { animation-delay: .15s; }
    .section:nth-child(5) { animation-delay: .20s; }
    .section:nth-child(6) { animation-delay: .25s; }
    .section:nth-child(7) { animation-delay: .30s; }

    .section-title {
      font-family: var(--serif);
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .section-title .num {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--sepia);
      border: 1px solid var(--sepia);
      padding: 1px 6px;
      letter-spacing: .1em;
    }

    /* ── Inputs ── */
    label {
      display: block;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sepia);
      margin-bottom: 6px;
      margin-top: 14px;
    }
    label:first-of-type { margin-top: 0; }

    input[type="text"],
    textarea,
    select {
      width: 100%;
      background: var(--cream);
      border: 1px solid #d4c9b4;
      border-radius: 0;
      color: var(--ink);
      font-family: var(--mono);
      font-size: 13px;
      padding: 10px 14px;
      transition: border-color .2s, box-shadow .2s;
      outline: none;
      resize: vertical;
    }
    input[type="text"]:focus,
    textarea:focus,
    select:focus {
      border-color: var(--rust);
      box-shadow: 3px 3px 0 rgba(185,74,44,.12);
    }
    textarea { min-height: 80px; line-height: 1.55; }

    .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 540px) { .row2 { grid-template-columns: 1fr; } }

    /* ── Divider ── */
    hr {
      border: none;
      border-top: 1px dashed #c9bcaa;
      margin: 40px 0;
    }

    /* ── Characters ── */
    #characters-list { display: flex; flex-direction: column; gap: 20px; }

    .character-card {
      background: var(--cream);
      border: 1px solid #d4c9b4;
      border-left: 3px solid var(--sepia);
      padding: 18px 18px 14px;
      position: relative;
      animation: fadeUp .25s ease both;
    }
    .character-card .card-title {
      font-family: var(--serif);
      font-style: italic;
      font-size: .95rem;
      color: var(--sepia);
      margin-bottom: 12px;
    }
    .character-card label { margin-top: 10px; }
    .character-card label:first-of-type { margin-top: 0; }

    .btn-remove {
      position: absolute;
      top: 12px; right: 14px;
      background: none;
      border: 1px solid #d4c9b4;
      color: #999;
      font-family: var(--mono);
      font-size: 11px;
      padding: 2px 8px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
    }
    .btn-remove:hover { border-color: var(--rust); color: var(--rust); }

    /* ── Scenes ── */
    #scenes-list { display: flex; flex-direction: column; gap: 10px; }

    .scene-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      animation: fadeUp .2s ease both;
    }
    .scene-row textarea { min-height: 60px; flex: 1; }
    .scene-index {
      font-family: var(--serif);
      font-style: italic;
      color: var(--sepia);
      font-size: 1.1rem;
      padding-top: 10px;
      min-width: 24px;
      text-align: right;
    }
    .btn-remove-scene {
      background: none;
      border: 1px solid #d4c9b4;
      color: #aaa;
      font-family: var(--mono);
      font-size: 16px;
      width: 32px;
      height: 32px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      margin-top: 8px;
      transition: border-color .2s, color .2s;
      flex-shrink: 0;
    }
    .btn-remove-scene:hover { border-color: var(--rust); color: var(--rust); }

    /* ── Add buttons ── */
    .btn-add {
      margin-top: 12px;
      background: none;
      border: 1px dashed var(--sepia);
      color: var(--sepia);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .1em;
      padding: 8px 18px;
      cursor: pointer;
      transition: border-color .2s, color .2s, background .2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-add:hover {
      border-color: var(--rust);
      color: var(--rust);
      background: rgba(185,74,44,.04);
    }

    /* ── Submit ── */
    .submit-area { margin-top: 48px; text-align: center; }
    .btn-submit {
      background: var(--ink);
      color: var(--paper);
      border: none;
      font-family: var(--serif);
      font-size: 1.1rem;
      font-style: italic;
      padding: 16px 52px;
      cursor: pointer;
      transition: background .2s, transform .15s, box-shadow .2s;
      box-shadow: 4px 4px 0 var(--sepia);
      letter-spacing: .02em;
    }
    .btn-submit:hover {
      background: var(--rust);
      box-shadow: 6px 6px 0 var(--ink);
      transform: translate(-2px, -2px);
    }
    .btn-submit:active { transform: translate(0,0); box-shadow: 2px 2px 0 var(--ink); }
    .btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

    /* ── Progress overlay ── */
    #progress-panel {
      display: none;
      margin-top: 40px;
      border: 1px solid #d4c9b4;
      border-left: 3px solid var(--rust);
      background: var(--cream);
      padding: 24px;
    }
    #progress-panel h3 {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1rem;
      margin-bottom: 16px;
      color: var(--rust);
    }
    #log-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 340px;
      overflow-y: auto;
    }
    #log-list li {
      font-size: 12px;
      line-height: 1.5;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    #log-list li .icon { flex-shrink: 0; }
    #log-list li.done-item { color: #4a7c59; }
    #log-list li.error-item { color: var(--rust); }

    /* ── Result panel ── */
    #result-panel {
      display: none;
      margin-top: 32px;
    }
    #result-panel h2 {
      font-family: var(--serif);
      font-size: 1.6rem;
      margin-bottom: 24px;
      border-left: 3px solid var(--rust);
      padding-left: 14px;
    }
    .chapter-block {
      margin-bottom: 36px;
      animation: fadeUp .4s ease both;
    }
    .chapter-block h3 {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1.05rem;
      color: var(--sepia);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .chapter-block h3::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 1px;
      background: var(--sepia);
    }
    .chapter-text {
      font-family: var(--serif);
      font-size: .95rem;
      line-height: 1.85;
      color: #2a2520;
      white-space: pre-wrap;
      background: var(--cream);
      padding: 20px 24px;
      border: 1px solid #d4c9b4;
    }

    .btn-download {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 32px;
      background: none;
      border: 1px solid var(--ink);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .1em;
      padding: 10px 22px;
      cursor: pointer;
      text-decoration: none;
      transition: background .2s, color .2s;
    }
    .btn-download:hover { background: var(--ink); color: var(--paper); }

    /* ── Animations ── */
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-16px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Spinner ── */
    .spinner {
      display: inline-block;
      width: 12px; height: 12px;
      border: 2px solid var(--sepia);
      border-top-color: var(--rust);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }