:root {
  --ink: #17212b;
  --muted: #66727c;
  --canvas: #f5f3ed;
  --surface: #fffdf8;
  --line: #d8d5ca;
  --accent: #007f6f;
  --accent-pale: #d9f1ea;
  --warning: #a64b16;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
.masthead { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: 2.25rem clamp(1.25rem, 4vw, 4rem); border-bottom: 3px solid var(--accent); background: #e6efe8; }
.eyebrow { margin: 0 0 .35rem; color: var(--accent); font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 500; line-height: .95; }
.record-count { margin: 0; color: var(--muted); white-space: nowrap; }
.workspace { display: grid; grid-template-columns: minmax(220px, 285px) minmax(0, 1fr); min-height: calc(100vh - 146px); }
.catalog { padding: 1.25rem; border-right: 1px solid var(--line); background: #eeeade; }
label { display: block; margin-bottom: .5rem; font: 700 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
input, select { width: 100%; padding: .7rem .75rem; border: 1px solid #a7afa8; border-radius: 2px; background: var(--surface); color: var(--ink); font: .9rem ui-monospace, SFMono-Regular, Menlo, monospace; }
select { margin: .35rem 0 0; }
.overview-button { width: 100%; padding: .7rem .75rem; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: #fffdf8; cursor: pointer; font: 700 .8rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.overview-button:hover { background: #00685c; }
.catalog label:not(:first-child) { margin-top: 1rem; }
.pxd-list { margin-top: 1rem; overflow: auto; max-height: calc(100vh - 310px); }
.pxd-button { display: grid; grid-template-columns: 1fr auto; width: 100%; padding: .65rem .15rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; color: var(--ink); cursor: pointer; font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.pxd-button:hover, .pxd-button.active { color: var(--accent); background: var(--accent-pale); }
.badge { color: var(--muted); font-size: .68rem; }
.pxd-meta { display: flex; align-items: center; gap: .45rem; }
.version-badge { padding: .1rem .3rem; border: 1px solid var(--line); color: var(--accent); font-size: .65rem; }
.detail { padding: clamp(1.25rem, 3vw, 3rem); min-width: 0; }
.empty-state { padding: 4rem 1rem; color: var(--muted); text-align: center; }
.record-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
h2 { margin: 0; font-size: 2rem; font-weight: 500; }
.availability { color: var(--muted); font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.section { margin-top: 2rem; }
h3 { margin: 0 0 .65rem; font-size: 1.2rem; font-weight: 500; }
.section-note { margin: -.25rem 0 1rem; color: var(--muted); font-size: .9rem; }
.markdown-report { padding: 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .9rem; line-height: 1.55; }
.markdown-report h4 { margin: 1rem 0 .35rem; font-size: 1rem; font-weight: 600; }
.markdown-report h4:first-child { margin-top: 0; }
.markdown-report code { font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.metric-methodology { margin: 0 0 1rem; padding: .9rem 1rem; border-left: 4px solid var(--accent); background: var(--accent-pale); font-size: .9rem; line-height: 1.55; }
.metric-methodology h4 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; }
.metric-methodology p { margin: .45rem 0 0; }
.metric-methodology code { font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.overview-header .eyebrow { margin-bottom: .25rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.stat-card, .histogram-card { border: 1px solid var(--line); background: var(--surface); }
.stat-card { display: grid; gap: .3rem; padding: 1rem; }
.stat-card span, .stat-card small { color: var(--muted); font: .75rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.stat-card strong { color: var(--accent); font-size: 2rem; font-weight: 500; }
.histogram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .9rem; }
.histogram-card { padding: .85rem; }
.histogram-card h4 { margin: 0; font: 700 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.histogram-card > p { min-height: 3.5em; margin: .45rem 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.histogram-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 .6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.histogram-card dl div { padding: .4rem; border-right: 1px solid var(--line); }
.histogram-card dl div:last-child { border-right: 0; }
.histogram-card dt { color: var(--muted); font: .65rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.histogram-card dd { margin: .15rem 0 0; font: .8rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.histogram { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25rem; height: 130px; align-items: end; }
.histogram-bin { display: grid; grid-template-rows: 1fr auto; gap: .25rem; height: 100%; cursor: help; }
.histogram-bar { align-self: end; min-height: 3px; background: var(--accent); }
.histogram-label { overflow-wrap: anywhere; color: var(--muted); font: .58rem/1.15 ui-monospace, SFMono-Regular, Menlo, monospace; }
.table-frame { overflow: auto; max-height: 570px; border: 1px solid var(--line); background: var(--surface); }
table { width: max-content; min-width: 100%; border-collapse: collapse; font: .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
th { position: sticky; top: 0; background: #dce9e2; text-align: left; cursor: help; text-decoration: underline dotted; text-underline-offset: .18em; }
th, td { max-width: 340px; padding: .55rem .65rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.files { display: grid; gap: .55rem; }
.file { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .7rem .8rem; border: 1px solid var(--line); background: var(--surface); }
.file-path { font: .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
a { color: var(--accent); }
.json-viewer { border: 1px solid var(--line); background: var(--surface); }
.json-viewer > summary { padding: .75rem; cursor: pointer; font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.json-tree { max-height: 680px; overflow: auto; padding: .8rem 1rem; border-top: 1px solid var(--line); background: #f8faf7; font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.json-node { margin: 0; }
.json-node summary { padding: 0; cursor: pointer; }
.json-node summary::marker { color: var(--accent); }
.json-node summary:hover .json-key { color: var(--accent); }
.json-children { margin-left: 1.2rem; padding-left: .55rem; border-left: 1px solid #dfe6df; }
.json-row, .json-closing { min-height: 1.55em; padding: 0; overflow-wrap: anywhere; }
.json-key { color: #165f80; overflow-wrap: anywhere; }
.json-punctuation { color: #5b666b; }
.json-kind { color: var(--muted); font-size: .7rem; }
.json-value { overflow-wrap: anywhere; }
.json-string { color: #8b3d13; }
.json-number { color: #165f80; }
.json-nonfinite { color: var(--warning); }
.json-boolean, .json-null, .json-empty { color: #6e3f87; }
pre { margin: 0; padding: 1rem; overflow: auto; border-top: 1px solid var(--line); background: #202b2d; color: #e8f0eb; font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.image-grid a { display: block; padding: .7rem; border: 1px solid var(--line); background: var(--surface); }
.image-grid img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .masthead { align-items: start; flex-direction: column; } .workspace { grid-template-columns: 1fr; } .catalog { border-right: 0; border-bottom: 1px solid var(--line); } .pxd-list { display: grid; grid-template-columns: repeat(2, 1fr); max-height: 180px; } }