/* System fonts keep local previews and hosted pages independent of font CDNs. */
:root {
  --font-ui: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-reading: "Charter", "Bitstream Charter", Georgia, serif;
  --font-code: "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --font-math: "Cambria Math", "STIX Two Math", "Latin Modern Math", math;
}
body { font-family: var(--font-ui); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.shading-section p, .technical-notes p, .formula-definitions dd {
  font-family: var(--font-reading);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: normal;
}
.formula-definitions dt { margin-top: 26px; }
.equation-panel { padding: clamp(20px, 3vw, 32px); }
.equation-panel pre, .equation-panel p code, .formula-definitions code,
.technical-notes p code { font-family: var(--font-code); }
.equation-panel pre { line-height: 1.75; tab-size: 4; }
.equation {
  font-family: var(--font-math);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.6;
  padding: 24px 20px;
  overflow-x: auto;
  overflow-wrap: normal;
  border-left-width: 2px;
}
math { font-family: var(--font-math); font-weight: normal; }
.equation math { font-size: 1em; margin: 0; }
.equation-stack { display: grid; gap: 24px; }
.lighting-equation { overflow-x: auto; padding-block: 12px; }
.light-formula { font-family: var(--font-math); font-size: 14px; }
.emboss-kernel { font-family: var(--font-math); font-size: 26px; }
@media (max-width: 720px) {
  .shading-section p, .technical-notes p, .formula-definitions dd {
    font-size: 16px;
    line-height: 1.75;
  }
  .equation { padding: 20px 14px; font-size: 18px; }
}