:root { color-scheme: light; --ink:#203c36; --muted:#52675f; --green:#176a53; --line:#d7e2dc; --paper:#fafbf8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--green); text-underline-offset:3px; } a:hover { color:#094d38; }
header { padding:20px max(24px,calc((100vw - 1100px)/2)); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; align-items:center; background:white; }
.brand { font-weight:750; text-decoration:none; letter-spacing:-.4px; } nav { display:flex; flex-wrap:wrap; gap:20px; font-size:14px; }
main { max-width:1100px; padding:0 24px; margin:auto; }
.intro { padding:64px 0 35px; max-width:900px; } .eyebrow { color:var(--green); font-size:12px; letter-spacing:1.8px; font-weight:750; margin:0 0 12px; }
h1 { font-size:clamp(38px,5vw,62px); letter-spacing:-2.2px; line-height:1.08; margin:0 0 24px; font-weight:650; }
h2 { font-size:30px; line-height:1.25; letter-spacing:-.7px; margin:0 0 18px; } h3 { font-size:19px; margin:0 0 6px; }
p { max-width:850px; margin:12px 0 20px; } .lead { font-size:20px; color:var(--muted); max-width:670px; }
section { padding:40px 0; border-top:1px solid var(--line); scroll-margin-top:25px; }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:30px 0 10px; } label { font-size:14px; font-weight:650; } select,button { font:inherit; background:white; color:var(--ink); border:1px solid #afc1b7; border-radius:6px; padding:7px 12px; }
button,a,select,input,summary { touch-action:manipulation; } button,select,summary { cursor:pointer; } :focus-visible { outline:3px solid #bd6a25; outline-offset:4px; }
#status,.quiet { color:var(--muted); font-size:14px; } code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.88em; }
pre { padding:16px 20px; background:#eef2ec; border:1px solid var(--line); border-radius:6px; overflow-x:auto; line-height:1.65; }
.source { margin:16px 0 22px; } summary { font-weight:600; color:var(--green); } .source pre { max-height:540px; background:white; }
.settings { font-size:14px; color:var(--muted); padding:10px 14px; border-left:3px solid #90b5a3; }
.plot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:25px 0; }
.plot-card { background:white; border:1px solid var(--line); border-radius:9px; padding:22px; min-width:0; } .plot-card.wide { grid-column:1/-1; }
.plot-card p { font-size:14px; color:var(--muted); margin:5px 0 15px; }
.canvas-wrap { height:310px; position:relative; } .series-controls { display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0; } .series-controls label { font-size:12px; font-weight:500; } input { accent-color:var(--green); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; font-size:13px; margin-top:12px; } .actions button { font-size:13px; padding:5px 10px; }
.table-wrap { overflow:auto; max-height:320px; margin-top:12px; } table { width:100%; border-collapse:collapse; font-size:12px; } th,td { text-align:right; padding:6px 10px; border-bottom:1px solid #e4eae6; white-space:nowrap; } th { position:sticky; top:0; background:#f1f5f0; }
caption { text-align:left; font-size:12px; padding:8px 0; } .note { border-left:3px solid #c8a477; padding:4px 18px; font-size:14px; color:var(--muted); }
.results { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; } .result { border-top:2px solid #8bb59f; padding:12px 0; } .result strong { display:block; font-size:25px; } .result span { display:block; font-size:13px; color:var(--muted); }
footer { border-top:1px solid var(--line); padding:28px 24px; text-align:center; font-size:13px; color:var(--muted); }
@media(max-width:700px) { header { align-items:flex-start; flex-direction:column; gap:10px; } nav { gap:12px; } .intro { padding-top:36px; } .plot-grid { grid-template-columns:1fr; } .results { grid-template-columns:repeat(2,1fr); } .plot-card { padding:15px; } main { padding:0 18px; } .canvas-wrap { height:290px; } }
@media print { .source,.actions,.toolbar,nav { display:none; } .plot-card { break-inside:avoid; } .plot-grid { display:block; } .plot-card { margin:16px 0; } }