/* BoliLabs — the tutorial pages (21 Oct 2026): /tutorial and /tutorial/<language>. The video first with its chapters beside it, then
   what's in it, the story to hear and the whole transcript, which lights up as it is heard. The same night as the rest of the site. */

/* other scripts: Mukta has Latin and Devanagari; the rest come from the device's own fonts, the most common first */
:lang(bn){font-family:Mukta,"Noto Sans Bengali","Hind Siliguri","Nirmala UI",Vrinda,sans-serif}
:lang(pa){font-family:Mukta,"Noto Sans Gurmukhi","Nirmala UI",Raavi,sans-serif}
:lang(gu){font-family:Mukta,"Noto Sans Gujarati","Nirmala UI",Shruti,sans-serif}
:lang(ta){font-family:Mukta,"Noto Sans Tamil","Nirmala UI",Latha,sans-serif}
:lang(te){font-family:Mukta,"Noto Sans Telugu","Nirmala UI",Gautami,sans-serif}
:lang(kn){font-family:Mukta,"Noto Sans Kannada","Nirmala UI",Tunga,sans-serif}
:lang(ml){font-family:Mukta,"Noto Sans Malayalam","Nirmala UI",Kartika,sans-serif}
:lang(ar){font-family:Mukta,"Noto Sans Arabic","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif}
:lang(ur){font-family:Mukta,"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting","Noto Naskh Arabic",serif}
:lang(en){font-family:Mukta,system-ui,-apple-system,"Segoe UI",sans-serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tut main{overflow-x:clip}
html[dir=rtl] .skip{left:auto;right:-999px}   /* (off to the left, a right-to-left page could be scrolled sideways to it) */
html[dir=rtl] .skip:focus{right:8px}

/* ── the top: where you are, the title, the facts, the video and its chapters */
.tw{padding:clamp(18px,3vw,30px) 0 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin:0 0 16px;color:var(--dhuan);font-size:.88rem}
.crumbs a{color:var(--dhuan);text-decoration:none}
.crumbs a:hover{color:var(--chandni)}
.crumbs [aria-hidden]{opacity:.5}
.tw h1{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.2;max-width:30em;text-wrap:balance}
.tw h1 .a{display:block;margin-bottom:.35em;color:var(--diya);font-size:max(.95rem,.52em);font-weight:700;letter-spacing:0}
.tw h1 .b{display:block}
:lang(ur) .tw h1,:lang(ar) .tw h1{line-height:1.6;letter-spacing:0}
.tw-meta{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 18px}
.tw-fact{display:inline-flex;align-items:center;gap:6px;margin-inline-end:8px;color:var(--dhuan);font-size:.92rem;font-weight:600}
.tw-fact svg{flex:none;width:17px;height:17px}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 14px;border-radius:999px;border:1px solid var(--rekha);background:var(--raat-2);color:var(--chandni);font:inherit;font-size:.9rem;font-weight:600;line-height:1.15;text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s}
.pill:hover{border-color:var(--dhuan);background:var(--raat-3)}
.pill svg{flex:none;width:17px;height:17px}
.tw-lang>summary{list-style:none}
.tw-lang>summary::-webkit-details-marker{display:none}
.tw-lang .cr{width:15px;height:15px;transition:transform .15s}
.tw-lang[open] .cr{transform:rotate(180deg)}
.tw-menu{position:absolute;z-index:12;top:calc(100% + 4px);inset-inline-start:0;width:min(100%,400px);max-height:min(62vh,460px);overflow:auto;margin:0;padding:6px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--raat-2);border:1px solid var(--rekha);border-radius:16px;box-shadow:0 20px 46px rgba(0,0,0,.5)}
.tw-menu a{display:block;padding:9px 12px;border-radius:10px;color:var(--chandni);text-decoration:none;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-menu a:hover{background:var(--raat-3)}
.tw-menu a[aria-current]{background:var(--chandni);color:var(--raat);font-weight:700}

.tw-stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:stretch}
.tw-slot{min-width:0;aspect-ratio:16/9}
.tw-frame{position:relative;width:100%;height:100%;border-radius:18px;background:#05060f;box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px var(--rekha)}
.tw-frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:inherit}
.tw-frame.mini{position:fixed;z-index:40;bottom:16px;inset-inline-end:16px;width:min(380px,calc(100vw - 32px));height:auto;aspect-ratio:16/9;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 0 1px var(--rekha);animation:tw-up .25s ease-out}
@keyframes tw-up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){.tw-frame.mini{width:64vw;bottom:12px;inset-inline-end:12px}}
.tw-x{position:absolute;z-index:2;top:-13px;inset-inline-end:-11px;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--rekha);background:var(--raat-2);color:var(--chandni);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.tw-x:hover{background:var(--raat-3)}
.tw-x svg{width:15px;height:15px}

.tw-chap{position:relative;min-width:0;background:var(--raat-2);border:1px solid var(--rekha);border-radius:18px;overflow:hidden}
.tw-chap h2{display:flex;align-items:center;gap:8px;margin:0;padding:14px 16px 8px;font-size:1.02rem;font-weight:700;letter-spacing:0}
.tw-chap h2 .n{padding:1px 9px;border:1px solid var(--rekha);border-radius:999px;color:var(--dhuan);font-size:.78rem;font-weight:700}
.tw-chap ol{position:absolute;inset:46px 0 0;overflow-y:auto;margin:0;padding:2px 8px 26px;list-style:none;scrollbar-width:thin;scrollbar-color:var(--rekha) transparent}
.tw-chap::after{content:"";position:absolute;left:0;right:12px;bottom:0;height:34px;border-radius:0 0 18px 18px;background:linear-gradient(to bottom,color-mix(in srgb,var(--raat-2) 0%,transparent),var(--raat-2));pointer-events:none}   /* more below: the list fades out */
.ch{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;padding:8px 8px 10px;border-radius:12px;color:var(--chandni);text-decoration:none;transition:background-color .15s}
.ch:hover{background:var(--raat-3)}
.ch img{width:104px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--raat-3);box-shadow:0 0 0 1px color-mix(in srgb,var(--rekha) 70%,transparent)}
.ch-tx{display:grid;gap:2px;min-width:0}
.ch-t{color:var(--diya);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;justify-self:start}
.ch-l{font-size:.95rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ch-p{position:absolute;bottom:4px;inset-inline:8px;height:3px;border-radius:3px;overflow:hidden}
.ch.on{background:color-mix(in srgb,var(--diya) 11%,transparent)}
.ch.on .ch-l{color:var(--diya)}
.ch.on .ch-p{background:color-mix(in srgb,var(--rekha) 80%,transparent)}
.ch.on .ch-p::after{content:"";position:absolute;inset-block:0;left:0;width:var(--p,0%);background:var(--diya);border-radius:3px}   /* time runs left to right in every language, like the player's own bar */
@media (max-width:1000px){
  .tw-stage{grid-template-columns:minmax(0,1fr);gap:6px}
  .tw-chap{overflow:visible;background:none;border:0;border-radius:0}
  .tw-chap::after{display:none}
  .tw-chap h2{padding:16px 0 10px}
  .tw-chap ol{position:static;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 8px;scroll-padding-inline:var(--gutter);scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .tw-chap ol::-webkit-scrollbar{display:none}
  .tw-chap li{flex:0 0 172px;scroll-snap-align:start}
  .ch{grid-template-columns:1fr;gap:8px;align-items:start;padding:0 0 12px;background:none}
  .ch:hover,.ch.on{background:none}
  .ch img{width:100%;border-radius:10px}
  .ch.on img{box-shadow:0 0 0 2px var(--diya)}
  .ch-p{inset-inline:0;bottom:2px}
}

/* ── the middle: what's in it, the story and the button to start, the whole transcript */
.tw-body{padding:clamp(34px,5vw,56px) 0 clamp(40px,6vw,72px)}
.tw-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"about side" "trans side";column-gap:clamp(28px,4vw,56px);align-items:start}
.tw-about{grid-area:about;min-width:0}
.tw-side{grid-area:side;align-self:stretch;display:flex;flex-direction:column;gap:16px;min-width:0}
.tw-cta{position:sticky;top:84px}
.tw-trans{grid-area:trans;min-width:0;margin-top:clamp(28px,4vw,44px)}
@media (max-width:1000px){.tw-cols{grid-template-columns:minmax(0,1fr);grid-template-areas:"about" "side" "trans"}.tw-side{margin-top:24px}.tw-cta{position:static}}
.tw-body h2{margin:0 0 .65em;font-size:clamp(1.3rem,2.2vw,1.6rem)}
.tw-desc p{max-width:44em;margin:0 0 1em;color:#D9D6EC}
.tw-note{margin:-.25em 0 1.1em;color:var(--dhuan);font-size:.92rem}
.tr-ch{padding:18px 0 6px;border-top:1px solid color-mix(in srgb,var(--rekha) 60%,transparent)}
.tr-ch h3{margin:0 0 .75em;font-size:1.06rem}
.tr-ch h3 a{display:inline-flex;align-items:baseline;gap:10px;color:var(--chandni);text-decoration:none}
.tr-ch h3 a:hover{color:var(--diya)}
.tr p{max-width:44em;margin:0 0 .95em;color:#CFCBE6;line-height:1.8}
:lang(ur) .tr p,:lang(ur) .tw-desc p{line-height:2.25}
:lang(ar) .tr p,:lang(ar) .tw-desc p{line-height:2}
.tm{display:inline-block;margin-inline-end:.4em;padding:0 7px;border:1px solid var(--rekha);border-radius:6px;background:var(--raat-2);color:var(--diya);font-family:Mukta,sans-serif;font-size:.8rem;font-weight:700;line-height:1.65;text-decoration:none;font-variant-numeric:tabular-nums;vertical-align:.1em;unicode-bidi:isolate}
a.tm:hover,.tr-ch h3 a:hover .tm{border-color:var(--diya)}
.cl{border-radius:5px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .2s,color .2s,box-shadow .2s}
.cl:hover{background:var(--raat-2);color:var(--chandni)}
.cl.now{background:color-mix(in srgb,var(--diya) 17%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--diya) 17%,transparent);color:#fff}

.tw-card{padding:18px;border:1px solid var(--rekha);border-radius:20px;background:var(--raat-2)}
.tw-card h2{margin:0 0 12px;font-size:1.15rem}
.tw-cta{background:linear-gradient(150deg,color-mix(in srgb,var(--diya) 16%,var(--raat-2)),var(--raat-2) 62%);border-color:color-mix(in srgb,var(--diya) 32%,var(--rekha))}
.tw-cta p{margin:0 0 14px;color:var(--chandni)}

/* the story to hear: the home page's player (index.html), on its own */
.tw-smp .player{padding:12px 10px 12px;border:1px solid color-mix(in srgb,var(--rekha) 85%,transparent);border-radius:16px;background:var(--raat)}
.pl-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.play{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--diya);color:var(--diya-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--diya) 30%,transparent)}
.play svg{width:20px;height:20px}
.play .i-play{margin-left:2px}
.play .i-pause,.playing .play .i-play{display:none}
.playing .play .i-pause{display:block}
.pl-name{min-width:0}
.pl-title{font-weight:700;line-height:1.3}
.pl-time{margin-inline-start:auto;color:var(--dhuan);font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.script{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.ln{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:8px;width:100%;padding:6px 8px;border:0;border-radius:9px;background:none;color:var(--soya);font:inherit;text-align:start;cursor:pointer;transition:color .25s,background-color .25s}
.ln:hover{background:var(--raat-3)}
.ln .who{padding-top:.12em;font-size:.84rem;font-weight:700;overflow-wrap:anywhere}
.ln .say{font-size:1rem;line-height:1.5}
.ln .who,.ln .say{unicode-bidi:isolate}
.ln.cue .say,.ln.bed .say{font-size:.9rem}
.ln .tag{color:var(--dhuan);font-family:Mukta,sans-serif;font-size:.84em}
.ln.said{color:var(--chandni)}
.ln.now{background:color-mix(in srgb,var(--diya) 10%,transparent);color:var(--diya)}
.ln.now .who{color:var(--diya)}
.idle .ln{color:var(--chandni)}
.idle .ln .who{color:var(--dhuan)}
:lang(ur) .ln .say{line-height:2}
@media (max-width:560px){.ln{display:block;padding:6px 8px}.ln .who{display:inline;margin-inline-end:.5em;padding-top:0}.ln .say{display:inline}}   /* a phone: the name runs into its line */
.bar{height:4px;margin:10px 4px 0;border-radius:4px;background:var(--raat-3);overflow:hidden;direction:ltr}   /* (time runs left to right, as in the player) */
.bar i{display:block;width:0;height:100%;background:var(--diya)}
.made{margin:.8em .2em 0;color:var(--dhuan);font-size:.88rem;line-height:1.5}
.made a{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--dhuan) 45%,transparent);white-space:nowrap}
.made a:hover{color:var(--chandni);border-color:var(--chandni)}

/* ── the bottom: the other languages */
.tw-more{padding:clamp(36px,5vw,60px) 0 clamp(40px,6vw,72px)}
.tw-more h2{margin:0}
.tw-others{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.tw-others a{display:grid;gap:2px;height:100%;padding:12px 14px;border:1px solid var(--rekha);border-radius:14px;background:var(--raat-2);color:var(--chandni);text-decoration:none;transition:border-color .15s,transform .15s}
.tw-others a:hover{border-color:var(--diya);transform:translateY(-2px)}
.tw-others b{font-size:1.08rem;font-weight:700}
.tw-others span{color:var(--dhuan);font-size:.84rem}
.tw-all{margin:18px 0 0}
.tw-all a{color:var(--diya);font-weight:700;text-decoration:none}
.tw-all a:hover{text-decoration:underline}

/* ── /tutorial: every language */
.th-top{padding:clamp(18px,3vw,30px) 0 clamp(44px,6vw,72px)}
.th-top h1{max-width:17em;font-size:clamp(2rem,4.4vw,3.1rem)}
.th-top h1 .kick{display:block;margin-bottom:.25em;color:var(--diya);font-family:"Tiro Devanagari Hindi",serif;font-size:.62em;font-weight:400}
.th-top .lede{margin:.8em 0 1.5em}
.th-you{margin:0 0 28px}
.th-you .btn svg{width:18px;height:18px}
.th-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
@media (max-width:1000px){.th-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.th-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
.th-card{display:grid;gap:3px;color:var(--chandni);text-decoration:none}
.th-pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--raat-2);box-shadow:0 0 0 1px var(--rekha)}
.th-pic img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.th-card:hover .th-pic img{transform:scale(1.04)}
.th-len{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.78);color:#fff;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.th-go{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:var(--diya);color:var(--diya-ink);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.th-go svg{width:21px;height:21px;margin-left:2px}
.th-card:hover .th-go,.th-card:focus-visible .th-go{opacity:1;transform:none}
.th-nm{margin-top:7px;font-size:1.1rem;font-weight:700;line-height:1.3}
.th-en{color:var(--dhuan);font-size:.86rem}
.th-card.you .th-pic{box-shadow:0 0 0 2px var(--diya)}
.th-start{grid-column:span 3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px 26px;border:1px solid color-mix(in srgb,var(--diya) 32%,var(--rekha));border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--diya) 15%,var(--raat-2)),var(--raat-2) 62%)}
.th-start div{display:grid;gap:4px;max-width:30em}
.th-start b{font-size:1.25rem}
.th-start span{color:var(--dhuan)}
@media (max-width:1000px){.th-start{grid-column:span 1;flex-direction:column;align-items:flex-start;padding:18px}}
@media (max-width:720px){.th-start{padding:14px;gap:12px}.th-start b{font-size:1.08rem}.th-start span{font-size:.88rem}.th-start .btn{font-size:.9rem;padding:.7em 1em}}
.th-cover{padding:clamp(44px,6vw,80px) 0}
.th-cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:860px){.th-cols{grid-template-columns:minmax(0,1fr)}}
.th-cover h2{margin:0}
.th-cover .lede{margin:.6em 0 1.2em}
.th-list{list-style:none;margin:0;padding:0;counter-reset:c}
.th-list li{display:grid;grid-template-columns:2.2em minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 0;border-top:1px solid color-mix(in srgb,var(--rekha) 60%,transparent);counter-increment:c}
.th-list li:first-child{border-top:0;padding-top:4px}
.th-list li::before{content:counter(c);grid-row:span 2;display:grid;place-items:center;width:2.1em;height:2.1em;border:1px solid var(--rekha);border-radius:50%;background:var(--raat-2);color:var(--diya);font-size:.88rem;font-weight:800}
.th-list b{font-size:1.04rem}
.th-list span{color:var(--dhuan)}

@media (prefers-reduced-motion:reduce){.th-card:hover .th-pic img,.tw-others a:hover{transform:none}}