:root{
  --bg:#0b1220; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --brand:#38bdf8; --accent:#a78bfa; --border:#293042;
}
:root.light{
  --bg:#f7f7fb; --card:#ffffff; --text:#0b1220; --muted:#475569;
  --brand:#0891b2; --accent:#7c3aed; --border:#d7dbe6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.6}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px; margin:0 auto; padding:24px}
header{position:sticky; top:0; backdrop-filter:saturate(1.2) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent); z-index:10}
.nav{display:flex; align-items:center; gap:16px; padding:12px 0}
.nav .brand{font-weight:800; letter-spacing:.2px}
.nav .spacer{flex:1}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid color-mix(in oklab, var(--text) 15%, transparent); padding:10px 14px; border-radius:14px; background:color-mix(in oklab, var(--card) 90%, transparent)}
.btn:hover{transform:translateY(-1px)}
main{min-height:60vh}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:20px; padding:16px}
h1{font-size:clamp(28px, 4vw, 48px); margin:10px 0}
h2{margin:16px 0 8px}
.muted{color:var(--muted)}
footer{border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent); margin-top:32px}
.foot{display:flex; gap:12px; align-items:center; padding:18px 0; color:var(--muted)}
.active{font-weight:700}
.pill-row{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:12px; color:var(--muted); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); padding:4px 10px; border-radius:999px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.gallery img{width:100%; display:block; border-radius:12px; border:1px solid var(--border)}
.badge{display:inline-flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); padding:6px 10px; border-radius:999px}
.lead{font-size:18px; color:var(--muted)}