:root {
      --bg-primary: #05070C;
      --bg-secondary: #0A0E16;
      --bg-card: rgba(16, 20, 28, 0.75);
      --border: #161C2B;
      --border-bright: #232D40;
      --hairline: rgba(255,255,255,0.08);
      --hairline-strong: rgba(255,255,255,0.14);
      --mint: #6EE7B7;
      --ice: #A5F3FC;
      --text-primary: #E8EDF4;
      --text-whisper: #C5CBD4;
      --text-secondary: #C5CBD4;
      --text-muted: #8B93A1;
      --accent-mint: #6EE7B7;
      --accent-ice: #A5F3FC;
      --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
      --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    }

    body.light {
      --bg-primary: #F7F8FA;
      --bg-secondary: #EEF0F4;
      --bg-card: rgba(255, 255, 255, 0.82);
      --border: #DDE1E8;
      --border-bright: #C8CDD6;
      --hairline: rgba(0,0,0,0.08);
      --hairline-strong: rgba(0,0,0,0.14);
      --text-primary: #111827;
      --text-whisper: #4B5563;
      --text-secondary: #4B5563;
      --text-muted: #9CA3AF;
      --mint: #059669;
      --ice: #0284C7;
      --accent-mint: #059669;
      --accent-ice: #0284C7;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Layout */
    .page-wrapper {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    main {
      flex: 1;
    }

    /* Navigation */
    nav {
      border-bottom: 1px solid var(--border);
      background-color: var(--bg-card);
      backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-content {
      max-width: 1280px;
      margin: 0 auto;
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .nav-back {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s;
    }

    .nav-back:hover {
      color: var(--accent-ice);
    }

    /* Main Content */
    .container {
      max-width: 760px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    /* Post Header */
    .post-header {
      margin-bottom: 3rem;
    }

    .post-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }

    .post-category {
      display: inline-block;
      background-color: var(--accent-mint);
      color: var(--bg-primary);
      padding: 0.375rem 0.875rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.025em;
    }

    .post-date,
    .post-author {
      font-size: 0.95rem;
      color: var(--text-secondary);
    }

    .post-date::before {
      content: "•";
      margin-right: 0.75rem;
      color: var(--text-muted);
    }

    .post-author::before {
      content: "•";
      margin-right: 0.75rem;
      color: var(--text-muted);
    }

    .post-title {
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.2;
      color: var(--text-primary);
      margin-bottom: 0;
    }

    /* Post Content */
    .post-content {
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--text-primary);
    }

    .post-content h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      color: var(--text-primary);
    }

    .post-content h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }

    .post-content p {
      margin-bottom: 1.5rem;
      color: var(--text-secondary);
    }

    .post-content p strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .post-content ul,
    .post-content ol {
      margin-bottom: 1.5rem;
      margin-left: 1.5rem;
    }

    .post-content li {
      margin-bottom: 0.75rem;
      color: var(--text-secondary);
    }

    .post-content li strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .post-content a {
      color: var(--accent-ice);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
    }

    .post-content a:hover {
      border-bottom-color: var(--accent-ice);
    }

    .highlight {
      color: var(--accent-mint);
      font-weight: 600;
    }

    /* Blockquote */
    .post-content blockquote {
      border-left: 3px solid var(--accent-ice);
      padding-left: 1.5rem;
      margin: 2rem 0;
      color: var(--text-secondary);
      font-style: italic;
    }

    /* Code Block */
    .post-content code {
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 0.9em;
      color: var(--accent-mint);
    }

    /* Post Navigation */
    .post-navigation {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 4rem;
      padding-top: 2rem;
      border-top: 1px solid var(--border);
    }

    .nav-post {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      text-decoration: none;
      color: var(--text-secondary);
      padding: 1.5rem;
      background-color: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: all 0.2s;
    }

    .nav-post:hover {
      border-color: var(--accent-ice);
      background-color: rgba(125, 211, 252, 0.05);
    }

    .nav-post-label {
      font-size: 0.85rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.025em;
    }

    .nav-post-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .nav-post:hover .nav-post-title {
      color: var(--accent-ice);
    }

    .nav-post.prev {
      text-align: left;
    }

    .nav-post.next {
      text-align: right;
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--border);
      background-color: var(--bg-card);
      backdrop-filter: blur(12px);
    }

    .footer-content {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2rem;
      display: flex;
      justify-content: center;
      gap: 2rem;
    }

    footer a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s;
    }

    footer a:hover {
      color: var(--accent-ice);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .container {
        padding: 2rem 1.5rem;
      }

      .post-title {
        font-size: 1.875rem;
      }

      .post-content {
        font-size: 1rem;
      }

      .post-navigation {
        grid-template-columns: 1fr;
      }

      .nav-post.next {
        text-align: left;
      }

      .nav-content {
        padding: 1rem;
      }

      .post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }

      .post-date::before,
      .post-author::before {
        content: "";
        margin-right: 0;
      }
    }

    @media (max-width: 640px) {
      .post-title {
        font-size: 1.5rem;
      }

      .container {
        padding: 1.5rem 1rem;
      }

      .post-meta {
        gap: 0.25rem;
      }

      .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 1rem;
      }
    }

    /* ── Luxe refresh overrides ── */
    body {
      background-color: var(--bg-primary);
      overflow-x: hidden;
    }
    .ambient-grain, .ambient-vignette, .ambient-glow {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
    }
    .ambient-grain {
      opacity: 0.035;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>");
      mix-blend-mode: overlay;
    }
    .ambient-vignette {
      background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
    }
    .ambient-glow {
      background:
        radial-gradient(ellipse 900px 600px at 15% 10%, rgba(110,231,183,0.05), transparent 60%),
        radial-gradient(ellipse 800px 500px at 85% 90%, rgba(165,243,252,0.04), transparent 60%);
    }
    .page-wrapper { position: relative; z-index: 10; }
    nav { z-index: 100; border-bottom-color: var(--hairline); background-color: rgba(5, 7, 12, 0.82); }
    body.light nav { background-color: rgba(247, 248, 250, 0.9); }
    .nav-back { transition: color 0.45s var(--ease-luxe); }
    .nav-back:hover { color: var(--mint); }
    .post-title em, h1 em, h2 em {
      font-family: 'Fraunces', 'Instrument Sans', serif;
      font-style: italic;
      font-weight: 300;
      letter-spacing: -0.015em;
      background: linear-gradient(135deg, var(--mint) 0%, var(--ice) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .post-category {
      background-color: transparent;
      color: var(--mint);
      border: 1px solid var(--hairline-strong);
      background: rgba(110, 231, 183, 0.08);
    }
    .post-content p, .post-content li { color: var(--text-whisper); }
    .post-content a { color: var(--ice); transition: border-color 0.45s var(--ease-luxe), color 0.45s var(--ease-luxe); }
    .post-content a:hover { border-bottom-color: var(--ice); color: var(--mint); }
    .highlight { color: var(--mint); }
    .post-content blockquote {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 1.35rem;
      line-height: 1.55;
      color: var(--text-whisper);
      border-left: 2px solid var(--mint);
      padding: 1rem 0 1rem 1.5rem;
      margin: 2rem 0;
    }
    blockquote {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 1.35rem;
      line-height: 1.55;
      color: var(--text-whisper);
      border-left: 2px solid var(--mint);
      padding: 1rem 0 1rem 1.5rem;
      margin: 2rem 0;
    }
    .post-content code, pre, code {
      background-color: var(--bg-secondary);
      border-color: var(--hairline);
      color: var(--mint);
    }
    .post-navigation { border-top-color: var(--hairline); }
    .nav-post { border-color: var(--hairline); transition: all 0.5s var(--ease-luxe); }
    .nav-post:hover { border-color: var(--mint); background-color: rgba(110, 231, 183, 0.04); }
    .nav-post:hover .nav-post-title { color: var(--mint); }
    footer { border-top-color: var(--hairline); }
    footer a { transition: color 0.45s var(--ease-luxe); }
    footer a:hover { color: var(--mint); }

    /* Nav logo SVG sizing */
    .nav-logo svg { height: 30px; width: auto; display: block; }

    /* Theme toggle */
    .theme-toggle{position:relative;display:inline-block;width:44px;height:24px;border-radius:24px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);cursor:pointer;padding:0;vertical-align:middle;transition:background 0.3s ease, border-color 0.3s ease}
    .theme-toggle:hover{border-color:rgba(110,231,183,0.4);background:rgba(255,255,255,0.08)}
    .theme-toggle-thumb{position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;background:#E8ECF2;display:flex;align-items:center;justify-content:center;color:#080A0F;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease}
    body.light .theme-toggle{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
    body.light .theme-toggle:hover{background:rgba(0,0,0,0.06);border-color:rgba(5,150,105,0.4)}
    body.light .theme-toggle-thumb{transform:translateX(20px);background:#059669;color:#fff}

    /* Light-mode extensions */
    body.light { background-color: #F7F8FA; color: #111827; }
    body.light .ambient-grain { opacity: 0.015; }
    body.light .ambient-vignette {
      background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.04) 100%);
    }
    body.light .ambient-glow {
      background:
        radial-gradient(ellipse 900px 600px at 15% 10%, rgba(5,150,105,0.04), transparent 60%),
        radial-gradient(ellipse 800px 500px at 85% 90%, rgba(2,132,199,0.03), transparent 60%);
    }
    body.light nav {
      background-color: rgba(247,248,250,0.92);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    body.light .nav-logo text { fill: #111827; }
    body.light .nav-back { color: #4B5563; }
    body.light .nav-back:hover { color: #059669; }
    body.light footer {
      background-color: rgba(247,248,250,0.92);
      border-top: 1px solid rgba(0,0,0,0.08);
    }
    body.light footer a { color: #4B5563; }
    body.light footer a:hover { color: #059669; }
    body.light .post-title { color: #111827; }
    body.light .post-category { background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.24); color: #047857; }
    body.light .post-date, body.light .post-author { color: #4B5563; }
    body.light .post-date::before, body.light .post-author::before { color: #9CA3AF; }
    body.light .post-content { color: #111827; }
    body.light .post-content h2,
    body.light .post-content h3 { color: #111827; }
    body.light .post-content p,
    body.light .post-content li { color: #374151; }
    body.light .post-content strong,
    body.light .post-content p strong,
    body.light .post-content li strong { color: #111827; }
    body.light .post-content a { color: #0369A1; }
    body.light .post-content a:hover { color: #047857; border-bottom-color: #047857; }
    body.light .highlight { color: #047857; }
    body.light .post-content blockquote { color: #374151; border-left-color: #059669; }
    body.light .post-content code,
    body.light pre, body.light code {
      background-color: #EEF0F4;
      border-color: rgba(0,0,0,0.08);
      color: #047857;
    }
    body.light .post-navigation { border-top-color: rgba(0,0,0,0.08); }
    body.light .nav-post {
      background-color: rgba(255,255,255,0.7);
      border-color: rgba(0,0,0,0.1);
      color: #4B5563;
    }
    body.light .nav-post:hover { border-color: #059669; background-color: rgba(5,150,105,0.04); }
    body.light .nav-post-label { color: #6B7280; }
    body.light .nav-post-title { color: #111827; }
    body.light .nav-post:hover .nav-post-title { color: #059669; }