/* Sarathi: peacock-feather palette. ASCII only. */
:root{
  --ink:#0B3B40;          /* peacock ink */
  --field:#0F5257;        /* peacock field */
  --eye:#24306E;          /* feather-eye indigo */
  --gold:#C9A227;         /* feather-eye gold */
  --gold-soft:#E9D58A;
  --page:#F4F7F6;         /* cool pale page */
  --paper:#FFFFFF;
  --text:#12262A;
  --muted:#4E6669;
  --line:#D5E0DE;
  --tint:#E6EFEC;
  --focus:#C9A227;
  --sa:"Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif;
  --ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure:68ch;
  --r-s:8px; --r-m:14px; --r-l:22px;
  --shadow:0 1px 2px rgba(11,59,64,.08), 0 8px 24px -8px rgba(11,59,64,.18);
  --shadow-deep:0 2px 4px rgba(7,30,34,.2), 0 24px 60px -18px rgba(7,30,34,.55);
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#071E22; --paper:#0C2A2F; --text:#E4EFEC; --muted:#9DB6B3; --line:#1D4247; --tint:#10353A;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:400 18.5px/1.6 var(--ui)}
a{color:inherit}
img{display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:8px 14px;border-radius:var(--r-s);z-index:20}
.skip:focus{left:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[lang="sa"]{font-family:var(--sa)}
h1,h2,h3{font-family:var(--sa);font-weight:400;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:12px clamp(16px,4vw,48px);
  background:rgba(11,59,64,.94);color:#EAF4F1;backdrop-filter:saturate(1.4) blur(10px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 24px/1 var(--sa)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:17px;padding:8px 12px;border-radius:999px;color:#CFE3DF}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{color:#0B3B40;background:var(--gold-soft)}
.nav-search{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#CFE3DF}
.nav-search:hover{background:rgba(255,255,255,.08);color:#fff}
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:8px 12px}
  .nav{order:3;width:100%;margin:0;overflow-x:auto;flex-wrap:nowrap}
  .nav a{white-space:nowrap}
  .nav-search{margin-left:auto}
}

main{min-height:60vh}
.foot{max-width:var(--measure);margin:72px auto 0;padding:32px 16px 48px;color:var(--muted);font-size:15.5px;border-top:1px solid var(--line)}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 17px/1 var(--ui);padding:13px 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--gold);color:#1A1608;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px -8px rgba(201,162,39,.8)}
.btn:hover{background:#D8B23A}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(127,127,127,.1)}
.btn.ghost.done{color:var(--field);box-shadow:inset 0 0 0 1.5px var(--field)}
.v-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;background:var(--tint);text-decoration:none;font-size:17px;border:1px solid var(--line)}
.chip span{font-size:18.5px}
.chip:hover{border-color:var(--field)}
.chip.soft{background:transparent}
.hint{color:var(--muted);font-size:15.5px;margin:-4px 0 16px}

/* ---------- hero ---------- */
.hero{position:relative;color:#EAF4F1;background:var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);
  align-items:center;padding:clamp(40px,7vh,88px) clamp(16px,5vw,72px);min-height:min(calc(100vh - 64px),720px);overflow:hidden}
.hero h1{font-size:clamp(44px,5.6vw,84px);margin-bottom:.35em;color:#fff}
.hero .lede{font-size:21px;color:#C4DAD6;max-width:34ch;margin:0}
.hero .btn.ghost{color:#EAF4F1}
.hero-verse{margin:0;position:relative;padding:clamp(24px,3.4vw,48px);border-radius:var(--r-l);
  background:linear-gradient(160deg,#145F65 0%,#0E474C 55%,#0C3E43 100%);box-shadow:var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,.08)}
.hero-verse::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(201,162,39,.7),rgba(201,162,39,0) 40%,rgba(36,48,110,.0) 60%,rgba(201,162,39,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hv-sa{font-size:clamp(26px,2.9vw,42px);line-height:1.55;margin:0 0 18px;color:#fff}
.hv-words{font:400 clamp(17px,1.5vw,21px)/2 var(--ui);color:#9FC2BC;margin:0}
.hw{cursor:pointer;border-radius:6px;padding:2px 4px;transition:color .25s, background .25s}
.hw:hover,.hw:focus,.hw.on{color:#fff;background:rgba(201,162,39,.22);outline:none}
.hw.on{box-shadow:inset 0 -2px 0 var(--gold)}
.hv-meaning{min-height:2.4em;margin:14px 0 22px;font-size:22px;color:var(--gold-soft);transition:opacity .25s}
.hero-verse figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15.5px;color:#9FC2BC;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.hero-verse figcaption a{color:#CFE3DF}
.hv-play{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;padding:9px 16px;font:600 15.5px var(--ui);cursor:pointer}
.hv-play:hover{background:rgba(255,255,255,.18)}
.i-pause{display:none}
.playing .i-play{display:none}.playing .i-pause{display:inline}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}}

/* ---------- home bands ---------- */
.band{max-width:1120px;margin:0 auto;padding:56px clamp(16px,4vw,32px) 0}
.band h2{font-size:clamp(28px,3vw,38px)}
.sits{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sit{display:block;padding:16px 18px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);text-decoration:none;font-size:18px;line-height:1.35;
  box-shadow:0 1px 0 rgba(11,59,64,.04)}
.sit:hover{border-color:var(--field);box-shadow:var(--shadow)}
.sits.big .sit{font:400 23px/1.3 var(--ui);padding:22px}
.vod-body{background:var(--paper);border-radius:var(--r-l);padding:28px clamp(20px,3vw,40px);box-shadow:var(--shadow);border-left:4px solid var(--gold)}
.vod-body .vsa{font-size:clamp(20px,2vw,26px);line-height:1.6;margin:0 0 12px}
.vod-body .ven{margin:0 0 14px;max-width:var(--measure)}
.clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.crow a{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;padding:14px 16px;border-radius:var(--r-m);text-decoration:none;background:var(--paper);border:1px solid var(--line)}
.crow a:hover{border-color:var(--field)}
.cnum{grid-row:span 2;align-self:center;font:400 30px/1 var(--ui);color:var(--field);text-align:center}
.cname{display:flex;flex-direction:column}
.cname [lang="sa"]{font-size:22px;line-height:1.3}
.cname span:last-child{font-weight:600;font-size:17px}
.cmeta{font-size:15.5px;color:var(--muted)}
.cprog{display:block;height:3px;border-radius:2px;margin-top:8px;background:var(--line);overflow:hidden}
.cprog i{display:block;height:100%;background:var(--gold)}
.cprog:empty{display:none}

/* ---------- list pages ---------- */
.ch-head{max-width:880px;margin:0 auto;padding:48px clamp(16px,4vw,32px) 8px}
.ch-head h1{font-size:clamp(36px,4.6vw,60px)}
.ch-head h1 [lang="sa"]{display:block;color:var(--field)}
.crumb{font-size:15.5px;color:var(--muted);margin:0 0 10px}
.lede{font-size:21px;color:var(--muted);max-width:var(--measure);margin:0}
.summary,.prose{max-width:880px;margin:20px auto 0;padding:0 clamp(16px,4vw,32px)}
.summary summary{cursor:pointer;font-weight:600;padding:10px 0}
.summary p,.prose p,.prose li{max-width:var(--measure);font:400 20px/1.7 var(--ui)}
.prose h2{font-size:26px;margin-top:1.4em}
.vlist,.flist{list-style:none;max-width:880px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px)}
.vrow a{display:grid;grid-template-columns:64px 1fr;column-gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.vrow a:hover .vsa{color:var(--field)}
.vnum{grid-row:span 3;font:600 15.5px/1.9 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.vsa{font-size:22px;line-height:1.5}
.ven{color:var(--muted);font-size:17px;line-height:1.5}
.wmean{font-size:15.5px;color:var(--field);margin-top:4px}
.fcard a{display:block;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none}
.fcard .vsa{font-size:24px;margin:4px 0 10px}
.fcard .ven{font:400 21px/1.65 var(--ui);color:var(--text);max-width:var(--measure);display:block}
.cgrid{max-width:1120px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px);display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ccard{display:flex;flex-direction:column;padding:20px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);text-decoration:none}
.ccard:hover{border-color:var(--field);box-shadow:var(--shadow)}
.c-deva{font-size:34px;line-height:1.2;color:var(--field)}
.c-iast{font:400 22px var(--ui)}
.c-gloss{color:var(--muted);font-size:15.5px}
.c-count{margin-top:10px;font-size:15.5px;font-weight:600}
.bars{display:grid;grid-template-columns:repeat(18,1fr);gap:4px;height:140px;align-items:end}
.bar{display:flex;align-items:flex-end;justify-content:center;height:100%;text-decoration:none;border-radius:4px;background:linear-gradient(to top,var(--field) calc(var(--h)*100%),var(--tint) 0)}
.bar span{font-size:12px;color:var(--muted);transform:translateY(18px)}
.bar:hover{background:linear-gradient(to top,var(--gold) calc(var(--h)*100%),var(--tint) 0)}
.means{padding-left:20px}.means span{color:var(--muted)}

/* ---------- verse page ---------- */
.verse{max-width:880px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.v-head{padding:44px 0 32px;border-bottom:1px solid var(--line)}
.speaker{color:var(--muted);font-size:17px;margin:0 0 10px}
.speaker [lang="sa"]{font-size:20px}
.sa{font-size:clamp(28px,4vw,44px);line-height:1.6;margin:0 0 16px}
.tl{font:italic 400 clamp(18px,2vw,22px)/1.6 var(--ui);color:var(--muted);margin:0 0 24px}
.player{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px 10px 10px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);max-width:560px}
.player .play{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;flex:none}
.p-track{flex:1;min-width:80px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.p-bar{height:100%;width:0;background:var(--gold);transition:width .1s linear}
.p-opt{font-size:15.5px;display:flex;align-items:center;gap:6px;cursor:pointer}
.p-speed{font:inherit;font-size:15.5px;background:transparent;color:inherit;border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.player.wait .p-bar{background:var(--field)}
.v-sec{padding:36px 0 8px}
.v-sec h2{font-size:28px}
.words{display:flex;flex-wrap:wrap;gap:8px}
.word{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper);color:inherit;cursor:pointer;font:inherit;max-width:100%}
.word:hover,.word[aria-expanded="true"]{border-color:var(--field);box-shadow:var(--shadow)}
.w-sa{font:italic 400 21px/1.3 var(--ui)}
.w-m{font-size:15.5px;color:var(--muted);line-height:1.35}
.word-pop{margin-top:14px;padding:20px 22px;border-radius:var(--r-m);background:var(--ink);color:#E4EFEC;box-shadow:var(--shadow-deep)}
.word-pop h3{font-size:26.5px;margin:0 0 4px;color:#fff}
.word-pop p{margin:0 0 12px;color:#B9D2CE;font-size:17px}
.word-pop ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.word-pop li a{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);text-decoration:none;font-size:15.5px;font-variant-numeric:tabular-nums}
.word-pop li a:hover{background:var(--gold);color:#1A1608}
.word-pop .more{display:inline-block;margin-top:12px;color:var(--gold-soft);font-size:15.5px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{font:500 15.5px var(--ui);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs .lang{font-size:13px;opacity:.7}
.tr-text{font:400 clamp(19px,2vw,22px)/1.7 var(--ui);max-width:var(--measure);margin:0 0 8px}
.by{font-size:15.5px;color:var(--muted);margin:0}
.follows{font-size:15.5px;color:var(--field);margin:4px 0 0}
.trad{padding:16px 0;border-top:1px solid var(--line)}
.trad h3{font-size:23px;margin:0}
.trad p{font-size:15.5px;color:var(--muted);margin:2px 0 10px}
.cm-list{display:flex;flex-wrap:wrap;gap:6px}
.cm-btn{font:500 15.5px var(--ui);padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:inherit;cursor:pointer}
.cm-btn[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cm-out{margin-top:18px;padding:24px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--shadow);font:400 20px/1.8 var(--ui);white-space:pre-line;max-height:70vh;overflow:auto}
.cm-out h3{font-size:24px}
.vnav{display:flex;justify-content:space-between;gap:12px;max-width:880px;margin:40px auto 0;padding:20px clamp(16px,4vw,32px);border-top:1px solid var(--line);font-size:17px}
.verse .vnav{padding-left:0;padding-right:0}
.vnav a{text-decoration:none;font-weight:600}
.vnav a:hover{color:var(--field)}

/* ---------- share card ---------- */
.card-dlg{border:0;border-radius:var(--r-l);padding:20px;background:var(--paper);color:var(--text);max-width:min(94vw,520px);box-shadow:var(--shadow-deep)}
.card-dlg::backdrop{background:rgba(4,20,23,.7)}
.card-wrap canvas{width:100%;height:auto;border-radius:var(--r-m);display:block}
.card-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- search, plans ---------- */
.sform input{width:100%;font:400 22px var(--ui);padding:16px 20px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--paper);color:inherit;margin-top:12px}
.sform input:focus{border-color:var(--field);outline:none;box-shadow:0 0 0 4px rgba(15,82,87,.15)}
.s-status{margin-top:12px}
mark{background:var(--gold-soft);color:#1A1608;border-radius:3px;padding:0 2px}
.plans{max-width:1120px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px);display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.plan{padding:24px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.plan h2{font-size:26px;margin:0}
.plan p{margin:0;color:var(--muted);font-size:17px}
.plan .plan-len{font-weight:600;color:var(--text)}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan.active{border-color:var(--gold);box-shadow:var(--shadow)}
.plan-state{font-size:15.5px;color:var(--field);min-height:1.2em}
.today{max-width:1120px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px)}
.today-in{background:var(--ink);color:#E4EFEC;border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow-deep)}
.today-in h2{color:#fff;font-size:30px}
.today-in .chips a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.today-in .chips a.read{background:var(--gold);color:#1A1608;border-color:var(--gold)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
main > .v-sec{max-width:880px;margin:0 auto;padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px)}
main > .v-sec .sits{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ---------- practice (recitation coach) ---------- */
.practice{max-width:880px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.p-head{padding:40px 0 24px}
.p-head h1{font-size:clamp(34px,4vw,52px)}
.pv{font-size:clamp(26px,3.6vw,40px);line-height:1.75;margin:0 0 12px}
.pw{border-radius:8px;padding:0 4px;transition:background .3s,color .3s,box-shadow .3s}
.pw.clear{background:rgba(31,122,122,.16);box-shadow:inset 0 -3px 0 #1F7A7A}
.pw.close{background:rgba(201,162,39,.22);box-shadow:inset 0 -3px 0 var(--gold)}
.pw.missed{background:rgba(180,83,58,.16);box-shadow:inset 0 -3px 0 #B4533A}
.pd{color:var(--muted)}
.psteps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.psteps{grid-template-columns:1fr}}
.pstep{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;box-shadow:0 1px 0 rgba(11,59,64,.04)}
.pstep h2{font-size:26.5px;margin-bottom:4px}
.pstep .hint{margin:0 0 16px}
.pstep .player{box-shadow:none;border:1px solid var(--line);max-width:none}
.pstep.rec{display:flex;flex-direction:column;align-items:center;text-align:center}
.pstep.rec .hint{align-self:stretch;text-align:left}
.mic{position:relative;width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 35% 30%,#1F7A7A,var(--ink) 70%);box-shadow:var(--shadow-deep);display:grid;place-items:center}
.mic:disabled{opacity:.4;cursor:not-allowed}
.mic.on{background:radial-gradient(circle at 35% 30%,#D8B23A,#9C7A12 75%);color:#1A1608}
.mic.on::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--gold);animation:pulse 1.4s ease-out infinite}
@keyframes pulse{from{transform:scale(.9);opacity:.9}to{transform:scale(1.25);opacity:0}}
.mic-label{font-weight:600;margin:14px 0 6px}
.live{min-height:3em;margin:0;color:var(--muted);font:400 20px/1.6 var(--ui);max-width:100%}
.result{margin:14px 0 0;border-radius:var(--r-l);padding:24px 28px;box-shadow:var(--shadow)}
.result.good{background:linear-gradient(160deg,#145F65,#0B3B40);color:#EAF4F1}
.result.work{background:var(--paper);border:1px solid var(--line)}
.verdict{display:flex;align-items:center;gap:12px;font:400 34px/1.1 var(--ui);margin:0 0 8px}
.big-check{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:#1A1608;font:700 26px/1 var(--ui)}
.result .detail{margin:0 0 6px;font-size:18px}
.result .detail.strong{font-weight:600}
.result.good .btn.ghost{color:#EAF4F1}
.heard{margin-top:14px;font-size:15.5px}
.heard summary{cursor:pointer;color:inherit;opacity:.8}
.heard p{font:400 18.5px/1.6 var(--ui);margin:8px 0 0}
.pprog{margin-top:14px}
.st{display:inline-block;margin:0 0 4px;font-weight:600;font-size:17px;padding:5px 12px;border-radius:999px;background:var(--tint)}
.st.learned,.st.mastered{background:var(--ink);color:#fff}
.st.due{background:var(--gold);color:#1A1608}
.st.half{background:rgba(201,162,39,.25)}
.st-text{margin:4px 0 12px;color:var(--muted);font-size:17px}
.ticks{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tick{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 17px/1 var(--ui)}
.tick.ok{background:var(--ink);color:var(--gold-soft)}
.tick.no{background:var(--tint);color:var(--muted)}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--tint);margin-right:6px}
.pill.learned,.pill.mastered{background:var(--ink);color:#fff}
.pill.due{background:var(--gold);color:#1A1608}
.practice-board h2{max-width:880px;margin:36px auto 0;padding:0 clamp(16px,4vw,32px);font-size:28px}
.consent h2{font-size:26px}
.consent p{max-width:52ch}
.pstep .player{border-radius:var(--r-m);padding:10px 12px}
.pstep .player .p-track{flex-basis:120px}
.pw.tap{cursor:pointer}
.pw.tap:hover{filter:brightness(.92)}
.mic.busy{opacity:.7;cursor:progress}
.mic.busy::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid transparent;border-top-color:var(--gold);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;max-width:1120px;margin:16px auto 0;padding:0 clamp(16px,4vw,32px)}
.band .tgrid{padding:0;margin-top:0}
.tcard{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;padding:16px 18px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);text-decoration:none}
.tcard:hover{border-color:var(--field);box-shadow:var(--shadow)}
.tnum{grid-row:span 2;align-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--gold-soft);font:400 22px/1 var(--ui)}
.tname{font:400 21px/1.3 var(--ui)}
.tmeta{font-size:15.5px;color:var(--muted)}
.band-lede{color:var(--muted);margin:-6px 0 16px}
.chip.theme{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.sm{padding:8px 14px;font-size:15.5px}
.fcard .v-actions{margin:-8px 0 18px}
.credit{max-width:1120px;margin:24px auto 0;padding:0 clamp(16px,4vw,32px);font-size:15.5px;color:var(--muted)}
.flist .fcard{border-bottom:1px solid var(--line);padding-bottom:16px}
.flist .fcard a{border-bottom:0;padding-bottom:8px}
.flist .fcard .v-actions{margin:0}

/* ---------- knowledge graph: verse map ---------- */
.vmap-sec .hint{max-width:62ch}
.vm{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:28px;align-items:center;padding:28px 22px;border-radius:var(--r-l);
  background:radial-gradient(120% 90% at 50% 50%,rgba(15,82,87,.07),transparent 60%),var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.vm-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.vm-path{fill:none;stroke-width:1.4;opacity:.45;transition:opacity .2s,stroke-width .2s}
.vm.focusing .vm-path{opacity:.12}
.vm .vm-path.on{opacity:1;stroke-width:2.6}
.vm-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.vm-left{align-items:flex-end;text-align:right}
.vm-group{display:flex;flex-wrap:wrap;gap:6px;justify-content:inherit}
.vm-left .vm-group{justify-content:flex-end}
.vm-group h3{flex-basis:100%;font:600 13px/1 var(--ui);letter-spacing:.02em;color:var(--muted);margin:0 0 2px}
.vm-node{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:999px;text-decoration:none;font-size:15.5px;line-height:1.3;
  background:var(--paper);border:1px solid var(--line);transition:transform .15s,box-shadow .15s,border-color .15s}
.vm-node [lang="sa"]{font-size:17px}
.vm-node:hover,.vm-node:focus-visible{transform:translateY(-1px);box-shadow:var(--shadow)}
.vm-node.st-a{border-color:rgba(180,83,58,.45);background:rgba(180,83,58,.07)}
.vm-node.st-h{border-color:rgba(31,122,122,.45);background:rgba(31,122,122,.08)}
.vm-node.sit{border-color:rgba(201,162,39,.6);background:rgba(201,162,39,.10)}
.vm-node.idea{border-color:rgba(75,90,168,.45);background:rgba(75,90,168,.07)}
.vm-node.chain{border-color:rgba(201,162,39,.6);border-style:dashed}
.vm-node.vv{font-variant-numeric:tabular-nums;font-weight:600}
.vm-node .rel{font-weight:400;color:var(--muted);font-size:13px}
.vm-center{position:relative;z-index:1;display:grid;place-items:center}
.vm-hub{position:relative;width:132px;height:132px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;
  background:radial-gradient(circle at 35% 30%,#1F7A7A,var(--ink) 72%);color:#fff;box-shadow:0 0 0 6px rgba(201,162,39,.18),var(--shadow-deep);transition:box-shadow .25s}
.vm-hub.lit{box-shadow:0 0 0 10px rgba(201,162,39,.28),var(--shadow-deep)}
.vm-hub::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(201,162,39,.35)}
.vm-num{font:400 34px/1 var(--ui);color:var(--gold-soft)}
.vm-sub{font-size:12px;line-height:1.25;margin-top:6px;color:#CFE3DF}
.vm-why{min-height:1.5em;margin:12px 0 0;font-size:17px;color:var(--field)}
.vm-more{margin:6px 0 0;font-size:15.5px}
@media (max-width:760px){
  .vm{grid-template-columns:1fr;gap:22px;padding:22px 14px}
  .vm-left,.vm-right{align-items:center;text-align:center}
  .vm-left .vm-group,.vm-right .vm-group{justify-content:center}
}

/* ---------- knowledge graph: map page ---------- */
.map-hero{color:#EAF4F1;background:var(--ink);padding:clamp(36px,6vh,72px) clamp(16px,5vw,72px) 40px}
.mh-copy{max-width:880px}
.map-hero h1{font-size:clamp(40px,5vw,72px);color:#fff;margin-bottom:.3em}
.map-hero .lede{color:#C4DAD6;max-width:56ch}
.feelings{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.feel-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.feel-label{flex-basis:100%;font-size:15.5px;font-weight:600;color:#9FC2BC}
.feel{display:inline-flex;align-items:baseline;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#EAF4F1;
  font:500 17px var(--ui);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.feel [lang="sa"]{font-size:18px;color:#CFE3DF}
.feel:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
.feel.st-a[aria-pressed="true"]{background:#B4533A;border-color:#B4533A}
.feel.st-h[aria-pressed="true"]{background:#1F7A7A;border-color:#1F7A7A}
.feel[aria-pressed="true"] [lang="sa"]{color:#fff}
.journey{margin-top:30px;padding:26px;border-radius:var(--r-l);background:linear-gradient(160deg,#145F65,#0C3E43);box-shadow:var(--shadow-deep)}
.journey.enter{animation:jIn .5s ease both}
@keyframes jIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.jtitle{font:400 26.5px/1.3 var(--ui);margin:0 0 18px;color:#fff}
.jflow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.jflow::before{content:"";position:absolute;left:4%;right:4%;top:15px;height:2px;background:linear-gradient(90deg,#B4533A,#C9A227,#1F7A7A);opacity:.8}
.j-h .jflow::before{background:linear-gradient(90deg,#1F7A7A,#C9A227,#1F7A7A)}
.journey.enter .jflow::before{animation:grow .9s ease both .1s;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.jcol{position:relative;display:flex;flex-direction:column;gap:10px}
.jcol h3{display:flex;align-items:center;gap:10px;font:600 15.5px/1.3 var(--ui);color:#EAF4F1;margin:0 0 4px}
.jn{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1A1608;font:700 17px/1 var(--ui)}
.jv{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-m);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#EAF4F1;transition:background .15s,transform .15s}
.jv:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.jv .vnum{color:var(--gold-soft);font-size:15.5px}
.jsa{font:400 18.5px/1.45 var(--sa);color:#fff}
.jen{font-size:15.5px;line-height:1.45;color:#C4DAD6}
.jgo{font-size:13px;color:var(--gold-soft);margin-top:2px}
.jstate{display:inline-flex;align-items:baseline;gap:7px;align-self:flex-start;padding:10px 16px;border-radius:999px;text-decoration:none;font:500 18px var(--ui);color:#fff}
.jstate [lang="sa"]{font-size:18.5px}
.jstate.st-h{background:#1F7A7A}.jstate.st-a{background:#B4533A}
.journey .btn.ghost{color:#EAF4F1;align-self:flex-start}
@media (max-width:860px){.jflow{grid-template-columns:1fr}.jflow::before{display:none}}
.chainbox{margin-top:18px;padding:20px 22px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);scroll-margin-top:80px}
.chainbox h3{font-size:24px;margin:0}
.chainbox .hint{margin:2px 0 14px}
.csteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;counter-reset:cs}
.cstep{display:flex;align-items:center;gap:8px}
.cstep:not(:last-child)::after{content:"";width:22px;height:2px;background:var(--line)}
.ch-afflictive .cstep:not(:last-child)::after{background:linear-gradient(90deg,rgba(180,83,58,.3),#B4533A)}
.ch-healing .cstep:not(:last-child)::after{background:linear-gradient(90deg,rgba(31,122,122,.3),#1F7A7A)}
.cstep a{display:flex;flex-direction:column;padding:8px 12px;border-radius:var(--r-m);text-decoration:none;border:1px solid var(--line);background:var(--page)}
.ch-afflictive .cstep a{border-color:rgba(180,83,58,.35)}
.ch-healing .cstep a{border-color:rgba(31,122,122,.35)}
.ch-afflictive .cstep:last-child a{background:rgba(180,83,58,.12)}
.ch-healing .cstep:last-child a{background:rgba(31,122,122,.12)}
.cname{font-size:15.5px;font-weight:600}
.cref{font-size:13px;color:var(--muted)}
.gtable-wrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--line);background:var(--paper)}
.gtable{width:100%;border-collapse:collapse;min-width:640px}
.gtable th,.gtable td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.gtable thead th{font:400 21px var(--ui)}
.gtable thead th:nth-child(2){color:#1F7A7A}.gtable thead th:nth-child(3){color:#B4533A}.gtable thead th:nth-child(4){color:#4B5AA8}
.gtable tbody th{font-size:15.5px;color:var(--muted);font-weight:600;width:130px}
.gtable td a{display:flex;flex-direction:column;gap:2px;text-decoration:none;font-size:15.5px;line-height:1.45}
.gtable td a:hover span:last-child{color:var(--field)}
.gtable tr:last-child th,.gtable tr:last-child td{border-bottom:0}
.pathform{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.pathform label{display:flex;flex-direction:column;gap:4px;font-size:15.5px;font-weight:600;color:var(--muted)}
.pathform input{font:400 18.5px var(--ui);padding:11px 14px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--paper);color:var(--text);min-width:220px}
.pathform input:focus{outline:none;border-color:var(--field);box-shadow:0 0 0 4px rgba(15,82,87,.15)}
.pf-try{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:15.5px;color:var(--muted)}
.pf-try .chip{cursor:pointer;font:inherit;font-size:15.5px;color:var(--text)}
.pf-out{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:0;max-width:720px}
.pf-out.enter .pf-step{animation:jIn .4s ease both}
.pf-out.enter .pf-step:nth-child(2){animation-delay:.08s}.pf-out.enter .pf-step:nth-child(3){animation-delay:.16s}
.pf-out.enter .pf-step:nth-child(4){animation-delay:.24s}.pf-out.enter .pf-step:nth-child(5){animation-delay:.32s}
.pf-step{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0 10px 26px;border-left:2px solid var(--line);margin-left:10px}
.pf-step::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--gold);transform:translateY(-50%)}
.pf-rel{font-size:15.5px;color:var(--muted);font-style:italic}
.pf-node{display:inline-block;padding:7px 13px;border-radius:999px;text-decoration:none;font-weight:600;font-size:17px;border:1px solid var(--line);background:var(--paper)}
.pf-node.pf-st-a{border-color:rgba(180,83,58,.5);background:rgba(180,83,58,.08)}
.pf-node.pf-st-h{border-color:rgba(31,122,122,.5);background:rgba(31,122,122,.09)}
.pf-node.pf-verse{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-node.pf-situation{border-color:rgba(201,162,39,.6)}
.pf-note{flex-basis:100%;font-size:15.5px;color:var(--field)}
.jlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jcard a{display:grid;grid-template-columns:64px 1fr;column-gap:16px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.jcard .vnum{grid-row:span 3}
@media (prefers-reduced-motion:reduce){.vm-path{transition:none}}
.jflow{grid-template-columns:minmax(0,1fr) minmax(170px,.5fr) minmax(0,1fr)}
.jmid{align-items:flex-start}
@media (max-width:860px){.jflow{grid-template-columns:1fr}}
.vm-node{background-color:var(--paper)}
.vm-node.st-a{background-image:linear-gradient(rgba(180,83,58,.08),rgba(180,83,58,.08))}
.vm-node.st-h{background-image:linear-gradient(rgba(31,122,122,.09),rgba(31,122,122,.09))}
.vm-node.sit{background-image:linear-gradient(rgba(201,162,39,.11),rgba(201,162,39,.11))}
.vm-node.idea{background-image:linear-gradient(rgba(75,90,168,.08),rgba(75,90,168,.08))}

/* ---------- Ask Sarathi (consult) ---------- */
:root{--cx-acc:var(--field);--cx-sa:var(--eye);--f-angry:#E07A4F;--f-anxious:#E3B341;--f-low:#7F96D1;--f-hurt:#D07FA8;--f-stuck:#8FB0AB;--f-afraid:#A28AE0}
@media (prefers-color-scheme: dark){:root{--cx-acc:#7FC4BA;--cx-sa:#E9D58A}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-consult main{background:var(--ink)}
.cx{color:#EAF4F1;background:var(--ink);padding:clamp(28px,5vw,64px) clamp(16px,4vw,32px) 72px;min-height:calc(100vh - 64px)}
.cx-stage{max-width:880px;margin:0 auto}
.cx-step{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.cx-step.from-left{transform:translateX(-18px)}
.cx-step.is-on{opacity:1;transform:none}
.cx-top{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin-bottom:18px}
.cx-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#CFE3DF;font:500 17px/1 var(--ui);cursor:pointer;padding:8px 10px 8px 4px;border-radius:999px}
.cx-back:hover{color:#fff}
.cx-dots{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.cx-dots li{width:28px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);transition:background .4s}
.cx-dots li.done{background:var(--gold-soft)}
.cx-dots li.on{background:var(--gold)}
.cx-kicker{font:600 15.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 14px}
.cx-h{font-size:clamp(34px,5.2vw,60px);color:#fff;margin:0 0 .35em;text-wrap:balance;outline:none}
.cx-q{color:#BCD3CF;font-size:20px;margin:0 0 22px;max-width:52ch}
.cx-q a{color:var(--gold-soft)}
.cx-tiles{display:grid;gap:12px;margin:0 0 22px}
.cx-tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.cx-tiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:22px;min-height:132px;padding:20px;border-radius:var(--r-l);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#EAF4F1;font:500 21px/1.2 var(--ui);text-align:left;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px -18px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,box-shadow .25s;animation:cx-in .5s calc(var(--i,0)*55ms) both cubic-bezier(.2,.8,.2,1)}
.cx-tile svg{color:var(--gold-soft)}
.cx-tile:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(233,213,138,.55);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 22px 40px -20px rgba(0,0,0,.75)}
.cx-tile:active{transform:translateY(-1px) scale(.98)}
.cx-tile.feel{min-height:150px}
.cx-tile.feel.slim{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:12px 18px}
.cx-tile.slim .cx-face{width:40px;height:40px}
.cx-tile.feel:hover{border-color:color-mix(in srgb,var(--fc) 70%,transparent)}
.f-angry{--fc:var(--f-angry)}.f-anxious{--fc:var(--f-anxious)}.f-low{--fc:var(--f-low)}.f-hurt{--fc:var(--f-hurt)}.f-stuck{--fc:var(--f-stuck)}.f-afraid{--fc:var(--f-afraid)}
.cx-sits{display:grid;gap:10px;max-width:640px}
.cx-sit{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 22px;border-radius:var(--r-m);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:#fff;font:500 21px/1.3 var(--ui);text-align:left;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s;animation:cx-in .5s calc(var(--i,0)*70ms) both cubic-bezier(.2,.8,.2,1)}
.cx-sit svg{color:var(--gold-soft);flex:none;transition:transform .25s}
.cx-sit:hover{transform:translateX(4px);background:rgba(255,255,255,.1);border-color:rgba(233,213,138,.55)}
.cx-sit:hover svg{transform:translateX(3px)}
.cx-sit small{display:block;font-size:15.5px;color:var(--muted);font-weight:400;margin-top:2px}
.cx-else{animation:cx-in .5s calc(var(--i,0)*70ms) both;border-radius:var(--r-m);border:1px dashed rgba(255,255,255,.22);padding:0 22px}
.cx-else summary{cursor:pointer;padding:18px 0;color:#CFE3DF;font:500 18.5px/1.3 var(--ui);list-style:none}
.cx-else summary::-webkit-details-marker{display:none}
.cx-else[open] summary{padding-bottom:6px}
.cx-else .cx-write{margin:8px 0 18px}
.cx-write{display:flex;gap:8px;max-width:640px;padding:6px 6px 6px 20px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:border-color .25s,background .25s}
.cx-write:focus-within{border-color:var(--gold);background:rgba(255,255,255,.12)}
.cx-write input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font:400 18.5px/1.4 var(--ui);padding:10px 0}
.cx-write input::placeholder{color:#9DB6B3}
.cx-write button{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--gold);color:#1A1608;cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.cx-write button:hover{transform:scale(1.06)}
.cx-helpline{margin:28px 0 0}
.cx-link{background:none;border:0;padding:0;color:#BCD3CF;font:500 17px/1.4 var(--ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cx-link:hover{color:#fff}

/* the answer */
.cx-card{position:relative;max-width:760px;background:var(--paper);color:var(--text);border-radius:var(--r-l);padding:clamp(24px,4vw,48px);
  box-shadow:var(--shadow-deep),0 0 0 1px rgba(255,255,255,.06);animation:cx-rise .7s both cubic-bezier(.2,.8,.2,1);outline:none}
.cx-for{font:600 15.5px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cx-acc);margin:0 0 20px}
.cx-sa{font-size:clamp(22px,3vw,30px);line-height:1.55;margin:0 0 8px;color:var(--cx-sa)}
.cx-sa span{display:block;animation:cx-in .6s calc(.25s + var(--i,0)*.18s) both}
.cx-ref{margin:0 0 20px;font-size:15.5px}
.cx-ref a{color:var(--muted)}
.cx-en{margin:0 0 26px;padding:0;font:400 clamp(19px,2.2vw,22px)/1.5 var(--ui);color:var(--text);max-width:60ch}
.cx-en cite{display:block;margin-top:8px;font:400 15.5px/1 var(--ui);font-style:normal;color:var(--muted)}
.cx-notes{margin:0 0 26px;display:grid;gap:0;border-top:1px solid var(--line)}
.cx-notes div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);animation:cx-in .5s calc(.7s + var(--i,0)*.12s) both}
.cx-notes dt{font:600 13px/1.6 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cx-acc)}
.cx-notes dd{margin:0;font-size:18.5px}
.cx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.cx-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:var(--tint);color:var(--text);font:500 17px/1 var(--ui);cursor:pointer;transition:border-color .2s,transform .2s}
.cx-btn:hover{border-color:var(--field);transform:translateY(-1px)}
.cx-btn small{color:var(--muted);font-size:13px;margin-left:2px}
.cx-btn.on{background:var(--gold-soft);border-color:var(--gold);color:#1A1608}
.cx-btn .i-pause{display:none}
.cx-btn.playing .i-pause{display:inline}.cx-btn.playing .i-play{display:none}
.cx-fb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:18px;border-top:1px solid var(--line);font-size:17px;color:var(--muted)}
.cx-pill{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text);font:500 15.5px/1 var(--ui);cursor:pointer}
.cx-pill:hover{border-color:var(--field)}
.cx-thanks{margin:0;color:var(--text);flex-basis:100%}
.cx-fb .cx-write{flex-basis:100%;background:var(--tint);border-color:var(--line)}
.cx-fb .cx-write input{color:var(--text)}
.cx-note{margin:16px 0 0;font-size:15.5px;color:var(--muted)}
.cx-deeper{display:flex;flex-wrap:wrap;gap:8px 20px;max-width:760px;margin:24px 4px 0;animation:cx-in .5s 1s both}
.cx-deeper a{color:var(--gold-soft);font-weight:500;text-decoration:none;font-size:17px}
.cx-deeper a:hover{text-decoration:underline}
.cx-deeper .cx-link{margin-left:auto}

/* help */
.cx-help{max-width:640px;animation:cx-in .5s both}
.cx-lines{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.cx-lines li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--r-m);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cx-lines strong{font-size:22px;color:#fff;font-weight:600}
.cx-lines span{color:#BCD3CF;user-select:all}
.cx-lines a,.cx-small a{color:var(--gold-soft)}
.cx-small{color:#BCD3CF;font-size:17px;margin:0 0 24px}

/* saved */
.cx-saved{max-width:880px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 56px;color:#EAF4F1;background:var(--ink)}
.pg-consult .cx-saved{max-width:none}
.cx-saved h2{max-width:880px;margin:0 auto 14px;color:#fff;font-size:26.5px}
.cx-savelist{list-style:none;margin:0 auto;padding:0;display:grid;gap:8px;max-width:880px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cx-sit.slim{padding:14px 18px;font-size:18px;animation:none}
.pg-consult .foot{border-top-color:rgba(255,255,255,.12)}

@keyframes cx-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cx-rise{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:720px){
  .cx-tiles.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-tiles.five .cx-tile:last-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;min-height:0}
  .cx-tiles.five .cx-tile:last-child .cx-scene{width:48px;height:48px}
  .cx-tiles.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-tile{min-height:104px;padding:16px;font-size:18.5px}
  .cx-notes div{grid-template-columns:minmax(0,1fr);gap:2px}
  .cx-deeper .cx-link{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .cx-step,.cx-tile,.cx-sit,.cx-card,.cx-sa span,.cx-notes div,.cx-deeper,.cx-else,.cx-help{animation:none!important;transition:none!important;opacity:1;transform:none}
}

/* consult art: scenes and faces */
:root{--cx-tilefill:#20454A;--cx-feat:#0B3B40;--cx-drop:#CFEFF7}
.cx-scene{width:64px;height:64px;fill:none;stroke:var(--gold-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cx-scene .k{fill:var(--cx-tilefill);transition:fill .25s}
.cx-tile:hover .cx-scene .k{fill:#294D52}
.cx-scene .dot,.cx-scene .heart{fill:var(--gold);stroke:none}
.cx-scene .heart{transform-box:fill-box;transform-origin:center}
.cx-tile:hover .cx-scene .heart{animation:cx-beat 1s ease-in-out infinite}
.cx-scene .glow{opacity:.45;transition:opacity .3s}
.cx-tile:hover .cx-scene .glow{opacity:1}
.cx-face{width:64px;height:64px;overflow:visible;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--fc) 45%,transparent))}
.cx-face .disc{fill:var(--fc);stroke:none}
.cx-face path,.cx-face ellipse,.cx-face circle:not(.disc){fill:none;stroke:var(--cx-feat);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cx-face g.ey circle{fill:var(--cx-feat);stroke:none}
.f-afraid .cx-face g.ey circle{fill:#F7FAF9;stroke:var(--cx-feat);stroke-width:1.8}
.f-afraid .cx-face g.ey circle.pu{fill:var(--cx-feat);stroke:none}
.cx-face ellipse{fill:var(--cx-feat)}
.cx-face .lid{fill:var(--cx-feat);stroke-width:1.6}
.cx-face .sweat,.cx-face .tear{fill:var(--cx-drop);stroke-width:1.3}
.cx-face .ey,.cx-face .br,.cx-face .sweat,.cx-face .tear,.cx-face .loop,.cx-face .pu{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cx-face .ey{animation:cx-blink 5.5s calc(var(--i,0)*.7s + 1s) infinite}
.f-stuck .cx-face .ey{animation:none}
.cx-tile.f-angry:hover .br{transform:translateY(1.5px)}
.cx-tile.f-afraid:hover .ey{transform:scale(1.12)}
.cx-tile.f-afraid:hover .br{transform:translateY(-2px)}
.cx-tile.f-anxious:hover .sweat{animation:cx-drip 1.2s ease-in infinite}
.cx-tile.f-anxious:hover .br{transform:translateY(-1px)}
.cx-tile.f-low:hover .ey,.cx-tile.f-hurt:hover .ey{transform:translateY(1.5px)}
.cx-tile.f-hurt:hover .tear{animation:cx-drip 1.6s ease-in infinite}
.cx-tile.f-stuck:hover .loop{animation:cx-spin 2.4s linear infinite}
.cx-tile.feel:hover .cx-face{transform:rotate(-4deg);transition:transform .3s}
@keyframes cx-blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes cx-drip{0%{transform:translateY(0);opacity:1}80%{transform:translateY(9px);opacity:0}100%{opacity:0}}
@keyframes cx-spin{to{transform:rotate(360deg)}}
@keyframes cx-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.cx-face *,.cx-scene *{animation:none!important}}

/* full-card scenes for who is asking */
.cx-tile.art{position:relative;overflow:hidden;padding:0;min-height:220px;justify-content:flex-end;border-color:rgba(255,255,255,.14)}
.cx-tile.art .cx-art{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cx-tile.art::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(to top,rgba(6,24,27,.82),rgba(6,24,27,0));pointer-events:none}
.cx-tile.art span{position:relative;z-index:1;padding:16px 18px;color:#fff;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.cx-tile.art:hover .cx-art{transform:scale(1.06)}
.cx-tile.art:hover{border-color:var(--gold)}
.a-student{background:#26346B}.a-work{background:#2F6F73}.a-family{background:#9E4F3A}.a-love{background:#5B4A8E}
.a-me{background:#4F7F6E}
.cx-art .tw{animation:cx-tw 3s ease-in-out infinite}.cx-art .t2{animation-delay:1s}.cx-art .t3{animation-delay:2s}
.cx-art .glow{animation:cx-glow 4s ease-in-out infinite}
.cx-art .steam{animation:cx-steam 2.6s ease-in-out infinite}
.cx-art .float{transform-box:fill-box;transform-origin:center;animation:cx-float 3.2s ease-in-out infinite}
.cx-art .cloud{animation:cx-cloud 9s ease-in-out infinite alternate}
.cx-art .sun{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cx-tile.art:hover .sun{transform:translateY(-6px)}
.cx-art .bird{animation:cx-cloud 7s ease-in-out infinite alternate}
@keyframes cx-tw{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes cx-glow{0%,100%{opacity:.16}50%{opacity:.3}}
@keyframes cx-steam{0%{transform:translateY(2px);opacity:0}40%{opacity:.7}100%{transform:translateY(-6px);opacity:0}}
@keyframes cx-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.06)}}
@keyframes cx-cloud{from{transform:translateX(0)}to{transform:translateX(8px)}}
@media (max-width:720px){
  .cx-tile.art{min-height:190px}
  .cx-tiles.five .cx-tile.art:last-child{min-height:160px;flex-direction:column;align-items:flex-start;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.cx-art *{animation:none!important}}

/* feeling cards v2: face beside label and a topic line, tinted by the feeling */
.cx-tile.feel{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;min-height:0;padding:18px 20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--fc) 16%,transparent),rgba(255,255,255,.03) 70%);border-color:color-mix(in srgb,var(--fc) 30%,rgba(255,255,255,.1))}
.cx-tile.feel:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--fc) 26%,transparent),rgba(255,255,255,.05) 70%)}
.cx-tile.feel .cx-face{flex:none;width:72px;height:72px}
.cx-tile.feel .ft{display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-tile.feel .ft b{font:600 23px/1.15 var(--ui);color:#fff}
.cx-tile.feel .ft small{font:400 16px/1.35 var(--ui);color:#BCD3CF}
.cx-tile.feel.slim{padding:12px 16px}
.cx-tile.feel.slim .cx-face{width:48px;height:48px}
.cx-tile.feel.slim .ft small{display:none}
@media (max-width:720px){
  .cx-tiles.six{grid-template-columns:minmax(0,1fr)}
  .cx-tiles.six .cx-tile.feel{min-height:0;padding:14px 16px}
  .cx-tile.feel .cx-face{width:58px;height:58px}
  .cx-tiles.six:has(.slim){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* wide screens: use the width, keep each text column at a reading measure */
@media (min-width:1000px){
  .cx-stage{max-width:1200px}
  .cx-saved h2,.cx-savelist{max-width:1200px}
  .cx{padding-top:clamp(20px,3vw,40px)}
  .cx-tile.art{min-height:250px}
  .cx-sits{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-sits .cx-else{grid-column:1/-1}
  .cx-write{max-width:760px}
  .cx-card{max-width:none;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);padding:0;overflow:hidden}
  .cx-l{padding:44px 48px;background:var(--tint);border-right:1px solid var(--line)}
  .cx-r{padding:36px 44px 32px;align-self:start}
  .cx-l .cx-en{margin-bottom:0}
  .cx-sa{font-size:clamp(26px,2.3vw,32px)}
  .cx-notes{border-top:0}
  .cx-notes div{grid-template-columns:110px minmax(0,1fr)}
  .cx-notes div:first-child{padding-top:4px}
  .cx-deeper{max-width:none}
}
.cx{scroll-margin-top:72px}

/* text size control */
main{zoom:var(--zoom,1)}
.nav-size{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:none;color:#CFE3DF;cursor:pointer;font:600 18.5px/1 var(--ui)}
.nav-size small{font-size:13px;margin-left:1px}
.nav-size:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-size.on{background:var(--gold-soft);color:#0B3B40}
.cx-tl{margin:-2px 0 10px;font:italic 400 17px/1.55 var(--ui);color:var(--muted)}
.self-mark{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 0}
.self-mark .hint{margin:0}

/* easier reading: larger type and a pronunciation line wherever Sanskrit appears */
body{font-size:19px}
.tl{font:400 clamp(19px,2.1vw,23px)/1.65 var(--ui);color:var(--text);opacity:.86;letter-spacing:.005em}
.tl-k,.cx-tl .tl-k{display:block;font:600 12.5px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cx-acc,var(--field));opacity:1;margin-bottom:4px}
.vtl{display:block;font:400 18px/1.55 var(--ui);color:var(--muted);margin:2px 0 8px}
.vrow .vtl{grid-column:2;margin:2px 0 4px}
.vsa{font-size:24px}
.ven{font-size:18.5px}
.fcard .vsa{font-size:26.5px}
.sa{font-size:clamp(30px,4.2vw,46px)}
.pv{font-size:clamp(28px,3.8vw,42px)}
.hv-tl{font:400 clamp(16px,1.4vw,19px)/1.6 var(--ui);color:#BCD3CF;margin:-8px 0 18px}
.cx-tl{font:400 20px/1.6 var(--ui);color:var(--text);opacity:.86;margin:0 0 12px}
.cx-sa{font-size:clamp(26px,3.2vw,34px)}
.cx-en{font-size:clamp(20px,2.2vw,23px)}
.cx-notes dd{font-size:20px}

.vrow a>*{min-width:0}.vtl,.vsa,.tl,.cx-tl{overflow-wrap:anywhere}

/* one type system: serif only for page headings, the wordmark and Sanskrit; everything else in the sans */
h1,h2{font-family:var(--sa)}
h3{font-family:var(--ui);font-weight:600;letter-spacing:0;line-height:1.3}
.tname{font-weight:600;font-size:20px}
.tnum,.cnum,.vm-num{font-weight:600;font-variant-numeric:tabular-nums}
.tnum{font-size:18.5px}
.sits.big .sit,.jtitle{font-weight:600}
.w-sa,.c-iast{font-style:italic;font-weight:500}
.verdict{font-weight:600}

/* themes: twenty cards, all above the fold */
.pg-themes main{background:var(--ink)}
.th-stage{max-width:1240px;margin:0 auto;padding:clamp(20px,3vw,36px) max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));color:#EAF4F1}
.th-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:22px}
.th-head h1{font-size:clamp(34px,3.6vw,52px);color:#fff;margin:0 0 6px}
.th-head .lede{margin:0;color:#BCD3CF;font-size:19px}
.th-head .v-actions{margin:0}
.btn.ghost.on-dark{color:#EAF4F1;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn.ghost.on-dark:hover{box-shadow:inset 0 0 0 1.5px var(--gold-soft)}
.tc2-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.band .tc2-grid{margin-top:8px}
.tc2{--h:#2F8F8A;position:relative;display:flex;flex-direction:column;min-height:148px;padding:16px 18px 18px;border-radius:var(--r-l);text-decoration:none;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--h) 42%,transparent),transparent 60%),linear-gradient(160deg,#123F45,#0C2F34);
  border:1px solid color-mix(in srgb,var(--h) 35%,rgba(255,255,255,.08));box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 28px -18px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;animation:cx-in .5s calc(var(--i)*25ms) both cubic-bezier(.2,.8,.2,1)}
.tc2.h0{--h:#2FA39B}.tc2.h1{--h:#4B63C9}.tc2.h2{--h:#C9A227}.tc2.h3{--h:#3E9E6A}.tc2.h4{--h:#8A6FD1}
.tc2:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--h) 75%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 22px 40px -20px rgba(0,0,0,.85)}
.tc2-n{font:600 13px/1 var(--ui);letter-spacing:.12em;color:color-mix(in srgb,var(--h) 55%,#fff);font-variant-numeric:tabular-nums}
.tc2-sa{margin-top:auto;font-size:clamp(24px,2vw,30px);line-height:1.25;color:var(--gold-soft);transition:text-shadow .3s}
.tc2:hover .tc2-sa{text-shadow:0 0 18px rgba(233,213,138,.55)}
.tc2-tl{font:italic 400 13.5px/1.3 var(--ui);color:#9DB6B3;margin:2px 0 8px}
.tc2-name{font:600 18px/1.25 var(--ui);color:#fff;text-wrap:balance}
.tc2-bar{position:absolute;left:18px;right:18px;bottom:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);opacity:0;transition:opacity .3s}
.tc2-bar i{display:block;height:100%;width:var(--p,0%);border-radius:3px;background:var(--gold)}
.tc2.started .tc2-bar{opacity:1}
.tc2.done::after{content:"";position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231A1608' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.th-stage .credit{color:#9DB6B3;margin:18px 0 0;font-size:14px}
.th-stage .credit a{color:var(--gold-soft)}
@media (max-width:1100px){.tc2-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.tc2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tc2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tc2{min-height:132px;padding:14px}.tc2-name{font-size:16.5px}}
@media (prefers-reduced-motion:reduce){.tc2{animation:none;transition:none}}
.tc2{min-height:134px;padding:14px 18px 16px}
.tc2-sa{margin-top:8px;font-size:clamp(22px,1.8vw,27px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc2-tl{margin:1px 0 0}
.tc2-name{margin-top:auto;padding-top:8px}
.th-head{margin-bottom:16px}
.th-head h1{font-size:clamp(32px,3.2vw,46px)}

/* =========================================================
   Redesign (Option B): one modern font, light reading pages,
   a living sky on the home page.
   ========================================================= */
:root{--ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --page:#F6F8F7;--paper:#FFFFFF;--text:#17292C;--muted:#4C6164;--line:#E1E8E6;--tint:#EEF4F2;--cx-acc:#0F5257;--nav-fg:#3E5356;--nav-on:#E4EFEC}
@media (prefers-color-scheme: dark){:root{--page:#0B1A1E;--paper:#112529;--text:#E6EFED;--muted:#A3B8B5;--line:#21383C;--tint:#15302F;--cx-acc:#7FC4BA;--nav-fg:#C3D4D1;--nav-on:#1B3A3D}}
body{font-family:var(--ui)}
h1,h2,h3{font-family:var(--ui);font-weight:700;letter-spacing:-.02em;line-height:1.12}
h3{font-weight:600;letter-spacing:-.01em}
.top{background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--text);border-bottom:1px solid var(--line);padding-block:10px}
.brand{font:700 24px/1 var(--ui);letter-spacing:-.01em}
.nav{gap:6px}
.nav a{color:var(--nav-fg);font-weight:500;padding:9px 16px}
.nav a:hover{color:var(--text);background:var(--tint)}
.nav a[aria-current="page"]{color:var(--cx-acc);background:var(--nav-on)}
.nav-search,.nav-size{color:var(--nav-fg)}
.nav-search:hover,.nav-size:hover{background:var(--tint);color:var(--text)}
.nav-size.on{background:var(--nav-on);color:var(--cx-acc)}
.btn{background:var(--field);color:#fff;box-shadow:0 8px 20px -12px rgba(15,82,87,.7)}
.btn:hover{background:#0B4247}
.btn.ghost{background:transparent;color:var(--cx-acc);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cx-acc)}
@media (prefers-color-scheme: dark){.btn{background:#7FC4BA;color:#0B1A1E}.btn:hover{background:#9AD3CA}}
.sa,.hv-sa,.pv,.vsa,.cx-sa,.jsa{font-family:var(--sa)}

/* ---- home: the living sky ---- */
.pg-home .top{position:absolute;left:0;right:0;background:transparent;border-bottom:0;backdrop-filter:none}
.pg-home .foot{display:none}
.sky{--s1:#FFF4E6;--s2:#FCE3CC;--s3:#F7CBB0;--h1:#E8B49A;--h2:#C9927F;--sun:#FFD08A;--halo:#FFE3B3;--ink2:#1E2B3A;--sub:#4E5A66;
  --glass:rgba(255,255,255,.72);--gb:rgba(255,255,255,.9);--chip:rgba(255,255,255,.66);--chipb:rgba(30,43,58,.12);--acc:#0F5257;--track:rgba(30,43,58,.12);--star:0;--moon:0;--sunv:1;
  position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;color:var(--ink2);
  background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 48%,var(--s3) 100%)}
html[data-sky="day"] .sky{--s1:#F2F8FA;--s2:#DDEEF2;--s3:#C8E2E6;--h1:#9CC8C0;--h2:#6FA9A0;--sun:#FFF1C9;--halo:#FFFFFF;--sub:#4A5E66}
html[data-sky="evening"] .sky{--s1:#4B4E8F;--s2:#9C6E9C;--s3:#F0A98A;--h1:#6B5A8E;--h2:#463F72;--sun:#FFB98A;--halo:#FFC9A0;--ink2:#FFFFFF;--sub:#F4E7EE;
  --glass:rgba(255,255,255,.16);--gb:rgba(255,255,255,.32);--chip:rgba(255,255,255,.14);--chipb:rgba(255,255,255,.38);--acc:#FFE3A8;--track:rgba(255,255,255,.22);--star:.7}
html[data-sky="night"] .sky{--s1:#0A1230;--s2:#142352;--s3:#1E3466;--h1:#1A3A5C;--h2:#0F2A44;--ink2:#FFFFFF;--sub:#C7D1EA;
  --glass:rgba(255,255,255,.08);--gb:rgba(255,255,255,.18);--chip:rgba(255,255,255,.08);--chipb:rgba(255,255,255,.24);--acc:#E9D58A;--track:rgba(255,255,255,.18);--star:1;--moon:1;--sunv:0}
html[data-sky="evening"] .pg-home .top,html[data-sky="night"] .pg-home .top{--nav-fg:#E7EDF8;--text:#FFFFFF;--nav-on:rgba(255,255,255,.18);--cx-acc:#FFFFFF;--tint:rgba(255,255,255,.12)}
html[data-sky="morning"] .pg-home .top,html[data-sky="day"] .pg-home .top{--nav-fg:#2C3A48;--text:#1E2B3A;--nav-on:rgba(255,255,255,.75);--cx-acc:#0F5257;--tint:rgba(255,255,255,.6)}
.pg-home .top{color:var(--text)}
.sky-art{position:absolute;inset:0;width:100%;height:100%}
.sky-stars circle{fill:#fff;opacity:var(--star)}
.sky-stars circle:nth-child(3n){animation:sky-tw 4s ease-in-out infinite}
.sky-stars circle:nth-child(3n+1){animation:sky-tw 5.5s 1.2s ease-in-out infinite}
.sky-sun{opacity:var(--sunv)}.sky-sun .disc{fill:var(--sun)}.sky-sun .halo{fill:var(--halo);opacity:.55}
.sky-moon{opacity:var(--moon)}.sky-moon .disc{fill:#F4ECD2}.sky-moon .halo{fill:#F4ECD2;opacity:.12}.sky-moon .bite{fill:var(--s2)}
.hill1{fill:var(--h1)}.hill2{fill:var(--h2)}
.sky-sun{animation:sky-rise 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes sky-rise{from{transform:translateY(40px);opacity:0}to{transform:none}}
@keyframes sky-tw{0%,100%{opacity:calc(var(--star) * .35)}50%{opacity:var(--star)}}
.sky-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
  padding:clamp(120px,17vh,170px) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.sky-greet{margin:0;font-size:20px;font-weight:600;color:var(--sub)}
.sky h1{margin:0;font-size:clamp(42px,5.4vw,72px);line-height:1.04;letter-spacing:-.03em;color:var(--ink2);text-wrap:balance}
.sky-ask{margin-top:14px;width:min(720px,100%);height:70px;display:flex;align-items:center;gap:12px;padding:0 9px 0 26px;background:#fff;border-radius:22px;
  box-shadow:0 2px 4px rgba(10,18,48,.08),0 24px 60px -24px rgba(10,18,48,.55)}
.sky-ask input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:400 19px var(--ui);color:#1E2B3A}
.sky-ask input::placeholder{color:#6A7480}
.sky-ask button{flex:none;width:52px;height:52px;border-radius:15px;border:0;background:#1E2B3A;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s}
html[data-sky="morning"] .sky-ask button,html[data-sky="day"] .sky-ask button{background:#0F5257}
.sky-ask button:hover{transform:scale(1.05)}
.sky-ask:focus-within{box-shadow:0 0 0 3px var(--acc),0 24px 60px -24px rgba(10,18,48,.55)}
.sky-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sky-chip{padding:11px 20px;border-radius:999px;background:var(--chip);border:1px solid var(--chipb);color:var(--ink2);font-size:16.5px;font-weight:500;text-decoration:none;backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.sky-chip:hover{background:var(--gb);transform:translateY(-2px)}
.sky-cards{position:relative;z-index:1;margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:min(1120px,100%);align-self:center;
  padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));box-sizing:border-box}
.sky-card{padding:22px 28px;border-radius:22px;background:var(--glass);border:1px solid var(--gb);color:var(--ink2);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:8px;min-width:0}
.sky-k{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--sub)}
.sky-q{margin:0;font-size:19px;line-height:1.45;font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sky-ref{margin:0;font-size:15.5px}.sky-ref a,.sky-go{color:var(--ink2);font-weight:700}
.sky-t{margin:0;font-size:22px;font-weight:700}
.sky-prog{display:flex;align-items:center;gap:16px;margin-top:auto}
.sky-bar{flex:1;height:7px;border-radius:7px;background:var(--track);overflow:hidden}.sky-bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:7px}
@media (max-width:760px){.sky{min-height:0}.sky-in{padding-top:120px}.sky-cards{grid-template-columns:minmax(0,1fr);margin-top:24px}.sky-ask{height:62px;padding-left:18px}.sky-ask input{font-size:17px}}
@media (prefers-reduced-motion:reduce){.sky-sun,.sky-stars circle{animation:none!important}}

/* ---- Learn: 20 English theme cards ---- */
.pg-themes main{background:var(--page)}
.th-stage{color:var(--text)}
.th-head h1{color:var(--text)}
.th-head .lede{color:var(--muted)}
.th-stage .credit{color:var(--muted)}.th-stage .credit a{color:var(--cx-acc)}
.tc3-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tc3{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:124px;padding:18px 20px;border-radius:18px;background:var(--paper);border:1.5px solid var(--line);
  color:var(--text);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;animation:cx-in .45s calc(var(--i)*20ms) both}
.tc3:hover{transform:translateY(-3px);border-color:var(--cx-acc);box-shadow:0 18px 36px -24px rgba(15,82,87,.55)}
.tc3-top{display:flex;flex-direction:column;gap:6px}
.tc3-n{font-size:14px;font-weight:600;color:var(--muted)}
.tc3-name{font-size:20px;line-height:1.25;font-weight:600;text-wrap:balance}
.tc3-st{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.tc3.started{border-color:var(--cx-acc)}.tc3.started .tc3-st{color:var(--cx-acc);font-weight:600}
.tc3.done .tc3-st{color:var(--cx-acc);font-weight:600}
.tc3-bar{width:60px;height:6px;border-radius:6px;background:var(--tint);overflow:hidden}.tc3-bar i{display:block;height:100%;background:var(--cx-acc)}
@media (max-width:1100px){.tc3-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.tc3-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tc3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tc3{min-height:112px;padding:14px}.tc3-name{font-size:17px}}

/* ---- Explore ---- */
.ex-head{max-width:1120px;margin:0 auto;padding:44px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.ex-head h1{font-size:clamp(34px,3.6vw,48px);margin:0 0 8px}.ex-head .lede{color:var(--muted);margin:0}
.ex-grid{max-width:1120px;margin:20px auto 0;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ex-card{display:flex;flex-direction:column;gap:8px;padding:24px 26px;border-radius:20px;background:var(--paper);border:1.5px solid var(--line);text-decoration:none;color:var(--text);transition:transform .25s,border-color .25s}
.ex-card:hover{transform:translateY(-3px);border-color:var(--cx-acc)}
.ex-t{font-size:22px;font-weight:700}.ex-d{color:var(--muted);font-size:17px}

/* ---- Ask: light ground, English first ---- */
.pg-consult main,.cx,.cx-saved{background:var(--page);color:var(--text)}
.cx-h{color:var(--text)}.cx-q{color:var(--muted)}.cx-q a{color:var(--cx-acc)}
.cx-kicker{color:var(--cx-acc)}
.cx-back{color:var(--cx-acc)}.cx-back:hover{color:var(--text)}
.cx-dots li{background:var(--line)}.cx-dots li.done{background:color-mix(in srgb,var(--cx-acc) 45%,var(--line))}.cx-dots li.on{background:var(--cx-acc)}
.cx-tile{color:var(--text);background:var(--paper);border-color:var(--line);box-shadow:0 10px 30px -24px rgba(15,82,87,.5)}
.cx-tile:hover{background:var(--paper);border-color:var(--cx-acc)}
.cx-tile.art span{color:#fff}
.cx-tile.feel{background:linear-gradient(135deg,color-mix(in srgb,var(--fc) 16%,var(--paper)),var(--paper) 72%);border-color:color-mix(in srgb,var(--fc) 35%,var(--line))}
.cx-tile.feel:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--fc) 26%,var(--paper)),var(--paper) 72%)}
.cx-tile.feel .ft b{color:var(--text)}.cx-tile.feel .ft small{color:var(--muted)}
.cx-sit{background:var(--paper);border-color:var(--line);color:var(--text)}
.cx-sit:hover{background:var(--paper);border-color:var(--cx-acc)}.cx-sit svg{color:var(--cx-acc)}
.cx-else{border-color:var(--line)}.cx-else summary{color:var(--muted)}
.cx-write{background:var(--paper);border-color:var(--line)}
.cx-write:focus-within{border-color:var(--cx-acc);background:var(--paper)}
.cx-write input{color:var(--text)}.cx-write input::placeholder{color:var(--muted)}
.cx-write button{background:var(--field);color:#fff}
.cx-link{color:var(--muted)}.cx-link:hover{color:var(--text)}
.cx-lines li{background:var(--paper);border-color:var(--line)}.cx-lines strong{color:var(--text)}.cx-lines span{color:var(--muted)}
.cx-lines a,.cx-small a{color:var(--cx-acc)}.cx-small{color:var(--muted)}
.cx-deeper a{color:var(--cx-acc)}
.cx-saved h2{color:var(--text)}
.cx-card{box-shadow:0 24px 60px -34px rgba(15,82,87,.45);border:1px solid var(--line)}
.cx-for{color:var(--cx-acc)}
.cx-en{font:500 clamp(22px,2.3vw,29px)/1.42 var(--ui);letter-spacing:-.01em;margin:0 0 14px;max-width:none}
.cx-ref{font-size:15.5px;color:var(--muted);margin:0 0 18px}.cx-ref a{color:var(--muted)}
.cx-sk summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:500 15.5px var(--ui);color:var(--text)}
.cx-sk summary::-webkit-details-marker{display:none}
.cx-sk summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.cx-sk[open] summary::after{transform:rotate(-135deg)}
.cx-sk[open] summary{margin-bottom:16px}
.cx-sk .cx-sa{color:var(--cx-sa)}
/* choices read best as one list: no orphaned card, whatever the count */
@media (min-width:1000px){.cx-sits{grid-template-columns:minmax(0,1fr)!important;max-width:760px}}
.cx-step.s-pick{max-width:760px;margin-inline:auto}

/* commentaries: folded away by default */
.cm-fold{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:0}
.cm-fold summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative}
.cm-fold summary::-webkit-details-marker{display:none}
.cm-fold summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.cm-fold[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.cm-sum-t{font:600 20px/1.3 var(--ui);color:var(--text)}
.cm-sum-d{font-size:15.5px;color:var(--muted)}
.cm-fold .cm-body{padding-bottom:24px}

/* =========================================================
   The sacred layer: the chariot wheel, Krishna's words in serif,
   a breath before the answer, a lamp for each verse learned.
   ========================================================= */
:root{--verse:"Newsreader", Georgia, "Times New Roman", serif;--saffron:#C98A2E;--ks:#8A6A1E}
@media (prefers-color-scheme: dark){:root{--ks:#E9D58A}}
/* the wheel rising as the sun */
.wheel .wd{fill:var(--wd)}.wheel .wk{fill:var(--wk)}.wheel .ws{fill:var(--ws)}.wheel .wr{fill:none;stroke:var(--wk)}
.wheel .wg{fill:var(--wg)}.wheel .wg1{opacity:.28}.wheel .wg2{opacity:.35}
.wheel{opacity:var(--wo,1)}
.sky{--wd:#FFC978;--wk:#D98A3A;--ws:#FBE3B4;--wg:#FFD9A0}
html[data-sky="day"] .sky{--wd:#FFE7AE;--wk:#E0A64E;--ws:#FFF3D6;--wg:#FFF3D6}
html[data-sky="evening"] .sky{--wd:#FFB27A;--wk:#C0663A;--ws:#FFD9B3;--wg:#FFC9A0}
html[data-sky="night"] .sky{--wd:#22356A;--wk:#DCD5BC;--ws:#F4ECD2;--wg:#2F4478;--wo:.72}
.wspin{animation:wheel-turn 240s linear infinite}
@keyframes wheel-turn{to{transform:rotate(360deg)}}
.wheel{animation:sky-rise 2.6s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.wspin,.wheel{animation:none!important}}
/* home cards */
.sky-k{display:flex;align-items:center;gap:10px}
.sky-tod .sky-k span{color:var(--acc-k,#8A6A1E)}
html[data-sky="evening"] .sky,html[data-sky="night"] .sky{--acc-k:#F2DFA0}
.sky-q{font-family:var(--verse);font-size:20.5px;font-weight:400}
.sky-lamps{display:flex;align-items:flex-end;gap:3px;color:var(--ink2)}
.sky-lamps .diya{width:26px;height:30px}
.sky-note{flex:1;font-size:15px;color:var(--sub)}
.sky-bar{display:none}
.sky.journey .sky-cards .sky-learn{order:-1}
/* Krishna says */
.feather{flex:none}
.cx-ks{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ks)}
.cx-rule{display:block;width:64px;height:2px;background:#C9A227;margin:0 0 18px}
.cx-en{font-family:var(--verse);font-weight:400;font-size:clamp(23px,2.4vw,31px);line-height:1.4;letter-spacing:0}
@media (min-width:1000px){.cx-l{background:linear-gradient(165deg,#FFF7EC 0%,#FDF0E3 55%,var(--paper) 100%)}}
@media (min-width:1000px) and (prefers-color-scheme: dark){.cx-l{background:linear-gradient(165deg,#1F2A2A 0%,#182826 60%,var(--paper) 100%)}}
.cx-for{margin-bottom:16px}
.cx-nl{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--muted)}
/* Krishna's words in serif wherever they appear */
.tr-text,.fcard .ven,.vrow .ven,.ven{font-family:var(--verse)}
/* the breath before an answer */
.cx-breath{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:40px 0 60px}
.cx-rings{position:relative;width:300px;height:300px;display:grid;place-items:center}
.cx-rings i{position:absolute;border-radius:50%;border:1.5px solid rgba(201,162,39,.28);animation:breathe 4s ease-in-out infinite}
.cx-rings i:nth-child(1){inset:0}.cx-rings i:nth-child(2){inset:42px;animation-delay:.25s}.cx-rings i:nth-child(3){inset:84px;background:rgba(255,200,107,.18);border:0;animation-delay:.5s}
.cx-bdiya{position:relative}
.cx-bdiya .fl{transform-box:fill-box;transform-origin:50% 100%;animation:flame 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.04);opacity:1}}
@keyframes flame{0%,100%{transform:scaleY(1) skewX(0)}50%{transform:scaleY(1.08) skewX(-3deg)}}
.cx-breath .cx-h{font-size:clamp(30px,3.4vw,44px);margin:0}
.cx-bq{margin:0;font-family:var(--verse);font-size:22px;color:var(--muted)}
/* a lamp for each verse */
.diya{width:22px;height:26px;flex:none}
.tc3-st .lamps{display:flex;align-items:flex-end;gap:2px;color:var(--muted)}
.tc3.done{background:linear-gradient(170deg,#FFF8EE,var(--paper) 70%);border-color:#E8D7BE}
.tc3.done .tc3-st{color:#8A5A2B}
@media (prefers-color-scheme: dark){.tc3.done{background:linear-gradient(170deg,#24261E,var(--paper) 70%);border-color:#4A4230}.tc3.done .tc3-st{color:#E9C98A}}
.th-head .lede{font-family:var(--verse);font-size:21px}

/* home cards: the whole card is the link, and hovering lights the lamps */
.sky-card{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s}
.sky-hit::after{content:"";position:absolute;inset:0;border-radius:22px}
.sky-hit:focus-visible{outline:none}
.sky-card:has(.sky-hit:focus-visible){box-shadow:0 0 0 3px var(--acc)}
.sky-card:hover{transform:translateY(-5px);background:var(--gb);box-shadow:0 0 0 1.5px rgba(233,190,90,.75),0 26px 60px -24px rgba(240,160,60,.65)}
.diya.off .b,.diya.off .b2{fill:currentColor;opacity:.28;transition:fill .4s,opacity .4s}
.diya.off .r{stroke:currentColor;opacity:.4;transition:stroke .4s,opacity .4s}
.diya.off .wick{opacity:.55}
.diya.off .fl{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.2);transition:opacity .35s,transform .45s cubic-bezier(.2,1.6,.4,1)}
.diya.off circle.fl{transform-origin:50% 50%}
.sky-learn:hover .diya.off .fl,.tc3:hover .diya.off .fl{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 110ms)}
.sky-learn:hover .diya.off circle.fl,.tc3:hover .diya.off circle.fl{opacity:.3}
.sky-learn:hover .diya.off .b,.sky-learn:hover .diya.off .b2,.tc3:hover .diya.off .b,.tc3:hover .diya.off .b2{fill:#B5653E;opacity:1;transition-delay:calc(var(--k,0) * 110ms)}
.sky-learn:hover .diya.off .r,.tc3:hover .diya.off .r{stroke:#8C4A2B;opacity:1;transition-delay:calc(var(--k,0) * 110ms)}
.sky-learn:hover .sky-go{text-decoration:underline;text-underline-offset:4px}
.sky-tod:hover .feather{animation:feather-sway 1.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes feather-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.sky-card,.diya *{transition:none!important}.sky-tod:hover .feather{animation:none}}

/* wide screens: theme, chapter, verse and practice pages use more of the width, with larger type */
@media (min-width:1200px){
  .ch-head,.vlist,.flist,.verse{max-width:1040px}
  .ch-head h1{font-size:clamp(44px,4.4vw,64px)}
  .ch-head .lede{font-size:22px}
  .flist .fcard .vsa{font-size:34px;line-height:1.5}
  .flist .fcard .vtl{font-size:19px}
  .flist .fcard .ven{font-size:24px;line-height:1.55}
  .flist .fcard .vnum,.flist .fcard .vid{font-size:17px}
  .vrow .vsa{font-size:26px}.vrow .vtl{font-size:17.5px}.vrow .ven{font-size:20px}
  .pg-verse .sa{font-size:clamp(42px,3.6vw,56px)}
  .pg-verse .tl{font-size:24px}
  .tr-text{font-size:24px;line-height:1.6}
}
@media (min-width:1200px){
  .ch-head,.vlist,.flist,.verse{max-width:1120px}
  .ch-head .lede{font-size:23px}
  .flist .fcard .vsa{font-size:38px}
  .flist .fcard .vtl{font-size:20px;line-height:1.6}
  .flist .fcard .ven{font-size:26px}
  .flist .fcard .vnum{font-size:18px}
}

/* wide screens: two columns that give the space a job */
.tp-list{list-style:none;margin:20px 0 22px;padding:0;display:flex;flex-direction:column;gap:2px}
.tp-list a{display:grid;grid-template-columns:28px 48px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--text)}
.tp-list a:hover{background:var(--tint)}
.tp-list .diya{width:24px;height:28px;color:var(--muted)}
.tp-list .tr-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--cx-acc)}
.tp-list .tr-t{font-family:var(--verse);font-size:16.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-list li.learned .tr-t{color:var(--text)}
.tp-list a:hover .diya.off .fl{opacity:1;transform:none}.tp-list a:hover .diya.off circle.fl{opacity:.3}
.tp-list a:hover .diya.off .b,.tp-list a:hover .diya.off .b2{fill:#B5653E;opacity:1}.tp-list a:hover .diya.off .r{stroke:#8C4A2B;opacity:1}
.tp-rail{max-width:1120px;margin:0 auto;padding:40px clamp(16px,4vw,32px) 8px}
.tp-rail h1{font-size:clamp(36px,4vw,52px);margin:6px 0 10px}
.tp-rail .lede{color:var(--muted);margin:0}
.tp-rail .vnav{margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15.5px}
@media (min-width:1100px){
  .tp{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px;max-width:1440px;margin:0 auto;padding:0 clamp(24px,4vw,64px)}
  .tp-rail{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow:auto;margin:0;padding:40px 0 24px}
  .tp-rail h1{font-size:clamp(34px,2.6vw,44px)}
  .tp-main{max-width:none;margin:28px 0 0;padding:0}
  .tp-main .fcard:first-child{padding-top:12px}
  .tp-rail .vnav a[rel]{display:block}
}
@media (min-width:1200px){
  .pg-verse:not(.pg-practice) .verse{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;max-width:1440px;padding:0 clamp(24px,4vw,64px)}
  .pg-verse:not(.pg-practice) .verse>*{grid-column:1;min-width:0}
  .pg-verse:not(.pg-practice) .verse>.v-rail{grid-column:2;grid-row:1 / span 30;align-self:start;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding:24px 4px 24px 0}
  .v-rail .v-sec{margin-top:16px}
  .v-rail .vnav{flex-direction:column;align-items:stretch;gap:8px}
}

/* theme page: one verse at a time */
.tp.focus .tp-main .fcard{border-bottom:0}
.tp.focus .tp-main .fcard.in{animation:cx-in .45s cubic-bezier(.2,.8,.2,1) both}
.tp-list li.on a{background:var(--nav-on)}
.tp-list li.on .tr-n{color:var(--text)}
.tp-list li.on .tr-t{color:var(--text)}
.tp-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
@media (min-width:1100px){
  .tp.focus .tp-main{margin-top:56px}
  .tp.focus .tp-main .fcard .vnum{font-size:20px}
  .tp.focus .tp-main .fcard .vsa{font-size:clamp(38px,3.2vw,48px);line-height:1.5}
  .tp.focus .tp-main .fcard .vtl{font-size:21px}
  .tp.focus .tp-main .fcard .ven{font-size:clamp(26px,2vw,30px);line-height:1.5}
  .tp.focus .tp-main .fcard .v-actions{margin-top:18px}
}

/* practice page: the verse on the left, listen, recite and progress on the right */
.p-en{font-family:var(--verse);font-size:21px;line-height:1.5;margin:14px 0 0;color:var(--text)}
.p-theme{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.p-tk{margin:0 0 6px;font-weight:600;font-size:15.5px}.p-tk a{color:var(--cx-acc);text-decoration:none}
.p-theme li.on a{background:var(--nav-on)}
@media (min-width:1100px){
  .practice{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:56px;max-width:1440px;margin:0 auto;padding:0 clamp(24px,4vw,64px) 48px}
  .practice>*{grid-column:2;min-width:0}
  .practice>.p-head{grid-column:1;grid-row:1 / span 10;align-self:start;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding:28px 4px 24px 0}
  .practice .psteps{display:flex;flex-direction:column;gap:16px;margin-top:40px}
  .practice .pstep{margin:0}
  .practice .pprog{margin-top:16px}
  .practice .pv{font-size:clamp(36px,3vw,48px);line-height:1.6}
  .practice .p-head h1{font-size:clamp(34px,2.8vw,46px)}
}
.tp-pager a.btn{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:999px;font-size:16px;font-weight:600;white-space:nowrap;text-decoration:none;grid-template-columns:none}
@media (min-width:1100px){.practice .pv{font-size:clamp(28px,2.3vw,38px);line-height:1.7;word-spacing:-.05em}}