/* BoliLabs — the blog (22 Oct 2026): /blog and /blog/<slug> (site-src/blog.py). On top of landing.css (the story player, the
   character cards, the questions) — here the post's own look: a reading bar, the header with its cover of characters, the contents
   beside the words, stories as a chat between their characters, tips, steps and the plans table. */

/* ── reading progress, under the header's top edge */
.bl-prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:7;pointer-events:none}
.bl-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5EEAD4,var(--diya) 55%,#A78BFA);box-shadow:0 0 12px rgba(255,181,71,.6)}

/* ── a post's header: the words beside a cover of its characters, lit like an aurora */
.lp .bl-head{position:relative;isolation:isolate;padding:clamp(18px,3vw,28px) 0 clamp(26px,4vw,44px)}
.bl-head::before{content:"";position:absolute;inset:-40px 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 70% at 8% 10%,rgba(45,212,191,.16),transparent 70%),radial-gradient(38% 60% at 92% 0%,rgba(139,92,246,.28),transparent 70%),radial-gradient(30% 50% at 60% 30%,rgba(255,159,28,.1),transparent 70%)}
.bl-head-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,52px);align-items:center}
@media (max-width:900px){.bl-head-grid{grid-template-columns:minmax(0,1fr)}}
.bl-head h1{margin:.35em 0 0;font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.1;text-wrap:balance}
.bl-lede{margin:1em 0 0;color:#D2CEEA;font-size:clamp(1.06rem,1.6vw,1.2rem);line-height:1.65;max-width:38em}
.bl-cat{margin:0;font-size:.86rem;font-weight:700}
.bl-cat a,span.bl-cat{display:inline-flex;align-items:center;gap:.45em;padding:.32em .75em;border-radius:8px;color:var(--diya);text-decoration:none;
  background:color-mix(in srgb,var(--diya) 11%,transparent);border:1px solid color-mix(in srgb,var(--diya) 35%,transparent)}
.bl-by{display:flex;align-items:center;gap:12px;margin-top:1.4em}
.bl-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:800;font-size:1.15rem;color:#fff;
  background:conic-gradient(from 210deg,#8B5CF6,#FF9F1C,#2DD4BF,#8B5CF6);box-shadow:0 0 0 3px var(--raat),0 0 0 4px rgba(255,255,255,.14)}
.bl-by>span:last-child{display:grid;line-height:1.35}
.bl-by b{font-size:.98rem}
.bl-by b+span{color:var(--dhuan);font-size:.88rem}

/* the cover: the post's characters floating over a glow and a sound wave */
.bl-cover{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/11;border-radius:24px;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(70% 80% at 0% 0%,rgba(45,212,191,.42),transparent 60%),radial-gradient(60% 70% at 100% 10%,rgba(255,159,28,.4),transparent 60%),
    radial-gradient(90% 80% at 50% 110%,rgba(139,92,246,.75),transparent 65%),#1C1F55;box-shadow:0 28px 70px -24px rgba(0,0,0,.65)}
.bl-cover.small{aspect-ratio:16/10;border-radius:18px;box-shadow:none}
.cv-glow{position:absolute;inset:18% 22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);filter:blur(8px);z-index:-1}
.cv-wave{position:absolute;left:8%;right:8%;bottom:9%;height:22%;display:flex;align-items:flex-end;justify-content:space-between;gap:3%;opacity:.55;z-index:-1}
.cv-wave i{flex:1;border-radius:999px;background:linear-gradient(#FFD08A,#FF9F1C 60%,rgba(255,159,28,.2));height:30%;animation:cvWave 1.6s ease-in-out infinite alternate}
.cv-wave i:nth-child(2n){animation-delay:-.4s;height:55%}.cv-wave i:nth-child(3n){animation-delay:-.9s;height:80%}.cv-wave i:nth-child(5n){animation-delay:-1.2s;height:45%}
@keyframes cvWave{to{transform:scaleY(.45)}}
.cv-c{position:absolute;display:block;animation:cvFloat 5s ease-in-out infinite alternate}
.cv-f{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid rgba(255,214,140,.9);box-shadow:0 14px 34px -8px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.06)}
.cv-f img{display:block;width:100%;height:100%;object-fit:cover}
.cv-f.em{display:grid;place-items:center;background:var(--raat-3);font-size:2.4rem}
.cv-1{width:44%;aspect-ratio:1;left:28%;top:12%;z-index:2}
.cv-2{width:24%;aspect-ratio:1;left:5%;top:10%;animation-delay:-1.3s}
.cv-3{width:22%;aspect-ratio:1;right:6%;top:8%;animation-delay:-2.6s}
.cv-4{width:21%;aspect-ratio:1;left:9%;bottom:12%;animation-delay:-.7s}
.cv-5{width:20%;aspect-ratio:1;right:9%;bottom:13%;animation-delay:-3.4s}
@keyframes cvFloat{from{transform:translateY(-4%) rotate(-2deg)}to{transform:translateY(4%) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.cv-c,.cv-wave i{animation:none}}

/* ── the contents beside the words (a computer), then the words */
.lp .bl-grid{display:grid;grid-template-columns:220px minmax(0,46rem);justify-content:center;gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,72px)}
@media (max-width:1099px){.lp .bl-grid{grid-template-columns:minmax(0,46rem)}.bl-toc{display:none}}
.bl-toc{position:sticky;top:88px;align-self:start;margin-top:6px;padding:16px 16px 14px;border-radius:16px;border:1px solid var(--rekha);background:color-mix(in srgb,var(--raat-2) 70%,transparent)}
.bl-toc p{margin:0 0 8px;color:var(--dhuan);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.bl-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.bl-toc li{counter-increment:t}
.bl-toc a{display:grid;grid-template-columns:1.6em minmax(0,1fr);padding:6px 8px;border-radius:9px;color:var(--dhuan);font-size:.9rem;line-height:1.35;text-decoration:none;transition:background-color .15s,color .15s}
.bl-toc a::before{content:counter(t);color:var(--soya);font-weight:700;font-variant-numeric:tabular-nums}
.bl-toc a:hover{background:var(--raat-3);color:var(--chandni)}
.bl-toc a.on{background:color-mix(in srgb,var(--diya) 12%,transparent);color:var(--diya)}
.bl-toc a.on::before{color:var(--diya)}

.bl-body{min-width:0;font-size:1.08rem;line-height:1.78;color:#DEDAF0}
.bl-body>p{margin:0 0 1.05em}
.bl-body a:not(.btn):not(.cc-use):not(.cc-btn){color:var(--diya);text-decoration-thickness:1px;text-underline-offset:3px}
.bl-body h2{margin:2.2em 0 .65em;scroll-margin-top:84px;font-size:clamp(1.45rem,2.6vw,1.9rem);color:var(--chandni)}
.bl-body>h2:first-child{margin-top:.2em}
.bl-body b{color:var(--chandni)}
.bl-after{margin:.9em 0 1.1em;font-size:1rem}
.bl-after .i-go{width:14px;height:14px;margin-left:5px;vertical-align:-.15em}

/* tips and notes */
.bl-note{position:relative;margin:1.4em 0;padding:16px 18px 14px 56px;border-radius:16px;border:1px solid var(--rekha);background:var(--raat-2)}
.bl-note::before{content:"📌";position:absolute;left:16px;top:14px;font-size:1.25rem}
.bl-note.tip{border-color:color-mix(in srgb,var(--diya) 40%,var(--rekha));background:linear-gradient(120deg,color-mix(in srgb,var(--diya) 12%,var(--raat-2)),var(--raat-2) 70%)}
.bl-note.tip::before{content:"💡"}
.bl-note>b{display:block;margin-bottom:2px;color:var(--diya);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.bl-note p{margin:0;font-size:1rem;line-height:1.65}

/* the four kinds of story channel */
.bl-niches{list-style:none;margin:1.2em 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:620px){.bl-niches{grid-template-columns:minmax(0,1fr)}}
.nc{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:var(--raat-2);overflow:hidden;line-height:1.5}
.nc::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--g),transparent);opacity:.5;pointer-events:none}
.nc-kids{--g:rgba(45,212,191,.45)}.nc-horror{--g:rgba(139,92,246,.55)}.nc-comedy{--g:rgba(255,159,28,.45)}.nc-bhakti{--g:rgba(249,168,212,.4)}
.nc-em{font-size:1.9rem;line-height:1}
.nc b{font-size:1.08rem}
.nc span:not(.nc-em){color:var(--dhuan);font-size:.95rem}
.nc a{margin-top:auto;padding-top:4px;font-size:.9rem;font-weight:700;color:var(--diya);text-decoration:none}
.nc a::after{content:" →"}

/* steps */
.bl-steps{list-style:none;margin:1.2em 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:s}
@media (max-width:620px){.bl-steps{grid-template-columns:minmax(0,1fr)}}
.bl-steps li{counter-increment:s;position:relative;display:grid;align-content:start;gap:3px;padding:16px 16px 15px 64px;border-radius:16px;border:1px solid var(--rekha);background:var(--raat-2);line-height:1.5}
.bl-steps li::before{content:counter(s);position:absolute;left:16px;top:15px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#FFD08A,#FF9F1C);color:var(--diya-ink);font-weight:800;font-size:1.05rem}
.bl-steps b{font-size:1.02rem}
.bl-steps span{color:var(--dhuan);font-size:.95rem}
.bl-steps.small li{padding-top:14px;padding-bottom:13px}

/* lists */
.bl-list,.bl-check,.bl-oops{margin:1em 0 1.3em;padding:0;list-style:none;display:grid;gap:10px}
.bl-list li,.bl-check li,.bl-oops li{position:relative;padding-left:2em;line-height:1.65}
.bl-list li::before{content:"";position:absolute;left:.45em;top:.68em;width:.5em;height:.5em;border-radius:50%;background:var(--diya)}
.bl-check li::before{content:"✓";position:absolute;left:.2em;top:0;color:var(--hara);font-weight:800}
.bl-oops{counter-reset:o}
.bl-oops li{counter-increment:o;padding:12px 14px 12px 3.1em;border-radius:14px;background:color-mix(in srgb,var(--lal) 7%,var(--raat-2));border:1px solid color-mix(in srgb,var(--lal) 22%,var(--rekha))}
.bl-oops li::before{content:counter(o);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--lal) 22%,transparent);color:#FFC2C2;font-weight:800;font-size:.9rem}

/* the plans */
.bl-table{margin:1.1em 0 .6em;overflow-x:auto;border-radius:16px;border:1px solid var(--rekha)}
.bl-table table{width:100%;border-collapse:collapse;font-size:.97rem;line-height:1.45}
.bl-table th,.bl-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rekha)}
.bl-table thead th{background:var(--raat-2);color:var(--dhuan);font-size:.85rem;font-weight:600}
.bl-table tbody th{color:var(--chandni)}
.bl-table.plans tbody th{white-space:nowrap}
.bl-table tbody tr:last-child>*{border-bottom:0}
.bl-table td:nth-child(2){color:var(--chandni);font-weight:700}
.bl-table.plans td:nth-child(2){white-space:nowrap}
@media (max-width:560px){.bl-table th,.bl-table td{padding:9px 10px;font-size:.9rem}}
.bl-offer{margin:.4em 0 0;color:var(--diya);font-size:.95rem;font-weight:600}

/* the script, as typed into Story mode */
.bl-script{margin:1.1em 0 1.3em;border-radius:18px;border:1px solid var(--rekha);background:#0f1130;overflow:hidden}
.bs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px 9px 16px;border-bottom:1px solid var(--rekha);background:var(--raat-2);color:var(--dhuan);font-size:.86rem}
.bs-head span::before{content:"";display:inline-block;width:30px;height:7px;margin-right:10px;vertical-align:.1em;background:radial-gradient(circle at 3.5px 3.5px,#FF8A8A 3px,transparent 3.5px),radial-gradient(circle at 14.5px 3.5px,#FFB547 3px,transparent 3.5px),radial-gradient(circle at 25.5px 3.5px,#7FD1A8 3px,transparent 3.5px)}
.bs-copy{font:inherit;font-weight:700;font-size:.84rem;color:var(--chandni);background:var(--raat-3);border:1px solid var(--rekha);border-radius:8px;padding:.35em .8em;cursor:pointer}
.bs-copy:hover{border-color:var(--diya);color:var(--diya)}
.bl-script .sc{font-size:.98rem;line-height:1.8}
.bl-script .sc>span[lang]:not(.sc-k){font-family:inherit}

/* ── a story as a chat between its characters: each line lights up as it is heard */
.sp.chat{margin:1.2em 0 1.4em;padding:16px 16px 14px;border-radius:22px;border-color:rgba(255,255,255,.1);
  background:radial-gradient(60% 50% at 0% 0%,rgba(45,212,191,.12),transparent 70%),radial-gradient(60% 50% at 100% 0%,rgba(139,92,246,.2),transparent 70%),var(--raat-2);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7)}
.sp.chat .sp-head{margin:0 0 12px}
.sp-play.soon{opacity:.45;cursor:default;box-shadow:none}
.sp-faces{display:flex;margin-inline-start:auto;padding-left:8px}
.sp-faces+.sp-time{margin-inline-start:12px}
.sp-f{display:block;width:30px;height:30px;margin-left:-8px;border-radius:50%;overflow:hidden;border:2px solid var(--raat-2);background:var(--raat-3)}
.sp-f img{width:100%;height:100%;object-fit:cover;display:block}
.sp-f.em{display:grid;place-items:center;font-size:.95rem}
@media (max-width:560px){.sp-faces{display:none}}
.sp-beds{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sp-beds .ln.bed{display:inline-flex;align-items:center;gap:.5em;width:auto;padding:.38em .8em;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--dhuan);font-size:.86rem}
.sp-beds .ln.bed .who{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding:0}
.sp-beds .ln.bed .say{font-family:Mukta,sans-serif;font-size:.88rem;color:var(--chandni)}
.sp-beds .ln.bed.said{border-color:color-mix(in srgb,var(--hara) 40%,transparent)}
.sp.chat .script{gap:8px}
.line-li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:10px}
.line-li .av{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--raat-3);border:2px solid color-mix(in srgb,var(--c) 70%,transparent)}
.line-li .av img{width:100%;height:100%;object-fit:cover;display:block}
.line-li .av.em{display:grid;place-items:center;font-size:1.2rem}
.sp.chat .line-li .ln{display:block;width:fit-content;max-width:100%;padding:8px 13px 9px;border-radius:4px 16px 16px 16px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);color:var(--chandni);transition:background-color .25s,border-color .25s,box-shadow .25s,transform .25s}
.sp.chat .line-li .ln .who{display:block;padding:0;margin-bottom:1px;color:var(--c);font-size:.8rem;letter-spacing:.02em}
.sp.chat .line-li .ln .say{display:block;font-family:Mukta,sans-serif;font-size:1.02rem;line-height:1.5}
.sp.chat .ln .tag{font-size:.82em}
.sp.chat:not(.idle) .line-li .ln{color:var(--dhuan)}
.sp.chat .line-li .ln.said{color:var(--chandni)}
.sp.chat .line-li .ln.now{background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 60%,transparent);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent);transform:translateX(3px)}
.sp.chat .line-li .ln.now .who{color:var(--c)}
.sp.chat .line-li .ln:hover{background:rgba(255,255,255,.09)}
.cue-li{display:flex;justify-content:center}
.sp.chat .ln.cue{display:inline-flex;align-items:center;gap:.45em;width:auto;padding:.28em .8em;border-radius:999px;background:none;border:1px dashed rgba(255,255,255,.16);color:var(--dhuan);font-size:.82rem}
.sp.chat .ln.cue .who{display:none}
.sp.chat .ln.cue .say{font-size:.85rem}
.sp.chat .ln.cue.now{border-style:solid;border-color:var(--diya);color:var(--diya);background:color-mix(in srgb,var(--diya) 10%,transparent)}
@media (max-width:560px){.line-li{grid-template-columns:32px minmax(0,1fr);gap:8px}.line-li .av{width:32px;height:32px}.sp.chat{padding:14px 12px 12px}}
.sp-make{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 2px 0}
.sp-make span{flex:1 1 220px;color:var(--dhuan);font-size:.9rem;line-height:1.45}

/* the characters to hear, in the words' column */
.bl-body .bl-cast{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));margin:1.1em 0 .4em}
.bl-cast .cc-line{font-family:Mukta,sans-serif}
.bl-cast .cc-em{border-radius:50%;overflow:hidden}
.bl-cast .cc-em img{border-radius:50%}
.cc-em.em{font-size:1.5rem}

/* the questions */
.bl-faq{margin-top:.4em}
.bl-faq summary{font-size:1.02rem}
.bl-faq p{font-size:1rem;line-height:1.7}

/* share */
.bl-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2.4em 0 0;padding-top:18px;border-top:1px solid var(--rekha);color:var(--dhuan);font-size:.95rem}
.bl-share span{margin-right:4px}
.bl-share a[href^="https://wa.me"]{border-color:color-mix(in srgb,#25D366 60%,transparent);color:#8BF0B3}

/* ── more to read, and the end */
.lp .bl-end{padding-top:clamp(20px,3vw,36px)}
.lp section.bl-more{padding-top:clamp(36px,5vw,60px)}
.bl-more h2{margin:0 0 18px}
.bl-links{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bl-links a{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1em;border-radius:12px;border:1px solid var(--rekha);background:var(--raat-2);color:var(--chandni);text-decoration:none;font-weight:600;font-size:.95rem}
.bl-links a:hover{border-color:var(--diya);color:var(--diya)}

/* ── the post cards (/blog, and "more to read") */
.bl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.bl-card{display:flex;flex-direction:column;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:var(--raat-2);color:inherit;text-decoration:none;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.bl-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--diya) 45%,transparent);box-shadow:0 22px 50px -26px rgba(0,0,0,.8)}
.bl-card .bl-cover{border-radius:0;border:0;box-shadow:none}
.bc-tx{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px 20px}
.bc-tx b,.bc-h{margin:0;font-size:1.2rem;font-weight:700;line-height:1.25;text-wrap:balance;color:var(--chandni)}
.bc-ex{color:var(--dhuan);font-size:.95rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-meta{color:var(--dhuan);font-size:.85rem}
.bc-go{margin-top:auto;padding-top:2px;color:var(--diya);font-weight:700;font-size:.95rem}
.bc-go .i-go{width:15px;height:15px;margin-left:6px;vertical-align:-.18em;transition:transform .2s}
.bl-card:hover .bc-go .i-go{transform:translateX(3px)}
.bl-card.big{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}
.bl-card.big .bl-cover{aspect-ratio:auto;min-height:100%}
.bl-card.big .bc-tx{justify-content:center;gap:12px;padding:clamp(22px,3.4vw,40px)}
.bl-card.big b,.bl-card.big .bc-h{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.bl-card.big .bc-ex{-webkit-line-clamp:4;font-size:1.02rem}
@media (max-width:820px){.bl-card.big{grid-template-columns:minmax(0,1fr)}.bl-card.big .bl-cover{aspect-ratio:16/10}}

/* ── /blog */
.lp section.bl-hero{position:relative;isolation:isolate;padding:clamp(34px,6vw,72px) 0 clamp(18px,3vw,30px);text-align:center}
.bl-hero::before{content:"";position:absolute;inset:-60px 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(35% 70% at 20% 20%,rgba(45,212,191,.16),transparent 70%),radial-gradient(35% 70% at 80% 10%,rgba(139,92,246,.3),transparent 70%),radial-gradient(30% 60% at 50% 60%,rgba(255,159,28,.12),transparent 70%)}
.bl-kick{display:inline-block;margin:0 0 14px;padding:.35em .9em;border-radius:8px;color:var(--diya);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--diya) 11%,transparent);border:1px solid color-mix(in srgb,var(--diya) 35%,transparent)}
.bl-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;text-wrap:balance}
.bl-hero h1 .hl{background:linear-gradient(90deg,#FFD08A,#FF9F1C 45%,#C4B5FD);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp section.bl-hero .lede{margin:1em auto 0;max-width:40em;text-wrap:balance}
.lp section.bl-feed{padding-top:clamp(18px,3vw,30px)}
.bl-feed .bl-cards{margin-top:16px}
.bl-duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3vw,32px);margin-top:clamp(28px,4vw,44px);align-items:start}
@media (max-width:980px){.bl-duo{grid-template-columns:minmax(0,1fr)}}
.bl-duo h2{margin:0 0 6px;font-size:clamp(1.35rem,2.4vw,1.7rem)}
.bl-listen .sp.chat{margin-top:12px}
.bl-new p{margin:0;color:var(--dhuan)}
.bl-new .bl-cast{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:14px}
.bl-new .cc-line,.bl-new .cc-use{display:none}
.bl-new .cc-btn{padding:10px 12px;border-radius:18px}

/* ══ 22 Oct 2026 — the next posts' samples: Reels as phones, ad spots, the same ad in other languages, one line in many voices,
   and a plain voice before and after its effects. A picture made for a post as its cover, and the categories on /blog. ══ */
.bl-cover.pic{aspect-ratio:3/2;background:#1C1F55}
.bl-cover.pic img{display:block;width:100%;height:100%;object-fit:cover}
.bl-cover.pic.small{aspect-ratio:16/10}
.bl-card.big .bl-cover.pic{aspect-ratio:auto}
@media (max-width:820px){.bl-card.big .bl-cover.pic{aspect-ratio:3/2}}

.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.bl-chips a{display:inline-flex;align-items:center;gap:.4em;padding:.45em .95em;border-radius:999px;border:1px solid var(--rekha);background:var(--raat-2);color:var(--dhuan);font-weight:600;font-size:.92rem;text-decoration:none;transition:color .15s,border-color .15s,background-color .15s}
.bl-chips a:hover{color:var(--chandni);border-color:var(--dhuan)}
.bl-chips a.on{background:color-mix(in srgb,var(--diya) 14%,var(--raat-2));border-color:color-mix(in srgb,var(--diya) 55%,transparent);color:var(--diya)}
.bl-card[hidden]{display:none!important}

/* ── Reels and Shorts: phones in a row that scrolls sideways; the line being heard is the caption */
.bl-reels{display:grid;grid-auto-flow:column;grid-auto-columns:min(74%,248px);gap:16px;margin:1.2em 0 1.5em;padding:4px 2px 14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--rekha) transparent}
.bl-reels>div{scroll-snap-align:start;min-width:0}
.sp.reel{padding:0;border:0;background:none;display:flex;flex-direction:column;gap:12px}
.rl-phone{position:relative;isolation:isolate;aspect-ratio:9/16;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(90% 55% at 15% 0%,color-mix(in srgb,var(--g2) 60%,transparent),transparent 70%),radial-gradient(70% 45% at 100% 100%,color-mix(in srgb,var(--g2) 30%,transparent),transparent 70%),linear-gradient(170deg,var(--g1),#0B0D2A 88%);
  box-shadow:0 28px 60px -26px rgba(0,0,0,.85),inset 0 0 0 5px rgba(0,0,0,.28)}
.rl-art{position:absolute;left:0;right:0;top:19%;z-index:-1;text-align:center;font-size:clamp(4rem,10vw,5.6rem);line-height:1;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45));animation:rlFloat 4.5s ease-in-out infinite alternate}
@keyframes rlFloat{to{transform:translateY(7%) rotate(4deg)}}
.sp.reel.playing .rl-art{animation-duration:1.6s}
.rl-top{position:absolute;left:12px;right:12px;top:14px;display:flex;align-items:center;gap:9px}
.rl-f{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.3);font-size:1.05rem}
.rl-f img{width:100%;height:100%;object-fit:cover}
.rl-id{display:grid;min-width:0;line-height:1.25}
.rl-id b{color:#fff;font-size:.86rem}
.rl-id small{overflow:hidden;color:rgba(255,255,255,.88);font-size:.8rem;white-space:nowrap;text-overflow:ellipsis}
.rl-side{position:absolute;right:11px;bottom:31%;display:grid;gap:15px;color:#fff;font-size:1.15rem;text-align:center;opacity:.8;pointer-events:none}
.rl-side i{font-style:normal}
.rl-caps{position:absolute;left:10px;right:44px;bottom:72px;display:grid}
.rl-caps>li{grid-area:1/1;display:flex;align-items:flex-end}
.sp.reel .rl-caps .ln{display:block;width:auto;padding:8px 11px;border-radius:12px;background:rgba(8,9,30,.66);color:#fff;font-weight:700;opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);
  transition:opacity .22s,transform .22s,visibility 0s linear .22s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sp.reel .rl-caps .ln .say{font-family:Mukta,sans-serif;font-size:1.02rem;line-height:1.35;text-wrap:balance}
.sp.reel .rl-caps .ln .who{display:block;margin-bottom:1px;padding:0;color:var(--g2);font-size:.74rem;letter-spacing:.03em}
.sp.reel .rl-caps .ln.now,.sp.reel.idle .rl-caps .first .ln{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .22s}
.sp.reel .rl-caps .ln.now{box-shadow:0 0 0 2px color-mix(in srgb,var(--g2) 60%,transparent)}
.rl-caps>.rl-cue{position:absolute;left:0;bottom:calc(100% + 12px);grid-area:auto}
.sp.reel .ln.cue{display:inline-flex;align-items:center;gap:.4em;width:auto;padding:.28em .7em;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:.78rem;box-shadow:none}
.sp.reel .ln.cue .say{font-size:.8rem}
.rl-foot{position:absolute;left:10px;right:10px;bottom:13px;display:flex;align-items:center;gap:10px}
.rl-foot .sp-play{width:44px;height:44px}
.rl-foot .sp-play svg{width:18px;height:18px}
.rl-foot .bar{flex:1;margin:0;background:rgba(255,255,255,.22)}
.rl-foot .bar i{background:#fff}
.rl-foot .sp-time{margin:0;color:rgba(255,255,255,.85);font-size:.78rem}
.sp.reel.playing .rl-foot .i-play{display:none}.sp.reel.playing .rl-foot .i-pause{display:block}
.rl-cap{display:grid;gap:3px;padding:0 4px}
.rl-cap b{font-size:.98rem;line-height:1.3}
.rl-cap>span{color:var(--dhuan);font-size:.85rem;line-height:1.4}
.rl-cap .btn{justify-self:start;margin-top:6px}
.rl-cap small{color:var(--dhuan);font-size:.8rem}
@media (prefers-reduced-motion:reduce){.rl-art{animation:none}}

/* ── an ad spot */
.sp.ad{margin:1.2em 0 1.4em;padding:18px 18px 14px;border-radius:22px;border-color:rgba(255,255,255,.1);
  background:radial-gradient(70% 60% at 100% 0%,rgba(255,159,28,.17),transparent 70%),radial-gradient(60% 60% at 0% 100%,rgba(139,92,246,.18),transparent 70%),var(--raat-2);box-shadow:0 24px 60px -28px rgba(0,0,0,.7)}
.sp.ad .ad-head{align-items:flex-start;margin-bottom:4px}
.ad-tt{display:grid;gap:1px;min-width:0}
.ad-k{color:var(--diya);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ad-tt b{font-size:1.12rem;line-height:1.3}
.ad-tt>span:last-child{color:var(--dhuan);font-size:.88rem;line-height:1.4}
.ad-eq{display:flex;align-items:flex-end;gap:3px;height:30px;margin:8px 2px 10px}
.ad-eq i{flex:1;height:100%;border-radius:2px;background:linear-gradient(#FFD08A,#FF9F1C);opacity:.3;transform-origin:50% 100%;transform:scaleY(.16)}
.sp.ad.playing .ad-eq i{opacity:.9;animation:adEq .9s ease-in-out infinite alternate}
.sp.ad.playing .ad-eq i:nth-child(2n){animation-duration:.62s}.sp.ad.playing .ad-eq i:nth-child(3n){animation-duration:1.13s;animation-delay:-.4s}.sp.ad.playing .ad-eq i:nth-child(5n){animation-duration:.78s;animation-delay:-.25s}.sp.ad.playing .ad-eq i:nth-child(7n){animation-duration:1.31s;animation-delay:-.6s}.sp.ad.playing .ad-eq i:nth-child(11n){animation-duration:.55s;animation-delay:-.15s}.sp.ad.playing .ad-eq i:nth-child(4n+1){animation-delay:-.33s}
@keyframes adEq{0%{transform:scaleY(.14)}100%{transform:scaleY(.96)}}
@media (prefers-reduced-motion:reduce){.sp.ad.playing .ad-eq i{animation:none;transform:scaleY(.55)}}
.sp.ad .ad-lines{gap:4px}
.sp.ad .ad-lines .ln{grid-template-columns:minmax(0,1fr);padding:7px 12px;border-radius:12px;color:var(--dhuan)}
.sp.ad .ad-lines .ln .say{font-family:Mukta,sans-serif;font-size:1.02rem;line-height:1.5}
.sp.ad.idle .ad-lines .ln,.sp.ad .ad-lines .ln.said{color:var(--chandni)}
.sp.ad .ad-lines .ln.now{background:color-mix(in srgb,var(--diya) 13%,transparent);color:#fff;box-shadow:inset 3px 0 0 var(--diya)}
.sp.ad .ln.cue{display:inline-flex;align-items:center;gap:.45em;width:auto;padding:.25em .75em;border-radius:999px;border:1px dashed rgba(255,255,255,.16);color:var(--dhuan);font-size:.82rem}
.sp.ad .ln.cue .who{display:none}
.sp.ad .ln.cue.now{border-style:solid;border-color:var(--diya);color:var(--diya);background:color-mix(in srgb,var(--diya) 10%,transparent);box-shadow:none}
.ad-where{list-style:none;margin:12px 2px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ad-where li{padding:.24em .7em;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--dhuan);font-size:.8rem}
.ad-where .ad-bed{color:var(--chandni)}

/* ── the same ad in other languages */
.bl-langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;margin:1.1em 0 1.3em}
.sp.lg{padding:14px 14px 12px;border-radius:18px}
.sp.lg .sp-head{margin-bottom:6px}
.sp.lg .sp-play{width:42px;height:42px}
.sp.lg .sp-play svg{width:17px;height:17px}
.lg-tt{display:grid;min-width:0}
.lg-tt b{font-size:1.2rem;line-height:1.25}
.lg-tt span{color:var(--dhuan);font-size:.82rem}
.sp.lg .ln{grid-template-columns:minmax(0,1fr);padding:5px 8px;color:var(--dhuan)}
.sp.lg .ln .say{font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Gujarati","Noto Sans Tamil",sans-serif;font-size:.98rem;line-height:1.6}
.sp.lg.idle .ln,.sp.lg .ln.said{color:var(--chandni)}
.lg-go{display:inline-flex;align-items:center;gap:6px;margin:10px 4px 0;color:var(--diya);font-weight:700;font-size:.9rem;text-decoration:none}
.lg-go .i-go{width:14px;height:14px}

/* ── one line, many characters */
.bl-vgrid{margin:1.2em 0 1.4em;padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(60% 80% at 50% 0%,rgba(139,92,246,.24),transparent 70%),var(--raat-2)}
.vg-line{margin:0 0 14px;text-align:center;font-size:1.18rem;line-height:1.4}
.vg-line span{display:block;margin-bottom:2px;color:var(--dhuan);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vg-line q{color:var(--chandni);font-family:Mukta,sans-serif;font-weight:700}
.vg-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.vg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vg{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.vg.playing{border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.vg-btn{position:relative;display:grid;justify-items:center;gap:6px;padding:16px 10px 12px;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.vg-btn[disabled]{cursor:default;opacity:.6}
.vg-em{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;overflow:hidden;border:2px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 16%,var(--raat-3));font-size:1.9rem;line-height:1}
.vg-em img{width:100%;height:100%;object-fit:cover}
.vg.playing .vg-em{animation:vgPulse 1s ease-in-out infinite alternate}
@keyframes vgPulse{to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.vg.playing .vg-em{animation:none}}
.vg-nm{display:grid;line-height:1.25}
.vg-nm b{font-size:.98rem}
.vg-nm small{color:var(--dhuan);font-size:.8rem}
.vg-ic{position:absolute;right:9px;top:9px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#1a1033}
.vg-ic svg{width:12px;height:12px}
.vg.playing .vg-ic .i-play{display:none}.vg.playing .vg-ic .i-pause{display:block}
.vg-p{position:absolute;left:0;bottom:0;width:var(--p,0%);height:3px;background:var(--c)}
.vg-use{display:flex;justify-content:center;align-items:center;gap:5px;padding:7px 8px 9px;border-top:1px solid rgba(255,255,255,.06);color:var(--dhuan);font-size:.82rem;font-weight:600;text-decoration:none}
.vg-use:hover{color:var(--diya)}
.vg-use .i-go{width:13px;height:13px}

/* ── a plain voice, before and after its effects */
.bl-fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));gap:12px;margin:1.2em 0 1.4em}
.fxab{margin:0;display:flex;flex-direction:column;gap:9px;min-width:0;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,var(--raat-2),color-mix(in srgb,var(--raat-2) 45%,var(--raat)));transition:border-color .2s}
.fxab.playing{border-color:color-mix(in srgb,var(--diya) 50%,transparent)}
.fx-top{display:flex;align-items:center;gap:10px}
.fx-em{font-size:1.7rem;line-height:1}
.fx-top b{font-size:1.06rem}
.fx-knobs{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.fx-knobs span{padding:.2em .6em;border-radius:8px;border:1px solid color-mix(in srgb,var(--diya) 35%,transparent);background:color-mix(in srgb,var(--diya) 12%,transparent);color:var(--diya);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.fx-line{margin:0;color:var(--chandni);font-family:Mukta,sans-serif;font-size:1rem;line-height:1.5}
.fx-pl{display:flex;align-items:center;gap:10px;margin-top:auto}
.fx-play{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--diya);color:var(--diya-ink);cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--diya) 30%,transparent);transition:transform .15s}
.fx-play:hover{transform:scale(1.06)}
.fx-play svg{width:17px;height:17px}
.fx-play.soon{opacity:.45;cursor:default;box-shadow:none}
.fxab.playing .fx-play .i-play{display:none}.fxab.playing .fx-play .i-pause{display:block}
.fx-seg{flex:1;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;border:1px solid var(--rekha);background:var(--raat)}
.fx-seg button{min-height:40px;padding:.5em .3em;border:0;border-radius:9px;background:none;color:var(--dhuan);font:inherit;font-size:.8rem;font-weight:700;line-height:1.2;cursor:pointer}
.fx-seg button[aria-pressed="true"]{background:var(--diya);color:var(--diya-ink)}
.fxab .bar{margin:2px 2px 0}
.fx-go{display:inline-flex;align-items:center;gap:6px;color:var(--diya);font-size:.86rem;font-weight:700;text-decoration:none}
.fx-go .i-go{width:13px;height:13px}
.bl-body h3{margin:1.7em 0 .35em;color:var(--chandni);font-size:1.22rem}
/* (the reels' arrows, on a screen wide enough to need them; an effect card a row wide) */
.bl-reelbox{position:relative}
.bl-reelnav{display:flex;align-items:center;gap:8px;margin:1.1em 0 -.6em;color:var(--dhuan);font-size:.86rem}
.bl-reelnav span{margin-inline-end:auto}
.rn-b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rekha);background:var(--raat-2);color:var(--chandni);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.rn-b:hover{border-color:var(--diya);color:var(--diya)}
.rn-b:disabled{opacity:.35;cursor:default;border-color:var(--rekha);color:var(--chandni)}
.bl-fx{grid-template-columns:minmax(0,1fr)}
.fxab{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,240px);gap:6px 20px;align-items:center}
.fxab>.fx-top,.fxab>.fx-knobs,.fxab>.fx-line{grid-column:1}
.fxab>.fx-pl{grid-column:2;grid-row:1 / span 3;flex-direction:column;align-items:stretch;gap:10px;margin:0}
.fxab>.fx-pl .fx-play{align-self:center;width:52px;height:52px}
.fxab>.fx-pl .fx-play svg{width:20px;height:20px}
.fxab>.bar,.fxab>figcaption{grid-column:1 / -1}
.fxab>.bar{margin:6px 2px 0}
@media (max-width:620px){.fxab{grid-template-columns:minmax(0,1fr)}.fxab>.fx-pl{grid-column:1;grid-row:auto;flex-direction:row;align-items:center}.fxab>.fx-pl .fx-play{width:44px;height:44px}}

/* (the design review, 22 Oct 2026) a phone's picture under its captions; tight caption lines; where an ad plays, said; a tile's focus
   ring inside it; the categories in one row on a phone; the language cards' bars in line; a reel's script under it */
.rl-pic{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.rl-phone:has(.rl-pic)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,26,.62),rgba(6,7,26,0) 22%,rgba(6,7,26,0) 48%,rgba(6,7,26,.55) 74%,rgba(6,7,26,.82))}
.sp.reel .rl-caps .ln,.sp.ad .ln,.sp.lg .ln{line-height:1.4}
.sp.reel .rl-caps .ln .say,.sp.ad .ln .say,.sp.lg .ln .say{line-height:inherit}
.ad-where .ad-lab{padding:.24em .1em;background:none;border:0;color:var(--dhuan);font-weight:600}
.vg-btn:focus-visible{outline-offset:-3px;border-radius:14px 14px 0 0}
.bl-chips small{margin-inline-start:.15em;color:var(--soya);font-weight:700;font-size:.8em}
.bl-chips a.on small{color:inherit;opacity:.8}
@media (max-width:620px){.bl-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scrollbar-width:none}.bl-chips::-webkit-scrollbar{display:none}.bl-chips a{flex:none}}
.sp.lg{display:flex;flex-direction:column}
.sp.lg .bar{margin-top:auto}
.rl-script{margin:4px 0 2px;color:var(--dhuan);font-size:.86rem}
.rl-script summary{cursor:pointer;color:var(--chandni);font-weight:600;width:fit-content}
.rl-script ol{margin:6px 0 0;padding-left:1.2em;display:grid;gap:3px;line-height:1.45}
.rl-script b{color:var(--chandni)}