*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0e17;--surface:#111827;--surface2:#1a2236;--surface3:#222d45;
  --border:#2a3654;--text:#e8ecf4;--text-dim:#7a8baa;--accent:#3b82f6;
  --accent-glow:rgba(59,130,246,.15);--orange:#f59e0b;--green:#10b981;
  --red:#ef4444;--code-bg:#060a12;
  --radius:8px;--radius-lg:14px;
}
html{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}
body{min-height:100vh;display:flex;flex-direction:column;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--surface)}
.site-header .brand{font:700 16px/1 'JetBrains Mono',monospace;color:var(--text);letter-spacing:-.01em}
.site-header nav{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 14px/1 'DM Sans',sans-serif}
.site-header nav a{color:var(--text-dim)}
.site-header nav a:hover,.site-header nav a[aria-current="page"]{color:var(--accent);text-decoration:none}

.page{flex:1;width:100%;max-width:760px;margin:0 auto;padding:32px 22px 40px}
.page article h1{font:700 30px/1.25 'DM Sans',sans-serif;letter-spacing:-.02em;margin-bottom:6px}
.page article .reviewed{font:400 13px/1.4 'DM Sans',sans-serif;color:var(--text-dim);margin-bottom:22px}
.page article h2{font:600 21px/1.3 'DM Sans',sans-serif;margin:28px 0 10px;letter-spacing:-.01em}
.page article h3{font:600 17px/1.35 'DM Sans',sans-serif;margin:20px 0 8px}
.page article p{margin:0 0 14px;font-size:16px;color:var(--text)}
.page article ul,.page article ol{margin:6px 0 16px 22px}
.page article li{margin-bottom:6px;font-size:16px}
.page article code{font:500 14px/1 'JetBrains Mono',monospace;background:var(--code-bg);color:var(--orange);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.page article pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:10px 0 18px;overflow-x:auto;font:500 13px/1.5 'JetBrains Mono',monospace;color:var(--text)}
.page article pre code{background:transparent;border:0;padding:0;color:inherit;font-size:13px}
.page article blockquote{border-left:3px solid var(--accent);padding:6px 14px;margin:10px 0 18px;color:var(--text-dim);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.page article table{border-collapse:collapse;margin:10px 0 20px;width:100%;font-size:14px}
.page article th,.page article td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.page article th{background:var(--surface2);font-weight:600}
.page article .callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--orange);padding:12px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:14px 0}
.page article .callout strong{color:var(--orange)}

.related{margin-top:36px;padding-top:20px;border-top:1px solid var(--border)}
.related h2{font:600 16px/1.3 'DM Sans',sans-serif;margin-bottom:8px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 16px}
.related li{margin:0;font-size:14px}

.site-footer{margin-top:auto;padding:22px;text-align:center;font:400 12px/1.6 'DM Sans',sans-serif;color:var(--text-dim);border-top:1px solid var(--border)}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-bottom:6px}
.site-footer nav a{color:var(--text-dim)}
.site-footer nav a:hover{color:var(--accent)}

@media(max-width:560px){
  .page{padding:22px 16px 32px}
  .page article h1{font-size:25px}
  .page article h2{font-size:19px}
  .page article p,.page article li{font-size:15px}
}
@media(prefers-color-scheme:light){
  :root{
    --bg:#f0f2f5;--surface:#fff;--surface2:#f5f7fa;--surface3:#ebeef3;
    --border:#d1d5db;--text:#111827;--text-dim:#4b5563;
    --code-bg:#f5f7fa;--accent-glow:rgba(59,130,246,.08);
  }
  .site-header{box-shadow:0 1px 2px rgba(0,0,0,.04)}
}