/* 样章子页面 · 数学极简风格 */
.sample-container { max-width: 780px; margin: 0 auto; padding: var(--space-3xl) var(--space-xl) var(--space-6xl); }
.sample-header { margin-bottom: var(--space-3xl); padding-bottom: var(--space-2xl); border-bottom: 0.5px solid var(--color-divider); }
.sample-header .module-tag { font-family: var(--font-mono); font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: var(--space-sm); }
.sample-header h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; color: var(--color-ink); margin-bottom: var(--space-sm); letter-spacing: -0.01em; }
.sample-header .meta { font-size: var(--text-xs); color: var(--color-ink-3); display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.objectives { background: var(--color-paper-2); border: 0.5px solid var(--color-divider); border-radius: var(--radius-sm); padding: var(--space-xl); margin-bottom: var(--space-3xl); }
.objectives h3 { font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: var(--space-md); }
.objectives ul { list-style: none; padding: 0; }
.objectives li { font-size: var(--text-base); color: var(--color-ink-2); line-height: 1.8; padding-left: var(--space-lg); position: relative; }
.objectives li::before { content: "→"; position: absolute; left: 0; color: var(--color-accent-dim); font-family: var(--font-mono); font-size: var(--text-2xs); }
.concept { margin-bottom: var(--space-3xl); }
.concept h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 0.5px solid var(--color-divider); letter-spacing: -0.005em; }
.block { margin-bottom: var(--space-lg); }
.block-label { font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3); margin-bottom: var(--space-xs); }
.block p, .block li { font-size: var(--text-base); color: var(--color-ink-2); line-height: 1.85; }
.block table { width: 100%; font-size: var(--text-base); color: var(--color-ink-2); border-collapse: collapse; }
.block table td { padding: 6px 10px; border-bottom: 0.5px solid var(--color-divider); vertical-align: top; }
.block ul { list-style: none; padding: 0; }
.block li { padding-left: var(--space-lg); position: relative; }
.block li::before { content: "·"; position: absolute; left: var(--space-xs); color: var(--color-accent-dim); font-weight: bold; }
.highlight { background: var(--color-paper-2); border-left: 2px solid var(--color-accent-dim); padding: var(--space-md) var(--space-lg); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; margin: var(--space-md) 0; }
.highlight.good { border-left-color: var(--color-teal); background: oklch(96% 0.025 190); }
.highlight.bad { border-left-color: var(--color-rose); background: oklch(96% 0.02 25); }
.thinking { font-style: italic; font-size: var(--text-base); color: var(--color-ink-2); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-sm); margin: var(--space-md) 0; border-left: 2px solid var(--color-blue-dim); }
.divider { text-align: center; color: var(--color-ink-3); font-size: var(--text-xs); letter-spacing: 0.24em; margin: var(--space-2xl) 0; user-select: none; }
.example { background: var(--color-paper-2); border: 0.5px solid var(--color-divider); border-radius: var(--radius-sm); padding: var(--space-lg); margin: var(--space-md) 0; }
.example .level-tag { display: inline-block; padding: 2px var(--space-sm); font-family: var(--font-mono); font-size: var(--text-3xs); letter-spacing: 0.1em; border-radius: var(--radius-xs); margin-bottom: var(--space-sm); border: 0.5px solid; }
.example .level-tag.l1 { color: var(--color-teal); border-color: var(--color-teal-dim); background: oklch(97% 0.04 190); }
.example .level-tag.l3 { color: var(--color-amber); border-color: var(--color-amber-dim); background: oklch(97% 0.05 75); }
.example .level-tag.l5 { color: var(--color-rose); border-color: var(--color-rose-dim); background: oklch(97% 0.04 10); }
.example .q { font-size: var(--text-base); color: var(--color-ink); margin-bottom: var(--space-sm); font-weight: 600; }
.example .solution { font-size: var(--text-base); color: var(--color-ink-2); border-top: 0.5px solid var(--color-divider); padding-top: var(--space-sm); margin-top: var(--space-sm); }
.example .solution strong { color: var(--color-accent); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { padding: var(--space-xs) 0 var(--space-xs) var(--space-2xl); position: relative; line-height: 1.7; counter-increment: step; font-size: var(--text-sm); color: var(--color-ink-2); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: var(--space-xs); width: 22px; height: 22px; border-radius: 50%; background: var(--color-blue); color: #fff; font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }
.steps li:last-child { color: var(--color-ink); font-weight: 600; }
.steps li:last-child::before { background: var(--color-amber); }
.summary { margin-top: var(--space-3xl); padding: var(--space-2xl); background: var(--color-paper-2); border: 0.5px solid var(--color-accent-dim); border-radius: var(--radius-sm); }
.summary h2 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); margin-bottom: var(--space-md); border-bottom: none; }
.summary ul { list-style: none; padding: 0; }
.summary li { font-size: var(--text-base); color: var(--color-ink-2); line-height: 1.8; padding-left: var(--space-lg); position: relative; }
.summary li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: bold; }
.preview-note { margin-top: var(--space-3xl); padding: var(--space-xl); background: var(--color-paper-2); border: 0.5px solid var(--color-accent-dim); border-radius: var(--radius-sm); text-align: center; }
.preview-note h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); margin-bottom: var(--space-sm); }
.preview-note p { font-size: var(--text-base); color: var(--color-ink-2); }
.preview-note a { color: var(--color-accent); }
.steps li { font-size: var(--text-base); }
@media (max-width: 768px) {
  .sample-container { padding: var(--space-xl) var(--space-md) var(--space-3xl); }
  .sample-header h1 { font-size: var(--text-2xl); }
  .sample-header .meta { gap: var(--space-md); font-size: var(--text-2xs); }
  .concept h2 { font-size: var(--text-lg); }
  .block p, .block li, .block table td { font-size: var(--text-sm); }
  .block table td { padding: 4px 6px; }
  .example { padding: var(--space-md); }
  .example .q { font-size: var(--text-sm); }
  .example .solution { font-size: var(--text-sm); }
  .summary { padding: var(--space-lg); }
  .summary li { font-size: var(--text-sm); }
  .preview-note { padding: var(--space-lg); }
  .steps li { font-size: var(--text-sm); padding-left: var(--space-xl); }
  .steps li::before { width: 18px; height: 18px; font-size: 0.6rem; }
  .dual-compare { grid-template-columns: 1fr !important; gap: var(--space-md) !important; }
  .dual-compare > div { padding: var(--space-md) !important; }
  .dual-compare p, .dual-compare li, .dual-compare ol { font-size: var(--text-sm) !important; }
  .dual-compare ol, .dual-compare ul { padding-left: var(--space-md) !important; }
}