:root {
  color-scheme: light;
  font-family: var(--font-sans, Inter, Arial, sans-serif);
  background: hsl(var(--background, 216 20% 97%));
  color: hsl(var(--foreground, 220 25% 10%));
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; background: hsl(var(--background, 216 20% 97%)); }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible, input:focus-visible, select:focus-visible { outline: .2rem solid hsl(var(--ring, 210 70% 42%)); outline-offset: .16rem; }
.shell { width: min(100% - 1.5rem, 76rem); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: .5rem; left: .5rem; transform: translateY(-160%); padding: .7rem 1rem; border-radius: var(--radius, .5rem); color: hsl(var(--primary-foreground, 0 0% 99%)); background: hsl(var(--primary, 210 70% 42%)); }
.skip-link:focus { transform: translateY(0); }
.site-header { border-block-end: 1px solid hsl(var(--border, 216 12% 88%)); background: hsl(var(--card, 216 18% 98%)); }
.header-row, .site-footer > .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.brand { font-size: 1.2rem; font-weight: 760; letter-spacing: -.02em; text-decoration: none; }
.brand span { color: hsl(var(--muted-foreground, 216 10% 45%)); font-weight: 500; }
.header-note, .site-footer p { margin: 0; color: hsl(var(--muted-foreground, 216 10% 45%)); font-size: .9rem; }
.hero { max-width: 52rem; padding-block: clamp(2.5rem, 6vw, 5.5rem) 2rem; }
.eyebrow { margin: 0 0 .6rem; color: hsl(var(--primary, 210 70% 42%)); font-size: .82rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 18ch; margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: clamp(2rem, 6vw, 4.1rem); line-height: 1.02; letter-spacing: -.04em; }
.lede { margin: 1.25rem 0 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; }
.metaphor { margin: .9rem 0 0; padding-inline-start: .8rem; border-inline-start: .22rem solid hsl(var(--chart-3, 38 75% 50%)); line-height: 1.45; }
.boundary { margin: 1rem 0 0; padding-inline-start: .8rem; border-inline-start: .22rem solid hsl(var(--chart-2, 170 55% 38%)); color: hsl(var(--muted-foreground, 216 10% 45%)); line-height: 1.45; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-block: 1rem 1.5rem; }
.metric, .controls, .project-card, .empty-state, .status-message { border: 1px solid hsl(var(--card-border, 216 12% 92%)); border-radius: calc(var(--radius, .5rem) + .2rem); background: hsl(var(--card, 216 18% 98%)); box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / .04)); }
.metric { display: grid; gap: .35rem; padding: 1rem; }
.metric-label { color: hsl(var(--muted-foreground, 216 10% 45%)); font-size: .82rem; }
.metric strong { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.controls { display: grid; grid-template-columns: minmax(13rem, 2fr) repeat(2, minmax(9rem, 1fr)) auto; align-items: end; gap: .9rem; padding: 1rem; }
.search-control, .select-control { display: grid; gap: .35rem; color: hsl(var(--muted-foreground, 216 10% 45%)); font-size: .82rem; font-weight: 650; }
input, select { width: 100%; min-height: 2.75rem; border: 1px solid hsl(var(--input, 216 12% 78%)); border-radius: var(--radius, .5rem); padding: .55rem .65rem; color: inherit; font: inherit; background: hsl(var(--background, 216 20% 97%)); }
.result-count { margin: 0; padding-block: .75rem; color: hsl(var(--muted-foreground, 216 10% 45%)); font-size: .88rem; white-space: nowrap; }
.status-message { margin-block: 1rem; padding: 1rem; border-color: hsl(var(--destructive, 0 72% 48%)); color: hsl(var(--destructive, 0 72% 48%)); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; padding-block: 1.5rem 3rem; }
.project-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.project-card h2 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.project-description { margin: 0; color: hsl(var(--muted-foreground, 216 10% 45%)); font-size: .92rem; line-height: 1.5; }
.badge-row, .evidence-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge { display: inline-flex; align-items: center; min-height: 1.7rem; padding: .2rem .5rem; border-radius: 999px; background: hsl(var(--muted, 216 12% 92%)); font-size: .75rem; font-weight: 650; }
.badge--good { color: hsl(var(--status-success-text, 170 62% 27%)); background: hsl(var(--chart-2, 170 55% 38%) / .13); }
.badge--attention { color: hsl(var(--status-attention-text, 34 82% 30%)); background: hsl(var(--chart-3, 38 75% 50%) / .16); }
.badge--neutral { color: hsl(var(--muted-foreground, 216 10% 45%)); }
.project-link { margin-top: auto; color: hsl(var(--primary, 210 70% 42%)); font-size: .9rem; font-weight: 700; }
.empty-state { grid-column: 1 / -1; padding: 2rem; text-align: center; }
.empty-state h2, .empty-state p { margin: 0; }.empty-state p { margin-top: .5rem; color: hsl(var(--muted-foreground, 216 10% 45%)); }
.site-footer { border-block-start: 1px solid hsl(var(--border, 216 12% 88%)); }
.site-footer a { color: hsl(var(--primary, 210 70% 42%)); font-size: .88rem; }
@media (max-width: 46rem) { .metrics { grid-template-columns: 1fr; } .controls { grid-template-columns: 1fr; } .result-count { padding: 0; white-space: normal; } .header-note { display: none; } .site-footer > .shell { align-items: flex-start; flex-direction: column; padding-block: 1rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }