/* BLOG POST CSS*/
    * {margin:0;padding:0;box-sizing:border-box;}
    html {scroll-behavior:smooth;}
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height:1.7;
      transition: background .3s, color .3s;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    :root {
      --bg: #ffffff;
      --text: #1e293b;
      --muted: #64748b;
      --border: #e2e8f0;
      --accent: #0369a1;
      --accent2: #65a30d;
      --code-bg: #f8fafc;
      --quote-bg: #f1f5f9;
      --navbar-height: 60px;
      --cta-primary: #b9e500;
      --cta-text: #1a1a1a;
    }

    body.dark {
    --bg: #1a1a1a;
    --text: #e2e8f0;
    --muted: #9ca3af;
    --border: #2d2d2d;
    --accent: #38bdf8;
    --accent2: #4ade80;
    --code-bg: #252525;
    --quote-bg: #202020;
    }

    .progress-bar {
      position:fixed;
      top:0;
      left:0;
      height:4px;
      background: linear-gradient(90deg,var(--accent),var(--accent2));
      width:0%;
      z-index:10000;
      transition: width 0.1s ease;
    }

    .layout {
      position: relative;
      max-width: 1300px;
      margin: 0 auto;
      padding: 5rem 1.5rem 0;
      display: flex;
      gap: 5rem;
      align-items: flex-start;
    }

    .toc {
      position: sticky;
      top: calc(var(--navbar-height) + 1rem);
      left: 0;
      width: 280px;
      background: var(--quote-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem 1.5rem;
      z-index: 50;
      align-self: flex-start;
      max-height: calc(100vh - var(--navbar-height) - 2rem);
      overflow-y: auto;
      margin-left: -1.5rem;
    }

    .toc.show {
      opacity: 1;
      visibility: visible;
    }

    ul > li > a {
        line-height: 1.5;
        font-weight:100;
    }
    .toc h3 {
      font-family:'Inter', sans-serif;
      font-size:1.1rem;
      font-weight:700;
      margin-bottom:1rem;
      color:var(--accent);
    }
    .toc ul {list-style:none;padding-left:0;}
    .toc li {margin:0;padding:0;}
    .toc a {
      text-decoration:none;
      color:var(--muted);
      font-size:.9rem;
      transition:all .2s ease;
      display:block;
      padding:.3rem 0;
    }
    .toc a:hover {
      color:var(--accent);
    }

    .content {
      flex: 1;
      min-width: 0;
      max-width: 750px;
    }

    header {
      margin-bottom:3rem;
    }
    header h1 {
      font-family: 'Inter', sans-serif;
      font-size:clamp(2.2rem,5vw,2.5rem);
      font-weight:800;
      margin-bottom:1rem;
      letter-spacing:-0.02em;
      line-height:1.3;
    }
    .post-meta {
      color: var(--muted);
      font-size:.9rem;
      font-weight:500;
      display:flex;
      text-align:left;
      gap:1.5rem;
      flex-wrap:wrap;
    }

    .social-share {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .share-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: var(--quote-bg);
      color: var(--muted);
      text-decoration: none;
      border: 1px solid var(--border);
      transition: all 0.2s ease;
    }

    .share-btn:hover {
      background: var(--accent);
      color: #fff;
      transform: translateY(-1px);
    }

    article p {
      font-size:1.1rem;
      margin:1.6rem 0;
      font-weight:400;
    }
    article h2, article h3 {
      font-family:'Inter', sans-serif;
      font-weight:700;
      scroll-margin-top: 90px;
    }
    article h2 {
      font-size:1.9rem;
      font-weight:800;
      letter-spacing:-0.01em;
      scroll-margin-top: 90px;
    }
    article h3 {
      font-size:1.4rem;
      color:var(--accent);
      font-weight:700;
    }
    article img {
      max-width:100%;
      border-radius:12px;
      margin:2.5rem 0;
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    article ul, article ol {
      margin: 1.6rem 0;
      padding-left: 2rem;
    }
    
    article li {
      margin: 0.5rem 0;
      font-size: 1.1rem;
    }

    blockquote {
      background: var(--quote-bg);
      border-left:4px solid var(--accent);
      padding:1.8rem;
      margin:2.5rem 0;
      font-style:italic;
      font-weight:500;
      border-radius:0;
    }

    pre {
      background: var(--code-bg);
      padding:1.5rem;
      border-radius:8px;
      overflow-x:auto;
      margin:2rem 0;
      border:1px solid var(--border);
    }
    code {
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      color: var(--accent);
      font-size:.9rem;
    }

    table {
      width:100%;
      border-collapse:collapse;
      margin:2.5rem 0;
      font-size:.95rem;
      border-radius:8px;
      overflow:hidden;
      border:1px solid var(--border);
    }
    th, td {
      padding:1rem 1.2rem;
      border-bottom:1px solid var(--border);
      text-align:left;
    }
    th {
      background: var(--quote-bg);
      font-weight:600;
    }
    tr:last-child td {
      border-bottom:none;
    }

    .cta {
      margin: 3.5rem 0;
      padding: 2.5rem;
      border-radius: 12px;
      text-align: center;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      color: var(--text);
    }
    body.dark .cta {
      background: #1f1f1f;
      border: 1px solid #374151;
    }
    .cta h2 {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      margin-bottom: 1rem;
      color: var(--text);
    }
    .cta p {
      margin-bottom: 1.5rem;
      opacity: 0.8;
      color: var(--muted);
    }
    .cta a {
      display: inline-block;
      padding: 0.8rem 2rem;
      background: var(--cta-primary);
      color: var(--cta-text);
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .cta a:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    .social {
      display:flex;
      justify-content:center;
      gap:1.5rem;
      margin-top:1.5rem;
    }
    .social a {
      color:var(--accent);
      text-decoration:none;
      font-weight:500;
      transition:color .2s ease;
    }
    .social a:hover {
      color:var(--text);
    }

    .image-placeholder {
      background: var(--quote-bg);
      margin: 2.5rem 0;
      text-align: center;
      transition: all 0.2s ease;
      max-width: auto;
      height: 400px;
      overflow: hidden;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .image-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      margin: 0 !important;
    }

    .placeholder-content i {
      font-size: 3rem;
      color: var(--muted);
      margin-bottom: 1rem;
      display: block;
    }
    .placeholder-content p {
      color: var(--muted);
      font-style: italic;
      margin: 0;
    }

    .theme-toggle {
      position:fixed;
      right:1.5rem;
      top:calc(var(--navbar-height) + 1rem);
      background: var(--bg);
      color: var(--text);
      border: 2px solid var(--border);
      padding: 0.75rem;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      z-index: 100;
      transition: all .2s ease;
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

  .post-meta i {
    margin-right: 0.5rem;
    color: var(--accent);
  }
  
  .theme-toggle:hover {
    transform:scale(1.05);
  }

@media(max-width:1200px){
.layout { flex-direction: column; gap: 1.5rem; }
.toc { position: static; width: 100%; max-height: none; order: -1; margin-left: 0; }
.content { max-width: none; }
}

@media(max-width:768px){
.toc { display: none; }
.layout { gap: 0; padding-top: 6rem; }
header h1 { font-size: clamp(1.8rem, 5vw, 2.2rem); line-height: 1.2; margin-bottom: 1.5rem; }
.post-meta { flex-direction: column; gap: 0.75rem; font-size: 0.85rem; }
.social-share { margin-top: 1.5rem; }
article p { font-size: 1.05rem; line-height: 1.6; margin: 1.8rem 0; }
}

@media(max-width:640px){
.layout { padding: 7rem 1.25rem 0; }
header { margin-bottom: 2.5rem; }
header h1 { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.015em; }
.post-meta { gap: 0.5rem; font-size: 0.8rem; }
.post-meta span { display: flex; align-items: center; }
article h2 { font-size: 1.5rem; margin: 2.5rem 0 1.5rem 0; line-height: 1.3; }
article h3 { font-size: 1.25rem; margin: 2rem 0 1rem 0; }
article p { font-size: 1rem; line-height: 1.65; margin: 1.5rem 0; }
article ul, article ol { margin: 1.5rem 0; padding-left: 1.5rem; }
article li { font-size: 1rem; margin: 0.4rem 0; line-height: 1.6; }
blockquote { padding: 1.5rem 1.25rem; margin: 2rem 0; font-size: 0.95rem; }
pre { padding: 1.25rem; margin: 1.75rem 0; font-size: 0.85rem; }
table { font-size: 0.85rem; margin: 2rem 0; }
th, td { padding: 0.75rem 1rem; }
.cta { margin: 2.5rem 0; padding: 2rem 1.5rem; }
.theme-toggle { right: 1rem; top: calc(var(--navbar-height) + 0.75rem); width: 2.5rem; height: 2.5rem; padding: 0.5rem; font-size: 0.9rem; }
.social-share { justify-content: center; gap: 0.5rem; }
.share-btn { width: 2.25rem; height: 2.25rem; }
.image-placeholder { padding: 2rem 1rem; margin: 2rem 0; }
.placeholder-content i { font-size: 2rem; }
}

@media(max-width:480px){
.layout { padding: 8rem 1rem 0; }
header h1 { font-size: 1.5rem; }
article h2 { font-size: 1.35rem; }
article p { font-size: 0.95rem; }
}