/* ========== Fonts ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&family=IBM+Plex+Mono:wght@400;700&display=swap');

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-2: rgba(0,0,0,0.8);
  --ink-3: rgba(0,0,0,0.6);
  --ink-4: rgba(0,0,0,0.4);
  --ink-5: rgba(0,0,0,0.1);
  --border: rgba(0,0,0,0.05);
  --border-strong: #000000;
  --nav-h: 64px;
  --sidebar-w: 280px;
  --sans: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --nav-bg: rgba(255,255,255,0.8);
  --code-bg: #000000;
  --code-text: #ffffff;
}

[data-theme="dark"] {
  --paper: #09090b;
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.8);
  --ink-3: rgba(255,255,255,0.6);
  --ink-4: rgba(255,255,255,0.4);
  --ink-5: rgba(255,255,255,0.1);
  --border: rgba(255,255,255,0.05);
  --border-strong: #ffffff;
  --nav-bg: rgba(9,9,11,0.8);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);transition:background 0.3s, color 0.3s;}
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:200;}
.sidebar{position:fixed;top:var(--nav-h);left:0;width:var(--sidebar-w);height:calc(100vh - var(--nav-h));border-right:1px solid var(--border);padding:40px;overflow-y:auto;background:var(--paper);}
.content{margin-left:var(--sidebar-w);padding:80px 100px;}
#article h1{font-size:72px;font-weight:900;letter-spacing:-0.05em;text-transform:uppercase;line-height:0.9;margin-bottom:48px;}
#article h2{font-size:32px;font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;margin-top:80px;margin-bottom:24px;border-left:8px solid var(--ink);padding-left:24px;}
pre{background:var(--code-bg);color:var(--code-text);padding:32px;border:1px solid var(--border);font-family:var(--mono);overflow-x:auto;}