* { box-sizing: border-box; }
    html { font-size: 16px; }
    body {
      margin: 0;
      background: #f8fbff;
      color: #0f172a;
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      line-height: 1.75;
    }
    a { color: inherit; text-decoration: none; }
    .course-shell {
      width: min(1400px, 100%);
      margin: 24px auto;
      display: flex;
      align-items: stretch;
      background: #fffefa;
      border: 2px solid #f59e0b;
      border-radius: 20px;
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
      overflow: visible;
    }
    .chapter-sidebar {
      flex: 0 0 286px;
      width: 286px;
      padding: 28px 20px;
      background: #fffaf0;
      border-right: 1px solid rgba(245, 158, 11, 0.35);
      overflow: visible;
    }
    .sidebar-title {
      margin: 0 0 20px;
      padding-left: 12px;
      border-left: 6px solid #f59e0b;
      color: #2563eb;
      font-size: 24px;
      font-weight: 800;
    }
    .chapter-list { display: grid; gap: 8px; }
    .chapter-link {
      display: block;
      padding: 11px 13px;
      border-radius: 14px;
      color: #0f172a;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid transparent;
    }
    .chapter-link span {
      display: block;
      color: #2563eb;
      font-size: 14px;
      font-weight: 700;
    }
    .chapter-link strong {
      display: block;
      margin-top: 2px;
      font-size: 15px;
      line-height: 1.35;
      font-weight: 650;
      overflow-wrap: anywhere;
    }
    .chapter-link.active {
      background: #e0f2fe;
      border-color: rgba(37, 99, 235, 0.25);
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
    }
    .main-content {
      flex: 1 1 auto;
      min-width: 0;
      padding: 34px 44px 30px;
      background: #fffefa;
    }
    .course-title {
      margin: 0;
      color: #0f172a;
      font-size: 32px;
      line-height: 1.25;
      font-weight: 850;
    }
    .chapter-title {
      margin: 12px 0 24px;
      padding-bottom: 18px;
      color: #2563eb;
      font-size: 25px;
      line-height: 1.35;
      border-bottom: 2px solid rgba(245, 158, 11, 0.35);
    }
    .chapter-body {
      max-width: 100%;
      font-size: 18px;
      line-height: 1.85;
      overflow-wrap: anywhere;
    }
    .chapter-body h2 {
      margin: 32px 0 16px;
      padding-left: 14px;
      border-left: 6px solid #f59e0b;
      color: #2563eb;
      font-size: 30px;
      line-height: 1.28;
    }
    .chapter-body h3 {
      margin: 26px 0 12px;
      color: #0f172a;
      font-size: 24px;
      line-height: 1.32;
    }
    .chapter-body p { margin: 12px 0; }
    .chapter-body ul, .chapter-body ol { padding-left: 1.4em; }
    .chapter-body li { margin: 8px 0; }
    .chapter-body table {
      width: 100%;
      border-collapse: collapse;
      margin: 18px 0;
      background: #ffffff;
    }
    .chapter-body th, .chapter-body td {
      border: 1px solid rgba(15, 23, 42, 0.16);
      padding: 10px 12px;
      vertical-align: top;
    }
    .chapter-body th { background: #e0f2fe; color: #0f172a; }
    .chapter-body pre {
      max-width: 100%;
      overflow-x: auto;
      padding: 16px;
      border-radius: 12px;
      background: #0f172a;
      color: #e5e7eb;
      white-space: pre;
    }
    .chapter-body code { font-family: Consolas, "Courier New", monospace; }
    .highlight, .highlight-box, .tip, .warning {
      margin: 18px 0;
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid rgba(245, 158, 11, 0.35);
      background: rgba(255, 247, 237, 0.82);
    }
    .tip { border-color: rgba(37, 99, 235, 0.24); background: #e0f2fe; }
    .warning { border-color: rgba(220, 38, 38, 0.28); background: #fff1f2; }
    .svg-card, .svg-container {
      margin: 22px 0;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: #ffffff;
      overflow: visible;
    }
    .chapter-body svg {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    .footer-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 34px;
      padding-top: 24px;
      border-top: 1px solid rgba(15, 23, 42, 0.16);
    }
    .nav-button {
      display: block;
      text-align: center;
      padding: 12px 16px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #2563eb;
      font-weight: 750;
      white-space: normal;
    }
    .nav-button.disabled { color: #94a3b8; pointer-events: none; }
    .page-footer {
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px dashed rgba(15, 23, 42, 0.16);
      color: #64748b;
      text-align: center;
      font-size: 16px;
    }
    @media (max-width: 860px) {
      .course-shell {
        margin: 0 auto;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        flex-direction: column;
      }
      .chapter-sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(245, 158, 11, 0.35);
      }
      .chapter-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
      .main-content { padding: 24px 18px 26px; }
      .course-title { font-size: 25px; }
      .chapter-title { font-size: 21px; }
      .chapter-body { font-size: 16px; }
      .footer-nav { grid-template-columns: 1fr; }
    }