* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg-app); }
body { margin: 0; color: var(--fg1); background: var(--bg-app); font-family: var(--font-ui); }
a { color: inherit; }
.topbar { min-height: 58px; padding: 0 var(--sp-gutter); border-bottom: 1px solid var(--border-hair); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; font-weight: var(--fw-semibold); }
.brand img { width: 22px; height: 22px; }
.environment, .run-meta, footer { color: var(--fg-muted); font: var(--fs-meta)/var(--lh-normal) var(--font-mono); }
main { max-width: 1480px; margin: 0 auto; }
.hero { padding: 92px var(--sp-gutter) 72px; border-bottom: 1px solid var(--border-hair); }
.eyebrow { margin: 0 0 var(--sp-3); color: var(--fg-muted); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; }
h1 { max-width: 940px; margin: 0; font-size: clamp(42px, 6vw, 80px); font-weight: var(--fw-semibold); letter-spacing: -.04em; line-height: .98; }
.lede { max-width: 790px; margin: var(--sp-5) 0 0; color: var(--fg2); font-size: var(--fs-h3); line-height: var(--lh-normal); }
.run-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.section { padding: var(--sp-7) var(--sp-gutter); border-bottom: 1px solid var(--border-hair); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-5); margin-bottom: var(--sp-5); }
h2 { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: -.025em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-hair); }
.cards.featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-width: 0; padding: var(--sp-5); border-right: 1px solid var(--border-hair); }
.card:last-child { border-right: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.number { color: var(--fg-muted); font: var(--fs-meta)/1 var(--font-mono); }
.state { border: 1px solid currentColor; border-radius: var(--r-full); padding: 4px 9px; font-size: var(--fs-meta); }
.state.approved { color: var(--approved); }
.state.partial { color: var(--contender); }
.state.rejected { color: var(--rejected-chip); }
.state.blocked { color: var(--fg-muted); }
h3 { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.card > p { min-height: 6.2em; margin: 0; color: var(--fg2); font-size: var(--fs-body); line-height: var(--lh-normal); }
.tags { min-height: 48px; margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-content: start; gap: var(--sp-2); }
.tags span { color: var(--fg3); font: var(--fs-meta)/1 var(--font-mono); }
.tags span + span::before { content: "·"; margin-right: var(--sp-2); color: var(--fg-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.actions a, .comparison { color: var(--teal-bright); text-decoration: none; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.actions a.primary { padding: 9px 13px; border: 1px solid var(--teal); border-radius: var(--r-xs); }
.comparison { display: inline-block; margin-top: var(--sp-4); }
.notice { margin: var(--sp-7) var(--sp-gutter); padding: var(--sp-5); border-left: 2px solid var(--teal); }
.notice p:last-child { max-width: 880px; margin: 0; color: var(--fg2); line-height: var(--lh-normal); }
footer { max-width: 1480px; margin: 0 auto; padding: var(--sp-5) var(--sp-gutter); border-top: 1px solid var(--border-hair); display: flex; justify-content: space-between; gap: var(--sp-4); }
@media (max-width: 880px) { .cards, .cards.featured { grid-template-columns: 1fr; } .card { border-right: 0; border-bottom: 1px solid var(--border-hair); } .card:last-child { border-bottom: 0; } .section-head { align-items: start; flex-direction: column; } .environment { display: none; } .hero { padding-top: var(--sp-7); } }
