:root { --surface-green: #315c49; --surface-blue: #34507d; --surface-amber: #8a661f; }
.surface-main { min-height: 75vh; }
.eyebrow, .stream-domain, .sample-label, .catalog-meta, .control-label, .surface-chip {
  font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: .09em; text-transform: uppercase;
}
.surface-hero { padding: clamp(3.25rem, 8vh, 6rem) 0 2.75rem; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--surface-green); margin-bottom: .9rem; }
.surface-hero h1 { max-width: 18ch; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.03; font-weight: 500; color: var(--text); }
.surface-hero > p { max-width: 76ch; margin-top: 1.25rem; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.55; }
.contract { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.7rem; color: var(--text); }
.contract strong { font-weight: 600; }
.contract span { color: var(--text-tertiary); font-family: var(--font-mono); }
.inventory-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--bg-subtle); }
.inventory-stat { min-height: 7.4rem; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.inventory-stat:last-child { border-right: 0; }
.inventory-stat strong { display: block; color: var(--text); font-size: 1.75rem; line-height: 1.1; }
.inventory-stat span { display: block; margin-top: .4rem; color: var(--text-tertiary); font-size: var(--small-size); }
.catalog { padding: clamp(3rem, 7vh, 5.5rem) 0; }
.catalog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }
.catalog-head h2 { color: var(--text); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 500; }
.catalog-meta { max-width: 48ch; color: var(--text-tertiary); text-align: right; line-height: 1.5; }
.browse-modes { display: inline-flex; border: 1px solid var(--line-strong); margin-bottom: 1rem; }
.mode-button { min-height: 2.8rem; border: 0; border-right: 1px solid var(--line-strong); background: var(--bg); color: var(--text-tertiary); padding: .55rem 1rem; font: 500 .78rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mode-button:last-child { border-right: 0; }
.mode-button.active { background: var(--text); color: var(--bg); }
.filters { display: grid; grid-template-columns: minmax(14rem, .42fr) minmax(15rem, 1fr); gap: .75rem; margin-bottom: 1rem; }
.control-label { display: block; color: var(--text-tertiary); margin-bottom: .35rem; }
.filter-control { width: 100%; min-height: 3rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--bg); color: var(--text); padding: .65rem .8rem; font: inherit; }
.filter-control:focus, .load-more:focus, .mode-button:focus { outline: 2px solid var(--text); outline-offset: 2px; }
.group-intro { min-height: 7.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line-strong); background: var(--bg-subtle); }
.group-intro h3 { color: var(--text); font-size: 1.35rem; line-height: 1.25; }
.group-intro p { max-width: 75ch; margin-top: .5rem; color: var(--text-secondary); font-size: var(--small-size); line-height: 1.5; }
.group-totals { color: var(--text-tertiary); font: var(--mono-size) var(--font-mono); text-align: right; white-space: nowrap; }
.catalog-status { min-height: 1.7rem; margin-top: 1rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--mono-size); }
.stream-list { margin-top: .5rem; border-top: 1px solid var(--line-strong); }
.stream-card { border-bottom: 1px solid var(--line-strong); background: var(--bg); }
.stream-summary { list-style: none; cursor: pointer; padding: 1.2rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; }
.stream-summary::-webkit-details-marker { display: none; }
.stream-domain { color: var(--surface-green); margin-bottom: .35rem; }
.stream-title { color: var(--text); font-size: 1.25rem; line-height: 1.25; }
.stream-description { margin-top: .45rem; max-width: 76ch; font-size: var(--small-size); }
.stream-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; align-items: center; }
.stream-count { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--micro-size); }
.surface-chip { color: var(--surface-blue); border: 1px solid var(--line); padding: .15rem .4rem; font-size: .58rem; }
.expand-mark { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text); font-family: var(--font-mono); }
details[open] .expand-mark { background: var(--text); color: var(--bg); }
.stream-body { border-top: 1px solid var(--line); padding: 1.25rem 0 1.6rem; }
.stream-body h4 { color: var(--text); font-size: .95rem; margin-bottom: .65rem; }
.channel-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.35rem; }
.channel { border: 1px solid var(--line-strong); padding: .32rem .55rem; border-radius: 999px; color: var(--text-secondary); font-size: var(--micro-size); }
a.channel { text-decoration: none; }
a.channel:hover { border-color: var(--text); color: var(--text); }
.view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.view-toggle button { background: transparent; border: 0; padding: .25rem .75rem; font: .6875rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); cursor: pointer; }
.view-toggle button.active { background: var(--text); color: var(--bg); }
.sample-tile { background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 6px; padding: .875rem; }
.manifest-panel { margin-bottom: .875rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--line); }
.manifest-head { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; color: var(--text-tertiary); font: .625rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.manifest-json { max-height: 240px; overflow: auto; margin: 0; padding: .65rem; background: var(--bg); border: 1px solid var(--line); font: .72rem/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-word; color: var(--text-secondary); }
.manifest-pretty { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--text-secondary); font: .7rem/1.5 var(--font-mono); }
.manifest-pretty strong { color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; }
.sample-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.panel { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-card); min-width: 0; overflow: hidden; }
.panel-head { padding: .625rem .875rem; border-bottom: 1px solid var(--line); background: var(--bg-subtle); color: var(--text-tertiary); font: .625rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.panel-body { padding: .875rem; max-height: 520px; overflow: auto; font-size: .8125rem; line-height: 1.55; }
.panel-body pre { margin: 0; font: .75rem/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-word; color: var(--text-secondary); }
.panel-body.pretty h5 { color: var(--text); font-size: .95rem; line-height: 1.35; margin-bottom: .5rem; }
.panel-body.pretty p { margin-bottom: .625rem; color: var(--text-secondary); white-space: pre-wrap; }
.panel-body.pretty a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.pretty-markdown { font: .75rem/1.55 var(--font-mono); white-space: pre-wrap; color: var(--text-secondary); }
.empty { padding: 1.5rem 0; color: var(--text-tertiary); }
.load-row { display: flex; justify-content: center; padding-top: 1.5rem; }
.load-more { min-height: 2.8rem; padding: .6rem 1rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.cta-band { padding: 3rem 0 5rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.cta-band h2 { color: var(--text); font-size: 1.7rem; }
.cta-band p { margin-top: .45rem; max-width: 58ch; }
.cta { display: inline-flex; align-items: center; min-height: 2.8rem; padding: .6rem 1rem; border-radius: 3px; color: var(--bg); background: var(--text); font-weight: 500; }
@media (max-width: 920px) { .inventory-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inventory-stat:nth-child(2n) { border-right: 0; } .sample-panels { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .catalog-head, .filters, .group-intro, .cta-band { grid-template-columns: 1fr; } .catalog-meta, .group-totals { text-align: left; } .stream-summary { align-items: start; } .panel-body { max-height: 380px; } }
@media (max-width: 520px) { .inventory-strip { grid-template-columns: 1fr; } .inventory-stat { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); } .browse-modes { display: flex; } .mode-button { flex: 1; } .sample-tile { padding: .7rem; } .panel-body { max-height: 320px; padding: .75rem; } }