/* Extracted from templates/blog_article.html (m6 — CSP `style-src-elem` cannot
   drop 'unsafe-inline' while a page carries a <style> block). */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --teal:#0E7490; --teal-lt:#06B6D4; --teal-dk:#083344; --teal-dim:#ECFEFF;
      --gray-900:#0F172A; --gray-700:#334155; --gray-600:#475569; --gray-500:#64748B; --gray-300:#CBD5E1; --gray-200:#E2E8F0; --gray-100:#F1F5F9; --gray-50:#F8FAFC;
      --white:#FFFFFF; --border:#BAE6FD;
      --font-d:'Plus Jakarta Sans', system-ui, sans-serif;
      --font-b:'DM Sans', system-ui, sans-serif;
      --font-m:'JetBrains Mono', ui-monospace, monospace;
      --radius:14px; --radius-lg:20px;
      --shadow-sm:0 2px 8px rgba(14,116,144,.08);
      --shadow-md:0 10px 30px rgba(14,116,144,.12);
      --container:760px;
    }
    html{scroll-behavior:smooth}
    body{font-family:var(--font-b);color:var(--gray-900);background:var(--white);line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
    a:hover{color:var(--teal-dk)}
    img{max-width:100%;display:block}
    header.hero{padding:60px 20px 28px;background:linear-gradient(180deg,var(--teal-dim),var(--white));border-bottom:1px solid var(--gray-200)}
    .hero-inner{max-width:var(--container);margin:0 auto}
    .crumbs{font-size:.82rem;color:var(--gray-500);margin-bottom:14px}
    .crumbs a{color:var(--gray-600);text-decoration:none}
    .crumbs a:hover{color:var(--teal)}
    .tag{display:inline-block;background:var(--teal-dim);color:var(--teal);padding:4px 12px;border-radius:999px;font-size:.76rem;font-weight:600;font-family:var(--font-d);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
    h1.post-title{font-family:var(--font-d);font-size:clamp(2rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;color:var(--gray-900);line-height:1.15;margin-bottom:16px}
    .post-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.88rem;color:var(--gray-500);font-family:var(--font-d);font-weight:500}
    .post-meta time{color:var(--gray-600)}
    article.post{max-width:var(--container);margin:0 auto;padding:40px 20px 30px}
    article.post .lead{font-size:1.15rem;color:var(--gray-700);margin-bottom:28px;line-height:1.6}
    article.post h2{font-family:var(--font-d);font-size:1.6rem;font-weight:700;color:var(--gray-900);margin:44px 0 14px;letter-spacing:-.01em;line-height:1.25}
    article.post h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--gray-900);margin:28px 0 10px;line-height:1.3}
    article.post p{margin:14px 0;color:var(--gray-700)}
    article.post ul,article.post ol{margin:14px 0 14px 24px;color:var(--gray-700)}
    article.post li{margin:8px 0}
    article.post strong{color:var(--gray-900);font-weight:600}
    article.post em{font-style:italic}
    article.post code{font-family:var(--font-m);background:var(--gray-100);padding:2px 6px;border-radius:4px;font-size:.92em;color:var(--teal-dk)}
    article.post pre{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;overflow:auto;margin:18px 0}
    article.post pre code{background:transparent;padding:0}
    article.post blockquote{border-left:3px solid var(--teal);background:var(--teal-dim);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0;color:var(--gray-700);font-style:italic}
    .cta-box{margin:40px 0 10px;padding:28px;background:linear-gradient(135deg,var(--teal-dim),#fff);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center}
    .cta-box h3{margin-top:0 !important}
    .cta-btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 22px;border-radius:10px;font-weight:600;text-decoration:none;font-family:var(--font-d);margin-top:6px}
    .cta-btn:hover{background:var(--teal-dk);color:#fff}
    section.related{max-width:var(--container);margin:30px auto 0;padding:30px 20px;border-top:1px solid var(--gray-200)}
    section.related h2{font-family:var(--font-d);font-size:1.2rem;font-weight:700;margin-bottom:16px;color:var(--gray-900)}
    .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
    .rel-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px;transition:all .2s}
    .rel-card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}
    .rel-card a{font-family:var(--font-d);font-weight:600;color:var(--gray-900);text-decoration:none;font-size:.98rem;line-height:1.35;display:block;margin-bottom:6px}
    .rel-card a:hover{color:var(--teal)}
    .rel-card p{color:var(--gray-600);font-size:.86rem;margin:0}