:root {
  color-scheme: light;
  --bg:#fdfdfc; --surface:#f3f5fa; --surface-2:#fff; --ink:#1a1a1a;
  --muted:#5d605f; --line:#d9dce3; --accent:#3157c8; --accent-hover:#193d9d;
  --amber:#89511e; --red:#a33d4c; --red-fill:rgba(163,61,76,.1);
  --green:#28674e; --chart-grid:#d7dce5; --chart-axis:#727d91;
  --model:#7b879a; --chart-outline:#fff; --shadow:0 18px 45px rgba(31,50,91,.07);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    color-scheme:dark;
    --bg:#1a1a1a; --surface:#222733; --surface-2:#242424; --ink:#e8e6e1;
    --muted:#b7b9bd; --line:#444853; --accent:#9ab2ff; --accent-hover:#c4d1ff;
    --amber:#e5b882; --red:#f0a4ae; --red-fill:rgba(240,164,174,.13);
    --green:#9edbbb; --chart-grid:#3b4353; --chart-axis:#a4afc0;
    --model:#b9c6d4; --chart-outline:#222733; --shadow:none;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#1a1a1a; --surface:#222733; --surface-2:#242424; --ink:#e8e6e1;
  --muted:#b7b9bd; --line:#444853; --accent:#9ab2ff; --accent-hover:#c4d1ff;
  --amber:#e5b882; --red:#f0a4ae; --red-fill:rgba(240,164,174,.13);
  --green:#9edbbb; --chart-grid:#3b4353; --chart-axis:#a4afc0;
  --model:#b9c6d4; --chart-outline:#222733; --shadow:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font:18px/1.75 "Iowan Old Style","Source Serif Pro",Georgia,"Songti SC",serif; }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { color:var(--accent-hover); }
a:focus-visible,button:focus-visible,.model:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button { font:inherit; }
::selection { background:var(--accent); color:var(--bg); }
.skip { position:absolute; left:1rem; top:-4rem; z-index:10; padding:.35rem .7rem; background:var(--bg); }
.skip:focus { top:.5rem; }
.shell { width:min(100% - 3rem,1100px); margin-inline:auto; }
.sp-header { --sp-accent:var(--accent); }
.hero { padding:clamp(4rem,8vw,7rem) 0 3.5rem; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(230px,.55fr); gap:clamp(2rem,5vw,5rem); align-items:end; }
.eyebrow,.section-number { color:var(--accent); font:700 .72rem/1.5 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.hero h1 { margin:1rem 0 1.3rem; font-size:clamp(2.8rem,6.6vw,5.2rem); font-weight:500; line-height:1.16; letter-spacing:-.055em; }
.hero h1 em { color:var(--accent); font-style:normal; }
.hero p { max-width:700px; margin:0; color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.22rem); line-height:1.85; }
.hero-aside { padding:.2rem 0 .2rem 1.3rem; border-left:2px solid var(--amber); }
.hero-aside strong { display:block; margin-bottom:.55rem; color:var(--amber); font:700 .73rem/1.5 system-ui,sans-serif; letter-spacing:.08em; }
.hero-aside p { color:var(--ink); font-size:.96rem; }
.source { padding:0 0 2rem; border-bottom:1px solid var(--line); color:var(--muted); font:.79rem/1.7 system-ui,sans-serif; }
.chart-section { padding:3rem 0 5rem; }
.section-top { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.5rem; }
.section-top h2,.article h2 { margin:.5rem 0 0; font-size:clamp(1.8rem,3vw,2.45rem); font-weight:500; line-height:1.3; letter-spacing:-.035em; }
.section-top p { max-width:340px; margin:0; color:var(--muted); font-size:.9rem; }
.chart-shell { padding:1rem 1.1rem 1.2rem; border:1px solid var(--line); border-radius:6px; background:var(--surface); box-shadow:var(--shadow); }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem .25rem 0; font:600 .82rem/1.5 system-ui,sans-serif; }
.chart-head span { color:var(--muted); font-weight:400; }
.chart-scroll { overflow-x:auto; }
.chart-scroll svg { display:block; width:100%; min-width:620px; height:auto; }
.gridline { fill:none; stroke:var(--chart-grid); stroke-width:1; }
.axis { fill:none; stroke:var(--chart-axis); stroke-width:1.4; }
.tick,.axis-label { fill:var(--muted); font:13px system-ui,sans-serif; }
.axis-label { fill:var(--ink); font-size:15px; }
.zone { fill:var(--red-fill); stroke:var(--red); stroke-width:1.5; stroke-dasharray:6 5; transition:all .2s ease; }
.zone-label { fill:var(--red); font:700 14px system-ui,sans-serif; }
.model { cursor:pointer; pointer-events:bounding-box; }
.model circle { stroke:var(--chart-outline); stroke-width:3; transition:r .2s ease,stroke .2s ease; }
.model:hover circle,.model:focus-visible circle { stroke:var(--accent); stroke-width:4; }
.model.active circle { r:12; }
.model text { fill:var(--ink); font:800 16px system-ui,sans-serif; }
.model .sub { fill:var(--muted); font-size:12px; font-weight:500; }
.model[data-id="A"] circle,.model[data-id="B"] circle,.model[data-id="C"] circle { fill:var(--model); }
.model[data-id="D"] circle { fill:var(--accent); }
.model[data-id="E"] circle { fill:var(--amber); }
.chart-caption { display:grid; grid-template-columns:1fr minmax(230px,.65fr); gap:1.2rem; padding:.9rem .5rem 0; border-top:1px solid var(--line); }
.chart-caption p { margin:0; color:var(--muted); font-size:.88rem; }
.chart-caption strong { color:var(--ink); }
.chart-caption .tiny { font:.78rem/1.7 system-ui,sans-serif; }
.article { max-width:850px; margin-inline:auto; padding-bottom:5rem; }
.article section { padding:3.5rem 0; border-top:1px solid var(--line); }
.article h2 { margin:.5rem 0 1.2rem; }
.article h3 { margin:1.8rem 0 .5rem; font-size:1.3rem; font-weight:600; line-height:1.4; }
.article p { margin:.75rem 0; color:var(--muted); }
.article strong { color:var(--ink); }
.article .lede { color:var(--ink); font-size:1.13rem; }
.formula { margin:1.5rem 0; padding:1rem 1.2rem; border-left:3px solid var(--accent); background:var(--surface); color:var(--ink); font:.94rem/1.7 ui-monospace,Consolas,monospace; }
.definition { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.6rem 0; }
.definition>div { padding:1.1rem; border:1px solid var(--line); background:var(--surface-2); }
.definition b { display:block; color:var(--accent); font-size:1rem; }
.definition p { margin:.35rem 0 0; font-size:.87rem; }
.table-wrap { overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:1.4rem 0; }
table { border-collapse:collapse; width:100%; min-width:570px; text-align:left; font-size:.9rem; }
th,td { padding:.8rem .95rem; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
th { color:var(--muted); background:var(--surface); font:700 .75rem/1.5 system-ui,sans-serif; }
td { color:var(--ink); }
td:first-child { font-weight:700; }
.pill { display:inline-block; padding:.12rem .5rem; border:1px solid var(--green); border-radius:999px; color:var(--green); font:.7rem/1.5 system-ui,sans-serif; white-space:nowrap; }
.pill.off { border-color:var(--red); color:var(--red); }
.callout { margin:1.6rem 0; padding:1rem 1.3rem; border-left:3px solid var(--amber); background:var(--surface); }
.callout p { margin:0; }
.steps { counter-reset:item; list-style:none; padding:0; margin:1.5rem 0; }
.steps li { counter-increment:item; display:grid; grid-template-columns:2rem 1fr; gap:.8rem; padding:1rem 0; border-top:1px solid var(--line); color:var(--muted); }
.steps li:before { content:"0" counter(item); color:var(--accent); font:700 .8rem/1.7 system-ui,sans-serif; }
.takeaway { padding:1.5rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1.16rem; line-height:1.7; }
@media (max-width:760px) {
  .hero { grid-template-columns:1fr; gap:2rem; padding-top:3.5rem; }
  .section-top { display:block; }
  .section-top p { margin-top:.7rem; }
  .chart-caption { grid-template-columns:1fr; }
  .definition { grid-template-columns:1fr; }
  .article section { padding:2.8rem 0; }
}
@media (max-width:430px) { .shell { width:min(100% - 2rem,1100px); } .chart-shell { padding:.7rem; } .chart-head span { max-width:135px; text-align:right; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; } }