/* cbc-byteblog.css (v1359-v1370) - ByteBlog, the colourful community blog. Scoped to .bb-scope.
 * Tokens on :root = the CBC light theme (blue paper). Dark only when the reader turns it on (data-theme="dark").
 * Display: Bricolage Grotesque. UI: Figtree. Reading: Literata. Code: JetBrains Mono.
 * Motion everywhere, all disabled under prefers-reduced-motion. 375px safe: no horizontal page scroll. */

:root{
  --bb-ground:#FAFAFA;--bb-card:#ffffff;--bb-ink:#0b2a4a;--bb-ink2:#33475b;--bb-mut:#5a6b7b;--bb-line:#e6edf5;--bb-soft:#eef4fb;
  --bb-v:#1E88E5;--bb-p:#00ACC1;--bb-o:#f97316;--bb-t:#14b8a6;--bb-s:#0ea5e9;--bb-y:#facc15;--bb-g:#22c55e;--bb-r:#ef4444;
  --bb-grad:linear-gradient(120deg,#0D47A1,#1E88E5 50%,#00ACC1);
  --bb-grad2:linear-gradient(120deg,#1E88E5,#26C6DA 55%,#0C7E63);
  --bb-shadow:0 14px 40px -18px rgba(13,71,161,.35);
  --bb-code-bg:#0a1a30;--bb-code-ink:#e3f0ff;
  --bb-radius:18px;
  --bb-read:19px;--bb-measure:720px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bb-ground:#07182e;--bb-card:#0e2440;--bb-ink:#eef4fb;--bb-ink2:#cfe2f7;--bb-mut:#9dc0e6;--bb-line:#1c3a5e;--bb-soft:#12304f;
  --bb-shadow:0 14px 40px -18px rgba(0,0,0,.7);--bb-code-bg:#051222;color-scheme:dark}

.bb-scope{margin:0;background:var(--bb-ground);color:var(--bb-ink);font-family:Figtree,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden}
.bb-scope *{box-sizing:border-box}
:where(.bb-scope) a{color:var(--bb-v)}
.bb-scope img{max-width:100%}
.bb-scope :focus-visible{outline:3px solid var(--bb-p);outline-offset:2px;border-radius:6px}
.bb-wrap{max-width:1200px;margin:0 auto;padding-inline:16px}
.bb-h{font-family:"Bricolage Grotesque",Figtree,sans-serif;letter-spacing:-.01em;text-wrap:balance}
.bb-mut{color:var(--bb-mut)}
.bb-hide{display:none!important}
.bb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- top bar ---------------- */
.bb-top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bb-ground) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--bb-line)}
.bb-top__row{display:flex;align-items:center;gap:12px;min-height:62px;flex-wrap:wrap;padding-block:6px}
.bb-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--bb-ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px}
.bb-brand__mark{width:34px;height:34px;border-radius:11px;background:var(--bb-grad);display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:0 8px 18px -8px #00ACC1;animation:bbSpinHue 9s linear infinite}
.bb-brand b{background:var(--bb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-brand small{display:block;font-family:Figtree,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-mut);margin-top:-3px}
.bb-search{flex:1;min-width:180px;max-width:420px;position:relative}
.bb-scope .bb-search input[type=search]{width:100%;height:40px;border-radius:999px;border:1px solid var(--bb-line);background:var(--bb-card);color:var(--bb-ink);padding:0 16px 0 38px;font:inherit;font-size:14px}
.bb-search:before{content:"\1F50D";position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7}
.bb-nav{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.bb-nav a,.bb-iconbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--bb-ink2);font-weight:700;font-size:14px;padding:8px 11px;border-radius:999px;border:0;background:transparent;cursor:pointer;font-family:inherit;position:relative}
.bb-nav a:hover,.bb-iconbtn:hover{background:var(--bb-soft)}
.bb-nav a.is-on{background:var(--bb-soft);color:var(--bb-v)}
.bb-badge{position:absolute;top:1px;right:1px;min-width:17px;height:17px;border-radius:9px;background:var(--bb-p);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;animation:bbPulseRing 2s infinite}
.bb-write{background:var(--bb-grad)!important;color:#fff!important;box-shadow:0 10px 22px -10px #00ACC1;padding:9px 16px!important}
.bb-write:hover{filter:brightness(1.07);transform:translateY(-1px)}
.bb-cbc{font-size:12.5px!important;color:var(--bb-mut)!important}
@media (max-width:720px){.bb-search{order:3;max-width:none;flex-basis:100%}.bb-nav .bb-hide-sm{display:none}}

/* ---------------- buttons, chips, cards ---------------- */
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-weight:800;font-size:14px;border-radius:999px;padding:10px 18px;border:1px solid var(--bb-line);background:var(--bb-card);color:var(--bb-ink);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,filter .2s}
.bb-btn:hover{transform:translateY(-2px);box-shadow:var(--bb-shadow)}
.bb-btn:active{transform:translateY(0) scale(.98)}
.bb-btn--go{background:var(--bb-grad);color:#fff;border-color:transparent;position:relative;overflow:hidden}
.bb-btn--go:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:bbSheen 3.4s ease-in-out infinite}
.bb-btn--blue{background:var(--bb-grad2);color:#fff;border-color:transparent}
.bb-btn--ghost{background:transparent}
.bb-btn--danger{background:var(--bb-r);color:#fff;border-color:transparent}
.bb-btn--sm{padding:7px 12px;font-size:13px}
.bb-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.bb-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;text-decoration:none;
  background:hsl(var(--h,265) 95% 95%);color:hsl(var(--h,265) 70% 38%);border:1px solid hsl(var(--h,265) 80% 88%);transition:transform .15s}
:root[data-theme="dark"] .bb-chip{background:hsl(var(--h,265) 45% 20%);color:hsl(var(--h,265) 90% 82%);border-color:hsl(var(--h,265) 40% 30%)}
.bb-chip:hover{transform:translateY(-2px) rotate(-1deg)}
.bb-chip.is-on{background:var(--bb-grad);color:#fff;border-color:transparent}
.bb-chips{display:flex;flex-wrap:wrap;gap:8px}
.bb-card{background:var(--bb-card);border:1px solid var(--bb-line);border-radius:var(--bb-radius)}
.bb-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--bb-soft);color:var(--bb-v)}
.bb-pill--g{background:#dcfce7;color:#15803d}.bb-pill--y{background:#fef3c7;color:#92400e}.bb-pill--r{background:#fee2e2;color:#b91c1c}.bb-pill--b{background:#dbeafe;color:#1d4ed8}
.bb-flash{border-radius:14px;padding:12px 16px;margin:14px 0;font-weight:700;display:flex;gap:10px;align-items:flex-start}
.bb-flash--ok{background:#dcfce7;color:#166534}.bb-flash--err{background:#fee2e2;color:#991b1b}.bb-flash--info{background:#e3f2fd;color:#3730a3}
.bb-empty{text-align:center;padding:48px 18px;border:2px dashed var(--bb-line);border-radius:22px;color:var(--bb-mut)}
.bb-empty b{display:block;font-size:40px;margin-bottom:6px}
.bb-av{border-radius:999px;object-fit:cover;flex:none;display:inline-block;vertical-align:middle;background:var(--bb-soft)}
.bb-av--ini{display:inline-grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,hsl(var(--h,265) 85% 58%),hsl(calc(var(--h,265) + 60) 80% 55%))}
.bb-ring{padding:3px;border-radius:999px;background:conic-gradient(from 0deg,var(--ring,#1E88E5),#00ACC1,#f97316,var(--ring,#1E88E5));display:inline-flex;animation:bbSpin 6s linear infinite}
.bb-ring>*{border:3px solid var(--bb-card);animation:bbSpin 6s linear infinite reverse}

/* ---------------- home hero ---------------- */
.bb-hero{position:relative;overflow:hidden;border-radius:28px;margin:18px 0 8px;padding:44px 28px 34px;color:#fff;background:linear-gradient(135deg,#072e57,#0D47A1 60%,#1565C0);isolation:isolate}
.bb-hero__blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.85;z-index:-1;animation:bbFloatBlob 14s ease-in-out infinite}
.bb-hero__blob--1{width:420px;height:420px;background:#1E88E5;left:-80px;top:-120px}
.bb-hero__blob--2{width:380px;height:380px;background:#00ACC1;right:-60px;top:-60px;animation-delay:-4s}
.bb-hero__blob--3{width:360px;height:360px;background:#26C6DA;left:35%;bottom:-200px;animation-delay:-8s}
.bb-hero__eyebrow{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bb-hero h1{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(34px,6vw,64px);line-height:1.02;margin:14px 0 10px;max-width:820px;text-wrap:balance}
.bb-hero h1 em{font-style:normal;background:linear-gradient(90deg,#fde68a,#80DEEA,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-hero p{font-size:18px;max-width:640px;opacity:.92;margin:0 0 20px}
.bb-hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.bb-hero__stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.bb-hero__stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:30px;line-height:1}
.bb-hero__stat span{font-size:12.5px;opacity:.85}
.bb-hero__float{position:absolute;right:28px;bottom:26px;display:flex;gap:10px;font-size:30px}
.bb-hero__float span{animation:bbBob 3.2s ease-in-out infinite;display:inline-block}
.bb-hero__float span:nth-child(2){animation-delay:.5s}.bb-hero__float span:nth-child(3){animation-delay:1s}.bb-hero__float span:nth-child(4){animation-delay:1.5s}
@media (max-width:720px){.bb-hero{padding:32px 18px 26px;border-radius:22px}.bb-hero__float{display:none}}

/* ---------------- layout: feed + rail ---------------- */
.bb-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin-top:18px}
@media (max-width:980px){.bb-main{grid-template-columns:1fr}}
.bb-rail{position:sticky;top:78px;display:grid;gap:16px}
@media (max-width:980px){.bb-rail{position:static}}
.bb-sec{margin:26px 0 12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bb-sec h2{font-family:"Bricolage Grotesque",sans-serif;font-size:24px;margin:0}
.bb-sec a{font-weight:800;font-size:14px;text-decoration:none}
.bb-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--bb-line);margin:10px 0 16px}
.bb-tabs a{padding:10px 14px;text-decoration:none;color:var(--bb-mut);font-weight:800;border-bottom:3px solid transparent;margin-bottom:-1px}
.bb-tabs a.is-on{color:var(--bb-ink);border-image:var(--bb-grad) 1}

/* ---------------- story cards ---------------- */
.bb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.bb-sc{position:relative;display:flex;flex-direction:column;background:var(--bb-card);border:1px solid var(--bb-line);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.bb-sc:hover{transform:translateY(-6px) rotate(-.3deg);box-shadow:var(--bb-shadow)}
.bb-sc__cover{aspect-ratio:16/8.5;background-size:cover;background-position:center;position:relative;overflow:hidden}
.bb-sc__cover--g{display:grid;place-items:center;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-size:44px;font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,.25);background-size:200% 200%;animation:bbShift 10s ease infinite}
.bb-sc__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bb-sc:hover .bb-sc__cover img{transform:scale(1.06)}
.bb-sc__body{padding:15px 17px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bb-sc__who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bb-mut);min-width:0}
.bb-sc__who b{color:var(--bb-ink);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-sc h3{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;line-height:1.2;margin:0;text-wrap:balance}
.bb-sc p{margin:0;color:var(--bb-mut);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-sc__meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--bb-mut);margin-top:auto;font-variant-numeric:tabular-nums}
.bb-sc__tag{position:absolute;top:12px;left:12px;z-index:2}
.bb-sc__flag{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:4px 9px;backdrop-filter:blur(4px)}
.bb-sc--wide{grid-column:1/-1;flex-direction:row}
.bb-sc--wide .bb-sc__cover{flex:0 0 46%;aspect-ratio:auto;min-height:250px}
@media (max-width:720px){.bb-sc--wide{flex-direction:column}.bb-sc--wide .bb-sc__cover{min-height:180px}}
.bb-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.bb-row>*{flex:0 0 min(300px,82%);scroll-snap-align:start}
.bb-list{display:grid;gap:12px}
.bb-li{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--bb-card);border:1px solid var(--bb-line);text-decoration:none;color:inherit}
.bb-li:hover{border-color:var(--bb-v)}
.bb-rank{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;font-weight:800;width:34px;text-align:center;background:var(--bb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------- writers strip ---------------- */
.bb-writers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bb-wc{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 10px;border-radius:20px;background:var(--bb-card);border:1px solid var(--bb-line);text-decoration:none;color:inherit;transition:transform .2s}
.bb-wc:hover{transform:translateY(-4px)}
.bb-wc b{font-size:14px}.bb-wc span{font-size:12px;color:var(--bb-mut)}

/* ---------------- ByteStore motion button ---------------- */
.bb-bs{--bs-accent:#1E88E5;position:relative;display:inline-flex;text-decoration:none;border-radius:999px;padding:2px;isolation:isolate;overflow:hidden;
  box-shadow:0 10px 26px -12px var(--bs-accent);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;vertical-align:middle}
.bb-bs__ring{position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,var(--bs-accent),#00ACC1,#f97316,#facc15,#22c55e,#0ea5e9,var(--bs-accent));animation:bbSpin 3.2s linear infinite}
.bb-bs__in{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px 7px 9px;background:var(--bb-card);color:var(--bb-ink);font-weight:900;font-size:13.5px;overflow:hidden}
.bb-bs__in:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(0,172,193,.28),transparent);transform:skewX(-18deg);animation:bbSheenX 4s ease-in-out infinite}
.bb-bs__ico{font-size:18px;display:inline-block;animation:bbBounce 2.4s ease-in-out infinite}
.bb-bs__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bb-bs__t{background:linear-gradient(90deg,var(--bs-accent),#00ACC1,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.bb-bs__sub{font-size:11px;font-weight:700;color:var(--bb-mut);white-space:nowrap}
.bb-bs__arr{transition:transform .2s;color:var(--bs-accent)}
.bb-bs__new{position:absolute;top:3px;right:6px;font-size:9px;font-weight:900;letter-spacing:.06em;color:#fff;background:#ef4444;border-radius:999px;padding:1px 6px;animation:bbPulseRing 1.8s infinite}
.bb-bs:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 34px -12px var(--bs-accent)}
.bb-bs:hover .bb-bs__arr{transform:translateX(4px)}
.bb-bs--hero .bb-bs__in{padding:12px 20px 12px 14px;font-size:16px}.bb-bs--hero .bb-bs__ico{font-size:24px}
.bb-bs--card,.bb-bs--box{display:flex;border-radius:18px}.bb-bs--card .bb-bs__in,.bb-bs--box .bb-bs__in{border-radius:16px;width:100%;padding:11px 14px}
.bb-bs--mini .bb-bs__in{padding:4px 10px 4px 7px;font-size:12px}.bb-bs--mini .bb-bs__ico{font-size:14px}

/* ---------------- reading page ---------------- */
.bb-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:80;background:linear-gradient(90deg,#f43f5e,#f97316,#facc15,#22c55e,#06b6d4,#1565C0,#42A5F5);box-shadow:0 0 12px rgba(0,172,193,.6)}
.bb-read{display:grid;grid-template-columns:minmax(0,var(--bb-measure)) 290px;gap:44px;justify-content:center;margin-top:22px}
@media (max-width:1060px){.bb-read{grid-template-columns:minmax(0,1fr)}}
.bb-crumb{font-size:13px;color:var(--bb-mut);display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.bb-crumb a{color:var(--bb-mut);text-decoration:none}
.bb-art h1{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(32px,5vw,48px);line-height:1.08;margin:10px 0 10px;text-wrap:balance}
.bb-lede{font-size:21px;color:var(--bb-mut);margin:0 0 18px;line-height:1.45}
.bb-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-block:1px solid var(--bb-line);margin:14px 0 20px}
.bb-byline__who{display:flex;flex-direction:column;min-width:0}
.bb-byline__who a{color:var(--bb-ink);font-weight:900;text-decoration:none}
.bb-byline__meta{font-size:13px;color:var(--bb-mut);font-variant-numeric:tabular-nums}
.bb-byline__acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.bb-cover{border-radius:22px;overflow:hidden;margin:0 0 22px;box-shadow:var(--bb-shadow)}
.bb-cover img{display:block;width:100%;height:auto;cursor:zoom-in}
.bb-cover--video{aspect-ratio:16/9;background:#000}.bb-cover--video iframe{width:100%;height:100%;border:0}
.bb-body{font-family:Literata,Georgia,serif;font-size:var(--bb-read);line-height:1.78;color:var(--bb-ink);overflow-wrap:break-word}
.bb-body>*{margin:0 0 1.15em}
.bb-body h2{font-family:"Bricolage Grotesque",sans-serif;font-size:1.55em;line-height:1.2;margin:1.6em 0 .6em;scroll-margin-top:90px}
.bb-body h3{font-family:"Bricolage Grotesque",sans-serif;font-size:1.25em;margin:1.4em 0 .5em;scroll-margin-top:90px}
.bb-body h4{font-family:Figtree,sans-serif;font-size:1.05em;margin:1.2em 0 .4em}
.bb-body a{color:var(--bb-v);text-decoration-thickness:2px;text-underline-offset:3px}
.bb-body blockquote{margin:1.4em 0;padding:.3em 0 .3em 1.1em;border-left:4px solid;border-image:var(--bb-grad) 1;font-style:italic;color:var(--bb-ink2);font-size:1.08em}
.bb-body img{display:block;margin:1.4em auto;border-radius:16px;cursor:zoom-in;height:auto}
.bb-body ul,.bb-body ol{padding-left:1.3em}.bb-body li{margin:.35em 0}
.bb-body hr{border:0;height:4px;width:120px;margin:2.2em auto;border-radius:4px;background:var(--bb-grad)}
.bb-body code{font-family:"JetBrains Mono",Consolas,monospace;font-size:.84em;background:var(--bb-soft);color:var(--bb-p);padding:.12em .4em;border-radius:6px}
.bb-body pre{position:relative;background:var(--bb-code-bg);color:var(--bb-code-ink);border-radius:16px;padding:40px 18px 18px;overflow-x:auto;font-size:.8em;line-height:1.65;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bb-body pre code{background:none;color:inherit;padding:0;font-size:1em;white-space:pre}
.bb-body pre:before{content:attr(data-lang);position:absolute;top:10px;left:14px;font-family:Figtree,sans-serif;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#07182e;background:linear-gradient(90deg,#facc15,#f97316);border-radius:6px;padding:2px 8px}
.bb-body pre:not([data-lang]):before{content:"code"}
.bb-copy{position:absolute;top:8px;right:10px;font:inherit;font-family:Figtree,sans-serif;font-size:12px;font-weight:800;border:0;border-radius:8px;padding:5px 10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.bb-copy:hover{background:rgba(255,255,255,.22)}
.bb-tok-k{color:#4DD0E1}.bb-tok-s{color:#86efac}.bb-tok-c{color:#8b86ad;font-style:italic}.bb-tok-n{color:#fcd34d}
.bb-tablewrap{overflow-x:auto;border-radius:14px;border:1px solid var(--bb-line)}
.bb-body table{border-collapse:collapse;width:100%;font-family:Figtree,sans-serif;font-size:.82em}
.bb-body th,.bb-body td{border-bottom:1px solid var(--bb-line);padding:10px 12px;text-align:left;vertical-align:top}
.bb-body th{background:var(--bb-soft)}
.bb-embedbox{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;margin:1.4em 0}
.bb-embedbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bb-embedbox--code{aspect-ratio:auto;height:360px;background:var(--bb-card)}
.bb-xcard{display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px solid var(--bb-line);border-radius:14px;text-decoration:none!important;font-family:Figtree,sans-serif;font-weight:800}
.bb-xcard__i{width:32px;height:32px;border-radius:9px;background:#000;color:#fff;display:grid;place-items:center}
.bb-callout{border-radius:16px;padding:14px 16px 14px 48px;position:relative;font-family:Figtree,sans-serif;font-size:.9em;border:1px solid}
.bb-callout:before{position:absolute;left:14px;top:12px;font-size:20px}
.bb-callout[data-kind="tip"]{background:#fefce8;border-color:#fde68a;color:#713f12}.bb-callout[data-kind="tip"]:before{content:"\1F4A1"}
.bb-callout[data-kind="warning"]{background:#fff7ed;border-color:#fed7aa;color:#7c2d12}.bb-callout[data-kind="warning"]:before{content:"\26A0\FE0F"}
.bb-callout[data-kind="success"]{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}.bb-callout[data-kind="success"]:before{content:"\2705"}
.bb-callout[data-kind="note"]{background:#eef2ff;border-color:#c7d2fe;color:#312e81}.bb-callout[data-kind="note"]:before{content:"\1F4DD"}
.bb-mention{font-family:Figtree,sans-serif;font-weight:800;background:var(--bb-soft);border-radius:6px;padding:0 5px;text-decoration:none!important}
.bb-banner{border-radius:14px;padding:12px 16px;margin:0 0 16px;font-weight:700;font-size:14px}
.bb-banner--preview{background:#fef9c3;color:#713f12}.bb-banner--unlisted{background:#e0f2fe;color:#075985}.bb-banner--hold{background:#ffe4e6;color:#9f1239}
.bb-series{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:16px;background:var(--bb-soft);margin:0 0 20px;font-weight:700}
.bb-partnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}
.bb-partnav a{padding:14px 16px;border-radius:16px;border:1px solid var(--bb-line);text-decoration:none;color:inherit;background:var(--bb-card)}
.bb-partnav small{display:block;color:var(--bb-mut);font-weight:800;font-size:12px}
.bb-toc{padding:16px}
.bb-toc h4{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-mut)}
.bb-toc a{display:block;padding:5px 0 5px 10px;border-left:3px solid transparent;text-decoration:none;color:var(--bb-mut);font-size:14px}
.bb-toc a.lv3{padding-left:22px;font-size:13px}
.bb-toc a.is-on{color:var(--bb-v);border-color:var(--bb-v);font-weight:800}
.bb-authorcard{padding:18px;display:grid;gap:10px}
.bb-authorcard__top{display:flex;gap:12px;align-items:center}
.bb-authorcard p{margin:0;font-size:14px;color:var(--bb-mut)}

/* reactions + actions */
.bb-reacts{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 10px}
.bb-react{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bb-line);background:var(--bb-card);color:var(--bb-ink);font:inherit;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:transform .15s}
.bb-react span.e{font-size:19px;display:inline-block;transition:transform .2s}
.bb-react:hover span.e{transform:scale(1.25) rotate(-8deg)}
.bb-react.is-on{background:var(--bb-grad);color:#fff;border-color:transparent}
.bb-react.pop span.e{animation:bbPop .5s cubic-bezier(.2,.7,.2,1.6)}
.bb-react small{font-variant-numeric:tabular-nums;opacity:.8}
.bb-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bb-menu{position:relative}
.bb-menu__pop{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--bb-card);border:1px solid var(--bb-line);border-radius:14px;box-shadow:var(--bb-shadow);padding:6px;z-index:40;display:none}
.bb-menu.is-open .bb-menu__pop{display:block;animation:bbDrop .18s ease}
.bb-menu__pop a,.bb-menu__pop button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--bb-ink);padding:9px 11px;border-radius:9px;cursor:pointer;text-decoration:none}
.bb-menu__pop a:hover,.bb-menu__pop button:hover{background:var(--bb-soft)}
.bb-quote{position:absolute;z-index:70;display:none;gap:4px;background:#0b2a4a;border-radius:12px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bb-quote a,.bb-quote button{color:#fff;font:inherit;font-size:13px;font-weight:800;border:0;background:none;padding:6px 10px;border-radius:8px;cursor:pointer;text-decoration:none}
.bb-quote a:hover,.bb-quote button:hover{background:rgba(255,255,255,.14)}

/* listen + reading settings bar */
.bb-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.bb-tools .bb-btn{padding:7px 12px;font-size:13px}
.bb-listen.is-on{background:var(--bb-grad2);color:#fff;border-color:transparent}
.bb-eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.bb-eq i{width:3px;background:currentColor;border-radius:2px;height:4px}
.bb-listen.is-on .bb-eq i{animation:bbEq .9s ease-in-out infinite}.bb-listen.is-on .bb-eq i:nth-child(2){animation-delay:.2s}.bb-listen.is-on .bb-eq i:nth-child(3){animation-delay:.4s}
.bb-resume{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:#0b2a4a;color:#fff;border-radius:999px;padding:10px 12px 10px 18px;display:flex;gap:10px;align-items:center;font-weight:800;font-size:14px;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bbUp .35s ease}

/* comments */
.bb-comments{margin-top:36px}
.bb-cform{display:flex;gap:12px;margin:14px 0 22px}
.bb-cform textarea,.bb-field,.bb-scope select,.bb-scope input[type=text],.bb-scope input[type=url],.bb-scope input[type=email],.bb-scope input[type=search],.bb-scope input[type=datetime-local],.bb-scope input[type=date]{width:100%;font:inherit;font-size:15px;color:var(--bb-ink);background:var(--bb-card);border:1px solid var(--bb-line);border-radius:14px;padding:11px 14px}
.bb-scope textarea:focus,.bb-scope input:focus,.bb-scope select:focus{outline:none;border-color:var(--bb-v);box-shadow:0 0 0 4px color-mix(in srgb,var(--bb-v) 18%,transparent)}
.bb-cm{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--bb-line)}
.bb-cm--reply{margin-left:44px;border-top:0;padding-top:4px}
.bb-cm__head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--bb-mut)}
.bb-cm__head b{color:var(--bb-ink)}
.bb-cm__body{margin:4px 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.bb-cm__acts{display:flex;gap:10px;flex-wrap:wrap}
.bb-cm__acts button,.bb-cm__acts a{border:0;background:none;font:inherit;font-size:13px;font-weight:800;color:var(--bb-mut);cursor:pointer;padding:0;text-decoration:none}
.bb-cm__acts button:hover{color:var(--bb-v)}
.bb-cm.is-hidden{opacity:.55}
.bb-authorpill{font-size:10.5px;font-weight:900;letter-spacing:.08em;background:var(--bb-grad);color:#fff;border-radius:6px;padding:2px 6px}

/* ---------------- product shelf cards ---------------- */
.bb-pc{--h:265;position:relative;display:flex;gap:14px;align-items:stretch;text-decoration:none!important;color:var(--bb-ink)!important;border-radius:20px;padding:12px;overflow:hidden;
  background:linear-gradient(135deg,hsl(var(--h) 95% 97%),hsl(calc(var(--h) - 22) 95% 96%));border:1px solid hsl(var(--h) 80% 88%);font-family:Figtree,sans-serif;transition:transform .2s,box-shadow .2s;margin:1.6em 0}
:root[data-theme="dark"] .bb-pc{background:linear-gradient(135deg,hsl(var(--h) 45% 16%),hsl(calc(var(--h) - 22) 45% 14%));border-color:hsl(var(--h) 40% 28%)}
.bb-pc:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 18px 36px -18px hsl(var(--h) 80% 45%)}
.bb-pc__shine{position:absolute;top:0;bottom:0;width:35%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:bbSheenX 3.8s ease-in-out infinite;pointer-events:none}
.bb-pc__img{flex:0 0 120px;border-radius:14px;background-size:cover;background-position:center;min-height:96px}
.bb-pc__img--g{display:grid;place-items:center;background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(calc(var(--h) - 26) 80% 55%));color:#fff;font-weight:900;font-size:34px}
.bb-pc__img--g span{animation:bbBob 3s ease-in-out infinite;display:inline-block}
.bb-pc__body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.bb-pc__lab{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--h) 70% 42%)}
.bb-pc__t{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px;line-height:1.2}
.bb-pc__row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}
.bb-pc__price{font-weight:900;font-size:17px;font-variant-numeric:tabular-nums}
.bb-pc__cta{font-weight:900;font-size:13px;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 80% 50%),hsl(calc(var(--h) - 22) 85% 55%));border-radius:999px;padding:7px 13px;animation:bbNudge 2.6s ease-in-out infinite}
.bb-pc--rail{flex-direction:column;margin:0;min-width:0}
.bb-pc--rail .bb-pc__img{flex:none;height:110px;min-height:0}
.bb-pc--shelf{flex-direction:column;margin:0}
.bb-pc--shelf .bb-pc__img{flex:none;height:130px}
@media (max-width:540px){.bb-pc{flex-direction:column}.bb-pc__img{flex:none;height:120px}}
.bb-rail,.bb-rail>*,.bb-read>*{min-width:0;max-width:100%}
.bb-rail-shelf{padding:14px;border-radius:20px;background:var(--bb-card);border:1px solid var(--bb-line);overflow:hidden}
.bb-rail-shelf__h{font-weight:900;margin-bottom:10px}
.bb-rail-shelf__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none}
.bb-rail-shelf__track>*{scroll-snap-align:start}
.bb-shelfrow{margin:36px 0}
.bb-shelfrow__h h2{font-family:"Bricolage Grotesque",sans-serif;margin:0;font-size:24px}
.bb-shelfrow__h span{color:var(--bb-mut);font-size:14px}
.bb-shelfrow__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(260px,80%);gap:14px;overflow-x:auto;padding:14px 2px;scroll-snap-type:x mandatory}
.bb-shelfrow__track>*{scroll-snap-align:start}
.bb-mobileshelf{position:fixed;left:12px;right:12px;bottom:12px;z-index:65;display:none}
.bb-mobileshelf.is-in{display:block;animation:bbUp .35s ease}
.bb-mobileshelf .bb-pc{margin:0;box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
.bb-mobileshelf__x{position:absolute;top:-10px;right:-4px;z-index:3;width:28px;height:28px;border-radius:999px;border:0;background:#0b2a4a;color:#fff;font-weight:900;cursor:pointer}
@media (min-width:1061px){.bb-mobileshelf{display:none!important}}

/* ---------------- author page ---------------- */
.bb-ahero{position:relative;border-radius:28px;overflow:hidden;background:var(--bb-card);border:1px solid var(--bb-line);margin-top:18px}
.bb-ahero__banner{height:210px;background-size:cover;background-position:center;background-color:#2a1850}
.bb-ahero__banner--g{background-image:var(--bb-grad);background-size:220% 220%;animation:bbShift 12s ease infinite}
.bb-ahero__in{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;padding:0 26px 22px;margin-top:-64px}
.bb-ahero__id{flex:1;min-width:240px;padding-top:70px}
.bb-ahero h1{font-family:"Bricolage Grotesque",sans-serif;font-size:34px;margin:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bb-ahero__head{font-size:17px;color:var(--bb-ink2);margin:4px 0 8px}
.bb-ahero__stats{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--bb-mut);font-variant-numeric:tabular-nums}
.bb-ahero__stats b{color:var(--bb-ink);font-size:17px}
.bb-ahero__acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:4px}
.bb-ahero__bs{padding:0 26px 22px}
.bb-socials{display:flex;gap:8px;flex-wrap:wrap}
.bb-socials a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;text-decoration:none;color:#fff}
.bb-level{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px;color:#fff}
.bb-avail{background:#dcfce7;color:#15803d;font-size:12px;font-weight:900;border-radius:999px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}
.bb-avail:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;animation:bbPulseRing 1.8s infinite}
.bb-about{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.bb-about .bb-card{padding:16px}
.bb-about h3{margin:0 0 8px;font-size:15px;font-family:"Bricolage Grotesque",sans-serif}
.bb-badgewall{display:flex;flex-wrap:wrap;gap:8px}
.bb-bdg{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:14px;background:linear-gradient(135deg,#fef3c7,#e0f7fa);color:#7c2d12;font-weight:900;font-size:13px;border:1px solid #fde68a;animation:bbShimmer 4s linear infinite;background-size:200% 100%}

/* ---------------- forms, editor ---------------- */
.bb-form{display:grid;gap:14px}
.bb-form label{display:grid;gap:6px;font-weight:800;font-size:14px}
.bb-form label small{font-weight:600;color:var(--bb-mut)}
.bb-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.bb-2col{grid-template-columns:1fr}}
.bb-ed{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:16px}
@media (max-width:1060px){.bb-ed{grid-template-columns:1fr}}
.bb-ed__paper{padding:22px 26px 30px}
@media (max-width:640px){.bb-ed__paper{padding:16px 14px 24px}}
.bb-ed__title{width:100%;border:0;background:transparent;color:var(--bb-ink);font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.1;resize:none;padding:0;overflow:hidden}
.bb-ed__sub{width:100%;border:0;background:transparent;color:var(--bb-mut);font-family:Literata,Georgia,serif;font-size:20px;resize:none;padding:0;margin-top:8px;overflow:hidden}
.bb-ed__title:focus,.bb-ed__sub:focus{outline:none;box-shadow:none!important}
.bb-bar{position:sticky;top:64px;z-index:30;display:flex;flex-wrap:wrap;gap:2px;padding:6px;margin:16px -8px 10px;border-radius:14px;background:var(--bb-card);border:1px solid var(--bb-line);box-shadow:var(--bb-shadow)}
.bb-bar button{border:0;background:none;color:var(--bb-ink2);font:inherit;font-weight:800;font-size:13.5px;min-width:34px;height:34px;padding:0 8px;border-radius:9px;cursor:pointer}
.bb-bar button:hover{background:var(--bb-soft);color:var(--bb-v)}
.bb-bar i{width:1px;background:var(--bb-line);margin:4px 3px}
.bb-editable{min-height:380px;outline:none}
.bb-editable:empty:before{content:attr(data-ph);color:var(--bb-mut)}
.bb-edpanel{padding:16px;display:grid;gap:10px}
.bb-edpanel h3{margin:0;font-size:14px;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center}
.bb-policybar{border-radius:14px;padding:11px 14px;font-weight:800;font-size:13.5px;background:linear-gradient(120deg,#fee2e2,#e0f7fa);color:#9f1239;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bb-policybar a{color:#9f1239}
.bb-savestate{font-size:13px;color:var(--bb-mut);display:flex;gap:14px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.bb-tpls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;margin-bottom:12px}
.bb-coverdrop{border:2px dashed var(--bb-line);border-radius:18px;padding:18px;text-align:center;color:var(--bb-mut);font-weight:800;cursor:pointer;transition:border-color .2s,background .2s}
.bb-coverdrop.is-over{border-color:var(--bb-p);background:var(--bb-soft)}
.bb-coverprev{border-radius:18px;overflow:hidden;position:relative;margin-bottom:14px}
.bb-coverprev img{display:block;width:100%;max-height:340px;object-fit:cover}
.bb-coverprev button{position:absolute;top:10px;right:10px}
.bb-tagbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--bb-line);border-radius:14px;padding:8px;background:var(--bb-card)}
.bb-tagbox input{border:0!important;box-shadow:none!important;flex:1;min-width:120px;padding:4px!important}
.bb-tagbox .bb-chip button{border:0;background:none;color:inherit;font-weight:900;cursor:pointer;padding:0 0 0 2px}
.bb-mentionpop{position:absolute;z-index:90;min-width:240px;background:var(--bb-card);border:1px solid var(--bb-line);border-radius:14px;box-shadow:var(--bb-shadow);padding:5px;display:none}
.bb-mentionpop button{display:flex;gap:8px;align-items:center;width:100%;border:0;background:none;font:inherit;font-weight:700;padding:7px 9px;border-radius:9px;cursor:pointer;color:var(--bb-ink)}
.bb-mentionpop button:hover,.bb-mentionpop button.is-on{background:var(--bb-soft)}

/* originality meter */
.bb-meter{padding:16px;display:grid;gap:10px}
.bb-meter__dial{display:flex;align-items:center;gap:14px}
.bb-meter__ring{--v:0;--c:#22c55e;width:84px;height:84px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--v) * 1%),var(--bb-soft) 0);transition:--v .6s}
.bb-meter__ring b{width:64px;height:64px;border-radius:50%;background:var(--bb-card);display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-variant-numeric:tabular-nums}
.bb-meter__lvl{font-weight:900}
.bb-meter__rows{display:grid;gap:7px;font-size:13px}
.bb-meter__row{display:flex;justify-content:space-between;gap:8px}
.bb-meter__row span:last-child{font-weight:800;font-variant-numeric:tabular-nums}
.bb-meter__bar{height:7px;border-radius:7px;background:var(--bb-soft);overflow:hidden}
.bb-meter__bar i{display:block;height:100%;border-radius:7px;background:var(--bb-grad2);transition:width .5s}
.bb-meter__tip{font-size:13px;background:var(--bb-soft);border-radius:12px;padding:9px 11px}
.bb-phrase{background:#fde68a;border-radius:4px;box-shadow:0 0 0 2px #fde68a}

/* ---------------- modals ---------------- */
.bb-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,11,31,.62);backdrop-filter:blur(6px)}
.bb-modal.is-open{display:flex;animation:bbFade .2s ease}
.bb-modal__box{width:min(640px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--bb-card);color:var(--bb-ink);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:bbRise .3s cubic-bezier(.2,.7,.2,1)}
.bb-modal__head{padding:24px 26px 16px;border-radius:26px 26px 0 0;color:#fff;background:linear-gradient(120deg,#be123c,#e11d48 40%,#1E88E5);position:relative;overflow:hidden}
.bb-modal__head h2{margin:6px 0 0;font-family:"Bricolage Grotesque",sans-serif;font-size:26px}
.bb-modal__head .bb-warnico{font-size:40px;display:inline-block;animation:bbShake 1.6s ease-in-out infinite}
.bb-modal__body{padding:18px 26px 24px;display:grid;gap:12px}
.bb-rule{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:14px;background:var(--bb-soft)}
.bb-rule b{display:block}
.bb-rule span{font-size:14px;color:var(--bb-mut)}
.bb-rule__x{font-size:20px;flex:none}
.bb-check{display:flex;gap:10px;align-items:flex-start;font-weight:800;padding:12px;border-radius:14px;border:2px solid var(--bb-line);cursor:pointer}
.bb-check input{width:20px;height:20px;accent-color:#e11d48;flex:none;margin-top:2px}
.bb-gate li{margin:6px 0}

/* lightbox, back to top, toasts */
.bb-lightbox{position:fixed;inset:0;z-index:110;background:rgba(10,7,20,.9);display:none;align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.bb-lightbox.is-open{display:flex;animation:bbFade .2s}
.bb-lightbox img{max-width:100%;max-height:100%;border-radius:12px;animation:bbRise .25s}
.bb-totop{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%;border:0;background:var(--bb-grad);color:#fff;font-size:20px;font-weight:900;cursor:pointer;box-shadow:var(--bb-shadow);display:none}
.bb-totop.is-in{display:block;animation:bbUp .3s}
.bb-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;background:#0b2a4a;color:#fff;font-weight:800;border-radius:999px;padding:11px 20px;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bbUp .3s}

/* tables in My blogs / Insights */
.bb-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.bb-table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-mut);padding:10px;border-bottom:1px solid var(--bb-line)}
.bb-table td{padding:12px 10px;border-bottom:1px solid var(--bb-line);vertical-align:top}
.bb-scroll{overflow-x:auto}
.bb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.bb-kpi{padding:16px;border-radius:20px;color:#fff;position:relative;overflow:hidden}
.bb-kpi b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:32px;line-height:1.05;font-variant-numeric:tabular-nums}
.bb-kpi span{font-size:13px;font-weight:700;opacity:.92}
.bb-kpi em{position:absolute;top:12px;right:12px;font-style:normal;font-size:12px;font-weight:900;background:rgba(255,255,255,.22);border-radius:999px;padding:2px 8px}
.bb-bars{display:flex;align-items:flex-end;gap:4px;height:180px;padding:12px 4px 0}
.bb-bars div{flex:1;border-radius:6px 6px 2px 2px;background:var(--bb-grad2);min-height:3px;position:relative;transform-origin:bottom;animation:bbGrow .7s cubic-bezier(.2,.7,.2,1) both}
.bb-bars div.is-recent{background:var(--bb-grad)}
.bb-hbar{display:grid;grid-template-columns:140px 1fr 50px;gap:10px;align-items:center;font-size:13px;margin:6px 0}
.bb-hbar i{display:block;height:10px;border-radius:10px;background:var(--bb-grad)}

/* notes thread (writer <-> team) */
.bb-notes{display:grid;gap:10px}
.bb-note{padding:12px 14px;border-radius:16px;max-width:88%}
.bb-note--staff{background:linear-gradient(120deg,#e3f2fd,#e0f7fa);color:#3b0764}
.bb-note--author{background:var(--bb-soft);margin-left:auto}
.bb-note small{display:block;font-size:11.5px;opacity:.75;margin-top:4px}

/* ---------------- motion ---------------- */
@keyframes bbSpin{to{transform:rotate(360deg)}}
@keyframes bbSpinHue{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(40deg)}}
@keyframes bbSheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes bbSheenX{0%,40%{left:-60%}100%{left:140%}}
@keyframes bbBounce{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-10deg)}60%{transform:translateY(0) rotate(6deg)}}
@keyframes bbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bbPulseRing{0%{box-shadow:0 0 0 0 rgba(0,172,193,.55)}100%{box-shadow:0 0 0 10px rgba(0,172,193,0)}}
@keyframes bbFloatBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.95)}}
@keyframes bbShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes bbPop{0%{transform:scale(1)}40%{transform:scale(1.6) rotate(-12deg)}100%{transform:scale(1)}}
@keyframes bbNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes bbDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes bbUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bbUpC{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bbFade{from{opacity:0}to{opacity:1}}
@keyframes bbRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bbShake{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-10deg)}20%,40%{transform:rotate(10deg)}50%{transform:rotate(0)}}
@keyframes bbEq{0%,100%{height:4px}50%{height:14px}}
@keyframes bbGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bbShimmer{to{background-position:-200% 0}}
.bb-toast,.bb-resume{animation-name:bbUpC}
@media (prefers-reduced-motion:reduce){.bb-scope *,.bb-scope *:before,.bb-scope *:after{animation:none!important;transition:none!important}}

/* ================= v1370 rich home (CBC light theme) ================= */
/* site footer keeps its own light-on-navy links (the blog link colour must not leak into it) */
.bb-scope .cbc-foot a{color:#dbe8f6}.bb-scope .cbc-foot a:hover{color:#fff}.bb-scope .cbc-foot .cbc-foot__bar a{color:#bcd4ee}
.bb-hero--rich{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center;padding:48px 34px 40px}
.bb-hero__col{min-width:0;position:relative;z-index:2}
.bb-hero__grid{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,#000 70%,transparent);animation:bbGridDrift 18s linear infinite}
.bb-live{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:bbLive 1.8s ease-out infinite}
.bb-rot{display:inline-block;height:1.05em;overflow:hidden;vertical-align:bottom}
.bb-rot__in{display:flex;flex-direction:column;animation:bbRot 10s cubic-bezier(.7,0,.3,1) infinite}
.bb-rot__in em{display:block;height:1.05em;line-height:1.05em;font-style:normal;background:linear-gradient(90deg,#FFE082,#80DEEA,#B3E5FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-btn--glow{box-shadow:0 10px 30px -8px rgba(0,172,193,.8)}
.bb-btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.bb-btn--ghost:hover{background:rgba(255,255,255,.22)}
.bb-hero__stage{position:relative;min-height:330px;min-width:0}
.bb-orbit{position:absolute;inset:8% 6%;border:1.5px dashed rgba(255,255,255,.25);border-radius:50%;animation:bbSpin 40s linear infinite}
.bb-orbit span{position:absolute;font-size:26px;animation:bbSpin 40s linear infinite reverse}
.bb-orbit span:nth-child(1){top:-14px;left:46%}.bb-orbit span:nth-child(2){top:22%;right:-12px}.bb-orbit span:nth-child(3){bottom:18%;right:-6px}
.bb-orbit span:nth-child(4){bottom:-14px;left:40%}.bb-orbit span:nth-child(5){top:60%;left:-14px}.bb-orbit span:nth-child(6){top:12%;left:4%}
.bb-float{position:absolute;width:min(220px,62%);background:#fff;color:#0b2a4a;border-radius:18px;padding:10px 10px 12px;box-shadow:0 22px 50px -18px rgba(3,20,50,.7);display:flex;flex-direction:column;gap:6px;text-decoration:none}
.bb-float b{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;line-height:1.25}
.bb-float__cov{height:74px;border-radius:12px;display:grid;place-items:center;font-size:32px;background-size:200% 200%;animation:bbShift 8s ease infinite}
.bb-float__who{display:flex;align-items:center;gap:6px;font-size:12px;color:#5a6b7b;font-weight:700}
.bb-float__heart{margin-left:auto;animation:bbBeat 1.6s ease-in-out infinite}
.bb-float--1{top:0;left:0;transform:rotate(-5deg);animation:bbFloatA 7s ease-in-out infinite}
.bb-float--2{top:22%;right:0;transform:rotate(4deg);animation:bbFloatB 8s ease-in-out infinite}
.bb-float--3{bottom:-4%;left:18%;transform:rotate(-2deg);animation:bbFloatA 9s ease-in-out infinite -3s}
@media (max-width:900px){.bb-hero--rich{grid-template-columns:1fr}.bb-hero__stage{min-height:300px}}
@media (max-width:520px){.bb-hero__stage{display:none}.bb-hero--rich{padding:34px 18px 28px}}

/* endless marquee (topics + products) */
.bb-marq{overflow:hidden;margin:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bb-marq__track{display:flex;gap:10px;width:max-content;animation:bbMarq 45s linear infinite}
.bb-marq:hover .bb-marq__track{animation-play-state:paused}
.bb-marq .bb-chip{white-space:nowrap}
.bb-marq--prod .bb-marq__track{gap:14px;animation-duration:60s;padding:6px 0 14px}
.bb-marq__cell{width:280px;flex:0 0 280px;display:flex}
.bb-marq__cell .bb-pc{width:100%}

/* writing challenge banner */
.bb-chal{display:flex;gap:14px;align-items:center;padding:14px 18px;margin:14px 0;text-decoration:none;color:#0b2a4a;border-radius:18px;border:1px solid #cfe2f7;background:linear-gradient(120deg,#FFF8E1,#E1F5FE 50%,#E0F7FA);background-size:200% 200%;animation:bbShift 12s ease infinite;box-shadow:var(--bb-shadow)}
.bb-chal__cup{font-size:34px;animation:bbBob 2.6s ease-in-out infinite}
.bb-chal__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.bb-chal__txt b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;color:#0D47A1}
.bb-chal__txt span{color:#1565C0}

/* rail call to write */
.bb-railcta{padding:18px;background:linear-gradient(135deg,#0D47A1,#1E88E5 60%,#00ACC1);background-size:200% 200%;animation:bbShift 10s ease infinite;color:#fff;border:0;position:relative;overflow:hidden}
.bb-railcta__spark{position:absolute;right:12px;top:8px;font-size:26px;animation:bbTwinkle 2.4s ease-in-out infinite}

/* richer generated card covers */
.bb-sc__cover--g{position:relative;overflow:hidden}
.bb-sc__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.28) 1.2px,transparent 1.6px);background-size:16px 16px;opacity:.7}
.bb-sc__cover--g:before,.bb-sc__cover--g:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.18)}
.bb-sc__cover--g:before{width:160px;height:160px;right:-40px;top:-60px;animation:bbBob 6s ease-in-out infinite}
.bb-sc__cover--g:after{width:90px;height:90px;left:-20px;bottom:-30px;animation:bbBob 7s ease-in-out infinite -2s}
.bb-sc__emo{position:relative;font-size:46px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));animation:bbBob 3.6s ease-in-out infinite}
.bb-sc__ttl{position:absolute;left:14px;right:14px;bottom:10px;font-size:13px;font-weight:800;line-height:1.25;text-align:left;text-shadow:0 2px 8px rgba(0,0,0,.35);font-family:Figtree,sans-serif;opacity:.95}

/* section heads */
.bb-sec--c{flex-direction:column;align-items:center;text-align:center;gap:2px}

/* how it works */
.bb-how{margin:34px 0 10px;padding:26px 18px;border-radius:26px;background:linear-gradient(180deg,#E3F2FD,#F5FAFF);border:1px solid var(--bb-line)}
.bb-how__row{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:stretch;gap:0;margin-top:14px}
.bb-how__step{background:#fff;color:#0b2a4a;border-radius:20px;padding:20px;border:1px solid var(--bb-line);box-shadow:var(--bb-shadow);display:flex;flex-direction:column;gap:6px;transition:transform .25s}
.bb-how__step:hover{transform:translateY(-6px)}
.bb-how__step b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;color:#0D47A1}
.bb-how__step p{margin:0;color:#5a6b7b;font-size:14.5px}
.bb-how__ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,hsl(var(--h),85%,52%),hsl(calc(var(--h) - 24),80%,55%));box-shadow:0 10px 22px -10px hsl(var(--h),80%,40%);animation:bbBob 3s ease-in-out infinite}
.bb-how__step:nth-child(3) .bb-how__ic{animation-delay:.5s}.bb-how__step:nth-child(5) .bb-how__ic{animation-delay:1s}
.bb-how__arrow{align-self:center;height:4px;margin:0 8px;border-radius:4px;background:repeating-linear-gradient(90deg,#1E88E5 0 10px,transparent 10px 18px);background-size:36px 4px;animation:bbDashes 1s linear infinite;position:relative}
.bb-how__arrow:after{content:"";position:absolute;right:-4px;top:-5px;border:7px solid transparent;border-left-color:#1E88E5;border-right:0}
@media (max-width:820px){.bb-how__row{grid-template-columns:1fr;gap:12px}.bb-how__arrow{display:none}}

/* why write here */
.bb-why{margin:30px 0 10px}
.bb-why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.bb-why__tile{position:relative;overflow:hidden;border-radius:20px;padding:18px;color:#fff;display:flex;flex-direction:column;gap:4px;min-height:150px;background:linear-gradient(140deg,hsl(var(--h),78%,36%),hsl(calc(var(--h) + 22),80%,48%));background-size:180% 180%;animation:bbShift 9s ease infinite;box-shadow:0 16px 34px -20px hsl(var(--h),80%,30%);transition:transform .25s}
.bb-why__tile:hover{transform:translateY(-6px) rotate(-.6deg)}
.bb-why__tile:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14);right:-36px;bottom:-40px}
.bb-why__tile b{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.bb-why__tile span{font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.bb-why__ic{font-size:30px;animation:bbBob 3.4s ease-in-out infinite}
.bb-why__tile:nth-child(2n) .bb-why__ic{animation-delay:.7s}
@media (max-width:980px){.bb-why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.bb-why__grid{grid-template-columns:1fr}}

/* product showcase */
.bb-showcase{margin:30px 0 6px}

/* writers wall */
.bb-wall{margin:30px 0 10px}
.bb-wall__row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:14px}
.bb-wall__p{display:flex;flex-direction:column;align-items:center;gap:4px;width:118px;text-align:center;text-decoration:none;color:var(--bb-ink)}
.bb-wall__p b{font-size:14px;line-height:1.2}
.bb-wall__p>span:last-child{font-size:12px;color:var(--bb-mut)}
.bb-wall__ring{padding:4px;border-radius:50%;background:conic-gradient(from 0deg,#0D47A1,#1E88E5,#00ACC1,#0C7E63,#FFB300,#0D47A1);animation:bbSpin 6s linear infinite;display:inline-flex}
.bb-wall__ring>*{animation:bbSpin 6s linear infinite reverse;border:3px solid var(--bb-card);border-radius:50%}
.bb-wall__p:hover .bb-wall__ring{animation-duration:1.5s}

/* closing call */
.bb-final{position:relative;overflow:hidden;text-align:center;margin:34px 0 40px;padding:44px 22px;border-radius:28px;color:#fff;background:linear-gradient(120deg,#072e57,#0D47A1 35%,#1E88E5 70%,#00ACC1);background-size:220% 220%;animation:bbShift 12s ease infinite}
.bb-final h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(26px,4vw,40px);margin:0 0 8px;text-wrap:balance;color:#fff}
.bb-final p{max-width:560px;margin:0 auto 18px;font-size:16.5px;color:#e3f0ff}
.bb-final__e{position:absolute;font-size:34px;opacity:.9;animation:bbFloatA 7s ease-in-out infinite}
.bb-final__e--1{left:6%;top:18%}.bb-final__e--2{right:8%;top:14%;animation-delay:-2s}.bb-final__e--3{left:12%;bottom:12%;animation-delay:-4s}.bb-final__e--4{right:14%;bottom:14%;animation-delay:-1s}
@media (max-width:600px){.bb-final__e{display:none}}

@keyframes bbRot{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-1.05em)}40%,56%{transform:translateY(-2.1em)}60%,76%{transform:translateY(-3.15em)}80%,100%{transform:translateY(-4.2em)}}
@keyframes bbLive{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}100%{box-shadow:0 0 0 9px rgba(74,222,128,0)}}
@keyframes bbGridDrift{to{background-position:22px 22px}}
@keyframes bbFloatA{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes bbFloatB{0%,100%{translate:0 0}50%{translate:-8px 10px}}
@keyframes bbBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}}
@keyframes bbMarq{to{transform:translateX(-50%)}}
@keyframes bbDashes{to{background-position:36px 0}}
@keyframes bbTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.25) rotate(20deg);opacity:.7}}
@media (prefers-reduced-motion:reduce){.bb-rot__in{animation:none!important}.bb-marq__track{animation:none!important;flex-wrap:wrap;width:auto}}
@media (max-width:900px){.bb-orbit{display:none}.bb-hero__stage{min-height:250px}}