/* Blog list + article styles (used by blog.html and post.html) */
.bl{--lime:#baff3d;--ink:#eeeef1;--mute:rgba(238,238,241,.66);--dim:rgba(238,238,241,.46);--line:rgba(255,255,255,.13);--c:#baff3d;font-family:'Manrope',system-ui,sans-serif;color:var(--ink);}
.bl{position:relative;z-index:2;}
.bl a{color:inherit;text-decoration:none;}
.bl *{box-sizing:border-box;}
.bl-hero{position:relative;max-width:1300px;margin:0 auto;padding:clamp(40px,7vw,100px) 5vw clamp(26px,3.5vw,44px);}
.bl-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(186,255,61,.1);border:1px solid rgba(186,255,61,.38);padding:7px 14px;border-radius:999px;margin-bottom:22px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);}
.bl-badge i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);}
.bl-hero h1{font-size:clamp(40px,7vw,108px)!important;margin:0 0 22px!important;max-width:1100px;}
.bl-hero h1 em{font-style:normal;color:var(--lime);}
.bl-lead{font-size:clamp(16px,1.4vw,20px);line-height:1.62;color:rgba(255,255,255,.86);max-width:640px;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.7);}
.bl-main{max-width:1300px;margin:0 auto;padding:0 5vw clamp(50px,7vw,90px);}
.bl-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:0 0 28px;}
.bl-chips{display:flex;flex-wrap:wrap;gap:9px;}
.bl-chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(14,16,24,.78);font:700 13.5px 'Manrope',sans-serif;color:rgba(238,238,241,.85);cursor:pointer;transition:border-color .25s,background .25s,color .25s;}
.bl-chip:hover{border-color:rgba(186,255,61,.55);}
.bl-chip i{font-style:normal;font-size:11px;min-width:20px;height:20px;border-radius:99px;display:inline-grid;place-items:center;background:rgba(255,255,255,.1);padding:0 5px;}
.bl-chip[aria-pressed=true]{background:rgba(186,255,61,.14);border-color:rgba(186,255,61,.6);color:var(--lime);}
.bl-chip[aria-pressed=true] i{background:var(--lime);color:#07130a;}
.bl-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.bl-search{position:relative;}
.bl-search input{height:44px;width:min(260px,70vw);padding:0 16px 0 42px;border-radius:999px;border:1px solid var(--line);background:rgba(14,16,24,.78);color:var(--ink);font:500 14px 'Manrope',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s;}
.bl-search input:focus{border-color:rgba(186,255,61,.7);box-shadow:0 0 0 3px rgba(186,255,61,.12);}
.bl-search svg{position:absolute;left:15px;top:13px;width:18px;height:18px;opacity:.6;}
.bl-count{font-size:13px;font-weight:700;color:var(--dim);}

/* generated cover art */
.bl-art{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--c) 34%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#0d1018),#0a0c12);}
.bl-art svg{position:absolute;inset:0;width:100%;height:100%;}
.bl-art .word{position:absolute;left:22px;bottom:16px;right:22px;font-weight:800;font-size:clamp(24px,3vw,44px);letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 4px 30px rgba(0,0,0,.5);}
.bl-art.img{background-size:cover;background-position:center;}
.bl-art.img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,9,13,.75));}
.bl-art.img .word{z-index:1;}
.bl-cat{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#f2f4fa;background:#141826;border:1px solid color-mix(in srgb,var(--c) 60%,#141826);padding:6px 13px 6px 11px;border-radius:999px;}
.bl-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);}
.bl-meta{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--dim);flex-wrap:wrap;}
.bl-av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid rgba(186,255,61,.5);}

/* featured */
.bl-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:30px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:rgba(16,18,26,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 100px -50px rgba(0,0,0,.9),0 0 90px -50px var(--c);margin-bottom:24px;transition:border-color .3s,transform .5s cubic-bezier(.16,1,.3,1);}
.bl-feat:hover{transform:translateY(-4px);border-color:var(--c);}
.bl-feat .bl-art{min-height:340px;}
.bl-feat-b{padding:clamp(26px,3.6vw,52px);display:flex;flex-direction:column;gap:18px;justify-content:center;}
.bl-tag-feat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#07130a;background:var(--lime);padding:6px 13px;border-radius:999px;}
.bl-feat h2{margin:0;font-weight:800;font-size:clamp(26px,3.2vw,46px);letter-spacing:-.04em;line-height:1.02;text-transform:uppercase;text-wrap:balance;}
.bl-feat p{margin:0;font-size:16px;line-height:1.65;color:rgba(238,238,241,.78);}
.bl-read{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:14px;color:var(--lime);margin-top:4px;}
.bl-read span{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.bl-feat:hover .bl-read span,.bl-card:hover .bl-read span{transform:translateX(6px);}

/* grid */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px;}
.bl-card{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:rgba(16,18,26,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px -45px rgba(0,0,0,.9);transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;}
.bl-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 60px -34px var(--c);}
.bl-card .bl-art{aspect-ratio:16/9;}
.bl-card-b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:13px;flex:1;}
.bl-card h3{margin:0;font-weight:800;font-size:21px;line-height:1.18;letter-spacing:-.025em;text-wrap:pretty;}
.bl-card p{margin:0;font-size:14.5px;line-height:1.62;color:rgba(238,238,241,.7);flex:1;}
.bl-card-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px;}
.bl-state{border:1px dashed var(--line);border-radius:24px;padding:56px 24px;text-align:center;background:rgba(14,16,24,.7);}
.bl-state b{display:block;font-weight:800;font-size:22px;margin-bottom:6px;letter-spacing:-.02em;}
.bl-state span{color:var(--mute);font-size:14.5px;}
.bl-skel{height:380px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 70%) rgba(14,16,24,.7);background-size:300% 100%;animation:blsk 1.4s linear infinite;}
@keyframes blsk{to{background-position:-100% 0;}}
.bl-more{display:flex;justify-content:center;margin-top:34px;}
.bl-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;border-radius:999px;font:800 15px 'Manrope',sans-serif;border:1.5px solid rgba(255,255,255,.26);background:rgba(14,16,24,.78);color:var(--ink);cursor:pointer;transition:border-color .25s,transform .35s;}
.bl-btn:hover{border-color:var(--lime);transform:translateY(-2px);}
.bl-btn.p{background:var(--lime);border-color:var(--lime);color:#07130a;box-shadow:0 14px 40px -14px rgba(186,255,61,.7);}
.bl-btn.p:hover{background:#cfff68;}
.bl-cta{max-width:1300px;margin:0 auto;padding:0 5vw clamp(60px,8vw,110px);}
.bl-cta-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding:clamp(28px,4.6vw,58px);border-radius:32px;background:linear-gradient(135deg,rgba(186,255,61,.14),rgba(16,18,26,.88) 55%);border:1px solid rgba(186,255,61,.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 120px -50px rgba(186,255,61,.5);}
.bl-cta h2{margin:0 0 10px;font-weight:800;font-size:clamp(28px,4vw,56px);letter-spacing:-.045em;line-height:.98;text-transform:uppercase;}
.bl-cta p{margin:0;font-size:16px;color:var(--mute);}

/* ---------- article page ---------- */
.po{max-width:1240px;margin:0 auto;padding:clamp(28px,5vw,64px) 5vw clamp(50px,7vw,90px);}
.po-back{display:flex;width:fit-content;align-items:center;gap:8px;font-size:14px;font-weight:700;color:rgba(238,238,241,.78);margin-bottom:26px;transition:color .2s,transform .3s;}
.po-back:hover{color:var(--lime);transform:translateX(-4px);}
.po-head{max-width:900px;}
.po-head .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-bottom:20px;}
.po-head h1{font-size:clamp(32px,5.2vw,74px)!important;margin:0 0 22px!important;}
.po-lead{font-size:clamp(17px,1.6vw,22px);line-height:1.6;color:rgba(255,255,255,.88);margin:0 0 28px;max-width:760px;text-shadow:0 1px 14px rgba(0,0,0,.7);}
.po-by{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-block:1px solid var(--line);margin-bottom:34px;}
.po-by .who{display:flex;align-items:center;gap:12px;}
.po-by .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(186,255,61,.55);}
.po-by .who b{display:block;font-size:15px;}
.po-by .who span{display:block;font-size:13px;color:var(--dim);margin-top:1px;}
.po-share{display:flex;align-items:center;gap:8px;}
.po-share a,.po-share button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:rgba(14,16,24,.78);color:var(--ink);font:700 12.5px 'Manrope',sans-serif;cursor:pointer;transition:border-color .25s;}
.po-share a:hover,.po-share button:hover{border-color:var(--lime);color:var(--lime);}
.po-cover{border-radius:30px;overflow:hidden;border:1px solid var(--line);margin:0 0 clamp(34px,5vw,58px);box-shadow:0 40px 100px -50px rgba(0,0,0,.9);}
.po-cover .bl-art{aspect-ratio:21/9;min-height:240px;}
.po-grid{display:grid;grid-template-columns:230px minmax(0,740px);gap:clamp(30px,5vw,80px);justify-content:center;align-items:start;}
.po-toc{position:sticky;top:110px;padding:18px 18px 14px;border-radius:22px;border:1px solid var(--line);background:rgba(14,16,24,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.po-toc h6{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);}
.po-toc a{display:block;padding:7px 0 7px 14px;font-size:13.5px;line-height:1.35;font-weight:600;color:var(--dim);border-left:2px solid var(--line);margin-left:2px;transition:color .2s,border-color .2s;}
.po-toc a:hover{color:var(--ink);}
.po-toc a.on{color:var(--ink);border-left-color:var(--lime);}
.po-toc a.sub{padding-left:26px;font-size:12.5px;}
.po-prog{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:12px;overflow:hidden;}
.po-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),#5b8cff);}
.prose{font-size:clamp(17px,1.35vw,19px);line-height:1.82;color:rgba(238,238,241,.9);}
.prose>p:first-of-type::first-letter{float:left;font-weight:800;font-size:3.6em;line-height:.85;padding:.06em .1em 0 0;color:var(--lime);}
.prose p{margin:0 0 22px;}
.prose h2{position:relative;font-weight:800;font-size:clamp(26px,2.8vw,38px);line-height:1.08;letter-spacing:-.04em;text-transform:uppercase;color:#fff;margin:56px 0 18px;padding-left:20px;scroll-margin-top:110px;}
.prose h2::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:5px;border-radius:5px;background:linear-gradient(var(--lime),#5b8cff);}
.prose h3,.prose h4{font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff;margin:38px 0 12px;scroll-margin-top:110px;}
.prose ul,.prose ol{margin:0 0 24px;padding:0;list-style:none;counter-reset:li;}
.prose li{position:relative;margin:0 0 12px;padding-left:34px;}
.prose ul li::before{content:"";position:absolute;left:6px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(186,255,61,.7);}
.prose ol li{counter-increment:li;}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:.2em;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--lime);color:#07130a;}
.prose strong{color:#fff;font-weight:800;}
.prose em{color:#fff;}
.prose a{color:var(--lime);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;}
.prose a:hover{color:#d1ff5a;}
.prose blockquote{margin:30px 0;padding:22px 26px 22px 30px;border-radius:0 22px 22px 0;border-left:4px solid var(--lime);background:linear-gradient(90deg,rgba(186,255,61,.12),rgba(16,18,26,.7));font-weight:700;font-size:clamp(19px,1.8vw,24px);line-height:1.45;letter-spacing:-.015em;color:#fff;}
.prose code{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);padding:2px 7px;border-radius:7px;font-size:.88em;color:#d9ffa0;}
.po-end{max-width:740px;margin:clamp(40px,6vw,64px) auto 0;}
.po-author{display:flex;gap:18px;align-items:center;padding:22px 24px;border-radius:24px;border:1px solid var(--line);background:rgba(16,18,26,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:20px;}
.po-author img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(186,255,61,.6);flex-shrink:0;}
.po-author b{display:block;font-size:17px;}
.po-author p{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--mute);}
.po-cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg,rgba(186,255,61,.15),rgba(16,18,26,.88) 60%);border:1px solid rgba(186,255,61,.4);}
.po-cta b{display:block;font-weight:800;font-size:22px;letter-spacing:-.025em;}
.po-cta span{display:block;font-size:14.5px;color:var(--mute);margin-top:4px;}
.po-rel{max-width:1240px;margin:clamp(50px,7vw,84px) auto 0;}
.po-rel h2{font-weight:800;font-size:clamp(28px,3.6vw,52px);letter-spacing:-.045em;text-transform:uppercase;margin:0 0 24px;line-height:1;}
.po-note{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:9px 16px;border-radius:999px;border:1px dashed rgba(245,183,59,.6);background:rgba(245,183,59,.1);font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#ffd27a;}

@media (max-width:1000px){
  .bl-feat{grid-template-columns:1fr;}
  .bl-feat .bl-art{min-height:240px;}
  .po-grid{grid-template-columns:1fr;}
  .po-toc{display:none;}
}
@media (prefers-reduced-motion:reduce){.bl-skel{animation:none;}.bl-card,.bl-feat{transition:none;}}