/* AskTheGita Alive — Talk to the Rishi. Deep emerald + warm gold. */
@font-face{font-family:"Tiro Devanagari Sanskrit";src:url(fonts/tiro-devanagari-sanskrit-devanagari-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:500 700;font-display:swap}

:root{
  --em-950:#03130e; --em-900:#06231c; --em-800:#0a2f24; --em-700:#0f4030;
  --gold:#c9a24a; --gold-2:#e8c97a; --gold-dim:#8a6f2f;
  --cream:#f3e9d2; --cream-dim:#cfc3a5; --ink:#0a1f18;
  --panel:rgba(10,47,36,.72); --line:rgba(201,162,74,.35);
  --amp:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.talk{
  margin:0; color:var(--cream); background:
    radial-gradient(120% 60% at 50% -10%, #14503a 0%, transparent 55%),
    radial-gradient(90% 45% at 50% 115%, #0d3a29 0%, transparent 60%),
    linear-gradient(180deg, var(--em-900), var(--em-950) 70%);
  background-color:var(--em-950);
  font-family:Georgia, "Times New Roman", serif; font-size:17px; line-height:1.55;
  min-height:100vh;
}
body.talk::before{ /* faint temple mandala */
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1'%3E%3Ccircle cx='120' cy='120' r='110'/%3E%3Ccircle cx='120' cy='120' r='84'/%3E%3Ccircle cx='120' cy='120' r='40'/%3E%3Cpath d='M120 10v220M10 120h220M42 42l156 156M198 42L42 198'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.thead{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; background:rgba(3,19,14,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.tnav{color:var(--gold-2); text-decoration:none; font-size:.92rem; padding:6px 4px}
.ttitle{font-family:"Cormorant Garamond",Georgia,serif; font-weight:700; font-size:1.25rem; letter-spacing:.04em; color:var(--cream)}
.tmain{position:relative; z-index:1; max-width:680px; margin:0 auto; padding:14px 14px 30px}

/* ——— The Rishi stage ——— */
.stage{text-align:center; padding:8px 0 2px}
.halo{
  width:min(78vw,350px); aspect-ratio:1; margin:0 auto -46%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(232,201,122,.34) 0%, rgba(201,162,74,.12) 42%, transparent 68%);
  opacity:.55; transition:opacity .8s ease;
}
.arch{
  position:relative; width:min(72vw,320px); margin:0 auto; overflow:hidden;
  aspect-ratio:840/1041;
  border-radius:49% 49% 20px 20px / 36% 36% 20px 20px;
  border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.35);
  background:var(--em-800);
}
.arch img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:50% 42%;
  animation:breathe 5.6s ease-in-out infinite;
  transition:transform .7s ease, filter .9s ease;
}
@keyframes breathe{0%,100%{transform:scale(1) translate(var(--gx,0px),var(--gy,0px))}30%{transform:scale(1.014) translate(calc(1.6px + var(--gx,0px)),calc(-1.6px + var(--gy,0px)))}55%{transform:scale(1.008) translate(calc(-1.6px + var(--gx,0px)),calc(-.6px + var(--gy,0px)))}78%{transform:scale(1.016) translate(calc(.8px + var(--gx,0px)),calc(-2px + var(--gy,0px)))}}
.stage[data-state="listening"] .arch img{animation-play-state:paused; transform:scale(1.05) translate(var(--gx,0px),var(--gy,0px))}
.stage[data-state="listening"] .halo{opacity:.95}
.stage[data-state="thinking"] .arch img{animation:sway 4.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:scale(1.01) rotate(-.45deg) translate(var(--gx,0px),var(--gy,0px))}50%{transform:scale(1.01) rotate(.45deg) translate(var(--gx,0px),var(--gy,0px))}}
.stage[data-state="speaking"] .arch img{
  animation:none;
  transform:scale(calc(1.025 + var(--amp) * .022)) translate(var(--gx,0px),var(--gy,0px));
  transition:transform .09s linear;
}
.stage[data-state="speaking"] .halo{opacity:calc(.6 + var(--amp) * .5); filter:brightness(calc(1 + var(--amp) * .55))}
.stage[data-state="meditation"] .arch img{animation:breathe 9s ease-in-out infinite; filter:brightness(.72) saturate(.82)}
.stage[data-state="meditation"] .halo{opacity:.3}
.lid{
  position:absolute; width:11%; height:4.8%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(43,24,15,.92) 0%, rgba(43,24,15,.55) 55%, transparent 75%);
  filter:blur(2.5px); opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.lid-l{left:calc(38.7% - 5.5%); top:calc(47.3% - 2.4%)}
.lid-r{left:calc(61.2% - 5.5%); top:calc(47.3% - 2.4%)}
.lid.on{opacity:1}
.stage[data-state="meditation"] .lid{opacity:.8}
.mouthglow{
  position:absolute; left:calc(50.3% - 9%); top:calc(66.6% - 3.6%); width:18%; height:7.2%;
  border-radius:50%; pointer-events:none; filter:blur(5px);
  background:radial-gradient(ellipse at center, rgba(255,196,86,.85), transparent 70%);
  opacity:0; transition:opacity .25s ease;
}
.stage[data-state="speaking"] .mouthglow{opacity:calc(var(--amp) * .9)}
.diya{
  position:absolute; bottom:4.5%; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, #ffe9a8 0%, #ffb020 45%, rgba(255,140,40,0) 72%);
  animation:flick 1.6s ease-in-out infinite; pointer-events:none;
}
.diya-l{left:7%}.diya-r{right:7%; animation-delay:.7s}
@keyframes flick{0%,100%{transform:scale(1); opacity:.95}50%{transform:scale(1.25) translateY(-1px); opacity:.75}}
.stateline{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.12rem; color:var(--gold-2); margin:12px 6px 2px; min-height:1.4em}
.caption{max-width:520px; margin:2px auto 4px; min-height:1.3em; color:var(--cream); font-style:italic; font-size:.98rem}
.voicebar{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0 2px}
.vbtn{
  font:inherit; font-size:.9rem; color:var(--gold-2); background:rgba(201,162,74,.08);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer;
}
.vbtn:disabled{opacity:.4; cursor:default}
.vbtn[aria-pressed="true"]{background:rgba(201,162,74,.22); color:var(--cream)}

/* ——— Cards & panels ——— */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; margin:14px 0; box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.card h2{font-family:"Cormorant Garamond",Georgia,serif; font-weight:700; color:var(--gold-2); margin:2px 0 10px; font-size:1.3rem; letter-spacing:.02em}
.soft{color:var(--cream-dim); font-size:.94rem}
.daily .dref{color:var(--gold); letter-spacing:.14em; font-size:.78rem; text-transform:uppercase}
.daily .dtitle{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.35rem; margin:2px 0}
.daily .dmean{font-style:italic; margin:6px 0 10px}

/* ——— Conversation ——— */
.tlog{display:flex; flex-direction:column; gap:10px; margin:16px 0 6px}
.tmsg{max-width:92%; padding:10px 14px; border-radius:16px; animation:rise .35s ease}
@keyframes rise{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.tmsg.me{align-self:flex-end; background:rgba(201,162,74,.16); border:1px solid rgba(201,162,74,.3); border-bottom-right-radius:4px}
.tmsg.rishi{align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px}
.tmsg .typing i{display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%; background:var(--gold-2); animation:tp 1s infinite}
.tmsg .typing i:nth-child(2){animation-delay:.15s}.tmsg .typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.25}50%{opacity:1}}
.tvcard h3{font-family:"Cormorant Garamond",Georgia,serif; margin:2px 0 4px; font-size:1.45rem; color:var(--cream)}
.tvcard .ref{color:var(--gold); letter-spacing:.16em; font-size:.76rem; text-transform:uppercase}
.tvcard .sa{font-family:"Tiro Devanagari Sanskrit","Noto Serif Devanagari",serif; font-size:1.12rem; line-height:1.9; color:#ffeec2; margin:8px 0 2px}
.tvcard .tr{color:var(--cream-dim); font-style:italic; font-size:.95rem; margin:2px 0 8px}
.tvcard .mean{font-size:1.06rem; margin:6px 0}
.tvcard .mean .s{border-radius:4px; padding:0 2px; transition:background .3s, color .3s}
.tvcard .mean .s.hl{background:rgba(201,162,74,.32); color:#fff}
.tmsg .mean .s{border-radius:4px; padding:0 2px; transition:background .3s, color .3s}
.tmsg .mean .s.hl{background:rgba(201,162,74,.32); color:#fff}
.tvcard .box{border-top:1px solid var(--line); margin-top:10px; padding-top:8px; font-size:.97rem}
.tvcard .box b{color:var(--gold-2)}
.tvcard details{margin-top:8px; border-top:1px dashed var(--line); padding-top:6px}
.tvcard summary{cursor:pointer; color:var(--gold-2); font-size:.95rem}
.tvcard .row, .row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center}
.btn{
  font:inherit; font-size:.93rem; color:var(--gold-2); background:transparent;
  border:1px solid var(--gold-dim); border-radius:999px; padding:8px 15px; cursor:pointer;
}
.btn.solid{background:var(--gold); color:var(--ink); font-weight:700; border-color:var(--gold)}
.btn:disabled{opacity:.45; cursor:default}
.tquick{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px}
.chip{
  font:inherit; font-size:.92rem; color:var(--cream); background:rgba(6,35,28,.7);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer;
}
.chip.sel{background:var(--gold); color:var(--ink); font-weight:700}
.tcomposer{
  position:sticky; bottom:10px; z-index:15; display:flex; gap:8px; align-items:center;
  background:rgba(3,19,14,.92); border:1px solid var(--gold-dim); border-radius:999px; padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); backdrop-filter:blur(8px);
}
.tcomposer input{
  flex:1; min-width:0; font:inherit; color:var(--cream); background:transparent; border:0; outline:0; padding:10px 12px;
}
.tcomposer input::placeholder{color:#9c8f6d}
.tcomposer button{
  font:inherit; border:0; cursor:pointer; border-radius:50%; width:44px; height:44px; flex:none;
  background:var(--gold); color:var(--ink); font-size:1.05rem;
}
#tmic{background:rgba(201,162,74,.15); color:var(--gold-2); border:1px solid var(--line)}
#tmic.rec{background:#a33b2e; color:#fff; animation:flick 1s infinite}
.honest{color:#9c8f6d; font-size:.85rem; text-align:center; margin:8px 4px 0}

/* ——— Practice nav & panels ——— */
.pracnav{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 4px}
.pbtn{
  font:inherit; font-size:.97rem; color:var(--gold-2); background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:12px 8px; cursor:pointer;
}
.pbtn.open{border-color:var(--gold); background:rgba(201,162,74,.14)}
.fld{display:block; margin:10px 0; font-size:.95rem; color:var(--cream-dim)}
.fld select, .fld textarea, .fld input[type="time"]{
  display:block; width:100%; margin-top:6px; font:inherit; color:var(--cream);
  background:var(--em-800); border:1px solid var(--line); border-radius:10px; padding:10px;
}
.mantra{font-family:"Tiro Devanagari Sanskrit",serif; text-align:center; font-size:1.25rem; color:#ffeec2; line-height:1.9; margin:10px 0 2px}
.japawrap{position:relative; width:250px; margin:6px auto}
#beads{width:250px; height:250px; display:block}
#beads circle{fill:rgba(201,162,74,.14); stroke:rgba(201,162,74,.4); stroke-width:.6}
#beads circle.done{fill:var(--gold)}
#beads circle.now{fill:#ffe9a8; stroke:#fff}
.japatap{
  position:absolute; inset:52px; border-radius:50%; border:1px solid var(--gold-dim);
  background:radial-gradient(circle at 50% 35%, #11402f, #06231c); color:var(--gold-2);
  font-family:"Cormorant Garamond",Georgia,serif; cursor:pointer;
}
.japatap span{display:block; font-size:2.4rem; font-weight:700; line-height:1}
.japatap small{color:var(--cream-dim); font-size:.85rem}
.japatap:active{transform:scale(.985)}
.japawrap.complete .japatap{box-shadow:0 0 44px rgba(232,201,122,.55); border-color:var(--gold-2)}
.chipck{display:inline-flex; gap:7px; align-items:center; font-size:.93rem; color:var(--cream-dim); cursor:pointer}
.chipck.big{font-size:1rem; color:var(--cream)}
.chipck input{accent-color:var(--gold); width:18px; height:18px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.timerwrap{position:relative; width:230px; margin:8px auto}
.tring{width:230px; height:230px; transform:rotate(-90deg)}
.tring circle{fill:none; stroke-width:7}
.tring-bg{stroke:rgba(201,162,74,.18)}
.tring-fg{stroke:var(--gold); stroke-linecap:round; stroke-dasharray:553; stroke-dashoffset:0; transition:stroke-dashoffset .3s linear}
.timertext{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 30px}
.timertext span{font-family:"Cormorant Garamond",Georgia,serif; font-size:2.3rem; font-weight:700}
.timertext small{color:var(--gold-2); font-style:italic}
.reflectp{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.25rem; color:var(--gold-2)}
hr.gold{border:0; border-top:1px solid var(--line); margin:16px 0}
.saveditem{border-top:1px dashed var(--line); padding:8px 0; font-size:.94rem}
.saveditem b{color:var(--gold-2)}
.tfoot{position:relative; z-index:1; max-width:680px; margin:0 auto; padding:6px 18px 34px; color:#9c8f6d; font-size:.84rem; text-align:center}
/* ——— the magic layer ——— */
#motes{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
#motes span{
  position:absolute; bottom:-4vh; border-radius:50%;
  background:radial-gradient(circle, rgba(255,233,168,.9), rgba(255,176,32,0) 70%);
  animation:drift linear infinite; opacity:0;
}
@keyframes drift{
  0%{transform:translateY(0) translateX(0); opacity:0}
  12%{opacity:.75}
  60%{opacity:.5}
  100%{transform:translateY(-108vh) translateX(3vw); opacity:0}
}
.beginbtn{
  font:inherit; font-size:1.02rem; font-weight:700; color:var(--ink);
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  border:1px solid var(--gold-2); border-radius:999px; padding:13px 26px; margin-top:12px; cursor:pointer;
  box-shadow:0 6px 26px rgba(201,162,74,.35);
  animation:beginpulse 2.6s ease-in-out infinite;
}
@keyframes beginpulse{0%,100%{box-shadow:0 6px 22px rgba(201,162,74,.28)}50%{box-shadow:0 6px 34px rgba(232,201,122,.6)}}
.arch.pulse{animation:archpulse 1.6s ease-out}
@keyframes archpulse{
  0%{box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), 0 0 0 0 rgba(232,201,122,.55)}
  100%{box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), 0 0 0 34px rgba(232,201,122,0)}
}
.tvcard .sa{animation:saglow 2.6s ease-out}
@keyframes saglow{0%{text-shadow:0 0 18px rgba(255,196,86,.85)}100%{text-shadow:0 0 0 rgba(255,196,86,0)}}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .arch img, .diya, .tmsg{animation:none !important}
  html{scroll-behavior:auto}
}

/* ——— modern icon system + player + magic polish (audit wave) ——— */
.ic{width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px}
.ic.fill{fill:currentColor; stroke:none}
.ic.gold{color:var(--gold)}
body.talk{background:
  radial-gradient(120% 46% at 50% -6%, rgba(255,176,32,.13), rgba(255,176,32,0) 60%),
  radial-gradient(90% 60% at 50% 0%, #0d3527 0%, var(--em-900) 55%, var(--em-950) 100%)}
.arch{border-radius:50% 50% 26px 26px / 36% 36% 26px 26px;
  box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), 0 0 90px rgba(255,176,32,.13)}
.vbtn{min-height:44px; display:inline-flex; align-items:center; gap:7px}
.chip{min-height:42px; display:inline-flex; align-items:center}
.tnav{display:inline-flex; align-items:center; gap:6px; padding:10px 2px}
.tnav .ic{width:17px; height:17px; vertical-align:0}
.pbtn{min-height:54px; display:flex; align-items:center; gap:11px; text-align:left}
.pbtn .ic{color:var(--gold); width:21px; height:21px; vertical-align:0}
.btn{display:inline-flex; align-items:center; gap:7px; min-height:44px}
.beginbtn{display:inline-flex; align-items:center; gap:9px}
.beginbtn .ic{width:20px; height:20px; vertical-align:0}
.tcard,.dcard{box-shadow:inset 0 1px 0 rgba(255,244,214,.07), 0 10px 30px rgba(0,0,0,.28)}
#tmic,#tsend{width:46px; height:46px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%}
#tmic .ic,#tsend .ic{vertical-align:0; width:21px; height:21px}
#pstrip{display:flex; align-items:center; gap:10px; margin-top:12px; padding:9px 12px;
  background:rgba(16,58,44,.72); border:1px solid var(--line); border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.06)}
#pstrip[hidden]{display:none}
[hidden]{display:none!important} /* .btn/.vbtn/.beginbtn set display:inline-flex, which silently defeats the hidden attribute (path reset + go buttons, stop, begin) — the attribute must win */
.ppbtn{width:42px; height:42px; flex:none; border-radius:50%; border:1px solid var(--gold-2);
  background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.ppbtn .ic{vertical-align:0}
.ptime{font-size:.8rem; color:var(--gold-2); min-width:34px; text-align:center; font-variant-numeric:tabular-nums}
#pseek{flex:1; accent-color:var(--gold); height:28px; cursor:pointer}
.ratebtn{font:inherit; font-size:.85rem; font-weight:700; color:var(--gold-2); background:transparent;
  border:1px solid var(--line); border-radius:999px; min-height:38px; padding:0 12px; cursor:pointer}

/* ——— Stage 2: presence — nod, sentence-beat, listening ring, voice-glow ——— */
#voiceglow{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(58% 34% at 50% 6%, rgba(255,190,80,.5), rgba(255,190,80,0) 70%)}
.arch.nod{animation:nod 1.7s ease-in-out; transform-origin:50% 100%}
@keyframes nod{0%{transform:rotate(0deg) translateY(0)}30%{transform:rotate(1.1deg) translateY(5px)}55%{transform:rotate(.35deg) translateY(2px)}100%{transform:rotate(0deg) translateY(0)}}
.arch.beat{animation:beat .9s ease-out}
@keyframes beat{
  0%{box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), 0 0 90px rgba(255,176,32,.13), 0 0 0 0 rgba(255,214,120,.4)}
  100%{box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), 0 0 90px rgba(255,176,32,.13), 0 0 0 15px rgba(255,214,120,0)}}
.stage[data-state="listening"] .arch{animation:listenpulse 2.2s ease-in-out infinite}
@keyframes listenpulse{
  0%,100%{box-shadow:0 0 0 5px rgba(201,162,74,.16), 0 18px 50px rgba(0,0,0,.55), 0 0 60px rgba(255,176,32,.1)}
  50%{box-shadow:0 0 0 5px rgba(201,162,74,.3), 0 18px 50px rgba(0,0,0,.55), 0 0 110px rgba(255,176,32,.28)}}

/* ——— teachings list ——— */
.tchrow{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; font:inherit;
  background:rgba(201,162,74,.06); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; margin-top:10px; cursor:pointer; color:var(--cream)}
.tchrow:hover,.tchrow:focus-visible{background:rgba(201,162,74,.13)}
.tcht{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.22rem; font-weight:700; color:var(--gold-2)}
.tchs{font-size:.92rem; color:var(--cream)}
.tchr{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); opacity:.85}
.tchgroup{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.02rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:22px 2px 0}
.tchgroup:first-child{margin-top:4px}

/* ——— alive7: living presence + mobile finish ——— */
.arch{transition:box-shadow .8s ease}
.stage[data-state="speaking"] .arch{cursor:pointer}
body.talk{min-height:100dvh}
.tnav{min-height:44px}
.chip{min-height:44px}
.ratebtn{min-height:44px}
.ppbtn{width:44px; height:44px}
#pseek{height:44px}
.tcomposer{bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
#pstrip{padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px))}
.tmain{padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px))}
.tmsg{scroll-margin-bottom:104px}
.tlog{padding-bottom:10px}

/* ——— alive-8: Sant Vani in the sitting ——— */
.svcard{border-color:rgba(232,201,122,.55)}
.svcard .svwork{color:var(--cream-dim); font-size:.95rem; margin:0 0 2px}
.svcard .svsrc{display:block; margin-top:10px; color:var(--gold); font-size:.88rem; font-style:normal; letter-spacing:.02em}

/* ——— stage 4: the seven-day path ——— */
.pathrow{align-items:flex-start}
.pathrow.cur{border-color:var(--gold); background:rgba(201,162,74,.12)}
.pathrow.done{opacity:.72}
.pathst{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); border:1px solid var(--gold);
  border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:3px}
.pathst.done{background:transparent; color:var(--gold-2); border-color:var(--line); font-weight:400}

/* ——— alive-21: visual pass — painterly imagery + refined motion ———
   Every asset here is independently removable: the .stagebg div in
   talk.html, one <figure class="artband"> per panel, and this block.
   Imagery is atmosphere only — no figures, no faces; the Rishi remains
   the owner's real painting. Motion is transform/opacity only. */
.stage{position:relative; isolation:isolate; animation:stageIn .9s ease both}
@keyframes stageIn{from{opacity:0}to{opacity:1}}
.stagebg{
  position:absolute; inset:-12px -14px -6px; z-index:-1; pointer-events:none;
  background:url(img/visual/grove-dawn.webp) 50% 30%/cover no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 97%);
  mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 56%, transparent 97%);
}
.stagebg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,35,28,.5), rgba(6,35,28,.14) 34%, rgba(3,19,14,.5) 76%, rgba(3,19,14,.88));
}
.artband{
  margin:-14px -16px 14px; height:118px; overflow:hidden; position:relative;
  border-radius:15px 15px 0 0; border-bottom:1px solid var(--line);
}
.artband img{width:100%; height:100%; object-fit:cover; display:block}
.artband.lamps img{object-position:50% 46%}
.artband.ghats img{object-position:50% 44%}
.artband.lotus img{object-position:50% 34%}
.artband::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,47,36,.05) 42%, rgba(10,47,36,.5));
}
/* panel entrances — calm rise, content never waits on it */
.panel:not([hidden]){animation:panelIn .5s cubic-bezier(.22,.61,.21,1) both}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
#teachList>*, #pathList>*{animation:rowIn .55s cubic-bezier(.22,.61,.21,1) backwards}
@keyframes rowIn{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
#teachList>*:nth-child(2), #pathList>*:nth-child(2){animation-delay:.04s}
#teachList>*:nth-child(3), #pathList>*:nth-child(3){animation-delay:.08s}
#teachList>*:nth-child(4), #pathList>*:nth-child(4){animation-delay:.12s}
#teachList>*:nth-child(5), #pathList>*:nth-child(5){animation-delay:.16s}
#teachList>*:nth-child(6), #pathList>*:nth-child(6){animation-delay:.2s}
#teachList>*:nth-child(7), #pathList>*:nth-child(7){animation-delay:.24s}
#teachList>*:nth-child(8), #pathList>*:nth-child(8){animation-delay:.28s}
#teachList>*:nth-child(9), #pathList>*:nth-child(9){animation-delay:.32s}
#teachList>*:nth-child(n+10), #pathList>*:nth-child(n+10){animation-delay:.36s}
/* one gold shimmer, reserved for the Begin hero button */
.beginbtn{position:relative; overflow:hidden}
.beginbtn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,252,235,.38) 50%, transparent 68%);
  background-size:280% 100%; background-position:130% 0;
  animation:sheen 5.2s ease-in-out infinite;
}
@keyframes sheen{0%,55%{background-position:130% 0}90%,100%{background-position:-130% 0}}
@media (prefers-reduced-motion: reduce){
  .stage, .panel:not([hidden]), #teachList>*, #pathList>*, .beginbtn::after, #motes span{animation:none !important}
}