/* Shared interactive explainers (v4): theta decay. Used on index.html and learn.html. Tokens come from base.css. */
.theta{display:grid;gap:var(--s5);align-items:stretch}
@media(min-width:960px){.theta{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.theta-chart{margin:0;padding:var(--s3);min-width:0}
.theta-stage{position:relative;min-width:0;background:var(--bg);border:1px solid var(--hairline);border-radius:var(--radius-ctl);overflow:hidden;padding-top:40px}
.theta-badge{position:absolute;top:var(--s2);left:var(--s2);z-index:1;font-size:.625rem;padding:.3em .5em}
.theta-stage svg{display:block;max-width:none;width:100%;height:auto}
.theta-cap{margin:var(--s3) var(--s1) 0;font-size:var(--fs-xs);color:var(--text-dim);max-width:none}
.theta-panel{min-width:0;padding:var(--s5)}
.theta-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin:0 0 var(--s2);font:500 var(--fs-xs)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.theta-out{font:500 2rem/1 var(--font-mono);color:var(--amber);font-variant-numeric:tabular-nums}
.theta-ends{display:flex;justify-content:space-between;margin:0 0 var(--s4);font:400 var(--fs-xs)/1 var(--font-mono);color:var(--text-dim);max-width:none}
.theta-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s4);padding:var(--s4) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.theta-read div{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.theta-read dt{font:500 .6875rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.theta-read dd{margin:0;font:500 1.375rem/1.2 var(--font-mono);color:var(--text-strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.theta-note{font-size:var(--fs-sm);color:var(--text-dim)}
.th-grid{stroke:var(--hairline);stroke-width:1}
.th-axis{fill:var(--text-dim);font:400 10px/1 var(--font-mono)}
.th-curve{fill:none;stroke:var(--text);stroke-width:1.75;stroke-linejoin:round}
.th-mark{stroke:var(--amber);stroke-width:1;stroke-dasharray:4 4}
.th-dot{fill:var(--amber)}
.th-label{fill:var(--amber);font:500 11px/1 var(--font-mono)}
@media(max-width:480px){.theta-read{grid-template-columns:1fr 1fr}.theta-panel{padding:var(--s4)}}