@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
:root { --bg:#0b0d12; --panel:#121722; --text:#e6edf3; --muted:#8b949e; --line:#263043; --accent:#7c9cff; --accent2:#8ff0c3; }
* { box-sizing: border-box; } body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #172033, var(--bg) 45%); color:var(--text); line-height:1.75; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--accent2); }
.site-header { max-width:980px; margin:0 auto; padding:28px 20px; display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight:800; letter-spacing:.03em; } nav { display:flex; gap:18px; color:var(--muted); }
.container { max-width:980px; margin:0 auto; padding:24px 20px 80px; }
.hero { padding:72px 0 48px; border-bottom:1px solid var(--line); } .hero h1 { font-size: clamp(42px, 7vw, 82px); line-height:1; margin:0 0 20px; background:linear-gradient(90deg, var(--text), var(--accent2)); -webkit-background-clip:text; color:transparent; } .hero p { color:var(--muted); font-size:20px; max-width:620px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:32px; }
.card { background:rgba(18,23,34,.78); border:1px solid var(--line); border-radius:22px; padding:24px; backdrop-filter: blur(10px); } .card h2 { margin:6px 0 8px; }
.date { color:var(--muted); font-size:14px; } .post { max-width:760px; margin:36px auto; background:rgba(18,23,34,.65); border:1px solid var(--line); border-radius:26px; padding: clamp(24px, 5vw, 48px); } .post h1 { font-size: clamp(32px, 5vw, 56px); line-height:1.1; } .post h2, .post h3 { margin-top:34px; }
code, pre { background:#0a0e16; border:1px solid var(--line); border-radius:10px; } code { padding:.1em .35em; } pre { padding:16px; overflow:auto; }
.footer { max-width:980px; margin:0 auto; padding:28px 20px 48px; color:var(--muted); border-top:1px solid var(--line); }
@media (max-width:640px) { .site-header { align-items:flex-start; gap:12px; flex-direction:column; } }