:root {
      --bg: #f5efe5;
      --panel: rgba(255, 250, 242, 0.86);
      --panel-solid: #fffaf3;
      --ink: #211b17;
      --muted: #6f6258;
      --accent: #b65a3d;
      --accent-deep: #8c3f29;
      --line: rgba(52, 36, 25, 0.12);
      --shadow: 0 22px 60px rgba(74, 44, 27, 0.12);
      --radius: 24px;
      --max: 1220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(215, 155, 97, 0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(47, 106, 93, 0.16), transparent 28%),
        linear-gradient(180deg, #f7f1e7 0%, #f1e9dd 100%);
      line-height: 1.7;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    h1, h2, h3, h4 { font-family: Georgia, "Songti SC", "STSong", serif; margin: 0 0 0.45rem; line-height: 1.18; }
    p { margin: 0 0 1rem; color: var(--muted); }

    .site-shell { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; padding: 24px 0 48px; }
    .site-header {
      position: sticky;
      top: 12px;
      z-index: 20;
      display: flex;
      gap: 16px;
      justify-content: space-between;
      align-items: center;
      padding: 18px 22px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 248, 239, 0.8);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      margin-bottom: 28px;
    }
    .brand { display: inline-block; font-weight: 700; font-size: 1.05rem; }
    .brand-sub { margin: 4px 0 0; font-size: 0.92rem; max-width: 660px; }
    .site-nav { display: flex; flex-wrap: wrap; gap: 10px; }
    .nav-link {
      padding: 9px 14px;
      border-radius: 999px;
      color: var(--muted);
      border: 1px solid transparent;
      transition: transform 160ms ease, background 160ms ease;
    }
    .nav-link:hover, .nav-link.is-active {
      background: rgba(182, 90, 61, 0.12);
      border-color: rgba(182, 90, 61, 0.16);
      color: var(--accent-deep);
      transform: translateY(-1px);
    }

    .hero-grid, .detail-grid {
      display: grid;
      gap: 28px;
      margin-bottom: 28px;
    }
    .hero-grid { grid-template-columns: 1.25fr 0.75fr; align-items: center; }
    .hero-copy, .hero-visual, .section-block, .detail-main, .viewer-panel, .table-shell {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .hero-copy, .hero-visual, .section-block, .detail-main, .table-shell { padding: 28px; }
    .hero-cover {
      width: min(320px, 100%);
      margin: 0 auto;
      border-radius: 18px;
      box-shadow: 0 26px 60px rgba(33, 27, 23, 0.18);
    }
    .eyebrow {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(182, 90, 61, 0.12);
      color: var(--accent-deep);
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      margin-bottom: 12px;
    }
    .hero-text { font-size: 1.08rem; }
    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }
    .metric {
      padding: 16px;
      border-radius: 18px;
      background: var(--panel-solid);
      border: 1px solid var(--line);
    }
    .metric strong { display: block; font-size: 1.8rem; font-family: Georgia, serif; color: var(--accent-deep); }
    .metric span { font-size: 0.92rem; color: var(--muted); }

    .section-block { margin-bottom: 26px; }
    .section-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 18px; }
    .section-head p { max-width: 720px; margin-bottom: 0; }
    .note-grid, .track-grid, .card-grid, .glossary-grid, .mini-grid, .deep-grid {
      display: grid;
      gap: 16px;
    }
    .note-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .glossary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .note-card, .track-card, .glossary-chip, .source-item-deep, .route-item, .concept-summary-card {
      padding: 18px;
      border-radius: 18px;
      background: var(--panel-solid);
      border: 1px solid var(--line);
    }
    .glossary-chip span { display: block; color: var(--accent-deep); font-size: 0.9rem; margin-top: 4px; }

    .chapter-card, .principle-card, .plate-card {
      display: grid;
      gap: 14px;
      padding: 16px;
      border-radius: 22px;
      background: var(--panel-solid);
      border: 1px solid var(--line);
      box-shadow: 0 14px 34px rgba(33, 27, 23, 0.08);
      transition: transform 180ms ease, box-shadow 180ms ease;
      min-height: 100%;
    }
    .chapter-card:hover, .principle-card:hover, .plate-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(33, 27, 23, 0.12); }
    .card-media-frame {
      aspect-ratio: 1.4 / 1;
      border-radius: 18px;
      background: #f3eee6;
      padding: 12px;
      border: 1px solid rgba(52, 36, 25, 0.08);
    }
    .card-media {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 12px;
      background: white;
    }
    .card-copy p { margin-bottom: 0; }

    .detail-hero {
      padding: 26px 28px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(182, 90, 61, 0.12), rgba(47, 106, 93, 0.09));
      border: 1px solid var(--line);
      margin-bottom: 24px;
    }
    .detail-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .detail-main { padding: 24px; }
    .detail-side { position: sticky; top: 114px; }
    .detail-section + .detail-section {
      border-top: 1px solid var(--line);
      margin-top: 20px;
      padding-top: 20px;
    }
    .bullet-list { margin: 0; padding-left: 1.2rem; color: var(--muted); }
    .source-problem, .source-evidence { color: var(--ink); }
    .route-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: start;
      gap: 14px;
      margin-bottom: 12px;
    }
    .route-item span {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(182, 90, 61, 0.14);
      color: var(--accent-deep);
      font-weight: 700;
    }

    .viewer-panel {
      padding: 18px;
      position: sticky;
      top: 114px;
    }
    .viewer-main, .plate-full {
      width: 100%;
      border-radius: 18px;
      background: white;
      border: 1px solid var(--line);
      box-shadow: inset 0 0 0 1px rgba(52, 36, 25, 0.04);
    }
    .viewer-thumbs {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .viewer-thumb {
      border: 1px solid var(--line);
      background: var(--panel-solid);
      border-radius: 16px;
      padding: 10px;
      display: grid;
      gap: 8px;
      text-align: left;
      color: var(--ink);
      cursor: pointer;
    }
    .viewer-thumb img {
      aspect-ratio: 1.5 / 1;
      object-fit: contain;
      border-radius: 12px;
      background: white;
    }

    .answer-toggle {
      border: 0;
      background: rgba(182, 90, 61, 0.14);
      color: var(--accent-deep);
      padding: 11px 15px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }
    .answer-panel {
      display: none;
      margin-top: 14px;
      padding: 16px 18px;
      border-radius: 18px;
      background: var(--panel-solid);
      border: 1px solid var(--line);
    }
    .answer-panel.is-open { display: block; }

    .plate-path-group + .plate-path-group { margin-top: 18px; }
    .group-head { margin-bottom: 12px; }
    .group-head p { margin-bottom: 0; }
    .path-nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .path-card {
      padding: 18px;
      border-radius: 18px;
      background: var(--panel-solid);
      border: 1px solid var(--line);
      min-height: 100%;
    }
    .path-card span { display: block; color: var(--accent-deep); font-size: 0.86rem; margin-bottom: 6px; }
    .path-card strong { font-family: Georgia, serif; }

    .table-shell { overflow: auto; }
    .glossary-table { width: 100%; border-collapse: collapse; min-width: 760px; }
    .glossary-table th, .glossary-table td {
      text-align: left;
      padding: 14px 12px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }
    .glossary-table th { color: var(--accent-deep); }

    .site-footer {
      padding: 22px 8px 0;
      color: var(--muted);
      font-size: 0.92rem;
      text-align: center;
    }

    @media (max-width: 1080px) {
      .hero-grid, .detail-grid { grid-template-columns: 1fr; }
      .detail-side { position: static; }
      .site-header { border-radius: 26px; align-items: start; flex-direction: column; }
      .note-grid, .track-grid, .card-grid, .glossary-grid, .mini-grid, .deep-grid, .path-nav { grid-template-columns: 1fr; }
      .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 700px) {
      .site-shell { width: min(var(--max), calc(100% - 20px)); padding-top: 14px; }
      .hero-copy, .hero-visual, .section-block, .detail-main, .table-shell { padding: 20px; }
      .metric-row { grid-template-columns: 1fr 1fr; }
      .brand-sub { font-size: 0.88rem; }
      .detail-hero { padding: 20px; }
    }