:root{--bg-primary:#0f172a;--bg-surface:#1e293b;--bg-surface-hover:#334155;--border-color:#334155;--text-primary:#f8fafc;--text-muted:#94a3b8;--accent:#38bdf8;--accent-hover:#0ea5e9;--success:#10b981;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}.site-header{background:var(--bg-surface);border-bottom:1px solid var(--border-color);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.brand-link{font-size:1.25rem;font-weight:700;color:var(--text-primary);text-decoration:none}.nav-menu{display:flex;gap:1rem}.nav-item{color:var(--text-muted);text-decoration:none;font-weight:500;padding:0.25rem 0.75rem;border-radius:0.375rem;transition:all 0.15s ease}.nav-item:hover,.nav-item.active{color:var(--text-primary);background:var(--bg-surface-hover)}.container{max-width:960px;margin:2rem auto;padding:0 1.5rem;flex:1;width:100%}h1,h2,h3,h4{color:var(--text-primary);margin-top:1.5rem;margin-bottom:0.75rem}h1{font-size:2.25rem;border-bottom:1px solid var(--border-color);padding-bottom:0.5rem}h2{font-size:1.5rem}p{margin-bottom:1rem;color:var(--text-muted)}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}ul,ol{margin-left:1.5rem;margin-bottom:1rem;color:var(--text-muted)}li{margin-bottom:0.25rem}pre,code{font-family:var(--font-mono)}code{background:var(--bg-surface);border:1px solid var(--border-color);padding:0.15rem 0.4rem;border-radius:0.25rem;font-size:0.9em}pre{background:var(--bg-surface);border:1px solid var(--border-color);padding:1rem;border-radius:0.5rem;overflow-x:auto;margin-bottom:1rem}.pikchr-svg{display:block;margin:1.5rem auto;max-width:100%;height:auto}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:0.5rem;padding:1.5rem;transition:transform 0.15s ease,border-color 0.15s ease}.card:hover{transform:translateY(-2px);border-color:var(--accent)}.card h3{margin-top:0;color:var(--accent)}.site-footer{background:var(--bg-surface);border-top:1px solid var(--border-color);padding:1.5rem 2rem;text-align:center;font-size:0.875rem;color:var(--text-muted)}