:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101421; color: #f8fafc; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #23366f, #101421 42rem); }
a { color: #c7d2fe; }
a:hover { color: #ffffff; }
.shell { width: min(1120px, calc(100% - 2rem)); margin: auto; padding: 4rem 0; }
.hero { max-width: 46rem; margin-bottom: 3rem; }
h1 { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1; margin: .35rem 0 1rem; letter-spacing: -.06em; }
.hero > p:last-child { color: #cbd5e1; font-size: 1.15rem; line-height: 1.6; }
.eyebrow { color: #a5b4fc; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.controls { padding: 1rem; background: rgba(15, 23, 42, .75); border: 1px solid #334155; border-radius: 1rem; }
.controls label { display: block; margin-bottom: .5rem; font-weight: 700; }
input { width: 100%; padding: .8rem 1rem; border: 1px solid #475569; border-radius: .6rem; background: #0f172a; color: #fff; font: inherit; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
button { cursor: pointer; border: 1px solid #475569; border-radius: 999px; background: #172033; color: #e2e8f0; padding: .45rem .75rem; font: inherit; }
button[aria-pressed="true"], button:hover { background: #6366f1; border-color: #818cf8; color: #fff; }
#result-count { color: #cbd5e1; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.project-card { display: flex; flex-direction: column; padding: 1.25rem; min-height: 220px; border: 1px solid #334155; border-radius: 1rem; background: rgba(15, 23, 42, .82); }
.project-card h2 { margin: .25rem 0 .75rem; font-size: 1.25rem; }
.project-card h2 a { color: #f8fafc; text-decoration: none; }
.project-card h2 a:hover { text-decoration: underline; }
.project-card p { line-height: 1.55; color: #cbd5e1; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: auto 0 0; list-style: none; }
.tags li { padding: .22rem .5rem; border-radius: 999px; background: #1e293b; color: #c7d2fe; font-size: .8rem; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .shell { padding: 2rem 0; } .project-grid { grid-template-columns: 1fr; } }