html, body { max-width: 100%; overflow-x: hidden; }
body { color: #1f2937; -webkit-text-fill-color: currentColor; }
body, button, input, select, textarea { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
.main, main, .main-content, .content-main, .article-content, .course-content, article, section { min-width: 0; }
.main-content, .content-main, .article-content, .course-content, article { color: #1f2937; }
h1, h2, h3, h4, h5, h6 { color: #102a43; -webkit-text-fill-color: currentColor; overflow-wrap: anywhere; }
p, li, td, th, dd, dt, blockquote, label, summary { color: #1f2937; -webkit-text-fill-color: currentColor; overflow-wrap: anywhere; }
a { color: #1d4ed8; text-decoration-color: currentColor; overflow-wrap: anywhere; }
.sidebar a, .chapter-list a, nav a { -webkit-text-fill-color: currentColor; }
.active, .current, .selected, .chapter-list .active, .sidebar .active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.double-border-wrapper, .course-wrapper, .container, .page, .main-wrap { width: min(100%, 1300px); max-width: calc(100vw - 32px); min-width: 0; margin-left: auto; margin-right: auto; }
.app { flex-wrap: nowrap; align-items: stretch; }
.app > .sidebar, .app > aside.sidebar, .sidebar { flex: 0 0 clamp(220px, 20vw, 280px); min-width: 220px; max-width: 280px; }
.sidebar nav, .sidebar .chapter-list, aside .chapter-list { flex: initial; width: 100%; min-width: 0; max-width: 100%; }
.inner-card, .chapter-card, .card, .chapter-content, .card-content { min-width: 0; }
.catalog-grid, .course-list, .chapter-grid, .grid, .cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.course-card a, .course-link, .chapter-link, .card-link, .chapter-card a, .card a { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
.nav-links, .footer-nav, .nav-footer, .bottom-nav, .chapter-nav, .page-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: nowrap; width: 100%; clear: both; }
.nav-links a, .footer-nav a, .nav-footer a, .bottom-nav a, .chapter-nav a, .page-nav a { min-width: 0; text-align: center; white-space: normal; overflow-wrap: anywhere; }
svg, img, video, canvas, table, pre { max-width: 100%; }
table { color: #1f2937; background: #ffffff; }
th { color: #111827; }
pre { background: #1f2937; color: #f8fafc; overflow-x: auto; }
pre, pre * { -webkit-text-fill-color: currentColor; }
pre code, pre span, pre p { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; }
code:not(pre code) { color: #7c2d12; -webkit-text-fill-color: currentColor; }
button, .btn, .button { -webkit-text-fill-color: currentColor; }
@media (max-width: 820px) {
  body { padding-left: 12px; padding-right: 12px; }
  .app { flex-direction: column; flex-wrap: nowrap; }
  .app > .sidebar, .app > aside.sidebar, .sidebar { width: 100%; max-width: none; min-width: 0; flex-basis: auto; }
  .double-border-wrapper, .course-wrapper, .container, .page, .main-wrap { max-width: 100%; }
  .nav-links, .footer-nav, .nav-footer, .bottom-nav, .chapter-nav, .page-nav { flex-wrap: wrap; }
  .nav-links a, .footer-nav a, .nav-footer a, .bottom-nav a, .chapter-nav a, .page-nav a { flex: 1 1 100%; }
}