html, body { height: 100%; }

    :root {
      --bg: #0b0b0c;
      --panel: #111215;
      --text: #e9e9ee;
      --muted: #a8adbd;
      --accent: #ff7a1a;
      --accent-2: #8ab4ff;
      --border: #1e2026;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
      --maxw: 1100px;
    }

    /* Light mode (respects system preference; remove if you want dark-only) */
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f7f7fb;
        --panel: #ffffff;
        --text: #15151a;
        --muted: #5c6274;
        --accent: #e05500;
        --accent-2: #2f6fff;
        --border: #e9e9f1;
        --shadow: 0 10px 30px rgba(16,22,60,.08);
      }
    }
    .blogimg { max-width: 100%; display: block; }
    .container { width: min(100%, var(--maxw)); margin: 0 auto; padding: 0 20px; }

    .btn {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .7rem 1rem; border-radius: 999px; border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
      box-shadow: var(--shadow);
      transition: transform .12s ease, border-color .2s ease, background .2s ease;
      will-change: transform;
    }
    .btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.15); }
    .btn--accent { background: linear-gradient(180deg, rgba(255,122,26,.18), rgba(255,122,26,.08)); border-color: rgba(255,122,26,.25); }

    .chip { display: inline-block; font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(138,180,255,.15); color: var(--accent-2); border: 1px solid rgba(138,180,255,.25); }

    /* ====== Header ====== */
    header.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg), transparent 15%); }
    .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 0; }
    .brand { display: flex; align-items: center; gap: .8rem; }
    .brand-logo { width: 38px; height: 38px; border-radius: 10px; background: radial-gradient(80% 80% at 30% 20%, #fff3, transparent), linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
    .brand h1 { font-size: 1.1rem; letter-spacing: .5px; margin: 0; }

    .nav-links { display: flex; gap: .8rem; align-items: center; }
    .nav-links a { padding: .6rem .8rem; border-radius: 10px; border: 1px solid transparent; }
    .nav-links a:hover { border-color: var(--border); background: color-mix(in oklab, var(--panel), transparent 20%); }

    .site-header {
      padding: 0;
      background: #111;
      margin-bottom: 0;
    }
    a { color: inherit; text-decoration: none; }