/* How Smog is Formed and Tackled? (owner 2026-10-23), from docs/How_Smog_Is_Formed_and_Tackled_Laravel (1).zip. */
/* The bar's back link to Interactive Stories (the bar itself ignores the pointer). */
.bar a.brand{color:inherit;text-decoration:none;pointer-events:auto}
/* Layout: Earth Notes story. A sticky 3D Lahore lives one winter day as you scroll, then hands-on chapters on paper cards.
   One deliberate look: smog sepia + night ink + sodium amber, with the official AQI colours used only for air quality. */
:root{
  color-scheme:dark;
  --night:#141921;--ink:#1b1f26;--ink2:#4c5560;--haze:#c8b48c;--haze2:#9c8a66;--amber:#f2b33c;--rust:#c0583a;--teal:#0a9aa1;
  --paper:#f7f2e7;--paper2:#ece3cf;--line:#d9ccb0;
  --g:#00a84f;--y:#e6c400;--o:#ff7e00;--r:#e8262b;--p:#8f3f97;--m:#7e0023;
  --display:'Baloo 2','Nunito',system-ui,sans-serif;--body:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);background:var(--night);color:#ece6da;line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.dis{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.08;text-wrap:balance;margin:0 0 .45em}
p{margin:0 0 .8em}a{color:var(--amber)}
.wrap{width:min(1160px,100%);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 .5em}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums}
.btn{display:inline-block;border:3px solid var(--ink);background:var(--amber);color:var(--ink);border-radius:99px;padding:4px 18px;font:800 1rem var(--display);cursor:pointer;box-shadow:3px 3px 0 var(--ink);text-decoration:none}
.btn:active{transform:translate(3px,3px);box-shadow:none}.btn.ghost{background:#fff}.btn.on,.btn[aria-pressed=true]{background:var(--ink);color:#fff}
/* top bar + controls */
.prog{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--g),var(--y),var(--o),var(--r),var(--p),var(--m));z-index:60}
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) clamp(16px,3vw,28px) 10px;font-size:.8rem;font-weight:700;pointer-events:none;background:linear-gradient(rgba(20,25,33,.85),rgba(20,25,33,0))}
.brand{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--amber)}
@media(max-width:560px){.bar-r{display:none}}
.ctl{position:fixed;right:clamp(12px,2vw,24px);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;gap:6px;align-items:center;background:rgba(247,242,231,.95);border:3px solid var(--ink);border-radius:99px;padding:5px;box-shadow:4px 4px 0 rgba(0,0,0,.6)}
.ctl .btn{font-size:.88rem;padding:2px 12px;box-shadow:2px 2px 0 var(--ink)}
.ctl [hidden]{display:none!important}
#langbtn{font-family:'Noto Nastaliq Urdu','Baloo 2',serif;line-height:1.5}
#autospd{direction:ltr;unicode-bidi:isolate}
@media(max-width:820px){.ctl{bottom:auto;top:calc(5px + env(safe-area-inset-top,0px));right:8px;padding:3px;gap:4px}.ctl .btn{font-size:.76rem;padding:0 9px}.ctl .lbl{display:none}html[dir=rtl] .ctl{right:auto;left:8px}}
.vpanel{position:fixed;right:clamp(12px,2vw,24px);bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:72;width:min(320px,calc(100% - 24px));background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:14px;box-shadow:6px 6px 0 rgba(0,0,0,.55);display:grid;gap:10px}
.vpanel[hidden]{display:none}.vpanel label{display:grid;gap:4px;font-weight:800;font-size:.9rem}.vpanel select{background:#fff;color:var(--ink);font:700 .95rem var(--body);border:2px solid var(--ink);border-radius:10px;padding:6px;max-width:100%}.vpanel p{margin:0;font-size:.82rem;color:var(--ink2)}
@media(max-width:820px){.vpanel{bottom:auto;top:calc(48px + env(safe-area-inset-top,0px))}html[dir=rtl] .vpanel{right:auto;left:12px}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:80;background:var(--ink);color:#fff;border-radius:14px;padding:10px 16px;font-weight:700;max-width:min(520px,calc(100% - 32px));opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* Sana avatar */
.sana{width:54px;height:62px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff6e0,#f2d9a8);border:3px solid var(--ink);overflow:hidden;box-shadow:2px 2px 0 var(--ink)}
.sana svg{width:100%;height:100%;display:block}
.speaking .sana{animation:talk .5s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-3px) rotate(-3deg)}}
.who{display:flex;align-items:center;gap:10px;margin:0 0 .7em}
.who b{font-family:var(--display);font-size:.95rem;color:var(--rust)}
.who small{display:block;font-size:.72rem;color:var(--ink2);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* prologue */
.pro{position:relative;height:2100vh}
.stick{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#b9a37a}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.nogl{position:absolute;inset:0;background:linear-gradient(#c8b48c,#5a4a32);display:none}
.sndtags{position:absolute;top:100%;left:0;margin-top:8px;display:flex;flex-wrap:wrap;gap:5px;max-width:420px}.sndtags span{font:700 .74rem/1 var(--body,Nunito),sans-serif;background:rgba(20,24,30,.78);color:#fff;border-radius:99px;padding:5px 9px;display:inline-flex;gap:5px;align-items:center;animation:tagin .35s}.sndtags span i{font-style:normal;display:inline-block;animation:eq .6s infinite alternate}@keyframes tagin{from{opacity:0;transform:translateY(-4px)}}@keyframes eq{to{transform:scale(1.25)}}
.clock .wx{display:flex;flex-wrap:wrap;gap:2px 9px;margin-top:3px;font-size:.7rem!important;letter-spacing:0!important;text-transform:none!important;color:#dfe6ea!important}.wx .calm,.wx .cold{color:#ffc56b}
@media(min-width:821px){#c7{top:auto;bottom:24px;transform:translateY(12px)}#c7.on{transform:none}}#c7 .beats li{margin:.15em 0}@media(max-width:820px){#c7 [data-i=p27]{display:none}}
.hl{margin:.4em 0 .5em;padding:0;list-style:none}.hl li{margin:.28em 0;font-weight:700;font-size:.92rem}
.onehealth{background:#e6f4ea;border-radius:12px;padding:8px 10px;font-weight:700;color:#0b5e2e}
.cwgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:.5em 0;background:#0e1d22;border-radius:12px;padding:8px}.cwgrid div{background:#16313a;border-radius:8px;padding:7px;color:#cfeeea;font-weight:800;font-size:.8rem;display:flex;gap:6px;align-items:center}.cwgrid b{font-size:1.1rem}
.phone{margin:.6em auto 0;width:min(260px,100%);background:#11161c;border-radius:22px;padding:10px 9px 12px;border:3px solid #1b1f26;box-shadow:0 6px 0 rgba(0,0,0,.35);color:#e9eef2;direction:ltr}
.phone .ph{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:.78rem;padding:0 4px 6px}.phone .ph b{font-size:1.3rem}
.phone .row{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:1px 4px;border-top:1px solid #222a33}.phone .row i{flex:1;font-style:normal}.phone .row span{min-width:34px;text-align:center;border-radius:6px;padding:1px 4px;color:#fff;font-weight:800}
.phone .fc{display:flex;gap:3px;align-items:flex-end;height:34px;padding:6px 4px 0}.phone .fc u{flex:1;border-radius:3px 3px 0 0}
.mix{display:flex;flex-wrap:wrap;gap:6px;margin:.6em 0 .3em}.mix button{font:800 .8rem var(--display);color:var(--ink);border:2px solid var(--ink);border-radius:99px;background:#fff;padding:3px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}.mix button:active{transform:translate(2px,2px);box-shadow:none}.mix button:hover{background:var(--amber)}
.pmc{font-weight:800;color:var(--rust);margin:.2em 0 0}.pmc b{font-size:1.2rem}.pmc.pop b{animation:pmpop .5s}@keyframes pmpop{40%{transform:scale(1.5);color:#e8913a}}.pmc b{display:inline-block}
.hud{position:absolute;left:clamp(16px,5vw,64px);top:calc(56px + env(safe-area-inset-top,0px));display:flex;gap:10px;align-items:stretch;z-index:3;pointer-events:none;direction:ltr}
.clock,.aqi{background:rgba(20,25,33,.74);border:2px solid rgba(242,179,60,.45);border-radius:14px;padding:6px 12px}
.clock small,.aqi small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.clock b{font-family:var(--display);font-size:1.5rem;line-height:1.1}
.aqi{min-width:220px;display:grid;grid-template-columns:auto auto 1fr;gap:0 10px;align-items:center}
.aqi small{grid-column:1/-1}
.aqi .num{font-family:var(--display);font-size:2rem;line-height:1;min-width:2.6ch}
.aqi .cat{font-weight:800;font-size:.8rem;border-radius:99px;padding:1px 9px;color:#fff;justify-self:start;transition:background .5s}
.aqi .scale{grid-column:1/-1;position:relative;height:8px;border-radius:99px;margin:6px 0 2px;background:linear-gradient(90deg,#00a84f 0 10%,#8cc63f 10% 20%,#e6b800 20% 30%,#ff7e00 30% 40%,#e8262b 40% 60%,#8f3f97 60% 80%,#7e0023 80%)}
.aqi .scale i{position:absolute;top:-4px;width:4px;height:16px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px var(--ink);left:0;transition:left .3s}
.aqi .scale u{position:absolute;top:10px;left:96%;font-size:.6rem;text-decoration:none;color:#ccc;transform:translateX(-50%)}
.pcard{position:absolute;left:clamp(16px,5vw,64px);top:50%;width:min(450px,calc(100% - 32px));transform:translateY(-44%);background:rgba(247,242,231,.97);color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:20px 22px;box-shadow:8px 8px 0 rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .45s,transform .45s,visibility .45s;z-index:2}
.pcard.on{opacity:1;visibility:visible;transform:translateY(-50%)}
.pcard .eyebrow{color:var(--rust)}
.pcard h1{font-size:clamp(2.3rem,5.4vw,3.6rem);color:var(--ink);margin:0}
.pcard h2{font-size:clamp(1.45rem,3vw,2rem)}
.pcard .sub{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--teal);margin:.1em 0 .5em}
.pcard p{font-size:.98rem}.pcard .big{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1.15;margin:.2em 0 .5em}
.byline{font-size:.84rem;color:var(--ink2);padding-bottom:.6em;border-bottom:2px dashed var(--line)}.byline b{color:var(--teal)}
.hint{font-weight:800;color:var(--teal);margin:0}.hint i{display:inline-block;font-style:normal;animation:bob 1.3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.beats{list-style:none;padding:0;margin:.2em 0 .8em;display:grid;gap:4px}.beats li{font-family:var(--display);font-weight:700;font-size:1.08rem;opacity:.22;transition:opacity .4s}.beats li.on{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:.3em 0 .6em}.chips span{border:2px solid var(--ink);border-radius:99px;padding:0 10px;font-weight:800;font-size:.8rem;background:#fff}
.fine{font-size:.76rem!important;color:var(--ink2);margin:0}
.pcard .stat{display:flex;align-items:baseline;gap:8px;background:#2a0a12;color:#fff;border-radius:14px;padding:8px 12px;margin:.3em 0 .7em}
.pcard .stat b{font-family:var(--display);font-size:2.2rem;line-height:1;color:#ff9fae}
@media(max-width:820px){
  .pcard{left:12px;right:12px;top:auto;bottom:12px;width:auto;transform:translateY(16px);padding:14px 16px;max-height:47dvh;overflow:auto;box-shadow:5px 5px 0 rgba(0,0,0,.55)}
  .pcard.on{transform:none}.pcard h1{font-size:2.1rem}.pcard p{font-size:.92rem}
  .hud{left:10px;top:calc(46px + env(safe-area-inset-top,0px));gap:6px}.clock,.aqi{padding:4px 9px}.clock b{font-size:1.05rem}.aqi{min-width:0;width:178px}.sndtags{max-width:calc(100vw - 20px);margin-top:6px;gap:4px}.sndtags span{font-size:.64rem;padding:4px 7px}.aqi .num{font-size:1.4rem}.aqi .cat{font-size:.68rem}
  .sana{width:44px;height:50px}
}
/* chapters */
section.ch{padding-block:clamp(56px,8vw,100px)}
.ch h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}
.lead{max-width:64ch;color:#d6cfc2}
.dark{background:#1b212b}.darker{background:var(--night)}.paper{background:var(--paper);color:var(--ink)}.paper .lead{color:var(--ink2)}.paper .eyebrow{color:var(--rust)}
.sepia{background:linear-gradient(#3a3226,#241f18)}
.panel{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:24px;padding:18px 20px;box-shadow:8px 8px 0 rgba(0,0,0,.5);min-width:0}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:1.4em}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.stage{border:3px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:8px 8px 0 rgba(0,0,0,.5);background:#2a2f38;min-width:0;position:relative}
.stage canvas{display:block;width:100%;touch-action:pan-y}
.rng{width:100%;accent-color:var(--amber)}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:.6em 0}.presets .btn{font-size:.88rem;padding:2px 12px}
.note{font-size:.8rem;color:var(--ink2);margin:.6em 0 0}.dark .note,.darker .note,.sepia .note{color:#a9a294}
/* size */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.steps4 button{border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:800 .9rem var(--display);padding:6px 4px;cursor:pointer;line-height:1.15}
.steps4 button.on{background:var(--amber)}
.big2{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.2;margin:.6em 0 .3em}
/* lab */
.season{display:flex;gap:8px;margin:.2em 0 .8em}.season .btn{flex:1;font-size:.95rem;padding:3px 10px}
.zbtn{width:100%;margin:0 0 .8em;font-size:1.02rem}
.zcap{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(18,22,28,.86);color:#fff;border-radius:16px;padding:10px 40px 10px 12px;font-size:.95rem;line-height:1.45}.zcap p{margin:.35em 0 0}
.zst{display:flex;flex-wrap:wrap;gap:5px}.zst span{font:800 .72rem/1 var(--display,'Baloo 2'),sans-serif;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.12);color:#c9d1db}.zst span.on{background:#f4b942;color:#1b1f26}.zst span.done{background:rgba(244,185,66,.3);color:#fff}
.zx{position:absolute;top:6px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.1rem;cursor:pointer}html[dir=rtl] .zcap{padding:10px 12px 10px 40px}html[dir=rtl] .zx{right:auto;left:8px}
@media(max-width:600px){.zcap{font-size:.82rem;padding:8px 36px 8px 10px}}
.lab{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;margin-top:1.4em;align-items:start}
#labcv{height:min(60vh,500px);min-height:300px}
.sl{display:grid;gap:2px;margin:.35em 0 .55em}
.sl label{display:flex;justify-content:space-between;font-weight:800;font-size:.9rem}
.sl label span{color:var(--teal)}
.readout{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;border:3px solid var(--ink);border-radius:18px;padding:10px 14px;margin-top:10px;background:#fff}
.readout .pm{font-family:var(--display);font-size:2.4rem;line-height:1}
.readout .pm small{font-size:.9rem}
.readout .ab{display:inline-block;border-radius:99px;padding:2px 12px;color:#fff;font-weight:800;transition:background .4s}
.readout .who15{grid-column:1/-1;font-weight:700;font-size:.9rem;margin:0}
.lab .labctl{display:flex;gap:8px;flex-wrap:wrap;margin:.2em 0 .4em}
.donut{display:flex;gap:12px;align-items:center;margin-top:10px}
.donut svg{width:110px;height:110px;flex:none}
.donut ul{list-style:none;margin:0;padding:0;font-size:.85rem;font-weight:700;display:grid;gap:2px}
.donut li i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px;border:1.5px solid var(--ink)}
@media(max-width:900px){.lab{grid-template-columns:1fr}}
/* calendar */
.cal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:center;margin-top:1.4em}
#calsvg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
#calsvg .m{cursor:pointer}#calsvg .m path{stroke:var(--night);stroke-width:3;transition:transform .2s}
#calsvg .m.on path{stroke:#fff;stroke-width:4}
#calsvg text{font:800 14px var(--display);fill:#fff;pointer-events:none}
@media(max-width:820px){.cal{grid-template-columns:1fr}}
/* aqi dial */
.dialw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:1.4em}
#dial{width:100%;max-width:440px;height:auto;display:block;margin:0 auto;touch-action:none;cursor:grab}
#skycv{width:100%;height:auto;display:block}
.adv{border-radius:16px;padding:12px 14px;color:#fff;font-weight:700;margin-top:12px;transition:background .4s}
.adv b{font-family:var(--display);font-size:1.4rem;display:block;line-height:1.15}
@media(max-width:820px){.dialw{grid-template-columns:1fr}}
/* action cards */
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1.4em}
.act{border:3px solid var(--ink);border-radius:20px;background:#fff;color:var(--ink);padding:14px;cursor:pointer;text-align:start;font:inherit;min-width:0;box-shadow:4px 4px 0 rgba(0,0,0,.35);transition:transform .15s,background .3s}
.act .ic{font-size:2rem;line-height:1}
.act h3{font-size:1.15rem;margin:.35em 0 .2em}
.act p{font-size:.88rem;color:var(--ink2);margin:0}
.act .back{display:none;font-weight:700;color:var(--ink);font-size:.9rem;margin-top:.4em}
.act.on{background:#fff4dc}.act.on .back{display:block}.act.on .front{display:none}
.act:hover{transform:translateY(-3px)}
.year{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:24px;border:3px solid var(--ink);border-radius:22px;background:var(--paper);color:var(--ink);padding:16px 20px;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.year b{font-family:var(--display);font-size:clamp(2.6rem,7vw,4rem);line-height:1;color:var(--g)}
.year .bars{display:grid;gap:6px;margin-top:6px}
.year .bars div{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem}
.year .bars i{display:block;height:16px;border-radius:99px;border:2px solid var(--ink);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
@media(max-width:900px){.acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.acts{grid-template-columns:1fr}.year{grid-template-columns:1fr}}
/* shield */
.shield{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:1.4em;align-items:start}
.habits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.habit{border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);padding:10px 12px;cursor:pointer;font:inherit;text-align:start;display:flex;gap:10px;align-items:center;font-weight:800;line-height:1.25}
.habit span{font-size:1.5rem}
.habit[aria-pressed=true]{background:#d8f3e3;box-shadow:inset 0 0 0 3px var(--g)}
.namein{display:grid;gap:4px;font-weight:800;margin-top:12px}.namein input{background:#fff;font:700 1rem var(--body);border:3px solid var(--ink);border-radius:12px;padding:8px 10px;color:var(--ink)}
.badge{background:radial-gradient(120% 90% at 50% 0%,#fffaf0,#f2e6cc);border:3px solid var(--ink);border-radius:24px;padding:20px;text-align:center;box-shadow:8px 8px 0 rgba(0,0,0,.45);color:var(--ink)}
#shsvg{width:150px;height:auto;display:block;margin:0 auto 8px}
.badge h3{font-size:1.5rem;margin:0 0 .2em}.badge ul{list-style:none;padding:0;margin:.5em 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.badge li{border:2px solid var(--ink);border-radius:99px;padding:0 10px;font-weight:800;font-size:.82rem;background:#fff}
@media(max-width:820px){.shield{grid-template-columns:1fr}.habits{grid-template-columns:1fr}}
/* quiz */
.quiz{max-width:760px;margin-top:1.2em}
.qtop{display:flex;justify-content:space-between;font-weight:800;font-size:.85rem;color:var(--ink2);margin-bottom:.4em}
.scene{border-radius:14px;padding:12px 14px;background:linear-gradient(135deg,#3a3226,#6b5a40);color:#f6efe2;margin-bottom:.8em}
.scene b{font-family:var(--display);font-size:1.3rem;display:block;line-height:1.25}
.qopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qopts button{text-align:start;border:3px solid var(--ink);background:#fff;border-radius:16px;padding:10px 14px;font:700 1rem var(--body);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.qopts button.ok{background:#bfe8c8}.qopts button.no{background:#f8c9c0}.qopts button[disabled]{cursor:default}
.qfb{border-radius:14px;padding:10px 14px;font-weight:700;background:#efe6d2;margin:.8em 0}
@media(max-width:620px){.qopts{grid-template-columns:1fr}}
/* final */
.final{position:relative;background:linear-gradient(180deg,#8f7a58 0%,#c9a26a 22%,#9cc3dc 70%,#d9ecf5 100%);text-align:center;padding-block:clamp(80px,12vw,150px);color:var(--ink)}
.final .q{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4.6vw,3.1rem);line-height:1.12;max-width:24ch;margin:.5em auto .5em}
.final .lead{margin:0 auto;color:#1b1f26;font-weight:700}
.foot{background:#0d1117;color:#a9a294;padding:22px clamp(16px,4vw,32px);text-align:center;font-size:.86rem}.foot p{margin:0 auto .3em;max-width:90ch}.foot b{color:#ece6da}
/* IGP map */
.igpw{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:1.4em}
.mapbox{border:3px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:8px 8px 0 rgba(0,0,0,.5);background:#9fc4d8;position:relative}
#igpsvg{display:block;width:100%;height:auto;touch-action:pan-y}
#igpsvg .lbl{font:800 15px var(--display);fill:#3a4a52;letter-spacing:.12em}
#igpsvg .city{font:800 15px var(--display);fill:#1b1f26;paint-order:stroke;stroke:#fff;stroke-width:4px}
#igpsvg .dist{font:800 13px var(--display);fill:#1b1f26;paint-order:stroke;stroke:#fff;stroke-width:3px}
.haze circle{transition:opacity 1s}
@keyframes pulse{0%,100%{r:7}50%{r:12}}
.pin{animation:pulse 1.6s ease-in-out infinite}
@media(max-width:860px){.igpw{grid-template-columns:1fr}}
/* chemistry */
.chemw{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:1.2em}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0 .2em}
.chips2 .btn{font-size:.92rem;padding:3px 14px}
#chemsvg{display:block;width:100%;height:auto}
#chemsvg .node rect{stroke-width:3;transition:fill .4s,opacity .4s}
#chemsvg .node text{font:800 18px var(--display);fill:#1b1f26;pointer-events:none}
#chemsvg .node.off{opacity:.32}
#chemsvg .edge{fill:none;stroke:#1b1f26;stroke-width:2.5;opacity:.18;transition:opacity .4s}
#chemsvg .edge.on{opacity:.85}
#chemsvg .elab{font:800 13px var(--body);fill:#6b4a2e}
.meter{border:3px solid var(--ink);border-radius:16px;background:#fff;padding:10px 12px;margin-top:10px}
.meter .bar{position:relative;top:auto;left:auto;right:auto;z-index:auto;display:block;padding:0;pointer-events:auto;height:16px;border-radius:99px;border:2px solid var(--ink);overflow:hidden;background:#efe6d2;margin:.3em 0}
.meter .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c0583a,#7e0023);transition:width .6s}
.sort{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.sitem{border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);padding:10px;min-width:0}
.sitem b{display:block;font-family:var(--display);font-size:1.02rem;line-height:1.2;margin-bottom:6px}
.sitem .row{display:flex;gap:6px;flex-wrap:wrap}
.sitem button{border:2px solid var(--ink);border-radius:99px;background:#f7f2e7;font:800 .8rem var(--body);padding:2px 10px;cursor:pointer;color:var(--ink)}
.sitem.ok{background:#d8f3e3}.sitem.no{background:#fbe0da}.sitem .fb{font-size:.8rem;font-weight:700;margin:.3em 0 0}
@media(max-width:860px){.chemw{grid-template-columns:1fr}.sort{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sort{grid-template-columns:1fr}}
/* smog gun feature */
.gunf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:center;margin-top:1.4em;border:3px solid var(--ink);border-radius:24px;background:linear-gradient(#dfeef3,#f6f1e4);color:var(--ink);padding:16px;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
#gunsvg{display:block;width:100%;height:auto}
.gsteps{list-style:none;padding:0;margin:.4em 0 .8em;display:grid;gap:4px}
.gsteps li{font-weight:800;opacity:.35;transition:opacity .3s}.gsteps li.on{opacity:1}
.gsteps li span:first-child{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--teal);color:#fff;font-size:.8rem;margin-inline-end:6px}
@media(max-width:860px){.gunf{grid-template-columns:1fr}}
html[lang=ur] #igpsvg text,html[lang=ur] #chemsvg text,html[lang=ur] #gunsvg text{font-family:'Noto Nastaliq Urdu',serif!important}
/* reveal */
.js .fx{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}.js .fx.in{opacity:1;transform:none}
.speaking:not(.pcard){outline:4px solid var(--amber);outline-offset:4px;border-radius:8px}
.pcard.speaking{outline:4px solid var(--amber);outline-offset:4px}
.saying{background:linear-gradient(transparent 8%,rgba(242,179,60,.38) 8%,rgba(242,179,60,.38) 92%,transparent 92%);border-radius:6px;box-shadow:0 0 0 3px rgba(242,179,60,.38);transition:background .2s}
/* Urdu */
html[lang=ur] body,html[lang=ur] body *{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif!important;letter-spacing:0!important}
html[lang=ur] body{line-height:2.05}
html[lang=ur] .tnum,html[lang=ur] #clk,html[lang=ur] .aqi .num,html[lang=ur] #autospd,html[lang=ur] .readout .pm,html[lang=ur] .year b,html[lang=ur] #calsvg text,html[lang=ur] .pcard .stat b{font-family:'Baloo 2','Nunito',sans-serif!important}
html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] h3,html[lang=ur] .dis,html[lang=ur] .big,html[lang=ur] .big2,html[lang=ur] .q,html[lang=ur] .sub,html[lang=ur] .beats li,html[lang=ur] .scene b,html[lang=ur] .adv b,html[lang=ur] .habit,html[lang=ur] .qopts button,html[lang=ur] .chips span{line-height:1.9;font-weight:700}
html[lang=ur] .eyebrow,html[lang=ur] .who small,html[lang=ur] .clock small,html[lang=ur] .aqi small{text-transform:none;font-size:.82rem}
html[lang=ur] .btn{line-height:2;padding-top:0;padding-bottom:2px}
html[lang=ur] .pcard h1{font-size:clamp(1.9rem,4.4vw,2.8rem)}html[lang=ur] .ch h2{font-size:clamp(1.6rem,3.8vw,2.5rem)}html[lang=ur] .pcard p{font-size:.95rem}
html[dir=rtl] input[type=range],html[dir=rtl] .scale{direction:ltr}
@media(min-width:821px) and (max-height:1000px){.pcard,#c7{top:calc(156px + env(safe-area-inset-top,0px));bottom:auto;transform:translateY(10px);max-height:calc(100dvh - 176px);overflow:auto}.pcard.on,#c7.on{transform:none}}
@media(min-width:821px) and (max-height:620px){.pcard,#c7{top:148px;max-height:calc(100dvh - 160px);padding:14px 18px}.pcard h1{font-size:2.2rem}}
@media(min-width:821px){html[dir=rtl] .pcard{left:auto;right:clamp(16px,5vw,64px)}html[dir=rtl] .hud{left:auto;right:clamp(16px,5vw,64px)}}

/* ---- inside-the-air lab ---- */
html.al-lock,html.al-lock body{overflow:hidden}
#cv{transition:filter .6s}#cv.blurred{filter:blur(9px) brightness(.6) saturate(.85)}
.al.scroll{background:linear-gradient(rgba(6,22,28,.15),rgba(6,22,28,.35));backdrop-filter:none;-webkit-backdrop-filter:none;z-index:5;pointer-events:none}.al.scroll .al-in{pointer-events:auto;padding-top:clamp(120px,19vh,150px)}@media(max-width:820px){.al.scroll .al-in{padding-top:128px}.al.scroll .al-card{max-height:38dvh}}
.al-scrollhint{margin:.2em 0 .6em;font-size:.8rem;font-weight:800;color:#f2b33c}
.al{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.4vw,28px);background:rgba(6,22,28,.4);backdrop-filter:blur(11px) saturate(.85);-webkit-backdrop-filter:blur(11px) saturate(.85);opacity:0;transition:opacity .4s}
.al.show{opacity:1}.al[hidden]{display:none}
.al-in{width:min(1300px,100%);height:min(780px,100%);display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:18px}
.al-guide{display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.al-sana{width:128px;margin:0 0 -6px 10px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.al-card{background:rgba(12,38,44,.9);border:1px solid rgba(140,230,230,.3);border-radius:18px;padding:16px;color:#e9f4f4;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.al-who{display:flex;justify-content:space-between;align-items:baseline;margin:0;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#7fd8cf}.al-who span{color:#9fb7b9}
.al-card h3{font:800 1.3rem/1.2 var(--display);margin:.35em 0 .25em;color:#fff}
.al-tx{margin:0;font-size:.98rem;line-height:1.5;color:#d9ebeb}
.al-btns{display:flex;flex-wrap:wrap;gap:7px;margin:.8em 0}
.al .btn{border-color:#0b1f24;box-shadow:2px 2px 0 #0b1f24}.al .btn.sm{font-size:.84rem;padding:3px 12px}.al .btn.ghost{background:rgba(255,255,255,.1);color:#eaf6f6;border-color:rgba(200,240,240,.45);box-shadow:none}
.al-nav{display:flex;justify-content:space-between;align-items:center;gap:8px}.al-nav .btn{font-size:.9rem;padding:3px 14px}.al-nav .btn:disabled{opacity:.35;cursor:default}
.al-dots{display:flex;gap:5px}.al-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}.al-dots i.on{background:#f2b33c}
.al-lab{display:flex;flex-direction:column;min-height:0;background:rgba(18,52,60,.7);border:1px solid rgba(140,230,230,.3);border-radius:22px;padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.al-lab header{display:flex;align-items:center;gap:10px;padding:2px 4px 10px}
.al-lab header b{color:#f2a34a;letter-spacing:.1em;font:800 .92rem var(--display)}
.al-count{margin-inline-start:auto;background:#1fbfae;color:#04302b;font-weight:800;border-radius:99px;padding:5px 12px;font-size:.84rem;white-space:nowrap}
.al-x{width:34px;height:34px;border-radius:50%;border:1px solid rgba(200,240,240,.4);background:rgba(255,255,255,.1);color:#fff;font-size:1.2rem;cursor:pointer;flex:none}
#alcv{flex:1;min-height:0;width:100%;border-radius:14px;display:block}
.al-leg{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding-top:9px;font-weight:700;font-size:.8rem;color:#d7e9e9;direction:ltr}
.al-leg i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.alopen{margin-top:.6em;font-size:.95rem}
@media(max-width:820px){.al{padding:6px;align-items:stretch}.al-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;height:100%;gap:6px}.al-guide{order:2}.al-sana{display:none}
  .al-lab{order:1;padding:8px;border-radius:16px}.al-lab header{padding:0 2px 6px}.al-count{font-size:.72rem;padding:4px 9px}.al-card{padding:10px 12px;max-height:44dvh;overflow:auto}.al-card h3{font-size:1.08rem}.al-tx{font-size:.88rem}.al-leg{font-size:.7rem;gap:9px;padding-top:6px}}
html[lang=ur] .al-tx{font-family:'Noto Nastaliq Urdu',serif;line-height:2.1;font-size:.95rem}html[lang=ur] .al-card h3{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9}
@media(prefers-reduced-motion:reduce){.js .fx{opacity:1;transform:none;transition:none}.pcard{transition:none}.hint i,.speaking .sana{animation:none}html{scroll-behavior:auto}}

/* ===== story text as subtitles: a slim strip at the bottom, the 3D city fills the screen ===== */
.pro .pcard{left:50%!important;right:auto!important;top:auto!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;transform:translate(-50%,14px)!important;width:min(900px,calc(100% - 32px))!important;max-height:36vh!important;overflow:auto!important;
  background:rgba(10,12,16,.66)!important;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;border:0!important;border-radius:14px!important;box-shadow:0 6px 24px rgba(0,0,0,.25)!important;padding:10px 20px 12px!important;text-align:center;scrollbar-width:thin}
.pro .pcard.on{transform:translate(-50%,0)!important}
.pro .pcard .eyebrow{color:#f2b33c!important;font-size:.7rem!important;margin:0 0 .15em!important;letter-spacing:.08em}
.pro .pcard h1{color:#fff!important;font-size:clamp(1.6rem,3.4vw,2.5rem)!important;line-height:1.05;margin:.05em 0 .1em!important}
.pro .pcard h2{color:#fff!important;font-size:clamp(1.05rem,1.9vw,1.3rem)!important;margin:.05em 0 .2em!important}
.pro .pcard .sub{color:#9fe6e0!important;font-size:1rem!important;margin:.1em 0 .25em!important}
.pro .pcard p,.pro .pcard li{color:#f2f4f6;font-size:clamp(.9rem,1.45vw,1.04rem)!important;line-height:1.45;margin:.18em 0!important;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.pro .pcard .big{color:#ffe2a8!important;font-weight:800}
.pro .pcard .fine{color:#b7c0ca!important;font-size:.72rem!important;text-shadow:none}
.pro .pcard .byline,.pro .pcard .byline b{color:#cfd6dd!important;font-size:.82rem!important}.pro .pcard .byline b{color:#9fe6e0!important}
.pro .pcard .hint{color:#f2b33c!important;font-weight:800}
.pro .pcard .who{justify-content:center;margin:0 0 .2em!important;gap:8px}.pro .pcard .who .sana{width:34px;height:34px}.pro .pcard .who .sana svg{width:34px;height:34px}.pro .pcard .who b{color:#f2b33c}.pro .pcard .who small{color:#b7c0ca}
.pro .pcard .chips{justify-content:center;margin:.3em 0!important;gap:5px}.pro .pcard .chips span{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;font-size:.76rem!important}
.pro .pcard .beats,.pro .pcard .hl{display:flex!important;flex-wrap:wrap;justify-content:center;gap:5px 6px;margin:.3em 0!important;padding:0;list-style:none}
.pro .pcard .beats li,.pro .pcard .hl li{background:rgba(255,255,255,.1);border-radius:99px;padding:3px 11px;font-size:.84rem!important;font-weight:700;margin:0!important;opacity:1}
.pro .pcard .beats li{opacity:.35}.pro .pcard .beats li.on{opacity:1;background:rgba(242,179,60,.28)}
.pro .pcard .onehealth{background:rgba(43,214,110,.18)!important;color:#c9f7da!important;border-radius:10px;padding:5px 10px}
.pro .pcard .cwgrid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:5px;background:none!important;padding:0!important;margin:.3em 0!important}.pro .pcard .cwgrid div{background:rgba(20,60,70,.7)!important;padding:3px 10px!important;border-radius:99px!important;font-size:.76rem!important}
.pro .pcard .mix button{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none}
.pro .pcard.speaking{outline:none!important}
.pro .pcard .saying{background:rgba(242,179,60,.3)!important;box-shadow:0 0 0 3px rgba(242,179,60,.3)!important;border-radius:6px;color:#fff}
.pro .phone{position:absolute;right:clamp(16px,4vw,48px);bottom:calc(78px + 36vh + 14px);margin:0;display:none;z-index:3;max-height:calc(100vh - 36vh - 200px);overflow:hidden}
.pro .stick:has(.pcard[data-card=dash].on) .phone{display:block}
@media(max-width:820px){.pro .pcard .fine{display:none}.pro .pcard{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;width:calc(100% - 20px)!important;max-height:40dvh!important;padding:8px 12px 10px!important}
  .pro .pcard p,.pro .pcard li{font-size:.86rem!important}.pro .pcard .beats li,.pro .pcard .hl li{font-size:.76rem!important}.pro .phone{right:10px;top:150px;bottom:auto;width:200px;transform:scale(.9);transform-origin:top right}}
html[lang=ur] .pro .pcard p,html[lang=ur] .pro .pcard li{line-height:2!important}
.lv7{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:.35em 0}.lv7 span{color:#fff;font-weight:800;font-size:.72rem;border-radius:8px;padding:3px 8px;display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;opacity:.75;text-shadow:0 1px 1px rgba(0,0,0,.35)}.lv7 span small{font-size:.62rem;opacity:.9;font-weight:700}
.lv7 span.now{opacity:1;outline:3px solid #fff;transform:scale(1.08)}.lv7 .lvnow{flex-basis:100%;margin:.35em 0 0!important;border-left:4px solid;padding:3px 8px;text-align:left;background:rgba(255,255,255,.08);border-radius:6px}html[dir=rtl] .lv7 .lvnow{text-align:right;border-left:0;border-right:4px solid}
.pro .pcard[data-card=health]{max-height:48vh!important}.pro .pcard[data-card=health] .hl li{font-size:.78rem!important;padding:2px 9px}







/* ===== opening title: one clean stack — title, place & credit, then the Watch button below (no overlap in any language) ===== */
.pro .stick:has(.pcard[data-card=title].on) .start{top:auto;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}
.pro .stick:has(.pcard[data-card=title].on) .subs{bottom:calc(228px + env(safe-area-inset-bottom,0px))!important}
.pro .stick:has(.pcard[data-card=title].on) .subs .st-line{display:none}
.subs .st-big{text-wrap:balance}
html[lang=ur] .subs .st-big{font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.75}
html[lang=ur] .subs .st-sub{font-size:clamp(1rem,2vw,1.3rem);line-height:1.9}
html[lang=ur] .subs .st-by{font-family:'Noto Nastaliq Urdu',serif;line-height:2}
@media (max-height:620px){
  .pro .stick:has(.pcard[data-card=title].on) .start{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .pro .stick:has(.pcard[data-card=title].on) .start p{display:none}
  .pro .stick:has(.pcard[data-card=title].on) .subs{bottom:calc(166px + env(safe-area-inset-bottom,0px))!important}
  .subs .st-big{font-size:clamp(1.8rem,4.6vw,3rem)}
  html[lang=ur] .subs .st-big{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.6}
  .pro .stick:has(.pcard[data-card=title].on) .subs .st-by{display:none}}
/* ===== forecast: globe overlay + forecast board ===== */
#gcv{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:2;background:#02040a;pointer-events:none}
.fcp{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));right:clamp(12px,3vw,40px);width:min(460px,calc(100% - 24px));z-index:4;display:none;background:rgba(10,14,20,.88);color:#fff;border-radius:18px;padding:12px 14px 10px;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.fcp.on{display:block;animation:subin2 .6s cubic-bezier(.2,1.2,.4,1)}
.fcp .fct{margin:0 0 8px;font:800 1rem var(--display);color:#9ef0b0}
.fcg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fcd{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.07);border-radius:12px;padding:7px 4px;text-align:center}
.fcd b{font-size:.8rem}.fcd .fcw{font-size:1.05rem}.fcd .fcf{font-size:1.5rem;line-height:1.1}.fcd .fca{font:800 1.05rem var(--display);padding:1px 10px;border-radius:99px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.fcd small{font-size:.68rem;font-weight:700;opacity:.9}.fcd i{font-size:.66rem;font-style:normal;opacity:.75}
.fcp .fcn{margin:8px 0 0;font-size:.8rem;opacity:.9}
html[lang=ur] .fcp{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9}
@media(max-width:820px){.fcp{top:calc(110px + env(safe-area-inset-top,0px));left:12px;right:12px;width:auto}}
/* ===== before / now switch ===== */
.bnb{position:absolute;left:50%;top:calc(60px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:6;display:none;gap:4px;padding:5px;background:rgba(10,12,16,.7);border-radius:99px}
.bnb.on{display:flex;animation:icoin .5s cubic-bezier(.2,1.4,.4,1)}
.bnb button{font:800 1rem var(--display);border:0;border-radius:99px;padding:8px 18px;cursor:pointer;background:transparent;color:#fff;opacity:.7}
.bnb button[data-v="0"][aria-pressed=true]{background:#c0583a;opacity:1}
.bnb button[data-v="1"][aria-pressed=true]{background:#00a84f;opacity:1}
html[lang=ur] .bnb button{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9}
@media(max-width:820px){.bnb{top:calc(130px + env(safe-area-inset-top,0px))}.bnb button{font-size:.85rem;padding:6px 12px}}
/* ===== no voice, no clock: sound only ===== */
#narbtn,#vbtn,#vpanel,#goListen{display:none!important}
.subs .st-meta,#tc{display:none!important}
.hud .clock{display:none!important}
.spdset{display:flex;gap:3px}.spdset .btn{padding-inline:8px}
/* ===== international finish: loader, timecode, ending ===== */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 40%,#2a2f38,#0b0d11);transition:opacity .8s ease,visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.ld-in{display:flex;flex-direction:column;align-items:center;gap:16px;color:#ece6da;text-align:center}
.ld-brand{font:800 1.5rem var(--display);color:var(--amber);letter-spacing:.02em}
.ld-ring{width:54px;height:54px;border-radius:50%;border:4px solid rgba(242,179,60,.18);border-top-color:var(--amber);animation:ldspin 1s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}
.ld-in p{margin:0;font:700 .9rem var(--body);opacity:.8}
html[lang=ur] .ld-in p{font-family:'Noto Nastaliq Urdu',serif;line-height:2}
.tc{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:calc(clamp(16px,5vw,64px) + min(560px,100% - 540px) + 10px);z-index:5;font:800 .78rem var(--display);color:#fff;background:rgba(10,12,16,.62);padding:5px 10px;border-radius:99px;pointer-events:none;letter-spacing:.04em;direction:ltr}
@media(max-width:1180px){.tc{display:none}}
.final .tk-h{font:800 .8rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:#5a2a10;margin:1.6em 0 .7em}
.final .tk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:960px;margin:0 auto 1.6em}
.final .tk-c{background:rgba(255,255,255,.78);border:3px solid var(--ink);border-radius:18px;padding:16px 16px 18px;box-shadow:5px 5px 0 rgba(0,0,0,.18);display:flex;flex-direction:column;gap:6px;text-align:center}
.final .tk-c.t-bad{border-top:8px solid #e8262b}.final .tk-c.t-good{border-top:8px solid #00a84f}
.final .tk-i{font-size:2.1rem;line-height:1.2}
.final .tk-c b{font:800 1.15rem var(--display);color:#1b1f26}
.final .tk-c span:last-child{font-weight:700;color:#3a3f47;font-size:.95rem}
.final .fbtn{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:1.4em}
.final .fbtn .btn{font-size:1.05rem;padding:8px 20px}
html[lang=ur] .final .tk-c b,html[lang=ur] .final .tk-c span,html[lang=ur] .final .tk-h,html[lang=ur] .final .fbtn .btn{font-family:'Noto Nastaliq Urdu',serif;line-height:2;letter-spacing:0}
@media(max-width:720px){.final .tk{grid-template-columns:1fr}}
/* ===== clear for everyone: pictograms, scene strip, start buttons ===== */
.subs .st-ico{width:clamp(54px,7vw,74px);height:clamp(54px,7vw,74px);margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;font-size:clamp(1.8rem,3.6vw,2.5rem);background:rgba(10,12,16,.72);border:4px solid #9aa3ad;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.subs .st-ico.t-bad{border-color:#e8262b;box-shadow:0 0 0 4px rgba(232,38,43,.25),0 6px 22px rgba(0,0,0,.45)}
.subs .st-ico.t-good{border-color:#00a84f;box-shadow:0 0 0 4px rgba(0,168,79,.25),0 6px 22px rgba(0,0,0,.45)}
.subs.nc .st-ico{animation:icoin .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes icoin{from{transform:scale(.4);opacity:0}}
.aqi .face{font-size:1.9rem;line-height:1}
.chap{position:absolute;left:clamp(16px,5vw,64px);bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 540px)!important;z-index:5;display:flex;gap:4px;padding:5px;background:rgba(10,12,16,.62);border-radius:99px;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
.chap::-webkit-scrollbar{display:none}
.chap button{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid transparent;background:rgba(255,255,255,.08);font-size:1rem;line-height:1;cursor:pointer;opacity:.55;transition:opacity .3s,transform .3s,background .3s;padding:0}
.chap button.t-bad{border-color:rgba(232,38,43,.55)}.chap button.t-good{border-color:rgba(0,168,79,.6)}
.chap button.done{opacity:.85}.chap button.on{opacity:1;transform:scale(1.22);background:rgba(255,255,255,.22)}
.chap button:hover{opacity:1}
@media(max-width:820px){.chap{left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 20px)!important}.chap button{width:24px;height:24px;font-size:.8rem}.subs{bottom:calc(58px + env(safe-area-inset-bottom,0px))!important}}
.start{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;display:none;flex-direction:column;align-items:center;gap:10px;width:min(420px,calc(100% - 32px))}
.pro .stick:has(.pcard[data-card=title].on) .start{display:flex}
body.film .start{display:none!important}
.start .go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;font:800 1.2rem var(--display);padding:14px 20px;border-radius:16px;border:3px solid var(--ink);background:var(--amber);color:var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.55);cursor:pointer}
.start .go b{font-size:1.5rem}.start .go.alt{background:#fff}
.start .go:active{transform:translate(3px,3px);box-shadow:none}
.start p{margin:0;font:700 .85rem var(--body);color:#fff;text-shadow:0 1px 3px #000;text-align:center}
html[lang=ur] .start .go,html[lang=ur] .start p{font-family:'Noto Nastaliq Urdu',serif;line-height:2}
/* ===== cinematic polish ===== */
.cut{position:fixed;inset:0;background:#07090c;opacity:0;pointer-events:none;transition:opacity .6s ease;z-index:80}.cut.on{opacity:1}
.stick::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(125% 95% at 50% 45%,transparent 58%,rgba(0,0,0,.42) 100%)}
.stick::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-top:0 solid #07090c;border-bottom:0 solid #07090c;transition:border-width .9s cubic-bezier(.2,.7,.2,1)}
body.film .stick::before{border-top-width:5.5vh;border-bottom-width:5.5vh}
.subs.nc .st-title{animation:titin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes titin{from{opacity:0;transform:translateY(8px);letter-spacing:.04em}}
.subs .st-line span{animation:subin2 .5s cubic-bezier(.2,.7,.2,1)}
@keyframes subin2{from{opacity:0;transform:translateY(6px);filter:blur(3px)}}
@media (prefers-reduced-motion:reduce){.subs .st-title,.subs .st-line span{animation:none}.stick::before{transition:none}}
/* ===== film-style subtitles ===== */
.pro .pcard{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.subs{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(980px,calc(100% - 32px));text-align:center;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s}
.subs.on{opacity:1}
.subs .st-meta span{display:inline-block;font:800 .68rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#ffcf6a;background:rgba(0,0,0,.45);padding:5px 10px;border-radius:99px}
.subs .st-title{font:800 clamp(1.05rem,2vw,1.35rem)/1.2 var(--display);color:#fff;margin:.35em 0 .3em;text-shadow:0 2px 6px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.subs .st-line{font:700 clamp(1.05rem,2.1vw,1.45rem)/1.65 var(--body);color:#fff}
.subs .st-line span{background:rgba(0,0,0,.62);padding:.12em .5em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:0 1px 2px #000;animation:subin .35s ease}
@keyframes subin{from{opacity:0;filter:blur(2px)}}
.subs .st-dots{display:flex;justify-content:center;gap:5px;margin-top:8px}.subs .st-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}.subs .st-dots i.done{background:rgba(255,255,255,.7)}.subs .st-dots i.on{background:#ffcf6a;width:16px;border-radius:4px}
.subs .st-src{margin-top:6px;font:600 .66rem var(--body);color:rgba(255,255,255,.75);text-shadow:0 1px 2px #000}
.subs .st-big{font:800 clamp(2.2rem,6vw,4.2rem)/1 var(--display);color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.8)}
.subs .st-sub{font:800 clamp(1rem,2.2vw,1.4rem) var(--display);color:#9fe6e0;margin:.3em 0;text-shadow:0 2px 6px #000}
.subs .st-by{font:600 .85rem var(--body);color:#e8edf1;margin-bottom:.8em;text-shadow:0 1px 3px #000}.subs .st-by b{color:#ffcf6a}
html[lang=ur] .subs .st-line{font-family:'Noto Nastaliq Urdu',serif;line-height:2.35;font-weight:600}html[lang=ur] .subs .st-title,html[lang=ur] .subs .st-big,html[lang=ur] .subs .st-sub{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9}
html[dir=rtl] .subs{direction:rtl}
.float7{position:absolute;left:50%;transform:translateX(-50%);top:calc(56px + env(safe-area-inset-top,0px));bottom:auto;max-width:min(620px,calc(100% - 560px));display:none!important;z-index:4;width:min(900px,calc(100% - 32px))}
.pro .stick:has(.pcard[data-card=health].on) .float7{display:flex!important}
.pro .phone{bottom:auto!important;top:150px}
@media(max-width:820px){.float7{max-width:none!important;flex-wrap:nowrap;width:calc(100% - 20px)!important;gap:2px!important}.float7 span{flex:1;min-width:0;font-size:0!important;padding:0!important;height:14px;border-radius:3px!important}.float7 span small{font-size:.5rem!important;line-height:14px}.subs{bottom:calc(14px + env(safe-area-inset-bottom,0px));width:calc(100% - 20px)}.subs .st-line{font-size:1rem}.float7{bottom:auto;top:150px}.float7 span{font-size:.6rem!important;padding:2px 5px!important}.float7 .lvnow{display:none}}
.presenter{position:absolute;left:clamp(8px,2vw,28px);bottom:calc(70px + env(safe-area-inset-bottom,0px));width:clamp(150px,17vw,230px);aspect-ratio:3/4.4;z-index:4;pointer-events:none;opacity:0;transition:opacity .6s}
.presenter.on{opacity:1}.presenter canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.presenter .pname{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font:800 .72rem var(--display);color:#1b1f26;background:#ffcf6a;border-radius:99px;padding:2px 10px;white-space:nowrap}
html[dir=rtl] .presenter{left:auto;right:clamp(8px,2vw,28px)}
.float7 .lvnow{background:rgba(0,0,0,.6)!important;color:#fff;text-shadow:0 1px 2px #000}
@media(max-width:820px){.presenter{width:96px;bottom:auto;top:150px;left:8px}html[dir=rtl] .presenter{left:auto;right:8px}}
@media(min-width:821px){.float7{left:auto;right:clamp(16px,3vw,40px);transform:none}.float7 .lvnow{font-size:.8rem}}