:root { color-scheme: dark; --bg:#0a0a0f; --surface:#0f1117; --ink:#e6e4d2; --muted:#b0b0c4; --cyan:#7dd4e4; --rule:#3a3d4a; --mark:#50b4c8; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:500; }
* { box-sizing:border-box; }
/* The browser's default tap highlight paints over tapped text and drops it below 8:1; controls show their own press state. */
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.5; -webkit-tap-highlight-color:transparent; }
main { max-width:1440px; margin:auto; padding:0 48px; }
a { color:var(--cyan); text-underline-offset:4px; }
button,input,select { font:inherit; font-weight:500; }
button,select,input[type=number] { min-height:44px; color:var(--ink); background:var(--bg); border:1px solid #676b7a; border-radius:4px; padding:8px 12px; }
button { cursor:pointer; white-space:nowrap; }
button:hover:not(:disabled),button:active:not(:disabled) { border-color:var(--cyan); color:var(--cyan); }
button:disabled { color:var(--muted); border-style:dashed; cursor:default; }
button[type=submit] { color:var(--bg); background:var(--cyan); border-color:var(--cyan); font-weight:700; }
input[type=radio] { accent-color:var(--cyan); width:20px; height:20px; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; border-bottom:1px solid var(--rule); }
.masthead a { font-weight:800; text-decoration:none; color:var(--ink); }
.masthead span,.muted,.chart-help,.section-heading p,.masthead span { color:var(--muted); }
.intro { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end; padding:48px 0 36px; }
.eyebrow { display:block; margin:0 0 10px; font-size:16px; letter-spacing:.05em; }
h1 { font-size:clamp(40px,5.2vw,72px); line-height:1.04; letter-spacing:-.045em; font-weight:800; margin:0; }
h2 { font-size:20px; line-height:1.3; letter-spacing:-.015em; margin:0; }
p { margin:0 0 12px; }
.lead { max-width:500px; }
.lead p:first-child { font-size:20px; line-height:1.45; }
.state-strip { display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:24px; padding:24px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.state-strip strong { display:block; font-size:28px; line-height:1.2; letter-spacing:-.03em; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.state-strip .eyebrow { color:var(--muted); margin-bottom:6px; }
.state-strip span:last-child { display:block; }
.recovery { display:flex; flex-wrap:wrap; align-content:center; justify-content:flex-end; gap:8px; }
.overview-section { padding:28px 0 18px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.section-heading p { margin:0; }
svg { width:100%; display:block; overflow:hidden; user-select:none; touch-action:none; }
#overview { height:132px; }
#detail { height:370px; }
svg text { fill:var(--muted); font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:500; }
svg .grid-line { stroke:#30333e; stroke-width:1; }
svg .axis-line { stroke:#676b7a; }
svg .window { fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:7 4; pointer-events:none; }
svg .brush { fill:#7dd4e433; stroke:var(--cyan); stroke-width:2; pointer-events:none; }
svg .mark { fill:var(--mark); stroke:var(--bg); stroke-width:1; }
svg .mark-base { fill:#4d5265; }
svg .point { fill:var(--ink); stroke:var(--bg); stroke-width:1.5; }
svg .point.selected { fill:var(--cyan); stroke:var(--cyan); stroke-width:2; }
svg .point.faded { fill:none; stroke:#a1a6b8; }
svg .pinned { fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:3 2; pointer-events:none; }
svg .record-label { fill:var(--ink); font-size:16px; paint-order:stroke fill; stroke:var(--bg); stroke-width:4px; }
.controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding:20px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
fieldset { border:0; margin:0; padding:0; }
legend { margin-bottom:4px; }
.mode { display:flex; flex-wrap:wrap; gap:4px; }
.mode label { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; min-height:44px; border:1px solid #676b7a; border-radius:4px; cursor:pointer; }
.mode label:has(input:checked) { border-color:var(--cyan); }
.stack { display:grid; gap:4px; }
.zoom-controls { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.analysis-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:36px; padding:28px 0; }
.detail-section { min-width:0; }
.level { color:var(--cyan); white-space:nowrap; }
.axis-description { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; color:var(--muted); }
.chart-help { margin:8px 0; }
.composition { border-left:1px solid var(--rule); padding-left:28px; }
.group { padding:16px 0; border-bottom:1px solid var(--rule); }
.group-line { display:flex; justify-content:space-between; gap:16px; }
.group-line strong { font-size:19px; }
.group-line span { font-variant-numeric:tabular-nums; color:var(--cyan); }
.group-meter { height:10px; background:#4d5265; margin:10px 0; }
.group-meter span { display:block; height:100%; background:var(--cyan); }
.group p { margin:0; color:var(--muted); }
.summary-note { margin-top:20px; }
.exact-controls { padding:20px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
summary { cursor:pointer; min-height:44px; display:list-item; padding:8px 0; font-weight:700; }
#exact-form { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding:12px 0; }
#exact-form label { flex:1 1 140px; }
#exact-form input { width:100%; }
.exact-controls p { max-width:1000px; margin-bottom:0; }
.records-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:36px; padding:28px 0 48px; }
.records-grid>section { min-width:0; }
.table-scroll { overflow:auto; max-height:385px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
table { border-collapse:collapse; width:100%; text-align:left; font-variant-numeric:tabular-nums; }
th,td { padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--rule); }
th { position:sticky; top:0; background:var(--bg); font-size:16px; z-index:1; }
td:first-child { font-weight:700; }
tr.selected td:first-child { color:var(--cyan); }
td button { padding:6px 12px; }
.inspector { border-left:1px solid var(--rule); padding-left:28px; }
.inspector .section-heading { flex-wrap:wrap; }
.inspector h3 { font-size:32px; letter-spacing:-.03em; margin:8px 0; }
.inspector dl { margin:16px 0; }
.inspector dt { color:var(--muted); }
.inspector dd { margin:0 0 12px; font-size:20px; }
.inspector .mode-label { color:var(--cyan); }
footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:24px 0 40px; border-top:1px solid var(--rule); color:var(--muted); }
footer p { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; left:16px; top:-100px; background:var(--bg); padding:12px; z-index:10; }
.skip:focus { top:8px; }
@media (max-width:1050px) { main { padding:0 28px; } .analysis-grid,.records-grid { grid-template-columns:minmax(0,1fr) 230px; gap:24px; } .composition,.inspector { padding-left:20px; } .zoom-controls { margin-left:0; } .state-strip { grid-template-columns:1fr 1fr; } .recovery { grid-column:1 / -1; justify-content:flex-start; } }
@media (max-width:760px) { main { padding:0 20px; } .masthead { align-items:start; flex-direction:column; gap:4px; } .intro { grid-template-columns:1fr; gap:24px; padding:32px 0; } h1 { font-size:48px; } .lead p:first-child { font-size:18px; } .state-strip { gap:20px; } .state-strip strong { font-size:24px; } .analysis-grid,.records-grid { grid-template-columns:1fr; gap:28px; } .composition,.inspector { padding:24px 0 0; border-left:0; border-top:1px solid var(--rule); } .section-heading { align-items:start; flex-wrap:wrap; gap:6px; } .section-heading p { width:100%; } #detail { height:340px; } #groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .group-line { flex-direction:column; gap:4px; } .group p { overflow-wrap:anywhere; } .exact-controls { padding:16px 0; } .records-grid { padding-bottom:28px; } .level { white-space:normal; } }
@media (max-width:420px) { main { padding:0 16px; } h1 { font-size:44px; } .state-strip { grid-template-columns:1fr; } #groups { grid-template-columns:1fr; gap:0; } .group-line { flex-direction:row; } .controls>.stack { flex:1 1 140px; } .controls select { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.mobile-jumps,.mobile-selection-status { display:none; }
@media (max-width:760px) {
  .mobile-jumps { display:flex; flex-wrap:wrap; gap:4px 20px; padding:0 0 16px; }
  .mobile-jumps a,.mobile-selection-status a { display:inline-flex; align-items:center; min-height:44px; }
  .mobile-selection-status { display:flex; flex-wrap:wrap; gap:4px; padding:8px 0 12px; color:var(--ink); }
  .mobile-selection-status span,.mobile-selection-status a { flex-basis:100%; }
}