:root { color-scheme:dark; font-family:Inter,system-ui,sans-serif; background:#050a10; color:#e8f1fb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0,#10273b 0,transparent 35%),#050a10; }
header { display:flex; justify-content:space-between; padding:18px max(24px,6vw); border-bottom:1px solid #203044; background:#07111fcc; }
a { color:#70dcff; text-decoration:none; } .brand { color:#fff; font-weight:800; }
main { width:min(1240px,92vw); margin:54px auto 100px; }
.eyebrow,.kind { color:#52d6ff; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:800; }
h1 { margin:8px 0 12px; font-size:clamp(34px,6vw,66px); } .lead { max-width:800px; color:#a9b9ca; line-height:1.7; }
.toolbar { display:flex; gap:10px; align-items:center; margin:32px 0 48px; flex-wrap:wrap; }
input,button { border:1px solid #294058; border-radius:10px; background:#08131f; color:#e8f1fb; padding:12px 14px; }
input { min-width:min(440px,100%); } button { cursor:pointer; } #status { color:#8193a7; font-size:13px; }
h2 { margin-top:46px; } h2 span { color:#52d6ff; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
article { padding:20px; border:1px solid #203044; border-radius:14px; background:#08111bcc; }
article h3 { min-height:48px; margin:12px 0 8px; } code { color:#9cecff; word-break:break-all; }
article p,.empty { color:#8193a7; } .actions { display:flex; gap:14px; margin-top:18px; font-size:13px; }