:root { color-scheme:dark; background:#242628; }
.blog-page { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#242628; color:#f0f2f4; font:14px/1.6 Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.blog-page *, .blog-page *::before, .blog-page *::after { box-sizing:border-box; }
.blog-page a { color:inherit; text-decoration:none; }
.blog-page a:hover { color:#70d495; }
.blog-page a:focus-visible { outline:2px solid #70d495; outline-offset:4px; border-radius:3px; }
.blog-page img { display:block; max-width:100%; }
.blog-container { width:100%; max-width:1200px; margin-inline:auto; padding-inline:28px; }
.blog-topbar { border-bottom:1px solid #393d41; background:#272a2d; }
.blog-topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:78px; }
.blog-brand { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; }
.blog-brand img { object-fit:contain; }
.blog-brand span { font-size:19px; font-weight:800; letter-spacing:-.5px; }
.blog-navigation { display:flex; align-items:center; gap:26px; font-size:13px; font-weight:600; }
.blog-navigation > a { white-space:nowrap; }
.blog-navigation > a[aria-current] { color:#70d495; }
.blog-navigation .blog-panel-link { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid #49504f; border-radius:6px; }
.blog-navigation .blog-panel-link:hover { border-color:#70d495; }
.blog-main { flex:1; padding-top:25px; padding-bottom:56px; }
.blog-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; color:#9da7b0; font-size:12px; margin-bottom:26px; }
.blog-breadcrumb > span:last-child { min-width:0; overflow-wrap:anywhere; }
.blog-breadcrumb > [aria-current] { color:#c7cdd2; }
.blog-heading { padding-bottom:26px; margin-bottom:28px; border-bottom:1px solid #393d41; }
.blog-heading h1 { margin:0 0 7px; font-size:32px; line-height:1.2; letter-spacing:-.8px; font-weight:700; }
.blog-heading p { margin:0; color:#aeb7c0; font-size:14px; }
.blog-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; gap:36px; }
.blog-primary { min-width:0; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.blog-card { display:flex; flex-direction:column; min-width:0; border:1px solid #41464b; border-radius:9px; overflow:hidden; background:#2b2f33; }
.blog-card-image { display:flex; align-items:center; justify-content:center; padding:22px; aspect-ratio:1.95; background:#fff; border-bottom:1px solid #41464b; overflow:hidden; }
.blog-card-image img { width:100%; height:100%; object-fit:contain; }
.blog-card-content { display:flex; flex-direction:column; flex:1; align-items:flex-start; padding:19px 20px 18px; }
.blog-card time, .blog-article-heading time { color:#9eabb6; font-size:11px; letter-spacing:.2px; }
.blog-card h2 { margin:9px 0 10px; font-size:18px; font-weight:600; line-height:1.45; letter-spacing:-.3px; overflow-wrap:anywhere; }
.blog-card-content p { margin:0 0 20px; color:#b3bdc6; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.blog-read-more { display:inline-flex; align-items:center; gap:10px; margin-top:auto; color:#70d495!important; font-size:12px; font-weight:600; }
.blog-read-more:hover { text-decoration:underline; text-underline-offset:3px; }
.blog-sidebar { min-width:0; padding-inline-start:24px; border-inline-start:1px solid #393d41; }
.blog-sidebar > h2 { font-size:15px; margin:0 0 6px; font-weight:600; }
.blog-recent-list { margin:0; padding:0; list-style:none; }
.blog-recent-list li + li { border-top:1px solid #393d41; }
.blog-recent-list a { display:flex; align-items:flex-start; gap:12px; padding:18px 0; }
.blog-recent-list img { flex-shrink:0; width:56px; height:48px; padding:5px; object-fit:contain; background:#fff; border-radius:4px; }
.blog-recent-list a > div { min-width:0; }
.blog-recent-list span { display:block; font-size:12px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.blog-recent-list time { display:block; margin-top:5px; color:#99a4ae; font-size:10px; }
.blog-pagination { margin-top:30px; }
.blog-pagination .pagination { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.blog-pagination .page-link { display:flex; justify-content:center; align-items:center; min-width:36px; height:36px; padding-inline:10px; border:1px solid #454b51; border-radius:5px; font-size:12px; }
.blog-pagination .active .page-link { border-color:#1e9c4e; background:#168842; color:#fff; }
.blog-pagination .sr-only { display:none; }
.blog-article-heading { margin-bottom:24px; }
.blog-article-heading h1 { margin:10px 0 0; font-size:30px; font-weight:700; line-height:1.4; letter-spacing:-.6px; overflow-wrap:anywhere; }
.blog-article-image { margin:0 0 30px; display:flex; align-items:center; justify-content:center; min-height:180px; height:260px; padding:28px; background:#fff; border:1px solid #41464b; border-radius:8px; }
.blog-article-image img { max-height:100%; width:100%; object-fit:contain; }
.blog-article-body { color:#c6cdd3; font-size:15px; line-height:1.85; overflow-wrap:anywhere; }
.blog-article-body :is(p,div,span,li,h1,h2,h3,h4,h5,h6) { color:inherit!important; background-color:transparent!important; font-family:inherit!important; }
.blog-article-body :is(h1,h2,h3,h4,h5,h6) { margin:28px 0 12px; line-height:1.45; color:#f0f2f4!important; }
.blog-article-body :is(h1,h2) { font-size:22px!important; }
.blog-article-body :is(h3,h4,h5,h6) { font-size:18px!important; }
.blog-article-body p { margin:0 0 18px; }
.blog-article-body a { color:#70d495; text-decoration:underline; text-underline-offset:3px; }
.blog-article-body img { height:auto!important; max-width:100%!important; border-radius:5px; }
.blog-article-body :is(iframe,video) { max-width:100%; }
.blog-article-body pre { max-width:100%; overflow:auto; }
.blog-article-body table { display:block; max-width:100%; overflow-x:auto; }
.blog-article-body blockquote { margin:24px 0; padding:12px 20px; border-inline-start:3px solid #229b51; }
.blog-article-footer { margin-top:30px; padding-top:20px; border-top:1px solid #393d41; font-size:13px; color:#70d495; }
.blog-empty { padding:40px 0; }
.blog-empty h2 { margin:0 0 12px; font-size:20px; }
.blog-empty a { color:#70d495; }
.blog-footer { border-top:1px solid #393d41; color:#9da7b0; font-size:12px; }
.blog-footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-block:22px; }
.blog-footer nav { display:flex; flex-wrap:wrap; gap:22px; }
@media (max-width:1023px) {
    .blog-container { padding-inline:24px; }
    .blog-layout { grid-template-columns:minmax(0,1fr) 220px; gap:24px; }
    .blog-sidebar { padding-inline-start:18px; }
    .blog-grid { gap:16px; }
    .blog-card-content { padding:16px; }
    .blog-card h2 { font-size:17px; }
}
@media (max-width:767px) {
    .blog-container { padding-inline:18px; }
    .blog-topbar-inner { min-height:70px; gap:14px; }
    .blog-brand span { font-size:17px; }
    .blog-navigation { gap:15px; font-size:12px; }
    .blog-layout { grid-template-columns:minmax(0,1fr); gap:36px; }
    .blog-sidebar { border-inline-start:0; padding-inline-start:0; border-top:1px solid #393d41; padding-top:24px; }
    .blog-recent-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
    .blog-heading h1 { font-size:28px; }
    .blog-article-heading h1 { font-size:26px; }
}
@media (max-width:575px) {
    .blog-topbar-inner { flex-wrap:wrap; padding-block:12px; gap:10px; }
    .blog-brand img { width:28px; height:34px; }
    .blog-navigation { width:100%; justify-content:flex-end; flex-wrap:wrap; }
    .blog-navigation .blog-panel-link { padding:6px 10px; }
    .blog-main { padding-top:18px; padding-bottom:36px; }
    .blog-breadcrumb { margin-bottom:22px; }
    .blog-heading { padding-bottom:22px; margin-bottom:22px; }
    .blog-grid, .blog-recent-list { grid-template-columns:minmax(0,1fr); }
    .blog-card h2 { font-size:18px; }
    .blog-card-content { padding:18px; }
    .blog-article-heading h1 { font-size:24px; }
    .blog-article-image { height:190px; padding:20px; }
    .blog-article-body { font-size:14px; }
}