.samples { margin-top: 8px; }

.lead h2 { font-family: var(--font-head); font-size: 28px; margin: 8px 0; }
.lead p { color: var(--text-dim); max-width: 760px; line-height: 1.5; }
.lead code { font-family: var(--font-mono); color: var(--accent); }

.kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; min-width: 150px; }
.kpi b { display: block; font-family: var(--font-head); font-size: 26px; color: var(--accent); }
.kpi span { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }

.story { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-top: 24px; }
.story h3 { font-family: var(--font-head); font-size: 20px; margin: 0 0 4px; }
.story .dek { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 14px; max-width: 800px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart.scroll { overflow-x: auto; }
.chart.scroll svg { min-width: 760px; }

.controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.controls select, .controls button {
    background: var(--bg-1); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 12px; font: 14px var(--font-body); cursor: pointer;
}
.controls button.on { border-color: var(--accent); color: var(--accent); }
.controls label { color: var(--text-dim); font-size: 13px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }

.samples text { fill: var(--text-dim); font-family: var(--font-body); }
.samples .axis path, .samples .axis line { stroke: var(--border); }
.samples .gridline { stroke: var(--border); stroke-dasharray: 2 3; }
.samples .lbl-strong { fill: var(--text); }

.foot { margin-top: 28px; color: var(--text-dim); font-size: 12px; text-align: center; }

.life-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; padding: 12px 16px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); }
.life-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 0 12px currentColor; }
.life-title { font-family: var(--font-head); font-size: 20px; }
.life-kind { color: var(--text-dim); font-size: 14px; margin-top: 2px; }

.samples a { text-decoration: none; }
.samples a:hover text { text-decoration: underline; fill: var(--accent); }
.life-title a { color: var(--text); }
.life-title a:hover { color: var(--accent); }
.life-link { margin-left: auto; white-space: nowrap; font-size: 14px; }
.back-link { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 14px; white-space: nowrap; }