:root{
  --bg:#0b0d10; --ink:#e8f0f7; --muted:#b7c3cf; --card:#13161a; --acc:#0bf; --acc2:#0f8; --accent:#0bf;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:#0b1118 url('/assets/bg.svg') no-repeat center top/cover}
a{color:#8bd5ff;text-decoration:none}
a:hover{text-decoration:underline}
.site{display:flex;min-height:100%;flex-direction:column;background:linear-gradient(180deg,rgba(11,17,24,.8),rgba(11,17,24,.95) 120px)}
.wrap{width:min(1100px,92vw);margin:0 auto;padding:18px}
.header{display:flex;align-items:center;gap:16px;padding:12px 0}
.header .brand{display:flex;align-items:center;gap:12px}
nav{margin-left:auto}
nav a{margin:0 8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06)}
nav a:hover{background:rgba(255,255,255,.12)}
main{flex:1;padding:20px 0}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 28px rgba(0,0,0,.4);border-radius:18px;padding:22px}
h1{font-size:clamp(24px,3.2vw,38px);margin:0 0 8px}
h2{font-size:clamp(18px,2.4vw,26px);margin:26px 0 10px}
p{line-height:1.7;color:#e6eef6}
.meta{color:var(--muted);font-size:14px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
.footer{padding:24px 0;color:var(--muted);font-size:14px}
hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:18px 0}
ul.inline{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
ul.inline li a{display:inline-block;background:rgba(255,255,255,.06);padding:6px 10px;border-radius:8px}
blockquote{background:rgba(255,255,255,.05);border-left:4px solid var(--accent);margin:14px 0;padding:10px 12px;border-radius:8px}