:root {
  color-scheme: light;
  --bg: #f5f7fb; --panel: #fff; --text: #172033; --muted: #667085;
  --line: #e5e9f2; --accent: #6857e8; --accent-soft: #eeeafd;
  --code: #202538; --shadow: 0 10px 30px rgba(34, 40, 70, .07);
}
[data-theme="dark"] { color-scheme: dark; --bg: #111521; --panel: #191e2c; --text: #e8ebf5; --muted: #a4abc0; --line: #2d3548; --accent: #a99cff; --accent-soft: #2b2850; --code: #0d1019; --shadow: 0 10px 30px rgba(0,0,0,.2); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.75 Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.topbar { height: 68px; padding: 0 28px; display: flex; align-items: center; gap: 28px; position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--panel) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; gap: 10px; align-items: center; min-width: 205px; }.brand div { display: grid; line-height: 1.25; }.brand strong { font-size: 17px; }.brand span:last-child { color: var(--muted); font-size: 12px; }.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: white; font-weight: 800; }
.search { margin: auto; width: min(430px, 50vw); display: flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--bg); }.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }.icon-button { border: 0; border-radius: 8px; padding: 7px 11px; background: var(--accent-soft); color: var(--text); cursor: pointer; font-size: 17px; }
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 68px); }.sidebar { padding: 28px 18px; border-right: 1px solid var(--line); background: var(--panel); }.sidebar-heading { display: flex; justify-content: space-between; padding: 0 10px 12px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.sidebar-heading span:last-child { font-weight: 400; }.sidebar nav { display: grid; gap: 3px; }.chapter { display: block; padding: 8px 10px; border-radius: 7px; color: var(--muted); text-decoration: none; line-height: 1.45; }.chapter:hover, .chapter.active { color: var(--accent); background: var(--accent-soft); }.chapter-number { display: inline-block; width: 28px; color: inherit; font-variant-numeric: tabular-nums; }.sidebar-hint { margin: 30px 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; }
.main { width: min(950px, 100%); padding: 52px clamp(22px, 6vw, 78px) 90px; margin: auto; }.status { color: var(--muted); text-align: center; padding: 80px 20px; }.status.error { color: #d45454; }.article { animation: appear .2s ease-out; }.article h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); line-height: 1.25; letter-spacing: -.03em; }.article h2 { margin: 48px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 25px; }.article h3 { margin-top: 30px; font-size: 19px; }.article p, .article ul, .article ol { color: var(--text); }.article a { color: var(--accent); }.article blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--muted); }.article code { padding: 2px 5px; border-radius: 4px; background: var(--accent-soft); font-size: .9em; }.article pre { margin: 20px 0; padding: 18px; overflow: auto; border-radius: 10px; background: var(--code); color: #e8ecfa; box-shadow: var(--shadow); }.article pre code { padding: 0; background: transparent; color: inherit; }.article table { width: 100%; border-collapse: collapse; margin: 20px 0; }.article th, .article td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; }.article th { background: var(--accent-soft); }.katex-display { overflow-x: auto; overflow-y: hidden; padding: 8px 0; }.article img { max-width: 100%; }
@keyframes appear { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .topbar { padding: 0 14px; gap: 12px; }.brand { min-width: auto; }.brand div { display: none; }.search { width: auto; flex: 1; }.layout { display: block; }.sidebar { position: sticky; top: 68px; z-index: 4; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }.sidebar nav { display: flex; overflow-x: auto; gap: 4px; }.chapter { white-space: nowrap; padding: 5px 9px; font-size: 12px; }.sidebar-heading, .sidebar-hint { display: none; }.main { padding: 30px 18px 60px; } }