:root, [data-theme="light"] {
      --sys-surface-canvas: #ffffff;
      --sys-surface-panel: #f8f8f8;
      --sys-surface-raised: #f0f0f0;
      --sys-surface-hover: rgba(0,0,0,0.03);
      --sys-text-primary: #1a1a1a;
      --sys-text-secondary: #4a4a4a;
      --sys-text-muted: #8a8a8a;
      --sys-border-default: #e2e2e2;
      --sys-border-subtle: #ebebeb;
      --sys-border-strong: #c0c0c0;
      --sys-accent-primary: #0d9488;
      --sys-accent-primary-hover: #0f766e;
      --sys-accent-soft-bg: rgba(13,148,136,0.06);
      --sys-accent-soft-border: rgba(13,148,136,0.18);
      --sys-text-strong: #1e3a38;
      --nav-bg: rgba(255,255,255,0.85);
      --max-w: 720px;
      --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem;
      --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem;
    }
    [data-theme="dark"] {
      --sys-surface-canvas: #0a0a0a;
      --sys-surface-panel: #141414;
      --sys-surface-raised: #1c1c1e;
      --sys-surface-hover: rgba(255,255,255,0.04);
      --sys-text-primary: #f0f0f0;
      --sys-text-secondary: #b0b0b0;
      --sys-text-muted: #707070;
      --sys-border-default: #252525;
      --sys-border-subtle: #1e1e1e;
      --sys-border-strong: #3a3a3a;
      --sys-accent-primary: #14b8a6;
      --sys-accent-primary-hover: #0d9488;
      --sys-accent-soft-bg: rgba(20,184,166,0.08);
      --sys-accent-soft-border: rgba(20,184,166,0.20);
      --sys-text-strong: #d4ece9;
      --nav-bg: rgba(10,10,10,0.85);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
      font-size: 14px; line-height: 1.65;
      color: var(--sys-text-primary);
      background: var(--sys-surface-canvas);
      text-rendering: optimizeLegibility;
      font-kerning: normal;
      font-optical-sizing: auto;
      transition: background 0.2s, color 0.2s;
    }

    /* Nav */
    nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sys-border-subtle); }
    nav .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); display: flex; align-items: center; justify-content: space-between; height: 44px; }
    nav .nav-name { font-weight: 600; font-size: 14px; color: var(--sys-text-primary); letter-spacing: -0.01em; text-decoration: none; }
    .nav-right { display: flex; align-items: center; gap: var(--space-md); }
    nav .nav-links { display: flex; gap: var(--space-md); list-style: none; }
    nav .nav-links a { font-size: 13px; font-weight: 500; color: var(--sys-text-muted); text-decoration: none; transition: color 0.15s; }
    nav .nav-links a:hover, nav .nav-links a.active { color: var(--sys-text-primary); }
    .theme-toggle { background: none; border: 1px solid var(--sys-border-default); border-radius: 6px; width: 32px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--sys-text-muted); transition: all 0.15s; flex-shrink: 0; }
    .theme-toggle:hover { color: var(--sys-text-primary); border-color: var(--sys-border-strong); }
    .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
    [data-theme="light"] .theme-toggle .icon-moon { display: block; }
    [data-theme="dark"] .theme-toggle .icon-sun { display: block; }

    /* Main */
    main { max-width: var(--max-w); margin: 0 auto; padding: var(--space-2xl) var(--space-lg); }

    /* Post header */
    .post-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--sys-border-subtle); }
    .post-header h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: var(--space-sm); }
    .post-header .post-meta { font-size: 13px; color: var(--sys-text-muted); }
    .post-back { display: inline-block; font-size: 13px; color: var(--sys-text-muted); text-decoration: none; margin-bottom: var(--space-lg); transition: color 0.15s; }
    .post-back:hover { color: var(--sys-accent-primary); }

    /* Post overview */
    .post-overview { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
    .post-overview-card { padding: var(--space-xl); border: 1px solid var(--sys-border-default); border-left: 4px solid var(--sys-text-primary); border-radius: 8px; background: var(--sys-surface-panel); }
    .post-overview-title { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sys-text-primary); }
    .post-overview-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--sys-text-primary); }
    .post-tldr { margin: 0; padding-left: var(--space-xl); color: var(--sys-text-secondary); }
    .post-tldr li { margin-bottom: var(--space-sm); font-size: 14.5px; font-weight: 500; line-height: 1.65; }
    .post-tldr li:last-child { margin-bottom: 0; }
    .post-tldr a { color: var(--sys-text-primary); text-decoration: underline; text-decoration-color: var(--sys-border-strong); text-underline-offset: 3px; border-bottom: none; }
    .post-tldr a:hover { text-decoration-color: var(--sys-text-primary); }
    .post-contents { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .post-contents-link { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 7px; color: var(--sys-text-secondary); text-decoration: none; border-bottom: none; transition: background 0.15s, color 0.15s; }
    .post-contents-link:hover { color: var(--sys-surface-canvas); background: var(--sys-text-primary); }
    .post-contents-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--sys-text-primary); color: var(--sys-surface-canvas); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; line-height: 1; transition: background 0.15s, color 0.15s; }
    .post-contents-text { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
    .post-contents-arrow { color: var(--sys-text-muted); transition: transform 0.15s, color 0.15s; }
    .post-contents-link:hover .post-contents-number { background: var(--sys-surface-canvas); color: var(--sys-text-primary); }
    .post-contents-link:hover .post-contents-arrow { color: var(--sys-surface-canvas); transform: translateX(3px); }

    /* Markdown content */
    .prose h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: var(--space-xl) 0 var(--space-md); }
    .prose h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: var(--space-xl) 0 var(--space-md); color: var(--sys-text-primary); text-transform: none; border-bottom: none; padding-bottom: 0; }
    .prose h3 { font-size: 15px; font-weight: 600; margin: var(--space-lg) 0 var(--space-sm); }
    .prose h1, .prose h2, .prose h3 { scroll-margin-top: 60px; }
    .prose p { margin-bottom: var(--space-md); color: var(--sys-text-secondary); line-height: 1.75; font-size: 14.5px; }
    .prose ul, .prose ol { margin-bottom: var(--space-md); padding-left: var(--space-xl); color: var(--sys-text-secondary); }
    .prose li { margin-bottom: var(--space-xs); line-height: 1.7; font-size: 14.5px; }
    .prose strong { color: var(--sys-text-strong); font-weight: 700; }
    .prose a { color: var(--sys-accent-primary); text-decoration: none; border-bottom: 1px solid var(--sys-accent-soft-border); transition: border-color 0.15s; }
    .prose a:hover { border-color: var(--sys-accent-primary); }
    .prose blockquote { border-left: 3px solid var(--sys-accent-primary); padding-left: var(--space-lg); margin: var(--space-lg) 0; color: var(--sys-text-muted); font-style: italic; }
    .prose .tool-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 0 var(--space-xl); padding: var(--space-md) var(--space-lg); border: 1px solid var(--sys-accent-soft-border); border-radius: 10px; background: linear-gradient(135deg, var(--sys-accent-soft-bg), var(--sys-surface-panel)); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
    .prose .tool-callout-label { display: block; margin-bottom: 2px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sys-accent-primary); }
    .prose .tool-callout-text { color: var(--sys-text-secondary); font-size: 16px; line-height: 1.45; }
    .prose .tool-callout-text strong { color: var(--sys-text-primary); font-weight: 700; }
    .prose .tool-callout-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
    .prose .tool-callout-actions a { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--sys-accent-primary); text-decoration: none; padding: 4px 10px; border: 1px solid var(--sys-accent-soft-border); border-radius: 999px; background: var(--sys-surface-canvas); transition: all 0.15s; }
    .prose .tool-callout-actions a:hover { color: var(--sys-accent-primary-hover); border-color: var(--sys-accent-primary); background: var(--sys-accent-soft-bg); }
    .prose .tool-callout-actions a.primary { color: #fff; background: var(--sys-accent-primary); border-color: var(--sys-accent-primary); }
    .prose .tool-callout-actions a.primary:hover { color: #fff; background: var(--sys-accent-primary-hover); border-color: var(--sys-accent-primary-hover); }
    .prose code { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--sys-surface-raised); padding: 1px 5px; border-radius: 3px; }
    .prose pre { background: var(--sys-surface-raised); border: 1px solid var(--sys-border-default); border-radius: 6px; padding: var(--space-lg); overflow-x: auto; margin-bottom: var(--space-lg); }
    .prose pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
    .prose table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 13.5px; line-height: 1.45; }
    .prose th, .prose td { border: 1px solid var(--sys-border-default); padding: 8px 10px; vertical-align: top; text-align: left; }
    .prose th { background: var(--sys-surface-panel); color: var(--sys-text-primary); font-weight: 700; }
    .prose td { color: var(--sys-text-secondary); }
    .prose tbody tr:nth-child(even) { background: var(--sys-surface-hover); }
    .prose img { max-width: 100%; height: auto; border-radius: 6px; margin: var(--space-lg) 0; border: 1px solid var(--sys-border-subtle); }
    .prose hr { border: none; border-top: 1px solid var(--sys-border-default); margin: var(--space-xl) 0; }

    /* Loading / error */
    .empty { text-align: center; padding: var(--space-2xl) 0; color: var(--sys-text-muted); font-size: 13px; }

    /* Comments */
    .giscus-section { max-width: var(--max-w); margin: 0 auto; padding: var(--space-2xl) var(--space-lg) var(--space-lg); border-top: 1px solid var(--sys-border-subtle); }

    /* Footer */
    footer { max-width: var(--max-w); margin: 0 auto; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--sys-border-subtle); text-align: center; font-size: 11px; color: var(--sys-text-muted); }

    @media (max-width: 600px) {
      nav .nav-links { gap: var(--space-sm); }
      nav .nav-links a { font-size: 12px; }
      .nav-right { min-width: 0; }
      nav .nav-links { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
      nav .nav-links::-webkit-scrollbar { display: none; }
      nav .nav-links a { white-space: nowrap; }
      .post-header h1 { font-size: 19px; }
      .prose .tool-callout { flex-direction: column; align-items: flex-start; }
      .prose .tool-callout-actions { justify-content: flex-start; }
    }