:root{--bg:#f8f9fa;--fg:#333;--card:#fff;--border:#e5e7eb;--primary:#2563eb;--secondary:#6b7280;--light-bg:#f3f4f6;--hover-bg:#e0f2fe}
@media (prefers-color-scheme: dark) {
:root{--bg:#1a1a1a;--fg:#e5e7eb;--card:#2a2a2a;--border:#3a3a3a;--primary:#3b82f6;--secondary:#9ca3af;--light-bg:#333;--hover-bg:#404040}
}
[data-theme="light"]{--bg:#f8f9fa;--fg:#333;--card:#fff;--border:#e5e7eb;--primary:#2563eb;--secondary:#6b7280;--light-bg:#f3f4f6;--hover-bg:#e0f2fe}
[data-theme="dark"]{--bg:#1a1a1a;--fg:#e5e7eb;--card:#2a2a2a;--border:#3a3a3a;--primary:#3b82f6;--secondary:#9ca3af;--light-bg:#333;--hover-bg:#404040}
@font-face{font-family:'Anton';src:url(/fonts/Anton-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.7;color:var(--fg);background:var(--bg)}
h1,h2,h3,h4{font-family:'Anton',sans-serif;line-height:1.3;font-weight:400;text-transform:uppercase}
h1{font-size:2rem}
strong,b{font-weight:600}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:50rem;margin:0 auto;padding:0 1.25rem}
.hdr{background:var(--card);border-bottom:1px solid var(--border);padding:1rem 0;margin-bottom:1.5rem}
.hdr .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{font-size:1.2rem;font-family:Anton;color:var(--fg)}
.logo:hover{text-decoration:none;color:var(--primary)}
.nav{display:flex;gap:1.56rem}
.nav a{color:var(--secondary);font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--primary);text-decoration:none}
#theme{background:none;border:none;color:var(--secondary);cursor:pointer;padding:.25rem;display:flex;align-items:center;transition:color .2s}
#theme:hover{color:var(--primary)}
#theme svg{width:1.25rem;height:1.25rem;display:none}
#theme svg.active{display:block}
#burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:.25rem;padding:.5rem;z-index:1001}
#burger span{width:1.5rem;height:.125rem;background:var(--fg);transition:all .3s;border-radius:.125rem}
#burger.active span:nth-child(1){transform:rotate(45deg) translate(0.4rem,0.4rem)}
#burger.active span:nth-child(2){opacity:0}
#burger.active span:nth-child(3){transform:rotate(-45deg) translate(0.4rem,-0.4rem)}
.intro{text-align:center;margin-bottom:2.5rem;padding:2rem 1rem}
.intro h1{font-size:2.25rem;margin-bottom:1rem;color:var(--fg)}
.intro p{font-size:1.1rem;color:var(--secondary);max-width:40rem;margin:0 auto;line-height:1.7}
.posts{display:flex;flex-direction:column;gap:1.875rem}
.card{background:var(--card);border-radius:.35rem;padding:1.875rem;box-shadow:0 .0625rem .1875rem #0000001a}
.card img{width:100%;height:auto;border-radius:.35rem;margin-bottom:1.25rem;display:block}
.card header{margin-bottom:.94rem}
.card h2{font-size:1.5rem;margin-bottom:.625rem;line-height:1.3}
.card h2 a{color:var(--fg)}
.card h2 a:hover{color:var(--primary)}
.meta{margin-top:.6rem;font-size:.875rem;color:var(--secondary);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.meta time{color:var(--secondary)}
.meta a{color:var(--secondary);text-decoration:none}
.meta a:hover{color:var(--primary);text-decoration:underline}
.meta .reading-time{background:var(--border);padding:.125rem .5rem;border-radius:.25rem;font-size:.8rem;color:var(--fg);font-weight:500}
.card p{color:var(--secondary);margin-bottom:.94rem}
.card a:last-child{display:inline-block;font-weight:500;color:var(--primary)}
.post{background:var(--card);border-radius:.35rem;padding:2.5rem;box-shadow:0 .0625rem .1875rem #0000001a}
.post > h1{font-size:2rem;margin-bottom:.94rem;line-height:1.3}
.post header{margin-bottom:1.875rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.post > figure{margin:0 0 1.875rem}
.post > figure img{width:100%;height:auto;border-radius:.35rem;display:block}
.post > figure figcaption{margin-top:.625rem;font-size:.875rem;color:var(--secondary);text-align:center;font-style:italic}
.content{font-size:1.1rem}
.content p{margin-bottom:1.5em}
.content h2{font-size:1.5rem;margin:1em 0 .1em;color:var(--fg);scroll-margin-top:1.25rem}
.content h3{font-size:1.25rem;margin:1.5em 0 .75em;color:var(--fg);scroll-margin-top:1.25rem}
.content strong.subheading{display:block;font-size:1.1rem;margin:1.5em 0 .5em;color:var(--fg)}
.content ul,.content ol{margin:1.5em 0;padding-left:1.5em}
.content ul{list-style:disc}
.content ol{list-style:decimal}
.content li{margin-bottom:.5em;line-height:1.6}
.content li:last-child{margin-bottom:0}
.content blockquote{border-left:.25rem solid var(--primary);padding-left:1.25rem;margin:1.5em 0;color:var(--secondary);font-style:italic}
.content .table-wrapper{overflow-x:auto;margin:.5em 0}
.content table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:31.25rem}
.content th,.content td{padding:.75rem 1rem;border:1px solid var(--border);text-align:left}
.content th{background:var(--light-bg);font-weight:600}
.content tr:nth-child(even){background:var(--light-bg)}
.content tr:hover{background:var(--hover-bg)}
.content img{max-width:100%;height:auto;border-radius:.25rem}
.post footer{margin-top:1.875rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.post footer .tag{display:inline-block;background:var(--border);padding:.25rem .75rem;border-radius:.35rem;font-size:.875rem;margin:.25rem .25rem .25rem 0}
.author-box{background:var(--light-bg);border-left:.25rem solid var(--primary);border-radius:0 .35rem .35rem 0;padding:1.5rem;margin-top:2rem}
.author-box h3{font-size:1rem;margin-bottom:.75rem;color:var(--fg);font-weight:600}
.author-box .author-name{font-weight:600;font-size:1.1rem;color:var(--fg);margin-bottom:.25rem}
.author-box .author-name a{color:var(--fg);text-decoration:none}
.author-box .author-name a:hover{text-decoration:underline}
.author-box .author-expertise{font-size:.875rem;color:var(--primary);font-weight:500;margin-bottom:.75rem}
.author-box .author-bio{font-size:.95rem;color:var(--fg);line-height:1.6;margin:0}
.post > a:last-child{display:inline-block;margin-top:1.875rem;color:var(--primary);font-weight:500}
.toc{background:var(--light-bg);border:1px solid var(--border);border-radius:.35rem;margin-bottom:1.875rem}
.toc details{padding:0}
.toc summary{font-size:1.1rem;line-height:1;font-weight:700;color:var(--fg);padding:.94rem 1.25rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";font-size:1.25rem;font-weight:400;color:var(--secondary)}
.toc details[open] summary::after{content:"−"}
.toc ol{margin:0;padding:0 1.25rem .94rem 2.5rem;list-style:decimal}
.toc li{margin-bottom:.5rem;line-height:1.4}
.toc a{color:var(--secondary);text-decoration:none;transition:color .2s}
.toc a:hover{color:var(--primary);text-decoration:underline}
.toc .toc-h3{margin-left:1.25rem;font-size:.95em}
.related{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border-left:.25rem solid var(--primary);border-radius:0 .35rem .35rem 0;padding:1.25rem 1.56rem;margin:1rem 0}
@media (prefers-color-scheme: dark) {
.related{background:linear-gradient(135deg,#1e3a5f 0%,#1e293b 100%)}
}
[data-theme="dark"] .related{background:linear-gradient(135deg,#1e3a5f 0%,#1e293b 100%)}
.related span{display:block;font-size:1rem;font-weight:700;color:#1e40af;margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.03125rem}
@media (prefers-color-scheme: dark) {
.related span{color:#60a5fa}
}
[data-theme="dark"] .related span{color:#60a5fa}
.related ul{list-style:none;margin:0;padding:0}
.related li{margin-bottom:.5rem;padding-left:0}
.related li:last-child{margin-bottom:0}
.related a{color:#1e3a8a;font-weight:500;text-decoration:none;transition:color .2s}
@media (prefers-color-scheme: dark) {
.related a{color:#93c5fd}
}
[data-theme="dark"] .related a{color:#93c5fd}
.related a:hover{color:var(--primary);text-decoration:underline}
.similar{margin-top:3.125rem;padding-top:2.5rem;border-top:2px solid var(--border)}
.similar h2{font-size:1.5rem;margin-bottom:1.56rem;color:var(--fg)}
.similar > div{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.similar article{background:var(--card);border-radius:.35rem;padding:1.25rem;box-shadow:0 .0625rem .1875rem #0000001a;transition:box-shadow .2s}
.similar article:hover{box-shadow:0 .25rem .75rem #00000026}
.similar article img{width:100%;height:auto;border-radius:.35rem;margin-bottom:.94rem;display:block}
.similar h3{font-size:1rem;line-height:1.4;margin-bottom:.625rem}
.similar h3 a{color:var(--fg)}
.similar h3 a:hover{color:var(--primary)}
.similar .meta{font-size:.75rem;margin-bottom:.625rem}
.similar .meta .reading-time{background:var(--light-bg);padding:.125rem .375rem;border-radius:.1875rem;color:var(--fg);font-weight:500}
.similar p{font-size:.875rem;color:var(--secondary);line-height:1.5}
.pager{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin-top:2.5rem;padding:1.25rem 0}
.pager a{background:var(--primary);color:#fff;padding:.625rem 1.25rem;border-radius:.35rem;font-weight:500}
.pager a:hover{background:#1d4ed8;text-decoration:none}
.pager span{color:var(--secondary)}
.ftr{padding:2.5rem 0;margin-top:3.75rem;color:var(--secondary);font-size:.875rem;border-top:1px solid var(--border)}
.ftr .wrap{display:flex;justify-content:space-between;align-items:center}
.ftr nav{display:flex;gap:1.25rem}
.ftr a{color:var(--secondary)}
.ftr a:hover{color:var(--primary)}
.share{position:fixed;right:calc(50% - 29.375rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.625rem;z-index:100}
.share a,.share button{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);color:var(--secondary);cursor:pointer;transition:all .2s}
.share svg{width:1.125rem;height:1.125rem}
.share a:hover,.share button:hover{transform:scale(1.1);text-decoration:none}
.share-facebook:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.share-x:hover{background:#000;color:#fff;border-color:#000}
.share-linkedin:hover{background:#0a66c2;color:#fff;border-color:#0a66c2}
.share-whatsapp:hover{background:#25d366;color:#fff;border-color:#25d366}
.share-copy:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.share-copy.copied{background:#10b981;color:#fff;border-color:#10b981}
.top{position:fixed;bottom:1.875rem;right:1.875rem;width:3.125rem;height:3.125rem;border:none;border-radius:50%;background:var(--card);cursor:pointer;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility .3s;box-shadow:0 .125rem .625rem #00000026;display:flex;align-items:center;justify-content:center}
.top.visible{opacity:1;visibility:visible}
.top:hover{box-shadow:0 .25rem .9375rem #0003}
.top .progress-ring{position:absolute;width:100%;height:100%;transform:rotate(-90deg)}
.top .progress-ring-bg{fill:none;stroke:var(--border);stroke-width:2}
.top .progress-ring-fill{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .1s}
.top svg:not(.progress-ring){width:1.25rem;height:1.25rem;z-index:1;fill:var(--fg)}
.post h1:only-child{margin-bottom:1.25rem}
.no-posts{text-align:center;padding:3.75rem 1.25rem;color:var(--secondary)}
@media (max-width: 68.75rem) {
.share{right:1.25rem;top:auto;bottom:5.625rem;transform:none;flex-direction:row;gap:.5rem}
.share a,.share button{width:2.25rem;height:2.25rem}
.share svg{width:1rem;height:1rem}
}
@media (max-width: 48rem) {
.nav{gap:1.25rem}
.ftr .wrap{flex-direction:column;gap:.94rem;text-align:center}
.similar > div{grid-template-columns:1fr}
#burger{display:flex}
.nav{position:fixed;top:0;right:-100%;width:70%;height:100vh;background:var(--card);flex-direction:column;padding:5rem 2rem 2rem;gap:1.5rem;transition:right .3s;box-shadow:-.125rem 0 .625rem #0000001a;z-index:1000;align-items:flex-start}
.nav.active{right:0}
.nav a{font-size:1.125rem}
#theme{margin-top:auto}
}
@media (max-width: 37.5rem) {
.intro{padding:1.5rem 0;margin-bottom:1.5rem}
.intro h1{font-size:1.75rem}
.intro p{font-size:1rem}
.card,.post{padding:1.25rem}
.post > h1{font-size:1.5rem}
.content{font-size:1rem}
.similar article{padding:.94rem}
.share{bottom:4.375rem;right:.94rem;gap:.375rem}
.share a,.share button{width:2rem;height:2rem}
.share svg{width:.875rem;height:.875rem}
.top{width:2.5rem;height:2.5rem;bottom:1.25rem;right:1.25rem}
.top svg:not(.progress-ring){width:1rem;height:1rem}
}
.lightbox{position:fixed;z-index:99999;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.lightbox.active{opacity:1;visibility:visible;pointer-events:auto}
.lightbox-figure{display:flex;flex-direction:column;align-items:center;max-width:90%;max-height:90vh;margin:0;transform:scale(.9);transition:transform .3s ease}
.lightbox.active .lightbox-figure{transform:scale(1)}
.lightbox-content{max-width:100%;max-height:calc(90vh - 3rem);object-fit:contain}
.lightbox-caption{color:#fff;font-size:1rem;text-align:center;padding:1rem 0 0;max-width:100%}
.lightbox-close{position:absolute;top:1rem;right:1rem;width:3rem;height:3rem;background:rgba(255,255,255,.15);border:none;border-radius:50%;color:#fff;font-size:1.75rem;line-height:1;cursor:pointer;transition:background .3s;z-index:100000;display:flex;align-items:center;justify-content:center}
.lightbox-close:hover,.lightbox-close:active{background:rgba(255,255,255,.3)}