:root {
  color-scheme: light;
  --paper: #f2f0e8;
  --ink: #141a17;
  --muted: #646a63;
  --line: #c8c8bc;
  --acid: #c9f05b;
  --rust: #bd4a2c;
  --panel: #faf9f3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 Georgia, serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #00000008 4px); }
button, input, select { font: inherit; }
a { color: inherit; }

.masthead { min-height: 64px; padding: 0 max(24px, calc((100vw - 1220px)/2)); border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 700; letter-spacing: -.03em; }
.wordmark span { width: 31px; height: 31px; display: grid; place-items: center; background: var(--ink); color: var(--acid); font-size: 12px; }
.status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px #bd4a2c20; }
.status.live i { background: #577b1a; box-shadow: 0 0 0 4px #c9f05b80; }

main { max-width: 1220px; margin: auto; padding: 0 24px 80px; }
.hero { padding: clamp(70px, 11vw, 150px) 0 88px; max-width: 1020px; }
.eyebrow { margin: 0 0 15px; color: var(--rust); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
h1 { margin: 0; max-width: 960px; font: 400 clamp(48px, 8vw, 104px)/.91 Georgia, serif; letter-spacing: -.065em; }
h1 em { color: var(--rust); font-weight: 400; }
.lede { max-width: 720px; margin: 32px 0; color: var(--muted); font-size: clamp(17px, 2vw, 22px); }
.principles { display: flex; flex-wrap: wrap; gap: 8px; }
.principles span { border: 1px solid var(--ink); padding: 7px 11px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; }

.registry { border-top: 1px solid var(--ink); padding-top: 30px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
h2 { margin: 0; font-size: clamp(34px, 5vw, 57px); line-height: 1; letter-spacing: -.045em; }
.lab-link { background: var(--ink); color: var(--acid); padding: 12px 16px; text-decoration: none; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lab-link:hover { background: var(--rust); color: white; }
.lab-link.is-disabled { background: #d8d8cc; color: var(--muted); cursor: not-allowed; }

.filters { margin: 34px 0; padding: 16px; display: grid; grid-template-columns: minmax(260px, 1fr) 230px 190px; gap: 12px; background: var(--ink); }
.filters label { color: #b6b9b2; font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; }
.filters input, .filters select { width: 100%; margin-top: 7px; border: 1px solid #515651; border-radius: 0; padding: 10px 11px; background: #202622; color: white; font: 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.filters input:focus, .filters select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.registry-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 28px; align-items: start; }
.result-count { color: var(--muted); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; }
.pack-list { border-top: 1px solid var(--line); }
.pack-card { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 21px 4px; display: grid; grid-template-columns: 1fr auto; gap: 7px 18px; text-align: left; background: transparent; color: var(--ink); cursor: pointer; transition: padding .16s, background .16s; }
.pack-card:hover, .pack-card.active { padding-inline: 14px; background: var(--panel); }
.pack-card.active { box-shadow: inset 4px 0 var(--rust); }
.pack-card strong { font: 400 25px/1.1 Georgia, serif; }
.pack-card small, .pack-card code { color: var(--muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.validation-badge { align-self: start; padding: 5px 7px; background: var(--acid); color: var(--ink); font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }

.detail { position: sticky; top: 20px; min-height: 390px; padding: 26px; background: var(--panel); border: 1px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); }
.detail h3 { margin: 0 0 4px; font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.detail .version { color: var(--rust); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.detail h4 { margin: 25px 0 9px; padding-top: 12px; border-top: 1px solid var(--line); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 5px 7px; background: #e3e3d8; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evidence div { padding: 10px; border: 1px solid var(--line); }
.evidence b, .evidence span { display: block; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.evidence span { color: var(--muted); margin-top: 5px; }

footer { border-top: 1px solid var(--ink); padding: 22px max(24px, calc((100vw - 1220px)/2)); display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 780px) {
  .masthead { align-items: flex-start; padding-block: 16px; }
  .status { max-width: 150px; text-align: right; }
  .hero { padding-top: 80px; }
  .filters, .registry-grid { grid-template-columns: 1fr; }
  .detail { position: static; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pack-card { transition: none; } }