:root { color-scheme: dark; --bg:#0b0b0d; --panel:#131316; --ink:#eeeef1; --muted:#a5a2ad; --line:#ffffff16; --accent:#ab80e5; --lime:#c4db22; font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:95px; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.8; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--lime); outline-offset:5px; }
.skip-link { position:fixed; z-index:80; top:8px; left:8px; padding:8px 20px; background:var(--lime); color:#111; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.reading-progress { position:fixed; z-index:60; left:0; top:0; height:2px; width:0; background:var(--lime); }
.math-topbar { height:76px; position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 38px; background:#0b0b0df2; border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.brand img { border-radius:9px; }
.brand span { display:grid; gap:2px; line-height:1.4; }
.brand strong { font-size:13px; font-weight:650; letter-spacing:.02em; }
.brand small { font-size:10px; color:var(--muted); }
.math-topbar nav { display:flex; align-items:center; gap:22px; font-size:12px; }
.math-topbar nav a { color:#ccc6d4; }
.math-topbar nav a:hover { color:var(--lime); }
.math-topbar button { padding:8px 14px; color:#d7c5ee; background:transparent; border:1px solid #ab80e549; border-radius:6px; cursor:pointer; font-size:12px; }
.math-layout { max-width:1580px; margin:auto; display:grid; grid-template-columns:250px minmax(0,1fr); }
.math-toc { position:sticky; top:76px; height:calc(100vh - 76px); padding:38px 22px 25px 30px; border-right:1px solid var(--line); overflow-y:auto; }
.toc-caption { color:var(--accent); font-size:10px; letter-spacing:.13em; font-weight:700; }
.math-toc nav { margin:26px -8px 22px; display:grid; gap:5px; }
.math-toc nav a { display:flex; gap:14px; padding:9px 10px; font-size:12px; color:#b0acb7; border-radius:4px; line-height:1.5; }
.math-toc nav a span { color:#75717e; font:11px/1.8 ui-monospace,monospace; }
.math-toc nav a:hover,.math-toc nav a[aria-current="location"] { background:#ab80e512; color:#e3d2f9; }
.math-toc nav a[aria-current="location"] span { color:var(--accent); }
.toc-sources { font-size:11px; color:#beb1ce; border-top:1px solid var(--line); padding-top:20px; display:block; }
.toc-footnote { border-top:1px solid var(--line); margin-top:45px; padding-top:20px; color:#c1bdc8; font-size:11px; line-height:1.8; }
.toc-footnote small { padding-left:15px; color:#89848f; }
.green-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lime); margin-right:8px; }
main { min-width:0; }
.math-hero { padding:78px clamp(26px,5vw,80px) 50px; border-bottom:1px solid var(--line); background:radial-gradient(ellipse at 85% 25%,#9a6acc0c,transparent 62%); }
.eyebrow { color:var(--accent); font:650 10px/1.7 ui-monospace,monospace; letter-spacing:.13em; margin:0 0 15px; }
.math-hero .eyebrow { color:var(--lime); }
h1 { margin:24px 0 20px; font-size:clamp(50px,5.5vw,84px); line-height:1.2; letter-spacing:-.05em; font-weight:650; }
.hero-accent { color:var(--accent); }
.hero-en { color:#8e8898; font:11px/1.7 ui-monospace,monospace; letter-spacing:.025em; }
.hero-lede { margin:28px 0; max-width:740px; color:#c0bbc8; font-size:16px; line-height:2; }
.hero-meta { display:flex; flex-wrap:wrap; gap:10px 22px; margin:27px 0 38px; color:#928b9c; font-size:11px; }
.hero-meta span+span::before { content:"/"; margin-right:20px; color:#4e4857; }
.hero-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:28px; }
.hero-flow>a { display:grid; gap:6px; }
.hero-flow small { color:#958c9f; font:10px/1.6 ui-monospace,monospace; }
.hero-flow strong { font-family:"Cambria Math","STIX Two Math",serif; font-weight:400; font-size:27px; }
.hero-flow>span { color:#685a76; }
.hero-flow a:hover strong { color:var(--lime); }
.math-section { padding:62px clamp(26px,5vw,80px); border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-start; gap:19px; margin:0 0 24px; }
.section-number { color:var(--accent); font:13px/1.8 ui-monospace,monospace; padding-top:7px; }
.section-heading>div { flex:1; min-width:0; }
.section-heading .eyebrow { margin-bottom:8px; font-size:9px; }
h2 { margin:0; font-size:clamp(25px,2.4vw,36px); line-height:1.45; letter-spacing:-.025em; font-weight:600; }
.priority { margin-top:6px; padding:3px 8px; border:1px solid #ab80e532; color:#bca4d8; font-size:10px; white-space:nowrap; border-radius:4px; }
.section-intro { max-width:850px; font-size:14px; color:var(--muted); line-height:1.95; margin:0 0 28px; }
p { font-size:14px; color:#bcb7c4; }
h3 { font-size:19px; margin:37px 0 17px; font-weight:600; }
math { font-family:"STIX Two Math","Cambria Math","Latin Modern Math",math; font-size:1.15em; color:#e9e6ef; }
math[display="block"] { margin:0; font-size:1.28rem; }
.matrix>mtr>mtd { padding:.18em .4em; text-align:center; }
.aligned-equation>mtr>mtd { padding:.25em .25em; }
.aligned-equation>mtr>mtd:first-child { text-align:right; }
.aligned-equation>mtr>mtd:last-child { text-align:left; }
.equation { border:1px solid #ffffff14; border-radius:8px; margin:18px 0; padding:0; background:linear-gradient(120deg,#17151d,#111114 75%); overflow:hidden; }
.equation figcaption { display:flex; align-items:center; gap:10px; padding:15px 20px 0; font-size:12px; color:#bbb0c9; }
.eq-number { color:var(--accent); font:10px ui-monospace,monospace; flex-shrink:0; }
.copy-equation { margin-left:auto; border:0; background:none; color:#91849e; padding:3px 0 3px 10px; font-size:10px; white-space:nowrap; cursor:pointer; }
.copy-equation:hover { color:var(--lime); }
.equation-scroll { overflow-x:auto; overflow-y:hidden; padding:28px 24px; scrollbar-width:thin; scrollbar-color:#5f4b78 #16121b; }
.equation-scroll math { min-width:max-content; }
.equation-note { margin:0; padding:0 20px 18px; color:#a8a0b3; font-size:12px; line-height:1.95; }
.note { border-left:2px solid var(--lime); padding:15px 20px; margin:24px 0; background:#c4db2205; }
.note strong { color:#d7dca8; font-size:12px; font-weight:600; }
.note p { margin:7px 0 0; font-size:12px; line-height:1.95; color:#aaa59a; }
.symbol-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.symbol-grid>div { display:flex; align-items:center; gap:20px; padding:20px; background:#111114; }
.symbol-grid span { min-width:72px; text-align:center; }
.symbol-grid p { margin:0; font-size:12px; line-height:1.7; }
.reading-path { margin:25px 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; counter-reset:path; }
.reading-path li { counter-increment:path; padding:8px 12px; border:1px solid var(--line); font-size:11px; color:#bbb3c5; }
.reading-path li::before { content:counter(path) " / "; color:var(--accent); }
.section-refs { display:flex; flex-wrap:wrap; gap:8px 14px; padding-top:17px; margin-top:28px; border-top:1px solid var(--line); align-items:baseline; font-size:10px; line-height:1.7; }
.section-refs>span { color:#787080; }
.section-refs a { color:#aa92c6; }
.section-refs a:hover { color:#d7bfed; text-decoration:underline; }
.worked { margin:24px 0; border:1px solid #c4db2225; border-radius:6px; background:#c4db2205; padding:22px; }
.worked>span { color:var(--lime); font-size:11px; }
.worked p { font-size:12px; line-height:1.9; }
.worked math { display:inline-block; max-width:100%; overflow-x:auto; margin:10px 24px 10px 0; vertical-align:middle; font-size:18px; }
.blend-demo { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 16px; }
.blend-swatch { min-height:126px; border-radius:8px; padding:23px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; color:#fff; }
.blend-swatch span { font-size:11px; opacity:.7; }
.blend-swatch strong { font:18px ui-monospace,monospace; font-weight:400; }
.red-front { background:#800040; }.blue-front { background:#400080; }
.time-lab { display:grid; grid-template-columns:1fr 1fr; gap:20px; border:1px solid #ab80e538; border-radius:9px; padding:25px; margin-top:30px; background:#151119; align-items:center; }
.time-lab h3 { margin:0; font-size:17px; }
.time-lab p { font-size:12px; line-height:1.9; }
.time-lab svg { width:100%; height:auto; }
.lab-controls { display:grid; gap:15px; }
.lab-controls label { display:block; font-size:12px; color:#d0c3df; }
.lab-controls output { float:right; font:12px/1.8 ui-monospace,monospace; }
.lab-controls input { display:block; width:100%; accent-color:var(--accent); margin:12px 0 0; }
.lab-result strong { color:var(--lime); font:15px ui-monospace,monospace; }
.plot-axis { fill:none; stroke:#66556e; stroke-width:1; }
.motion-path { fill:none; stroke:#9975c3; stroke-width:2; stroke-dasharray:5 5; }
#time-plot text { fill:#97899f; font:11px ui-monospace,monospace; }
.exercise-list { padding-left:24px; color:#b9b1c3; font-size:13px; line-height:2.1; }
.exercise-list li { padding-left:6px; margin-bottom:12px; }
.exercise-list strong { color:#d4c5e5; }
.table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:6px; margin-top:26px; }
table { border-collapse:collapse; min-width:680px; width:100%; font-size:12px; text-align:left; }
th,td { padding:14px 17px; border-bottom:1px solid var(--line); line-height:1.8; }
th { color:#cbb6e2; font-weight:500; background:#a879e808; }
td { color:#aaa1b6; }
tr:last-child td { border-bottom:none; }
.sources-section h2 { margin-bottom:24px; }
.source-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.source-list a { padding:15px 18px; background:#111014; font-size:12px; color:#b6a2ce; }
.source-list a:hover { background:#1d1725; }
.colophon { margin:25px 0 0; color:#7f7888; font-size:11px; line-height:1.9; }
footer { padding:28px clamp(26px,5vw,80px); display:flex; flex-wrap:wrap; gap:15px; justify-content:space-between; font:10px/1.7 ui-monospace,monospace; color:#81788d; }
.copy-status { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); margin:0; padding:0; z-index:70; border-radius:6px; background:var(--lime); color:#181b0a; font-size:12px; box-shadow:0 5px 24px #0005; }
.copy-status:not(:empty) { padding:10px 18px; }
@media(min-width:1450px) { .equation-scroll math { font-size:1.4rem; } }
@media(max-width:1100px) { .math-layout { grid-template-columns:210px minmax(0,1fr); }.math-toc { padding-left:20px;padding-right:13px; }.math-toc nav a { gap:9px; font-size:11px; }.symbol-grid { grid-template-columns:1fr; }.time-lab { grid-template-columns:1fr; }.time-lab svg { max-width:550px; margin:auto; } }
@media(max-width:760px) {
  .math-topbar { height:65px; padding:0 18px; gap:10px; }.brand { gap:8px; }.brand img { width:28px; height:28px; }.brand small { display:none; }.brand strong { font-size:11px; }.math-topbar nav { gap:12px; font-size:11px; }.math-topbar nav a[href="/"] { display:none; }.math-topbar button { padding:6px 8px; font-size:10px; }
  .math-layout { display:block; }.math-toc { position:relative; top:0; height:auto; padding:18px 20px; border-right:0; border-bottom:1px solid var(--line); }.toc-caption { font-size:9px; }.math-toc nav { display:flex; overflow-x:auto; gap:8px; margin:10px -20px -3px; padding:0 20px 9px; scrollbar-width:thin; }.math-toc nav a { white-space:nowrap; border:1px solid var(--line); padding:7px 9px; flex-shrink:0; }.toc-sources,.toc-footnote { display:none; }
  .math-hero { padding:42px 22px 30px; }h1 { font-size:55px; margin-top:22px; }.hero-en { font-size:9px; }.hero-lede { font-size:13px; }.hero-meta { gap:7px 15px; font-size:9px; margin-bottom:26px; }.hero-meta span+span::before { content:none; }.hero-flow { gap:8px; }.hero-flow small { font-size:8px; }.hero-flow strong { font-size:23px; }.hero-flow>span { font-size:10px; }
  .math-section { padding:39px 20px; }.section-heading { gap:12px; flex-wrap:wrap; }.section-heading .eyebrow { font-size:8px; letter-spacing:.07em; }h2 { font-size:25px; }.section-number { font-size:11px; }.priority { font-size:9px; padding:1px 6px; }.section-intro { font-size:13px; }
  .equation figcaption { padding:13px 14px 0; font-size:11px; gap:7px; }.copy-equation { font-size:9px; }.equation-scroll { padding:23px 16px; }.equation-scroll math { font-size:18px; }.equation-note { padding:0 14px 14px; font-size:11px; }.note { padding:13px 15px; }.note p { font-size:11px; }
  .symbol-grid>div { padding:16px; gap:12px; }.symbol-grid p { font-size:11px; }.reading-path li { font-size:10px; }.worked { padding:17px; }.blend-swatch { padding:18px; min-height:108px; }.blend-swatch strong { font-size:13px; }.time-lab { padding:19px; }.source-list { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print {
  :root { color-scheme:light; --bg:white; --ink:#19151f; --muted:#555; --line:#ddd; --accent:#563982; --lime:#5c6514; }
  @page { size:A4; margin:16mm; }body { background:white; color:#19151f; }.math-topbar,.math-toc,.reading-progress,.copy-equation,.copy-status,.time-lab,footer,.skip-link { display:none!important; }.math-layout { display:block; }main { width:100%; }
  .math-hero { padding:0 0 25px; background:none; }h1 { font-size:44px; }.hero-lede { margin:14px 0; font-size:11pt; }.hero-meta { margin:15px 0; }.hero-flow { padding-top:12px; }.math-section { padding:28px 0; }h2 { font-size:21pt; }.section-heading { break-after:avoid; }.section-intro,p { color:#444; font-size:10pt; }
  .equation { break-inside:avoid; background:white; border-color:#ccc; }.equation-scroll { overflow:visible; padding:18px 12px; }.equation-scroll math { font-size:11pt; }.equation figcaption { color:#333; }.equation-note { color:#555; font-size:9pt; }math { color:#111; }
  .symbol-grid>div,.source-list a { background:white; }.symbol-grid p,.source-list a,.note p,.exercise-list { color:#333; }.note,.worked { background:#f8f8f5; }.note strong,.exercise-list strong { color:#353322; }.table-wrap { overflow:visible; }table { min-width:0; font-size:8pt; }th,td { color:#333; padding:9px; }.colophon { color:#555; }
}