:root{
  --fg:#16181d; --muted:#697586; --faint:#98a2b3;
  --accent:#0e8aa3; --accent-strong:#0a6e83;
  --line:#e6e8ee; --bg:#fff; --surface:#f7f8fa; --surface-2:#eceff3;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:0 10px 34px rgba(16,24,40,.13);
  --maxw:1120px;
}
*{ box-sizing:border-box }
body{
  margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--accent); text-decoration:none } a:hover{ color:var(--accent-strong); text-decoration:underline }
h1,h2,h3{ line-height:1.25; letter-spacing:-.02em } h1{ font-weight:700 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px }
code{ background:var(--surface-2); padding:.12em .38em; border-radius:5px; font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }

/* nav */
.nav{ position:sticky; top:0; z-index:10; display:flex; gap:1.25rem; align-items:center;
  padding:.85rem 1.25rem; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line) }
.nav .brand{ font-weight:700; letter-spacing:-.02em; font-size:1.05rem }
.nav nav{ display:flex; gap:1.25rem; margin-left:auto; font-size:.95rem }
.nav nav a{ color:var(--muted) } .nav nav a:hover{ color:var(--fg); text-decoration:none }
main{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 1rem }
.foot{ color:var(--muted); text-align:center; padding:2.5rem 1rem; border-top:1px solid var(--line);
  margin-top:3.5rem; font-size:.85rem }

/* hero */
.hero{ padding:1rem 0 .5rem }
.hero h1{ font-size:2.6rem; margin:.2rem 0; letter-spacing:-.035em }
.hero>p{ font-size:1.1rem; color:var(--muted); max-width:60ch; margin:.6rem 0 0 }
.hero .stats{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.3rem 0 }
.hero .stats span{ background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.35rem .85rem; font-size:.85rem; color:var(--muted) }
.hero .stats b{ color:var(--fg); font-weight:650 }
h2{ font-size:1.4rem; margin:2.4rem 0 .9rem }
.howto p{ color:var(--muted); max-width:70ch }

/* buttons + badge */
.btn{ display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:#fff;
  padding:.6rem 1.05rem; border-radius:var(--radius-sm); font-weight:600; font-size:.95rem;
  box-shadow:var(--shadow); transition:transform .12s ease, filter .12s ease }
.btn:hover{ color:#fff; text-decoration:none; filter:brightness(1.06); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.badge{ font-size:.65rem; font-weight:700; letter-spacing:.04em; background:var(--surface-2);
  color:var(--muted); padding:.16rem .46rem; border-radius:5px; vertical-align:middle }

/* cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; margin:1.2rem 0 }
.card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:inherit;
  display:flex; flex-direction:column; background:var(--bg);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.card:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#d3d8e2 }
.card img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:#0d1117; display:block;
  border-bottom:1px solid var(--line) }
.card-body{ padding:.85rem .95rem }
.card-body h3{ margin:.1rem 0 .35rem; font-size:1rem; font-weight:600 }
.card-body p{ margin:0; color:var(--muted); font-size:.85rem; line-height:1.5 }

/* browse / facets */
.browse{ display:flex; gap:2rem; align-items:flex-start }
.facets-panel{ flex:0 0 220px; font-size:.9rem; position:sticky; top:4.6rem;
  max-height:calc(100vh - 5.6rem); display:flex; flex-direction:column }
/* the Filter head + hint stay pinned; only the facet-group list scrolls when tall */
.facets{ overflow-y:auto; min-height:0; padding-right:.4rem }
.facets-head{ display:flex; justify-content:space-between; align-items:baseline }
.facets-title{ margin:0; font-size:1.05rem; font-weight:700 }
#clear-all{ border:0; background:none; padding:0; cursor:pointer; color:var(--accent);
  font-size:.78rem; font-weight:600 }
#clear-all:hover{ text-decoration:underline }
.facets-hint{ margin:.2rem 0 1rem; font-size:.72rem; color:var(--faint); line-height:1.4 }
.facets .group{ margin-bottom:.5rem; border-bottom:1px solid var(--line); padding-bottom:.5rem }
.facets .group>summary{ cursor:pointer; list-style:revert; margin:.3rem 0 .45rem; font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--faint) }
.facets .group>summary:hover{ color:var(--fg) }
.facets label{ display:flex; gap:.5rem; align-items:center; cursor:pointer; padding:.13rem 0; color:var(--muted) }
.facets label:hover{ color:var(--fg) } .facets input{ accent-color:var(--accent) }
.facets .facet-label{ flex:1; min-width:0 }
.facets .facet-count{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--faint); font-size:.8rem }
.facets label.zero{ opacity:.4 }
.result-count{ margin:-.4rem 0 1rem; color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums }
.card-lic{ margin:.45rem 0 0!important; font-size:.7rem!important; color:var(--faint)!important }
.results{ flex:1; min-width:0 }
.search{ width:100%; padding:.65rem .85rem; margin-bottom:1.2rem; border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:.95rem; background:var(--surface); color:var(--fg) }
.search:focus{ outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px rgba(14,138,163,.13) }

/* detail */
.detail{ padding-top:.5rem } .detail>p:first-child a{ color:var(--muted); font-size:.9rem }
.detail h1{ font-size:2rem; margin:.4rem 0 .15rem }
.sub{ color:var(--muted); margin:.2rem 0 1.4rem; font-size:.95rem }
.detail-grid{ display:grid; grid-template-columns:minmax(280px,2fr) 3fr; gap:2rem }
.preview img{ width:100%; border-radius:var(--radius); background:#0d1117; border:1px solid var(--line);
  display:block; margin-bottom:.9rem }
.meta>p{ color:var(--muted) }
.meta h3{ font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--faint);
  margin:1.7rem 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--line) }
.meta table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.meta td{ padding:.42rem .2rem; border-bottom:1px solid var(--line) }
.meta tr:last-child td{ border-bottom:none }
.meta td:first-child{ color:var(--muted); width:40% } .meta td:last-child{ font-weight:500 }
.prov{ background:var(--surface); border:1px solid var(--line); padding:.8rem; border-radius:var(--radius-sm);
  overflow:auto; font-size:.78rem; line-height:1.55; white-space:pre-wrap; color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }

/* downloads */
.downloads{ list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem }
.downloads a{ display:flex; align-items:center; gap:.6rem; padding:.62rem .85rem; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); font-weight:600; font-size:.92rem;
  transition:border-color .12s ease, background .12s ease }
.downloads a::before{ content:"↓"; font-weight:700; color:var(--accent) }
.downloads a:hover{ text-decoration:none; border-color:var(--accent); background:#fff }
.dl-size{ margin-left:auto; color:var(--muted); font-weight:400; font-size:.82rem; font-variant-numeric:tabular-nums }

.empty{ color:var(--muted) }

/* large-dataset note (below viewer button) */
.bigwarn{ margin:.55rem 0 0; font-size:.84rem; line-height:1.5; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid #d9822b;
  border-radius:var(--radius-sm); padding:.6rem .75rem }
.bigwarn a{ font-weight:600 }

/* viewer guide page */
.guide{ max-width:74ch } .guide>p:first-child a{ color:var(--muted); font-size:.9rem }
.guide h1{ font-size:2rem; margin:.4rem 0 .6rem }
.guide h2{ font-size:1.25rem; margin:2rem 0 .7rem; padding-bottom:.35rem; border-bottom:1px solid var(--line) }
.guide .lead{ color:var(--muted); font-size:1.08rem; max-width:70ch }
.guide ul,.guide ol{ padding-left:1.4rem } .guide li{ margin:.45rem 0 }

@media(max-width:760px){
  .browse,.detail-grid{ grid-template-columns:1fr; flex-direction:column }
  .facets-panel{ position:static; flex:1; max-height:none; display:block }
  .facets{ overflow:visible; padding-right:0 }
  .hero h1{ font-size:2.1rem } main{ padding:1.5rem 1.1rem }
}
@media(prefers-reduced-motion:reduce){ *{ transition:none!important } }