/* Blog: the index (/blog/) and every post (/blog/{slug}/). Page prefix: bl-.
   Shared parts (page-hero, crumbs, section, sec-head, ui-win, ui-head,
   ui-chip, ui-tag, ui-k, av, live, mini-deck, glyph) come from
   /assets/site/site.css.
   Covers are pictures: a .bl-cover is a size container and its .bl-art is a
   400 x 250 unit stage (--u) fitted inside it, so one cover works on a card,
   in the featured slot and as the large post cover.
   Post visuals are panel UI in px that reflow with container queries.
   Loops animate transform and opacity only and stop off screen (site.js
   pauses main > section and [data-loop]). */

/* ---------- Small shared pieces ---------- */
.bl-cat{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.26);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.bl-cat::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lav)}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.bl-meta > * + *::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px 0 0;border-radius:50%;background:var(--lav);vertical-align:middle}
.bl-meta > .bl-by::before{margin-right:3px}
.bl-by{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:14px;line-height:1.3;color:var(--paper)}
.bl-by-av{position:relative;display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.bl-by-av::before{content:"";width:13px;height:9px;border-radius:2px;background:linear-gradient(90deg,var(--violet) 0 42%,var(--paper) 42%)}
.bl-who{display:grid;min-width:0}
.bl-who b{font-weight:500;font-size:14px;line-height:1.35;color:var(--paper)}
.bl-who span{font-size:13px;line-height:1.35;color:var(--muted)}
.bl-chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Index hero ---------- */
.bl-hero{padding-bottom:clamp(36px,4.5vw,56px)}
.bl-hero::before{background:
  radial-gradient(40% 70% at 80% 40%,rgba(123,92,255,.2),transparent 70%),
  radial-gradient(36% 40% at 6% 0%,rgba(183,168,255,.07),transparent 70%)}
.bl-hero::after{-webkit-mask-image:radial-gradient(50% 80% at 82% 40%,#000,transparent 75%);mask-image:radial-gradient(50% 80% at 82% 40%,#000,transparent 75%)}
.bl-hero-row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 64px;align-items:end}
.bl-hero .lede{margin-top:0;max-width:28em}
.bl-hero-side{padding-bottom:6px}
.bl-rss{margin-top:14px}
.bl-rss::before{content:"";width:14px;height:14px;border-radius:3px;background:
  radial-gradient(circle at 22% 78%,var(--lav) 0 1.6px,transparent 2.1px),
  radial-gradient(circle at 10% 90%,transparent 0 5px,var(--lav) 5.2px 6.6px,transparent 7px),
  radial-gradient(circle at 10% 90%,transparent 0 9.4px,var(--lav) 9.6px 11px,transparent 11.4px)}

/* ---------- Index: filter bar ---------- */
.bl-posts{padding-top:0}
.bl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.bl-filter{display:flex;flex-wrap:wrap;gap:8px}
html:not(.js) .bl-filter{display:none}
.bl-chipbtn{display:inline-flex;align-items:center;height:44px;margin:0;padding:0 18px;border:0;border-radius:999px;background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line-2);font:500 15px/1 var(--sans);color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.bl-chipbtn:hover{color:var(--paper);background:rgba(183,168,255,.12)}
.bl-chipbtn[aria-pressed="true"]{background:var(--lav);box-shadow:none;color:var(--night)}
.bl-count{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}

/* ---------- Post cards: the index list and the related row ----------
   A card is the grid: cover, category, title, excerpt, footer. In rows of
   vertical cards the five rows line up through subgrid. The featured card
   (and a single filtered card) lays out wide: cover left, copy right. */
.bl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
.bl-list.is-2,.bl-list[data-layout="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;min-width:0;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2));border:1px solid var(--line);transition:border-color .3s}
.js .bl-card[data-reveal]{transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s}
.bl-card[hidden]{display:none}
.bl-card:hover{border-color:rgba(183,168,255,.34)}
.bl-card-cover{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--line)}
.bl-card-cover .bl-cover{position:absolute;inset:0}
.bl-card > .bl-cat{justify-self:start;margin:22px 24px 0}
.bl-card-t{margin:14px 24px 0;font:600 21px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper);text-wrap:balance}
.bl-card-t a{color:inherit;text-decoration:none;outline:none}
.bl-card-t a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--radius)}
.bl-card-t a:focus-visible::after{box-shadow:inset 0 0 0 2px var(--lav)}
.bl-card-x{margin:10px 24px 0;font-size:16px;line-height:1.55;color:var(--muted)}
.bl-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:20px 24px 0;padding:16px 0 22px;border-top:1px solid var(--line)}
.bl-card .bl-art{transition:transform .7s var(--ease)}
.bl-card:hover .bl-art{transform:scale(1.035)}

@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .bl-list{row-gap:0;margin-bottom:-24px}
    .bl-card{grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:24px}
  }
}

/* Wide card, from 900px: the featured post, or the one card a filter leaves */
@media (min-width:900px){
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card){grid-column:1 / -1;grid-row:auto;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:minmax(32px,1fr) auto auto auto auto minmax(32px,1fr)}
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card) > .bl-card-cover{grid-column:1;grid-row:1 / -1;align-self:stretch;border-bottom:0;border-right:1px solid var(--line)}
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card) > :not(.bl-card-cover){grid-column:2;margin-inline:clamp(28px,3.4vw,44px)}
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card) > .bl-cat{grid-row:2;margin-top:0}
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card) > .bl-card-t{grid-row:3;margin-top:18px;font-size:clamp(28px,2.7vw,38px);line-height:1.12;letter-spacing:-.03em}
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card) > .bl-card-x{grid-row:4;margin-top:16px;font-size:17px;line-height:1.6}
  :is(.bl-list[data-layout="all"] > .is-feature,.bl-list[data-layout="1"] > .bl-card) > .bl-card-foot{grid-row:5;margin-top:28px;padding-bottom:0}
}

/* 600 to 899px: one column, every card wide with a smaller cover */
@media (min-width:600px) and (max-width:899px){
  .bl-list,.bl-list.is-2,.bl-list[data-layout]{grid-template-columns:minmax(0,1fr);gap:20px}
  .bl-list > .bl-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(24px,1fr) auto auto auto auto minmax(24px,1fr)}
  .bl-list > .bl-card > .bl-card-cover{grid-column:1;grid-row:1 / -1;align-self:stretch;border-bottom:0;border-right:1px solid var(--line)}
  .bl-list > .bl-card > :not(.bl-card-cover){grid-column:2;margin-inline:28px}
  .bl-list > .bl-card > .bl-cat{grid-row:2;margin-top:0}
  .bl-list > .bl-card > .bl-card-t{grid-row:3}
  .bl-list > .bl-card > .bl-card-x{grid-row:4}
  .bl-list > .bl-card > .bl-card-foot{grid-row:5;padding-bottom:0}
  .bl-list > .is-feature > .bl-card-t{font-size:26px;line-height:1.15}
}
@media (max-width:599px){
  .bl-list,.bl-list.is-2,.bl-list[data-layout]{grid-template-columns:minmax(0,1fr);gap:16px}
  .bl-card > .bl-cat{margin:20px 20px 0}
  .bl-card-t{margin-inline:20px}
  .bl-card-x{margin-inline:20px}
  .bl-card-foot{margin-inline:20px;padding-bottom:20px}
  .bl-list > .is-feature > .bl-card-t{font-size:24px;line-height:1.18}
}

/* ---------- Covers ---------- */
.bl-cover{position:relative;isolation:isolate;overflow:hidden;container-type:size;background:
  radial-gradient(50% 72% at var(--gx,50%) var(--gy,48%),rgba(123,92,255,.32),transparent 72%),
  radial-gradient(rgba(183,168,255,.11) 1px,transparent 1.6px) 0 0 / 20px 20px,
  linear-gradient(165deg,#1A1542,var(--night-2) 64%)}
.bl-cover::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.bl-art{position:absolute;inset:0;margin:auto;width:min(100cqw,160cqh);height:min(62.5cqw,100cqh);container-type:inline-size;--u:calc(100cqw / 400)}
.bl-art > *{position:absolute}
.bl-ov{inset:0;width:100%;height:100%;overflow:visible}
.bl-dot{position:relative;flex:none;width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:var(--lav)}
.bl-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lav);opacity:0}

/* Cover 1, Sales: a pile of numbered PDFs, and the one link on a phone */
.bl-cv-pdf{--gx:72%;--gy:46%}
.bl-cv-pdf::before{background:linear-gradient(90deg,transparent 49.8%,rgba(183,168,255,.06) 50%,transparent 50.2%)}
.bl-file{width:calc(var(--u) * 112);height:calc(var(--u) * 146);border-radius:calc(var(--u) * 7);background:linear-gradient(180deg,#2C2662,#201B4E);clip-path:polygon(0 0,calc(100% - var(--u) * 24) 0,100% calc(var(--u) * 24),100% 100%,0 100%)}
.bl-file.is-v5{left:calc(var(--u) * 34);top:calc(var(--u) * 50);transform:rotate(-14deg);opacity:.32}
.bl-file.is-v6{left:calc(var(--u) * 46);top:calc(var(--u) * 44);transform:rotate(-8.5deg);opacity:.58}
.bl-file.is-v7{left:calc(var(--u) * 60);top:calc(var(--u) * 38);transform:rotate(-3deg);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(183,168,255,.3)}
.bl-file-fold{position:absolute;right:0;top:0;width:calc(var(--u) * 24);height:calc(var(--u) * 24);background:rgba(183,168,255,.5);clip-path:polygon(0 0,100% 100%,0 100%)}
.bl-file-thumb{position:absolute;left:calc(var(--u) * 12);top:calc(var(--u) * 30);width:calc(var(--u) * 88);height:calc(var(--u) * 50);border-radius:calc(var(--u) * 4);background:linear-gradient(90deg,var(--violet) 0 40%,rgba(242,239,255,.88) 40%)}
.bl-file-thumb::after{content:"";position:absolute;left:48%;top:30%;width:40%;height:calc(var(--u) * 5);border-radius:9px;background:rgba(18,15,46,.6);box-shadow:0 calc(var(--u) * 9) 0 rgba(18,15,46,.25)}
.bl-file-l{position:absolute;left:calc(var(--u) * 12);height:calc(var(--u) * 5);border-radius:9px;background:rgba(183,168,255,.3)}
.bl-file-l:nth-of-type(1){top:calc(var(--u) * 92);width:calc(var(--u) * 80)}
.bl-file-l:nth-of-type(2){top:calc(var(--u) * 103);width:calc(var(--u) * 64)}
.bl-file-tag{position:absolute;left:calc(var(--u) * 12);bottom:calc(var(--u) * 12);display:grid;place-items:center;height:calc(var(--u) * 18);padding:0 calc(var(--u) * 7);border-radius:calc(var(--u) * 5);background:var(--lav);font:600 calc(var(--u) * 10)/1 var(--display);letter-spacing:.04em;color:var(--ink)}
.bl-file-name{left:calc(var(--u) * 24);top:calc(var(--u) * 213);width:calc(var(--u) * 180);overflow:hidden;font:500 calc(var(--u) * 10)/1.2 var(--sans);color:var(--muted);text-align:center;white-space:nowrap;text-overflow:ellipsis}
.bl-phone{left:calc(var(--u) * 254);top:calc(var(--u) * 16);width:calc(var(--u) * 110);height:calc(var(--u) * 218);padding:calc(var(--u) * 5);border-radius:calc(var(--u) * 18);background:#1B1744;box-shadow:inset 0 0 0 calc(var(--u) * 1.2) rgba(183,168,255,.34),0 calc(var(--u) * 30) calc(var(--u) * 50) calc(var(--u) * -20) rgba(0,0,0,.9)}
.bl-phone-scr{position:relative;display:block;height:100%;overflow:hidden;border-radius:calc(var(--u) * 13);background:var(--paper)}
.bl-pp{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:calc(var(--u) * 8);padding:calc(var(--u) * 14) calc(var(--u) * 8) 0}
.bl-pp-top{display:flex;align-items:center;gap:calc(var(--u) * 4);height:calc(var(--u) * 8)}
.bl-pp-top i{width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:calc(var(--u) * 2);background:var(--violet)}
.bl-pp-top b{width:calc(var(--u) * 34);height:calc(var(--u) * 4);border-radius:9px;background:rgba(18,15,46,.5)}
.bl-pp-hero{display:grid;gap:calc(var(--u) * 5);padding:calc(var(--u) * 8) calc(var(--u) * 7);border-radius:calc(var(--u) * 8);background:var(--violet)}
.bl-pp-eb{font:500 calc(var(--u) * 6.5)/1 var(--sans);letter-spacing:.14em;color:var(--lav)}
.bl-pp-t{font:600 calc(var(--u) * 11)/1.1 var(--display);letter-spacing:-.03em;color:var(--paper)}
.bl-pp-l{height:calc(var(--u) * 4);border-radius:9px;background:rgba(18,15,46,.2)}
.bl-pp-l.is-s{width:70%}
.bl-pp-l.is-m{width:86%}
.bl-pp-fig{display:flex;gap:calc(var(--u) * 6);height:calc(var(--u) * 46)}
.bl-pp-fig i{flex:1;display:grid;place-items:center;border-radius:calc(var(--u) * 7);background:rgba(123,92,255,.1);font:600 calc(var(--u) * 12)/1 var(--display);font-style:normal;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.bl-pp-fig i:last-child{background:var(--violet);color:var(--paper)}
.bl-pp-card{display:grid;gap:calc(var(--u) * 5);padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 7);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(18,15,46,.14)}
.bl-pp-card i{height:calc(var(--u) * 4);border-radius:9px;background:rgba(123,92,255,.55)}
.bl-pp-card i + i{width:66%;background:rgba(18,15,46,.2)}
.bl-pdf-chip{left:calc(var(--u) * 196);top:calc(var(--u) * 194);z-index:2;display:flex;align-items:center;gap:calc(var(--u) * 6);height:calc(var(--u) * 24);padding:0 calc(var(--u) * 10);border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(183,168,255,.42),0 calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * -8) rgba(0,0,0,.8);font:500 calc(var(--u) * 10)/1 var(--sans);color:var(--paper);white-space:nowrap}

/* Cover 2, Fundraising: the deck fans out to three readers, each with a page track */
.bl-cv-path{--gx:24%;--gy:50%}
.bl-cv-path::before{background:repeating-radial-gradient(circle at 24% 50%,transparent 0 6.5%,rgba(183,168,255,.07) 6.5% 6.8%)}
.bl-dk{width:calc(var(--u) * 124);height:calc(var(--u) * 78);border-radius:calc(var(--u) * 7)}
.bl-dk.is-b{left:calc(var(--u) * 44);top:calc(var(--u) * 70);background:rgba(183,168,255,.3)}
.bl-dk.is-m{left:calc(var(--u) * 36);top:calc(var(--u) * 78);background:rgba(183,168,255,.6)}
.bl-dk.is-f{left:calc(var(--u) * 28);top:calc(var(--u) * 86);overflow:hidden;background:var(--paper);box-shadow:0 calc(var(--u) * 24) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0,0,0,.85)}
.bl-dk.is-f::before{content:"";position:absolute;left:0;top:0;bottom:0;width:42%;background:var(--violet)}
.bl-dk.is-f i{position:absolute;left:52%;height:calc(var(--u) * 7);border-radius:9px;background:var(--ink)}
.bl-dk.is-f i:nth-child(1){top:22%;width:36%}
.bl-dk.is-f i:nth-child(2){top:40%;width:26%}
.bl-dk.is-f i:nth-child(3){top:64%;width:30%;height:calc(var(--u) * 4);opacity:.4}
.bl-rd{left:calc(var(--u) * 226);top:calc(var(--u) * (var(--y) - 16));display:grid;grid-template-columns:calc(var(--u) * 28) auto;column-gap:calc(var(--u) * 9);row-gap:calc(var(--u) * 6);align-items:center}
.bl-rd > b{grid-row:1 / 3;display:grid;place-items:center;width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:50%;font:600 calc(var(--u) * 12)/1 var(--display);color:var(--paper);background:var(--violet)}
.bl-rd.is-d > b{background:rgba(123,92,255,.5)}
.bl-rd.is-e > b{background:rgba(183,168,255,.2);color:var(--lav)}
.bl-rd-t{display:flex;gap:calc(var(--u) * 3)}
.bl-rd-t i{position:relative;width:calc(var(--u) * 13);height:calc(var(--u) * 16);border-radius:calc(var(--u) * 3);background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 calc(var(--u) * .9) rgba(183,168,255,.22)}
.bl-rd-t i.is-fill::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--lav);opacity:var(--a,.7)}
.bl-rd-t i.is-empty{background:none;box-shadow:none;border:calc(var(--u) * .9) dashed rgba(183,168,255,.3)}
.bl-rd-l{grid-column:2;font:500 calc(var(--u) * 9)/1 var(--sans);color:var(--muted);white-space:nowrap}

/* Cover 3, Guides: the same slide in English and Turkish, and the switch */
.bl-cv-lang{--gx:56%;--gy:60%}
.bl-cv-lang::before{background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(183,168,255,.045) 22px 23px)}
.bl-sw{left:calc(var(--u) * 150);top:calc(var(--u) * 16);display:grid;grid-template-columns:1fr 1fr;width:calc(var(--u) * 100);height:calc(var(--u) * 28);padding:calc(var(--u) * 3);border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(183,168,255,.38)}
.bl-sw::before{content:"";position:absolute;left:50%;top:calc(var(--u) * 3);bottom:calc(var(--u) * 3);width:calc(50% - var(--u) * 3);border-radius:999px;background:var(--violet)}
.bl-sw span{position:relative;display:grid;place-items:center;font:600 calc(var(--u) * 11)/1 var(--display);color:var(--muted)}
.bl-sw span + span{color:#fff}
.bl-sl{width:calc(var(--u) * 200);height:calc(var(--u) * 124);overflow:hidden;border-radius:calc(var(--u) * 8);background:var(--paper);box-shadow:0 calc(var(--u) * 24) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0,0,0,.85)}
.bl-sl.is-en{left:calc(var(--u) * 40);top:calc(var(--u) * 62);transform:rotate(-6deg);background:#DCD5FB}
.bl-sl.is-tr{left:calc(var(--u) * 160);top:calc(var(--u) * 92);transform:rotate(4deg)}
.bl-sl-eb{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 14);font:500 max(5px,calc(var(--u) * 7.5))/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.bl-sl-t{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 30);width:calc(var(--u) * 116);font:600 calc(var(--u) * 15.5)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink)}
.bl-sl svg{position:absolute;right:calc(var(--u) * 12);bottom:calc(var(--u) * 12);width:calc(var(--u) * 70);height:calc(var(--u) * 40);overflow:visible}
.bl-sl-chip{position:absolute;left:calc(var(--u) * 14);bottom:calc(var(--u) * 12);display:flex;align-items:center;gap:calc(var(--u) * 4);height:calc(var(--u) * 17);padding:0 calc(var(--u) * 7);border-radius:999px;background:rgba(18,15,46,.1);font:500 max(5px,calc(var(--u) * 8))/1 var(--sans);color:var(--ink);white-space:nowrap}
.bl-sl.is-tr .bl-sl-chip{background:var(--violet);color:#fff}
.bl-sl-chip svg{position:static;width:calc(var(--u) * 8);height:calc(var(--u) * 8)}

/* Cover 4, Product: a question pinned to a page, and the next version */
.bl-cv-ask{--gx:42%;--gy:56%}
.bl-cv-ask::before{background:
  linear-gradient(rgba(183,168,255,.045) 1px,transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg,rgba(183,168,255,.045) 1px,transparent 1px) 0 0 / 28px 28px}
.bl-qs{left:calc(var(--u) * 24);top:calc(var(--u) * 34);width:calc(var(--u) * 236);height:calc(var(--u) * 150);border-radius:calc(var(--u) * 9);background:var(--paper);box-shadow:0 calc(var(--u) * 30) calc(var(--u) * 50) calc(var(--u) * -22) rgba(0,0,0,.9)}
.bl-qs-eb{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 14);font:500 max(5px,calc(var(--u) * 7.5))/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.bl-qs-t{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 28);font:600 calc(var(--u) * 17)/1 var(--display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.bl-qs-wk{position:absolute;left:calc(var(--u) * 14);right:calc(var(--u) * 14);top:calc(var(--u) * 64);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 6)}
.bl-qs-wk i{position:relative;height:calc(var(--u) * 44);padding:calc(var(--u) * 7);border-radius:calc(var(--u) * 6);background:rgba(123,92,255,.1)}
.bl-qs-wk i::before{content:"";display:block;width:60%;height:calc(var(--u) * 5);border-radius:9px;background:rgba(18,15,46,.5)}
.bl-qs-wk i::after{content:"";display:block;width:80%;height:calc(var(--u) * 4);margin-top:calc(var(--u) * 6);border-radius:9px;background:rgba(18,15,46,.2)}
.bl-qs-wk i.is-q{background:rgba(123,92,255,.16);box-shadow:inset 0 0 0 calc(var(--u) * 1.4) var(--violet)}
.bl-qs-l{position:absolute;left:calc(var(--u) * 14);height:calc(var(--u) * 5);border-radius:9px;background:rgba(18,15,46,.16)}
.bl-qs-l.is-1{top:calc(var(--u) * 122);width:calc(var(--u) * 150)}
.bl-qs-l.is-2{top:calc(var(--u) * 132);width:calc(var(--u) * 108)}
.bl-pin{left:calc(var(--u) * 75);top:calc(var(--u) * 88);z-index:2;display:grid;place-items:center;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:var(--violet);box-shadow:0 0 0 calc(var(--u) * 2.5) var(--paper);font:600 calc(var(--u) * 12)/1 var(--display);color:#fff}
.bl-pin::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 calc(var(--u) * 2) var(--violet);opacity:0}
.bl-bub{left:calc(var(--u) * 92);top:calc(var(--u) * 112);z-index:3;display:grid;gap:calc(var(--u) * 5);width:calc(var(--u) * 178);padding:calc(var(--u) * 8) calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:var(--night-2);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(183,168,255,.4),0 calc(var(--u) * 16) calc(var(--u) * 30) calc(var(--u) * -12) rgba(0,0,0,.85)}
.bl-bub::before{content:"";position:absolute;left:calc(var(--u) * 6);top:calc(var(--u) * -4);width:calc(var(--u) * 9);height:calc(var(--u) * 9);background:var(--night-2);box-shadow:inset calc(var(--u) * 1) calc(var(--u) * 1) 0 rgba(183,168,255,.4);transform:rotate(45deg)}
.bl-bub-k{font:500 calc(var(--u) * 8)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lav)}
.bl-bub-q{font:500 calc(var(--u) * 9.6)/1.25 var(--sans);color:var(--paper);white-space:nowrap}
.bl-v2{left:calc(var(--u) * 296);top:calc(var(--u) * 110);width:calc(var(--u) * 96);height:calc(var(--u) * 62);border-radius:calc(var(--u) * 6);background:var(--paper);box-shadow:0 calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * -14) rgba(0,0,0,.85);transform:rotate(3deg)}
.bl-v2::before{content:"";position:absolute;left:calc(var(--u) * 8);top:calc(var(--u) * 8);width:calc(var(--u) * 22);height:calc(var(--u) * 3);border-radius:9px;background:var(--violet)}
.bl-v2::after{content:"";position:absolute;left:calc(var(--u) * 8);top:calc(var(--u) * 15);width:calc(var(--u) * 50);height:calc(var(--u) * 6);border-radius:9px;background:var(--ink)}
.bl-v2-wk{position:absolute;left:calc(var(--u) * 8);right:calc(var(--u) * 8);top:calc(var(--u) * 28);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 3)}
.bl-v2-wk i{height:calc(var(--u) * 16);border-radius:calc(var(--u) * 3);background:rgba(123,92,255,.12)}
.bl-v2-wk i:first-child{background:var(--violet)}
.bl-v2-new{position:absolute;left:calc(var(--u) * 8);top:calc(var(--u) * 49);width:calc(var(--u) * 58);height:calc(var(--u) * 4);border-radius:9px;background:var(--lav)}
.bl-v2-chip{left:calc(var(--u) * 298);top:calc(var(--u) * 80);display:flex;align-items:center;gap:calc(var(--u) * 5);height:calc(var(--u) * 20);padding:0 calc(var(--u) * 9);border-radius:999px;background:var(--lav);font:500 calc(var(--u) * 8.5)/1 var(--sans);color:var(--night);white-space:nowrap}
.bl-v2-chip svg{width:calc(var(--u) * 9);height:calc(var(--u) * 9)}

/* ---------- Post header ---------- */
.bl-phero{padding-bottom:0}
.bl-phero::before{background:
  radial-gradient(40% 50% at 78% 30%,rgba(123,92,255,.18),transparent 70%),
  radial-gradient(36% 40% at 6% 0%,rgba(183,168,255,.07),transparent 70%)}
.bl-phero::after{-webkit-mask-image:radial-gradient(46% 40% at 80% 26%,#000,transparent 75%);mask-image:radial-gradient(46% 40% at 80% 26%,#000,transparent 75%)}
.bl-phead{position:relative;z-index:1}
.bl-phero h1{max-width:15em}
.bl-pmeta{margin-top:26px}
.bl-pcover{position:relative;z-index:1;aspect-ratio:12 / 5;margin-top:clamp(36px,5vw,56px);overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.bl-pcover .bl-cover{position:absolute;inset:0}

/* ---------- Post body: table of contents and prose ---------- */
.bl-layout{display:grid;grid-template-columns:220px minmax(0,68ch);gap:64px;align-items:start;padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,104px)}
.bl-toc{position:sticky;top:calc(var(--hd) + 32px);min-width:0}
.bl-toc-h{margin:0 0 12px;font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.bl-toc ol{list-style:none;margin:0;padding:0;display:grid;border-left:1px solid var(--line)}
.bl-toc a{display:flex;align-items:center;min-height:40px;margin-left:-1px;padding:6px 0 6px 16px;border-left:2px solid transparent;font-size:15px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.bl-toc a:hover{color:var(--paper)}
.bl-toc a[aria-current="true"]{color:var(--paper);border-left-color:var(--lav)}
.bl-toc a:focus-visible{outline-offset:-2px}

.bl-prose{min-width:0;max-width:68ch;font-size:var(--fs-body);line-height:1.75;color:var(--muted)}
.bl-prose > * + *,.bl-prose section > * + *{margin-top:1.15em}
.bl-prose > section{margin-top:2.6em}
.bl-prose > p:first-child{font-size:1.12em;line-height:1.65;color:var(--paper)}
.bl-prose h2{margin:0;font:600 clamp(24px,2.5vw,30px)/1.2 var(--display);letter-spacing:-.025em;color:var(--paper);text-wrap:balance;scroll-margin-top:calc(var(--hd) + 28px)}
.bl-prose section > h2 + *{margin-top:.8em}
.bl-prose strong{font-weight:500;color:var(--paper)}
.bl-prose a{color:var(--lav);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bl-prose code{padding:.12em .42em;border-radius:6px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);font:500 .84em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--paper);overflow-wrap:anywhere}
/* prose lists only (not the lists inside product visuals) */
:is(.bl-prose,.bl-prose > section) > :is(ul,ol){list-style:none;margin-bottom:0;padding:0;display:grid;gap:.6em}
:is(.bl-prose,.bl-prose > section) > ul > li{position:relative;padding-left:28px}
:is(.bl-prose,.bl-prose > section) > ul > li::before{content:"";position:absolute;left:5px;top:.66em;width:7px;height:7px;border-radius:2px;background:var(--lav);transform:rotate(45deg)}
:is(.bl-prose,.bl-prose > section) > ol{counter-reset:bl}
:is(.bl-prose,.bl-prose > section) > ol > li{position:relative;padding-left:44px;counter-increment:bl}
:is(.bl-prose,.bl-prose > section) > ol > li::before{content:counter(bl);position:absolute;left:0;top:.2em;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--line-2);font:600 14px/1 var(--display);color:var(--paper)}
.bl-prose blockquote{margin:0;padding:2px 0 2px 24px;border-left:2px solid var(--lav);font-size:1.08em;line-height:1.65;color:var(--paper)}
.bl-quote figcaption{margin-top:10px;padding-left:26px;font-size:14px;line-height:1.4;color:var(--muted)}
.bl-callout{padding:20px 24px;border-radius:16px;background:linear-gradient(180deg,rgba(123,92,255,.15),rgba(123,92,255,.05));box-shadow:inset 0 0 0 1px rgba(183,168,255,.24);color:var(--paper)}
.bl-callout-k{display:block;margin-bottom:6px;font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.bl-prose .bl-check{gap:0;padding:6px 22px;border-radius:18px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.bl-prose .bl-check > li{padding:14px 0 14px 40px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55;color:var(--paper)}
.bl-prose .bl-check > li:last-child{border-bottom:0}
.bl-prose .bl-check > li::before{left:0;top:13px;width:24px;height:24px;border-radius:7px;transform:none;background:rgba(183,168,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7A8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 14px no-repeat;box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}

/* Two renderings of one sentence, side by side */
.bl-compare{display:grid;overflow:hidden;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line-2)}
.bl-cmp{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 18px;align-items:baseline;margin:0;padding:16px 20px}
.bl-cmp + .bl-cmp{border-top:1px solid var(--line)}
.bl-cmp.is-good{background:rgba(123,92,255,.1)}
.bl-cmp-k{font:500 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
.bl-cmp-t{color:var(--paper)}
.bl-cmp-n{grid-column:2;font-size:15px;line-height:1.5;color:var(--muted)}

/* Term list table */
.bl-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.bl-table caption{padding-bottom:10px;font-size:15px;color:var(--muted);text-align:left}
.bl-table th{padding:10px 14px;border-bottom:1px solid var(--line-2);font:500 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav);text-align:left}
.bl-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--paper);vertical-align:top}
.bl-table td span{display:block;font-size:14px;color:var(--muted)}
.bl-table tr:last-child td{border-bottom:0}

/* Embedded product visual */
.bl-prose .bl-fig{margin-top:2.2em}
.bl-fig .mock{font-size:16px;line-height:1.5}
.bl-prose .bl-fig + *{margin-top:2.2em}
.bl-figcap{margin-top:16px;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- Visual 1: one link, every version (Brightlane) ---------- */
.bl-ver{container-name:bl-ver}
.bl-ver .ui-win{overflow:hidden}
.bl-ver-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding:16px}
.bl-ver-body .ui-k{margin:0}
.bl-vlist{position:relative;list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.bl-vlist::before{content:"";position:absolute;left:16.5px;top:24px;bottom:24px;width:1px;background:linear-gradient(var(--lav),rgba(183,168,255,.18))}
.bl-v{position:relative;isolation:isolate;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 8px 8px 0}
.bl-v.is-live::before{content:"";position:absolute;inset:2px -6px 2px -6px;z-index:-1;border-radius:12px;background:linear-gradient(90deg,rgba(123,92,255,.18),rgba(123,92,255,.03))}
.bl-v-n{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2);font:600 13px/1 var(--display);color:var(--paper)}
.bl-v.is-live .bl-v-n{background:var(--violet);box-shadow:0 0 0 4px rgba(123,92,255,.22)}
.bl-ver-read{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(123,92,255,.16),rgba(123,92,255,.04));box-shadow:inset 0 0 0 1px rgba(183,168,255,.24)}
.bl-ver-who{display:flex;align-items:center;gap:10px;min-width:0}
.bl-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.bl-track i{position:relative;height:24px;overflow:hidden;border-radius:5px;background:rgba(183,168,255,.07);box-shadow:inset 0 0 0 1px var(--line)}
.bl-track i::before{content:"";position:absolute;inset:0;background:var(--lav);opacity:var(--a,.5);transform-origin:50% 100%}
.bl-track i.is-top::before{background:linear-gradient(180deg,var(--lav),var(--violet));opacity:1}
.bl-facts{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.bl-facts li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;align-items:baseline;font-size:13px;line-height:1.4;color:var(--paper)}
.bl-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lav);transform:translateY(-1px)}
@container bl-ver (max-width:539px){
  .bl-ver-body{grid-template-columns:minmax(0,1fr);padding:12px}
}

/* ---------- Visual 2: reader facts and a Next reply card, labelled coming soon (Aurora Robotics) ---------- */
.bl-nr{container-name:bl-nr}
.bl-nr .ui-win{overflow:hidden}
.bl-nr-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:16px;padding:16px;align-items:start}
.bl-nr-facts{list-style:none;margin:0;padding:0;display:grid}
.bl-nr-f{position:relative;isolation:isolate;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:12px 6px}
.bl-nr-f + .bl-nr-f{border-top:1px solid var(--line)}
.bl-nr-f .av{grid-row:1 / 3}
.bl-nr-fx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bl-fx{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 9px;border-radius:8px;background:rgba(183,168,255,.07);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1.3;color:var(--paper)}
.bl-nr-card{display:grid;gap:14px;min-width:0;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(123,92,255,.2),rgba(123,92,255,.05));box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.bl-nr-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bl-nr-head .bl-nr-name{font:600 16px/1.2 var(--display);letter-spacing:-.02em;color:var(--paper)}
.bl-draft{display:inline-flex;align-items:center;height:22px;margin-left:auto;padding:0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(183,168,255,.4);font:500 13px/1 var(--sans);color:var(--lav)}
.bl-dl{margin:0;display:grid;gap:12px}
.bl-dl div{display:grid;gap:3px}
.bl-dl dt{font:500 13px/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lav)}
.bl-dl dd{margin:0;font-size:14px;line-height:1.45;color:var(--paper)}
.bl-dl .is-limit dd{color:var(--muted)}
.bl-acts{display:flex;flex-wrap:wrap;gap:8px}
.bl-act{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font:500 13px/1 var(--sans);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(183,168,255,.35)}
.bl-act.is-main{background:var(--violet);box-shadow:none;color:#fff}
@container bl-nr (max-width:579px){
  .bl-nr-body{grid-template-columns:minmax(0,1fr);padding:12px}
}

/* ---------- Visual 3: one proposal in two languages (Atlas Freight) ---------- */
.bl-tl{container-name:bl-tl}
.bl-tl .ui-win{overflow:hidden}
.bl-switch{display:inline-flex;padding:3px;border-radius:999px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line-2)}
.bl-switch span{display:grid;place-items:center;min-width:42px;height:28px;padding:0 10px;border-radius:999px;font:600 13px/1 var(--display);color:var(--muted)}
.bl-switch span.is-on{background:var(--violet);color:#fff}
.bl-tl-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;padding:16px;align-items:center}
.bl-tl-slide{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-radius:10px;background:var(--paper);container-type:inline-size;box-shadow:0 24px 44px -24px rgba(0,0,0,.9)}
.bl-tl-eb{position:absolute;left:7cqw;top:8cqw;font:500 max(7.5px,3.4cqw)/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.bl-tl-t{position:absolute;left:7cqw;top:16cqw;width:64cqw;font:600 max(11px,8.6cqw)/1.06 var(--display);letter-spacing:-.035em;color:var(--ink)}
.bl-tl-s{position:absolute;left:7cqw;top:41cqw;width:52cqw;font:400 max(8px,3.9cqw)/1.4 var(--sans);color:var(--ink-2)}
.bl-tl-slide svg{position:absolute;right:6cqw;bottom:7cqw;width:34cqw;height:auto;overflow:visible}
.bl-tl-side{display:grid;gap:16px;min-width:0}
.bl-tl-side .ui-k{margin:0}
.bl-rows{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.bl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:42px;padding:7px 10px;border-radius:12px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1.35;color:var(--paper)}
.bl-lang{display:grid;place-items:center;width:32px;height:24px;border-radius:7px;background:rgba(183,168,255,.14);font:600 13px/1 var(--display);color:var(--paper)}
.bl-row .bl-ok{display:inline-flex;align-items:center;gap:5px;color:var(--lav)}
.bl-row .bl-ok svg{width:13px;height:13px;fill:none;stroke:var(--lav);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-flag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--lav);font:500 13px/1 var(--sans);color:var(--night);white-space:nowrap}
.bl-row .bl-note{font-size:13px;color:var(--muted);white-space:nowrap}
.bl-terms{list-style:none;margin:8px 0 0;padding:0;display:grid}
.bl-term-row{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);align-items:center;gap:8px;padding:8px 2px;font-size:13px;line-height:1.35;color:var(--muted)}
.bl-term-row + .bl-term-row{border-top:1px solid var(--line)}
.bl-term-row b{font-weight:500;color:var(--paper)}
.bl-term-row svg{width:16px;height:10px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@container bl-tl (max-width:619px){
  .bl-tl-body{grid-template-columns:minmax(0,1fr);padding:12px}
}

/* ---------- Visual 4: a question on the page, the reply and the next version (Brightlane) ---------- */
.bl-qa{container-name:bl-qa}
.bl-qa .ui-win{overflow:hidden}
.bl-qa-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;padding:16px;align-items:start}
.bl-qa-slide{position:relative;aspect-ratio:16 / 11;overflow:hidden;border-radius:10px;background:var(--paper);container-type:inline-size;box-shadow:0 24px 44px -24px rgba(0,0,0,.9)}
.bl-qa-eb{position:absolute;left:7cqw;top:8cqw;font:500 max(7.5px,3.4cqw)/1 var(--sans);letter-spacing:.14em;color:var(--violet)}
.bl-qa-t{position:absolute;left:7cqw;top:15cqw;font:600 max(11px,7.4cqw)/1.05 var(--display);letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.bl-qa-wk{position:absolute;left:7cqw;right:7cqw;top:31cqw;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4cqw}
.bl-qa-wk span{position:relative;display:grid;align-content:start;gap:1.4cqw;height:22cqw;padding:2.6cqw;border-radius:2.6cqw;background:rgba(123,92,255,.1);font:500 max(7px,3.1cqw)/1.15 var(--sans);color:var(--ink)}
.bl-qa-wk span b{font-weight:500;color:var(--ink-2)}
.bl-qa-wk span.is-q{background:rgba(123,92,255,.16);box-shadow:inset 0 0 0 max(1px,.5cqw) var(--violet)}
.bl-qa-l{position:absolute;left:7cqw;height:max(3px,1.8cqw);border-radius:9px;background:rgba(18,15,46,.15)}
.bl-qa-l.is-1{top:60cqw;width:62cqw}
.bl-qa-l.is-2{top:64.6cqw;width:44cqw}
.bl-qa-pin{position:absolute;left:26.7cqw;top:31cqw;z-index:2;display:grid;place-items:center;width:max(16px,7cqw);height:max(16px,7cqw);margin:calc(max(16px,7cqw) / -2) 0 0 calc(max(16px,7cqw) / -2);border-radius:50%;background:var(--violet);box-shadow:0 0 0 max(2px,.9cqw) var(--paper);font:600 max(9px,4.2cqw)/1 var(--display);color:#fff}
.bl-qa-pin::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--violet);opacity:0}
.bl-qa-thread{display:grid;gap:10px;min-width:0}
.bl-msg{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:5px;padding:12px;border-radius:14px;background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.bl-msg.is-you{background:rgba(123,92,255,.14);box-shadow:inset 0 0 0 1px rgba(183,168,255,.28)}
.bl-msg .av{grid-row:1 / 4;width:28px;height:28px;font-size:12px}
.bl-msg-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:1.3;color:var(--muted)}
.bl-msg-h b{font-weight:500;font-size:14px;color:var(--paper)}
.bl-vchip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:rgba(183,168,255,.12);font:500 13px/1 var(--sans);color:var(--lav);white-space:nowrap}
.bl-msg p{font-size:14px;line-height:1.45;color:var(--paper)}
.bl-msg-m{font-size:13px;line-height:1.3;color:var(--muted)}
.bl-qa-next{grid-column:1 / -1;display:grid;gap:14px;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(123,92,255,.2),rgba(123,92,255,.05));box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.bl-qa-next .bl-dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
@container bl-qa (max-width:579px){
  .bl-qa-body{grid-template-columns:minmax(0,1fr);padding:12px}
  .bl-qa-next .bl-dl{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Related posts ---------- */
.bl-related{padding-top:0}
.bl-related > .wrap{padding-top:var(--sec-y);border-top:1px solid var(--line)}

/* ---------- Widths ---------- */
@media (max-width:1023px){
  .bl-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .bl-toc{position:static;max-width:68ch;margin-bottom:44px;padding:20px 22px 14px;border-radius:16px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line)}
  .bl-toc a{min-height:44px}
}
@media (max-width:899px){
  .bl-hero-row{grid-template-columns:minmax(0,1fr);gap:24px}
  .bl-hero-side{padding-bottom:0}
  .bl-pcover{aspect-ratio:16 / 9}
}
@media (max-width:599px){
  .bl-bar{margin-bottom:24px}
  .bl-chipbtn{padding:0 15px;font-size:14px}
  .bl-pcover{aspect-ratio:16 / 10;border-radius:var(--radius-sm)}
  .bl-prose > p:first-child{font-size:1.06em}
  .bl-prose .bl-check{padding:4px 16px}
  .bl-cmp{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .bl-cmp-n{grid-column:1}
  .bl-table{font-size:15px}
  .bl-table th,.bl-table td{padding-inline:10px}
}

/* ---------- Entrances: post visuals assemble when they reveal ---------- */
.js .bl-ver .bl-v,.js .bl-nr .bl-nr-f,.js .bl-tl .bl-row,.js .bl-qa .bl-msg{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(250ms + var(--k,0) * 200ms)}
.js .bl-ver-read,.js .bl-nr-card,.js .bl-tl-terms,.js .bl-qa-next{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:.85s}
.js .is-in .bl-ver .bl-v,.js .is-in .bl-nr .bl-nr-f,.js .is-in .bl-tl .bl-row,.js .is-in .bl-qa .bl-msg,
.js .is-in .bl-ver-read,.js .is-in .bl-nr-card,.js .is-in .bl-tl-terms,.js .is-in .bl-qa-next{opacity:1;transform:none}

/* ---------- Loops (paused off screen by site.js, static under reduced motion) ---------- */
@keyframes bl-ring{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
@keyframes bl-scroll{0%,12%{transform:translateY(0)}46%,62%{transform:translateY(calc(var(--u) * -64))}92%,100%{transform:translateY(0)}}
@keyframes bl-float{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(calc(var(--u) * -4))}}
@keyframes bl-in{from{opacity:0;transform:translateY(12px)}}

@media (prefers-reduced-motion:no-preference){
  .bl-dot::after{animation:bl-ring 2.2s var(--ease) infinite}
  .bl-pp{animation:bl-scroll 9s var(--ease) infinite}
  .bl-sl.is-tr{animation:bl-float 6s ease-in-out infinite}
  .bl-pin::after,.bl-qa-pin::after{animation:bl-ring 2.4s var(--ease) infinite}
  .bl-card.is-fresh{animation:bl-in .45s var(--ease) both}
}

@media (prefers-reduced-motion:reduce){
  .js .bl-ver .bl-v,.js .bl-nr .bl-nr-f,.js .bl-tl .bl-row,.js .bl-qa .bl-msg,
  .js .bl-ver-read,.js .bl-nr-card,.js .bl-tl-terms,.js .bl-qa-next{opacity:1;transform:none}
  .bl-card:hover .bl-art{transform:none}
}