:root {
  color-scheme: dark;
  --paper: #03070d;
  --ink: #edf4fb;
  --orange: #f26f21;
  --muted: #9caebe;
  --line: rgba(205, 224, 241, 0.16);
  --blue: #68b8f2;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 82% 8%, rgba(104,184,242,.16), transparent 36rem),
    radial-gradient(ellipse at 10% 25%, rgba(242,111,33,.14), transparent 30rem),
    linear-gradient(rgba(205,224,241,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(205,224,241,.035) 1px, transparent 1px), var(--paper);
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
  color: var(--ink);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #ff9a54; }
header, main, footer { max-width: 1200px; margin: auto; }
header { padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); font-size: 12px; }
.brand { font-weight: 900; letter-spacing: .04em; text-shadow: 0 0 24px rgba(104,184,242,.22); }
header > a:last-child { padding: 10px 15px; border: 1px solid var(--line); background: rgba(16,27,39,.44); white-space: nowrap; }
main { padding: 0 48px; }
.intro { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; padding: 75px 0 60px; align-items: center; }
.eyebrow { width: fit-content; font-size: 11px; padding: 9px 13px; border: 1px solid rgba(242,111,33,.7); background: linear-gradient(90deg,rgba(242,111,33,.14),rgba(104,184,242,.08)); color: #ff9a54; letter-spacing: .04em; }
h1 { font-size: clamp(40px,6vw,64px); letter-spacing: -.04em; line-height: 1.06; margin: 24px 0; font-weight: 900; background: linear-gradient(180deg,#fff 0%,#b7c7d5 24%,#f7fbff 42%,#6f8293 56%,#d9e4ec 76%,#f4f8fb 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.lead { font-size: 15px; line-height: 1.85; max-width: 590px; color: var(--muted); }
.intro aside { padding: 25px; border: 1px solid var(--line); background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(7,11,17,.8); box-shadow: 0 16px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07); line-height: 1.8; font-size: 12px; color: var(--muted); }
.asterisk { display: block; font-size: 27px; line-height: 1; color: var(--blue); }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.search { width: 520px; }
label { display: block; font-size: 12px; margin-bottom: 12px; font-weight: 600; }
input { width: 100%; padding: 15px 17px; border: 1px solid rgba(104,184,242,.3); border-radius: 0; background: rgba(7,11,17,.9); font: inherit; font-size: 13px; color: var(--ink); }
input::placeholder { color: var(--muted); }
input:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
#count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 28px; }
button { min-height: 38px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 0; background: rgba(16,27,39,.44); color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; }
button[aria-pressed=true] { background: linear-gradient(135deg,#c94f13,#f26f21 42%,#ff9855); color: white; border-color: #ff9a54; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
article { display: flex; flex-direction: column; padding: 25px; background: radial-gradient(ellipse at 95% 5%,rgba(104,184,242,.08),transparent 14rem),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(7,11,17,.9); border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07); transition: border-color 180ms ease,transform 180ms ease; }
article:hover { border-color: rgba(255,154,84,.42); transform: translateY(-3px); }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #ff9a54; margin: 0 0 22px; }
article h2 { font-weight: 700; font-size: 19px; line-height: 1.35; margin: 0 0 14px; letter-spacing: -.03em; }
.description { font-size: 12px; line-height: 1.85; color: var(--muted); margin: 0 0 28px; }
article a { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); font-size: 11px; color: var(--blue); }
.note { margin: 55px 0; padding: 25px 28px; border: 1px solid var(--line); border-left: 2px solid var(--orange); background: rgba(17,27,39,.72); }
.note h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.note p { font-size: 12px; line-height: 1.85; max-width: 760px; margin: 0; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 28px 48px 40px; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
#empty { padding: 50px 0; line-height: 1.7; }
@media(max-width:900px) { .intro { gap: 30px; } .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  header, footer { padding: 24px; } .brand { font-size: 11px; } header > a:last-child { font-size: 10px; padding: 8px; }
  main { padding: 0 24px; } .intro { grid-template-columns: 1fr; padding: 40px 0 30px; gap: 15px; } .intro aside { padding: 18px; } .asterisk { display: none; }
  h1 { font-size: 42px; } .lead { font-size: 13px; } .grid { grid-template-columns: 1fr; } .toolbar { display: block; } #count { margin-top: 15px; } .search { width: 100%; }
  .filters { gap: 6px; } button { padding: 9px 11px; } footer { gap: 20px; flex-direction: column; } .note { margin: 40px 0; padding: 22px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; } }