/* Hallmark · macrostructure: Long Document · theme: Warm Study · anchor hue: 30°
 * tone: editorial · genre: technical-educational
 * Pre-emit critique: P5 H4 E5 S5 R5 V5
 */
:root {
  --color-paper: oklch(97.8% 0.004 70);
  --color-paper-2: oklch(95% 0.008 65);
  --color-paper-3: oklch(90% 0.012 60);
  --color-text: oklch(15% 0.012 70);
  --color-text-2: oklch(45% 0.015 70);
  --color-text-3: oklch(60% 0.01 70);
  --color-accent: oklch(50% 0.16 30);
  --color-accent-2: oklch(42% 0.12 260);
  --color-code-bg: oklch(94% 0.006 250);
  --color-code-border: oklch(87% 0.01 250);
  --color-line: oklch(82% 0.008 70);
  --color-highlight: oklch(92% 0.08 85);
  --font-display: 'Georgia', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-display: 2.75rem;
  --text-display-s: 2rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --radius-sm: 6px;
  --radius-md: 12px;
  --measure: 65ch;
  --rule: 1px solid var(--color-line);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-paper); line-height: 1.7; overflow-x: clip; }
.nav { position: sticky; top: 0; z-index: 50; background: oklch(from var(--color-paper) 0.978 0.004 70 / 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: var(--rule); padding: var(--space-sm) var(--space-lg); display: flex; align-items: center; justify-content: space-between; }
.nav-home { font-size: var(--text-base); color: var(--color-text-2); text-decoration: none; font-weight: 500; transition: color 0.2s var(--ease-out); }
.nav-home:hover { color: var(--color-accent); }
.nav-links { display: flex; gap: var(--space-lg); align-items: center; }
.nav-links a { font-size: var(--text-sm); color: var(--color-text-3); text-decoration: none; transition: color 0.2s var(--ease-out); }
.nav-links a:hover { color: var(--color-text); }
.container { max-width: 960px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg) var(--space-xl); }
.article-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 2px solid var(--color-accent); }
.article-date { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-2); margin-bottom: var(--space-md); flex-wrap: wrap; }
.article-date .tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; background: oklch(from var(--color-accent) 0.95 0.06 30); color: var(--color-accent); }
.article-header h1 { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--space-md); color: var(--color-text); overflow-wrap: anywhere; min-width: 0; }
.article-subtitle { font-size: var(--text-lg); color: var(--color-text-2); line-height: 1.6; max-width: var(--measure); }
.section { margin-bottom: var(--space-2xl); }
.section:last-of-type { margin-bottom: var(--space-xl); }
.section-head { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: var(--rule); }
.section-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; color: var(--color-text); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.body-copy { font-size: var(--text-base); line-height: 1.8; color: var(--color-text); max-width: var(--measure); }
.body-copy p { margin-bottom: var(--space-md); }
.body-copy p:last-child { margin-bottom: 0; }
.body-copy strong { font-weight: 600; color: var(--color-text); }
.body-copy em { font-style: italic; color: var(--color-text-2); }
blockquote { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); border-left: 4px solid var(--color-accent); background: var(--color-paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-base); line-height: 1.7; color: var(--color-text-2); max-width: var(--measure); }
blockquote strong { color: var(--color-text); }
pre { margin: var(--space-lg) 0; padding: var(--space-lg); background: var(--color-code-bg); border: 1px solid var(--color-code-border); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; overflow-x: auto; -webkit-overflow-scrolling: touch; tab-size: 2; }
code { font-family: var(--font-mono); font-size: 0.9em; }
p code, li code { padding: 0.1em 0.3em; background: var(--color-code-bg); border: 1px solid var(--color-code-border); border-radius: 4px; font-size: 0.85em; }
pre code { background: none; border: none; padding: 0; font-size: var(--text-sm); }
.code-comment { color: var(--color-text-3); }
.code-keyword { color: oklch(40% 0.15 270); font-weight: 600; }
.code-type    { color: oklch(40% 0.14 200); }
.code-string  { color: oklch(45% 0.12 130); }
.code-func    { color: oklch(45% 0.14 30); }
.code-macro   { color: oklch(45% 0.12 330); }
.code-literal { color: oklch(40% 0.14 20); }
.body-copy ul, .body-copy ol { margin: var(--space-md) 0; padding-left: var(--space-lg); max-width: var(--measure); }
.body-copy li { margin-bottom: var(--space-sm); line-height: 1.7; }
.body-copy li > ul, .body-copy li > ol { margin: var(--space-sm) 0; }
.highlight-box { margin: var(--space-lg) 0; padding: var(--space-lg); background: var(--color-highlight); border-radius: var(--radius-md); border-left: 4px solid var(--color-accent); max-width: var(--measure); }
.highlight-box h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-sm); color: var(--color-text); font-style: normal; }
.highlight-box p { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); }
.highlight-box p:last-child { margin-bottom: 0; }
.highlight-box pre { margin: var(--space-sm) 0; font-size: var(--text-xs); }
.comparison { margin: var(--space-lg) 0; max-width: var(--measure); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.6; }
.comparison th { text-align: left; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-bottom: 2px solid var(--color-accent); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.comparison td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule); color: var(--color-text-2); }
.comparison tr:last-child td { border-bottom: none; }
.comparison .accent-cell { color: var(--color-accent); font-weight: 600; }
.questions { margin: var(--space-lg) 0; counter-reset: q; }
.question-item { margin-bottom: var(--space-md); padding: var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-md); border: 1px solid var(--color-line); max-width: var(--measure); }
.question-item::before { counter-increment: q; content: "Q" counter(q); display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-xs); }
.question-item p { font-size: var(--text-base); line-height: 1.7; color: var(--color-text); }
.practice-box { margin: var(--space-lg) 0; padding: var(--space-lg); background: oklch(93% 0.03 260); border: 1px solid oklch(85% 0.04 260); border-radius: var(--radius-md); max-width: var(--measure); }
.practice-box h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-sm); color: oklch(30% 0.12 260); font-style: normal; }
.practice-box p { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); margin-bottom: var(--space-sm); }
.practice-box p:last-child { margin-bottom: 0; }
.practice-box pre { background: oklch(98% 0.002 260); border-color: oklch(88% 0.03 260); }
.practice-box ul { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-2); padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.summary-banner { margin-top: var(--space-xl); padding: var(--space-lg); background: linear-gradient(135deg, var(--color-accent), oklch(45% 0.18 30)); border-radius: var(--radius-md); color: #fff; text-align: center; max-width: var(--measure); }
.summary-banner p { font-size: var(--text-lg); font-weight: 500; line-height: 1.5; }
.page-footer { margin-top: var(--space-xl); padding: var(--space-lg) 0; border-top: var(--rule); text-align: center; font-size: var(--text-sm); color: var(--color-text-3); display: flex; flex-direction: column; gap: var(--space-sm); }
.page-footer a { color: var(--color-accent); text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }
.toc { margin: var(--space-lg) 0 var(--space-xl); padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); max-width: var(--measure); }
.toc h3 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-md); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; font-style: normal; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 1px solid oklch(from var(--color-line) 0.9 0.005 70); font-size: var(--text-sm); }
.toc li:last-child { border-bottom: none; }
.toc a { color: var(--color-text-2); text-decoration: none; transition: color 0.2s; display: block; }
.toc a:hover { color: var(--color-accent); }
.toc .toc-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); margin-right: var(--space-sm); }
@media (max-width: 768px) { .container { padding: var(--space-xl) var(--space-md); } .article-header h1 { font-size: var(--text-display-s); } .section-head { flex-direction: column; gap: var(--space-xs); } .section-head h2 { font-size: var(--text-lg); } .nav { padding: var(--space-sm) var(--space-md); } .nav-links { display: none; } pre { padding: var(--space-md); font-size: var(--text-xs); } }
@media (max-width: 414px) { .container { padding: var(--space-lg) var(--space-sm); } .article-header h1 { font-size: var(--text-xl); } .article-subtitle { font-size: var(--text-base); } .body-copy { font-size: var(--text-sm); } .section-head h2 { font-size: var(--text-base); } pre { padding: var(--space-sm); margin: var(--space-md) 0; } .highlight-box, .practice-box { padding: var(--space-md); } .toc { padding: var(--space-md); } }
@media (max-width: 375px) { .section-num { display: none; } .question-item { padding: var(--space-sm); } }
@media (max-width: 320px) { .date-tag { display: none; } }


/* ===== 新闻卡片（AI新闻/前端资讯用） ===== */
.news-card { margin-bottom: var(--space-md); padding: var(--space-lg); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); max-width: var(--measure); transition: box-shadow 0.25s var(--ease-out); }
.news-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.news-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); flex-wrap: wrap; }
.news-source { font-size: var(--text-xs); font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--color-paper-2); color: var(--color-accent); }
.news-time { font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-mono); }
.news-title { font-size: var(--text-base); font-weight: 600; line-height: 1.5; margin-bottom: var(--space-sm); }
.news-title a { color: var(--color-text); text-decoration: none; }
.news-title a:hover { color: var(--color-accent); text-decoration: underline; }
.news-summary { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.7; }
.news-link { display: inline-block; margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-accent); text-decoration: none; }
.news-link:hover { text-decoration: underline; }
.news-stars { font-size: var(--text-xs); color: oklch(65% 0.13 70); letter-spacing: 0.05em; }

/* ===== 数据表格（金融报告用） ===== */
.data-table { margin: var(--space-lg) 0; max-width: var(--measure); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.6; }
.data-table th { text-align: left; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-bottom: 2px solid var(--color-accent); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.data-table td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule); color: var(--color-text-2); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { font-family: var(--font-mono); text-align: right; }
.data-table .up { color: oklch(48% 0.13 150); font-weight: 600; }
.data-table .down { color: oklch(52% 0.15 30); font-weight: 600; }

/* ===== 统计卡片（概览用） ===== */
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.stat-card { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; }
.stat-number { font-size: var(--text-2xl); font-weight: 700; font-family: var(--font-mono); color: var(--color-accent); }
.stat-label { font-size: var(--text-xs); color: var(--color-text-2); margin-top: 2px; }

/* ===== 列表卡片（榜单/要点用） ===== */
.item-list { margin: var(--space-lg) 0; max-width: var(--measure); }
.item-row { display: flex; gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule); align-items: flex-start; }
.item-row:last-child { border-bottom: none; }
.item-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); font-weight: 700; flex-shrink: 0; min-width: 2rem; }
.item-body { flex: 1; }
.item-title { font-size: var(--text-base); font-weight: 600; line-height: 1.5; margin-bottom: var(--space-xs); }
.item-desc { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.7; }