:root { --ink:#e9eadf; --muted:#9c9d92; --acid:#2998d9; --line:#34362f; --panel:#171914; --bg:#0c0e0b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; min-height:100vh; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.06; background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px); background-size:48px 48px; }
main { width:min(1120px,calc(100% - 40px)); margin:auto; }
header { min-height:116px; display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--line); }
.mark { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--acid); color:var(--acid); font-weight:900; letter-spacing:-1px; }
h1,h2,h3,p { margin:0; } h1 { font-size:18px; } .eyebrow,.kicker { color:var(--acid); letter-spacing:.18em; font-size:21px; font-weight:800; }
.hero { padding:82px 0 70px; max-width:950px; }
h2 { margin:13px 0 22px; font-size:clamp(32px,4.5vw,58px); line-height:1; letter-spacing:-.055em; white-space: nowrap;}
.lede { color:var(--muted); font-size:18px; max-width:690px; white-space: nowrap; }
form { margin-top:45px; } label { display:block; margin-bottom:9px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.search-row { display:grid; grid-template-columns:1fr auto; border:1px solid #56594d; background:var(--panel); }
input,select,button { font:inherit; } input,select { border:0; outline:0; color:var(--ink); background:var(--panel); padding:18px; min-width:0; }
input:focus,select:focus { box-shadow:inset 0 0 0 1px var(--acid); }
button { border:0; padding:0 24px; min-height:58px; background:var(--acid); color:#10120d; font-weight:900; cursor:pointer; display:flex; gap:28px; align-items:center; justify-content:space-between; }
button:hover { filter:brightness(1.08); } button:disabled { opacity:.55; cursor:wait; }
.hint,.status,#identity { margin-top:10px; color:var(--muted); font-size:13px; }
.status { border-left:3px solid var(--acid); background:var(--panel); padding:16px 18px; margin-bottom:30px; }.status.error { border-color:#ff685f;color:#ffaaa4; }
#results { padding:25px 0 80px; border-top:1px solid var(--line); }
.results-head,.filter-row { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:28px 0; } h3 { font-size:34px; }
.actions { display:flex; gap:8px; }.secondary { min-height:42px; padding:0 15px; border:1px solid var(--line); background:transparent; color:var(--ink); }
.filter-row input { flex:1; border:1px solid var(--line); }.filter-row select { border:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); min-width:0; }
.thumb { width:100%; aspect-ratio:16/9; object-fit:cover; background:#23261e; }.card-body { display:flex; flex:1; flex-direction:column; padding:17px; }
.card h4 { margin:0 0 8px; font-size:17px; line-height:1.25; }.meta { color:var(--muted); font-size:12px; }.tags { display:flex; flex-wrap:wrap; gap:5px; margin:15px 0; }
.tag { border:1px solid var(--line); padding:3px 7px; color:#b7baaa; font-size:10px; text-transform:uppercase; }.card a { color:var(--acid); margin-top:auto; text-decoration:none; font-weight:800; }
.empty { text-align:center; padding:50px; color:var(--muted); } footer { border-top:1px solid var(--line); color:#71746a; padding:28px max(20px,calc((100% - 1120px)/2)); font-size:12px; }
.pagination { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.pagination[hidden] { display:none; }
.pagination p { color:var(--muted); text-align:center; }
.pagination button { min-height:44px; }
.page-size { display:flex; align-items:center; gap:9px; }
.page-size label { margin:0; color:var(--muted); white-space:nowrap; }
.page-size select { border:1px solid var(--line); padding:11px 32px 11px 12px; }
@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.results-head{align-items:start;flex-direction:column}.hero{padding-top:55px}}
@media(max-width:560px){main{width:min(100% - 24px,1120px)}.search-row{grid-template-columns:1fr}.search-row button{width:100%}.grid{grid-template-columns:1fr}.filter-row{align-items:stretch;flex-direction:column}.actions{width:100%}.actions button{flex:1}h2{font-size:43px}.pagination{grid-template-columns:1fr 1fr}.pagination p{grid-column:1/-1;grid-row:1}.page-size{grid-column:1/-1;justify-content:center}.pagination button{width:100%}}
.hero {
  max-width: none;
}

.hero h2 {
  font-size: clamp(38px, 4vw, 58px);
  white-space: nowrap;
}

.hero .lede {
  max-width: none;
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .hero h2,
  .hero .lede {
    white-space: normal;
  }
}