:root {
      color-scheme: light;
      --bg: #f8f4ef;
      --panel: #fffaf4;
      --text: #241b17;
      --muted: #6f625c;
      --line: #ead9cb;
      --accent: #d97706;
      --accent-2: #8b5cf6;
      --shadow: 0 20px 50px rgba(64, 35, 18, 0.12);
    }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(217, 119, 6, 0.16), transparent 30%),
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.14), transparent 26%),
        linear-gradient(180deg, #fffdf9 0%, var(--bg) 100%);
      line-height: 1.55;
    }
    .wrap {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      padding: 28px 0 44px;
    }
    .hero {
      display: grid;
      gap: 18px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: rgba(255, 250, 244, 0.84);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow);
    }
    .eyebrow {
      display: inline-flex;
      width: fit-content;
      gap: 8px;
      align-items: center;
      padding: 7px 12px;
      border-radius: 999px;
      background: #fff0df;
      color: #9a5300;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    h1 {
      margin: 0;
      font-size: clamp(2rem, 5vw, 4rem);
      line-height: 1.02;
      letter-spacing: -0.03em;
    }
    .lead {
      margin: 0;
      max-width: 72ch;
      color: var(--muted);
      font-size: 1.05rem;
    }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid var(--line);
      text-decoration: none;
      color: var(--text);
      background: #fff;
      font-weight: 700;
    }
    .btn.primary {
      background: linear-gradient(135deg, var(--accent), #f59e0b);
      border-color: transparent;
      color: #fff;
    }
    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 0.95rem;
    }
    .meta span {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.7);
    }
    .layout {
      display: grid;
      gap: 18px;
      margin-top: 18px;
    }
    .reader {
      display: grid;
      gap: 14px;
    }
    .panel {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--panel);
      box-shadow: 0 14px 34px rgba(64, 35, 18, 0.08);
    }
    .panel-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #fff7ef;
    }
    .panel-top strong {
      font-size: 0.95rem;
    }
    .panel-top small {
      color: var(--muted);
    }
    .panel-body {
      padding: 18px;
      display: grid;
      gap: 14px;
    }
    .comic-figure {
      margin: 0;
      padding: 14px;
      border-radius: 22px;
      border: 2px solid #f1dcc6;
      background: linear-gradient(180deg, #fffdfb, #fff4e8);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    .comic-figure img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
      background: #fff;
    }
    .comic-figure figcaption {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.92rem;
    }
    .caption-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }
    .caption-row strong {
      font-size: 1rem;
    }
    .strip-notes {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    .strip-note {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.72);
      border: 1px solid var(--line);
    }
    .strip-note h3 {
      margin: 0 0 6px;
      font-size: 0.98rem;
    }
    .strip-note p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
    }
    .notes {
      display: grid;
      gap: 12px;
    }
    .note {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,.78);
    }
    .note h3 {
      margin: 0 0 6px;
      font-size: 1rem;
    }
    .note p {
      margin: 0;
      color: var(--muted);
    }
    .source-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(135deg, #fff, #f8f0ff);
    }
    .source-card p { margin: 0 0 10px; color: var(--muted); }
    .source-card a { color: var(--accent-2); }
    footer {
      margin-top: 16px;
      color: var(--muted);
      font-size: 0.92rem;
    }
    @media (min-width: 860px) {
      .layout {
        grid-template-columns: 1.4fr .9fr;
        align-items: start;
      }
      .strip-notes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }