:root{
  --paper:#fbf3e8; --paper2:#f5e7d6; --ink:#4a1a38; --plum:#701e48; --rose:#c7607f;
  --gold:#c99a3f; --gold-soft:#f1d9a0; --muted:#7a5a6b;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#241420; --paper2:#2e1a29; --ink:#f6e8dc; --plum:#f1c6d6; --rose:#e58aa5; --gold:#e3bb6a; --gold-soft:#5a3f2a; --muted:#c9a9b6; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Nunito Sans",system-ui,sans-serif;font-size:18px;line-height:1.7;
  background-image:radial-gradient(rgba(112,30,72,.05) 1px,transparent 1px);background-size:22px 22px}
a{color:var(--plum)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{padding:20px 0}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:600;color:var(--plum);text-decoration:none;letter-spacing:.5px}
.logo small{font-family:"Caveat",cursive;font-size:20px;color:var(--rose);margin-left:8px}
nav a{margin-left:20px;text-decoration:none;font-size:16px;color:var(--muted)}
nav a:hover{color:var(--plum)}
.hero{position:relative;margin:8px 0 0;border-radius:26px;overflow:hidden;box-shadow:0 20px 50px rgba(112,30,72,.18)}
.hero img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,243,232,.82) 0%,rgba(251,243,232,.28) 52%,rgba(251,243,232,0) 100%)}
.hero .text{position:absolute;left:0;right:0;top:6%;text-align:center;padding:0 16px}
.sans{font-family:"Tiro Devanagari Sanskrit",serif;color:#701e48;font-size:clamp(30px,6.4vw,64px);line-height:1.25;margin:0;
  text-shadow:0 0 6px #fff6ec,0 0 14px #fff6ec}
.roman{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(17px,2.6vw,26px);color:#701e48;margin:.2em 0 0;text-shadow:0 0 8px #fff6ec}
.intro{text-align:center;padding:48px 0 12px}
.note{font-family:"Caveat",cursive;font-size:30px;color:var(--rose);transform:rotate(-2deg);display:inline-block;margin:0}
h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--plum);line-height:1.2}
h1{font-size:clamp(32px,5vw,50px);margin:.2em 0}
h2{font-size:clamp(28px,4vw,40px);margin:0 0 .4em}
.squig{display:block;margin:6px auto 0;width:160px;height:14px}
.lead{max-width:640px;margin:0 auto}
section{padding:54px 0}
.player{background:var(--paper2);border:2px dashed var(--gold);border-radius:22px;padding:26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  transform:rotate(-.4deg);box-shadow:0 10px 26px rgba(112,30,72,.10)}
.player .play{width:68px;height:68px;border-radius:50%;border:0;background:var(--plum);color:var(--paper);font-size:26px;cursor:pointer;flex:0 0 auto;
  box-shadow:0 6px 16px rgba(112,30,72,.3);transition:transform .2s}
.player .play:hover{transform:scale(1.06)}
.player .meta{flex:1 1 260px}
.player .meta b{font-family:"Cormorant Garamond",serif;font-size:24px;color:var(--plum);font-weight:600}
.player .meta span{display:block;color:var(--muted);font-size:15px}
.bar{height:8px;background:rgba(112,30,72,.15);border-radius:6px;margin-top:12px;overflow:hidden;cursor:pointer}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--rose))}
audio{width:100%;margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:34px}
.card{background:var(--paper2);padding:18px 18px 22px;border-radius:6px;box-shadow:0 10px 26px rgba(112,30,72,.14);text-align:center;transition:transform .3s}
.card:nth-child(1){transform:rotate(-1.6deg)} .card:nth-child(2){transform:rotate(1deg)} .card:nth-child(3){transform:rotate(-.8deg)}
.card:hover{transform:rotate(0) translateY(-4px)}
.card .pic{background:radial-gradient(circle at 50% 40%,var(--gold-soft),transparent 70%);border-radius:4px;padding:10px;height:260px;display:flex;align-items:flex-end;justify-content:center}
.card img{max-height:100%;max-width:100%;object-fit:contain}
.card h3{margin:.6em 0 .1em;font-size:26px}
.card .where{font-family:"Caveat",cursive;font-size:23px;color:var(--rose)}
.card .dev{font-family:"Tiro Devanagari Sanskrit",serif;font-size:21px;color:var(--plum);margin:.3em 0}
.card p{margin:.4em 0 0;font-size:16px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:760px){.two{grid-template-columns:1fr}nav a{margin:0 14px 0 0}}
.verse{background:var(--paper2);border-left:5px solid var(--gold);border-radius:6px 18px 18px 6px;padding:24px 26px}
.verse .dev{font-family:"Tiro Devanagari Sanskrit",serif;font-size:26px;line-height:1.9;color:var(--plum)}
.verse .tr{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:21px;line-height:1.7;margin-top:12px}
ol.steps{padding-left:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:4px 0 14px 54px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--plum);color:var(--paper);display:grid;place-items:center;font-family:"Caveat",cursive;font-size:24px}
.about{background:var(--paper2);border-radius:26px;padding:34px 30px;position:relative}
.about::before{content:"";position:absolute;top:-12px;left:50%;width:120px;height:26px;background:var(--gold-soft);opacity:.85;transform:translateX(-50%) rotate(-2deg);border-radius:3px}
.sign{font-family:"Caveat",cursive;font-size:30px;color:var(--rose);margin-top:6px}
footer{padding:36px 0 50px;text-align:center;color:var(--muted);font-size:15px}
footer .ai{max-width:640px;margin:0 auto 10px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
/* ---------- motion ---------- */
header,main,footer{position:relative;z-index:2}
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:50;background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--rose),var(--plum));box-shadow:0 0 10px var(--gold)}
/* header */
.logo small{display:inline-block;animation:wig 6s ease-in-out infinite}
nav a{position:relative;transition:color .3s}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold);transition:width .35s}
nav a:hover::after{width:100%}
/* hero */
.hero img{animation:kb 26s ease-in-out infinite alternate;transform-origin:50% 70%}
.hero .rays,.hero .aura{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
.hero .rays{width:95%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,190,.30) 0 5deg,transparent 5deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 4%,transparent 66%);mask-image:radial-gradient(circle,#000 4%,transparent 66%);
  animation:spin 90s linear infinite}
.hero .aura{width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.65),rgba(255,226,150,0) 66%);animation:pulse 5s ease-in-out infinite}
.hero .text{transition:transform .4s ease-out}
.sans .ln{display:block;opacity:0;transform:translateY(26px);filter:blur(9px);animation:lineIn 1.6s cubic-bezier(.2,.7,.2,1) forwards}
.sans .ln:nth-child(1){animation-delay:.5s}
.sans .ln:nth-child(2){animation-delay:1.5s}
.tw{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff,rgba(255,222,140,.9) 40%,transparent 70%);opacity:0;animation:twinkle 3.5s ease-in-out infinite}
/* headings */
.note{min-height:1.3em;animation:sway 5s ease-in-out infinite}
h1{background:linear-gradient(100deg,var(--plum) 0%,var(--rose) 35%,var(--gold) 50%,var(--rose) 65%,var(--plum) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 7s linear infinite}
h2{display:inline-block;padding-bottom:4px;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 3px;transition:background-size 1.1s .3s ease}
.reveal.in h2{background-size:100% 3px}
.squig path{stroke-dasharray:430;stroke-dashoffset:430}
.reveal.in .squig path{animation:draw 2.2s .6s ease forwards}
/* player */
.player{transition:transform .4s,box-shadow .4s}
.player:hover{transform:rotate(0) translateY(-3px);box-shadow:0 16px 34px rgba(112,30,72,.18)}
.player .play{position:relative}
.player .play::before,.player .play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);opacity:0}
.player:not(.playing) .play::before{animation:ring 2.6s ease-out infinite}
.player:not(.playing) .play::after{animation:ring 2.6s 1.3s ease-out infinite}
.eq{display:flex;align-items:flex-end;gap:4px;height:44px;margin-left:auto}
.eq i{display:block;width:5px;height:18%;border-radius:3px;background:linear-gradient(180deg,var(--rose),var(--gold));animation:eq 1.1s ease-in-out infinite;animation-play-state:paused}
.player.playing .eq i{animation-play-state:running}
.eq i:nth-child(2n){animation-duration:.8s}.eq i:nth-child(3n){animation-duration:1.4s}
.eq i:nth-child(1){animation-delay:-.2s}.eq i:nth-child(2){animation-delay:-.7s}.eq i:nth-child(3){animation-delay:-.4s}.eq i:nth-child(4){animation-delay:-.9s}
.eq i:nth-child(5){animation-delay:-.1s}.eq i:nth-child(6){animation-delay:-.6s}.eq i:nth-child(7){animation-delay:-.3s}.eq i:nth-child(8){animation-delay:-.8s}
.eq i:nth-child(9){animation-delay:-.5s}.eq i:nth-child(10){animation-delay:-.15s}.eq i:nth-child(11){animation-delay:-.65s}.eq i:nth-child(12){animation-delay:-.35s}
.bar i{background-size:200% 100%;animation:flow 3s linear infinite}
/* verse */
.verse .vl{display:block;opacity:0;transform:translateX(-16px);filter:blur(5px);transition:opacity 1s,transform 1s,filter 1s}
.reveal.in .verse .vl{opacity:1;transform:none;filter:none}
.verse{transition:box-shadow .4s}
.verse:hover{box-shadow:0 12px 30px rgba(201,154,63,.25)}
/* cards */
.cards .card{--r:0deg;opacity:0;transform:translateY(50px) rotate(var(--r));transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s,box-shadow .4s}
.cards .card:nth-child(1){--r:-1.6deg}.cards .card:nth-child(2){--r:1deg}.cards .card:nth-child(3){--r:-.8deg}
.reveal.in .cards .card{opacity:1;transform:rotate(var(--r))}
.reveal.in .cards .card:nth-child(2){transition-delay:.25s,.25s,0s}
.reveal.in .cards .card:nth-child(3){transition-delay:.5s,.5s,0s}
.reveal.in .cards .card:hover{transform:rotate(0) translateY(-8px) scale(1.02);transition-delay:0s;box-shadow:0 18px 40px rgba(112,30,72,.25)}
.card .pic{transition:transform .25s ease-out;animation:glow 4.5s ease-in-out infinite}
.card .pic img{animation:floaty 5s ease-in-out infinite}
.card:nth-child(2) .pic img{animation-delay:-1.6s}.card:nth-child(3) .pic img{animation-delay:-3.2s}
.card .where{display:inline-block;animation:sway 6s ease-in-out infinite}
/* steps */
ol.steps li{opacity:0;transform:translateX(-22px);transition:opacity .7s,transform .7s}
.reveal.in ol.steps li{opacity:1;transform:none}
.reveal.in ol.steps li:nth-child(1){transition-delay:.3s}.reveal.in ol.steps li:nth-child(2){transition-delay:.6s}
.reveal.in ol.steps li:nth-child(3){transition-delay:.9s}.reveal.in ol.steps li:nth-child(4){transition-delay:1.2s}
ol.steps li::before{animation:bob 3.2s ease-in-out infinite}
ol.steps li:nth-child(2)::before{animation-delay:-.8s}ol.steps li:nth-child(3)::before{animation-delay:-1.6s}ol.steps li:nth-child(4)::before{animation-delay:-2.4s}
/* about */
.about::before{animation:wig 5s ease-in-out infinite}
.sign{display:inline-block;animation:sway 6s ease-in-out infinite}
/* sparks */
.spark{position:fixed;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;z-index:60;
  background:radial-gradient(circle,#fff,rgba(241,200,110,.95) 45%,transparent 72%);animation:sp 1s ease-out forwards}
/* more mantras */
.mcard{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:46px}
.mcard.rev .mart{order:2}
@media(max-width:760px){.mcard,.mcard.rev{grid-template-columns:1fr;gap:22px}.mcard.rev .mart{order:0}}
.mart{position:relative;margin:0;padding:12px;background:var(--paper2);border-radius:6px;box-shadow:0 14px 32px rgba(112,30,72,.2);
  transform:rotate(-1.4deg);transition:transform .5s,box-shadow .5s;overflow:hidden}
.mcard.rev .mart{transform:rotate(1.2deg)}
.mart:hover{transform:rotate(0) scale(1.02);box-shadow:0 20px 44px rgba(112,30,72,.28)}
.mart img{display:block;width:100%;height:auto;border-radius:3px}
.mart::before{content:"";position:absolute;top:-2px;left:50%;width:110px;height:24px;background:var(--gold-soft);opacity:.9;transform:translateX(-50%) rotate(-3deg);border-radius:3px;z-index:2;animation:wig 6s ease-in-out infinite}
.mart .moon{position:absolute;inset:12px;border-radius:3px;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 70% 18%,rgba(255,240,200,.45),transparent 38%);animation:pulse2 6s ease-in-out infinite}
.mtext h3{font-size:clamp(26px,3.6vw,36px);margin:.1em 0 .5em}
.mtext .verse{margin:14px 0 18px}
.mtext .verse .dev{font-size:30px;line-height:1.5}
.mtext .player{margin-top:20px}
@keyframes pulse2{0%,100%{opacity:.35}50%{opacity:1}}
/* loop button */
.loop{font:600 15px/1 "Nunito Sans",sans-serif;color:var(--plum);background:transparent;border:2px solid var(--gold);border-radius:999px;padding:10px 16px;cursor:pointer;
  transition:background .3s,color .3s,transform .2s,box-shadow .3s;white-space:nowrap}
.loop:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(201,154,63,.3)}
.loop span{display:inline-block;transition:transform .6s}
.loop:hover span{transform:rotate(180deg)}
.loop.on{background:var(--plum);color:var(--paper);border-color:var(--plum)}
.loop.on span{animation:spin2 2.4s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.loop:focus-visible,.play:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
/* livelier */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;transition:background 1.2s linear;background:linear-gradient(180deg,hsla(25,90%,88%,.5),transparent 60%)}
.feather{width:22px;height:40px;vertical-align:-12px;margin-right:8px;transform-origin:50% 100%;animation:fsway 5s ease-in-out infinite}
@keyframes fsway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
.ribbon{overflow:hidden;margin:26px 0 0;border-radius:999px;background:var(--paper2);border:1px solid var(--gold-soft);padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon .track{display:flex;width:max-content;animation:marq 46s linear infinite}
.ribbon span{font-family:"Tiro Devanagari Sanskrit",serif;font-size:23px;color:var(--plum);padding:0 22px;white-space:nowrap}
.ribbon b{color:var(--gold);font-weight:400;font-size:18px;align-self:center}
@keyframes marq{to{transform:translateX(-50%)}}
.lotus-div{text-align:center;padding:30px 0 0}
.lotus-div svg{width:110px;height:58px;overflow:visible}
.lotus-div .lp path{fill:var(--rose);fill-opacity:.55;stroke:var(--plum);stroke-width:1.2;opacity:0;transform:translateY(10px);transition:opacity .9s var(--d),transform .9s var(--d)}
.lotus-div .lp.mid path{fill:var(--gold);fill-opacity:.7}
.lotus-div.in .lp path{opacity:1;transform:none}
.lotus-div.in svg{animation:breathe 5s 1.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.japa{display:grid;place-items:center;gap:6px;margin-top:22px}
.ring{position:relative;width:min(360px,88vw);aspect-ratio:1}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.bead{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1;transition:fill .4s;transform-box:fill-box;transform-origin:center}
.bead.on{fill:var(--rose);stroke:var(--plum)}
.bead.pop{animation:beadpop .6s ease-out}
@keyframes beadpop{0%{transform:scale(1)}40%{transform:scale(2.6)}100%{transform:scale(1)}}
.tap{position:absolute;inset:17%;border-radius:50%;border:0;cursor:pointer;color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,var(--rose),var(--plum));box-shadow:0 12px 30px rgba(112,30,72,.35),inset 0 0 24px rgba(255,255,255,.18);
  transition:transform .12s;animation:tapglow 3.5s ease-in-out infinite;-webkit-tap-highlight-color:transparent;user-select:none}
.tap:active{transform:scale(.94)}
.tap:focus-visible{outline:4px solid var(--gold);outline-offset:4px}
.tap .cnt{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(44px,12vw,64px);line-height:1;margin-bottom:8px}
.tap .of{font-size:15px;opacity:.85}
.tap .hint{font-family:"Caveat",cursive;font-size:24px;margin-top:2px;opacity:.9}
.tap.hit .cnt{animation:cntpop .35s ease-out}
@keyframes cntpop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes tapglow{0%,100%{box-shadow:0 12px 30px rgba(112,30,72,.35),0 0 0 0 rgba(201,154,63,.45)}50%{box-shadow:0 12px 30px rgba(112,30,72,.35),0 0 0 16px rgba(201,154,63,0)}}
.jmsg{font-family:"Caveat",cursive;font-size:28px;color:var(--rose);margin:8px 0 0;min-height:1.4em;text-align:center}
.jrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;color:var(--muted)}
.diyas{display:flex;justify-content:center;gap:34px;margin-bottom:14px}
.diya{width:40px;height:38px;overflow:visible}
.diya .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.3s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,190,80,.9))}
.diya .in2{animation-duration:.9s}
.diya:nth-child(2) .flame{animation-delay:-.4s}.diya:nth-child(3) .flame{animation-delay:-.8s}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-2deg)}30%{transform:scale(.9,1.12) rotate(3deg)}60%{transform:scale(1.05,.94) rotate(-3deg)}}
.spark.pet{width:11px;height:7px;border-radius:70% 30% 70% 30%;background:linear-gradient(120deg,var(--rose),#ffd0dc);animation:petal 1.4s ease-out forwards}
@keyframes petal{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}
/* sign-up */
.signup{max-width:640px;margin:0 auto;text-align:center;background:var(--paper2);border:2px dashed var(--gold);border-radius:26px;padding:34px 26px;transform:rotate(.4deg);box-shadow:0 10px 26px rgba(112,30,72,.10)}
.sfrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.sfrow input[type=email]{flex:1 1 240px;min-width:0;font:inherit;font-size:17px;padding:13px 18px;border-radius:999px;border:2px solid var(--gold);background:var(--paper);color:var(--ink);transition:box-shadow .3s,border-color .3s}
.sfrow input[type=email]:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(199,96,127,.22)}
.sbtn{background:var(--plum);color:var(--paper);border-color:var(--plum);padding:13px 24px;font-size:17px}
.sbtn:hover{box-shadow:0 8px 18px rgba(112,30,72,.3)}
.sbtn:disabled{opacity:.6;cursor:wait}
.consent{display:flex;gap:10px;align-items:flex-start;justify-content:center;text-align:left;font-size:15px;color:var(--muted);margin-top:14px;cursor:pointer}
.consent input{margin-top:5px;accent-color:var(--plum);width:18px;height:18px;flex:0 0 auto}
.smsg{min-height:1.6em;margin:12px 0 0;font-family:"Caveat",cursive;font-size:26px;color:var(--muted)}
.smsg.ok{color:var(--plum);animation:cntpop .5s ease-out}
.smsg.bad{color:#b0304f}
.fine{font-size:14px;color:var(--muted);margin:6px 0 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* keyframes */
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.04) translate(-.5%,-.6%)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes lineIn{to{opacity:1;transform:none;filter:none}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.5)}}
@keyframes shimmer{to{background-position:-250% 0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(2deg) translateY(-1px)}75%{transform:rotate(-2deg)}}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes eq{0%,100%{height:14%}50%{height:100%}}
@keyframes flow{to{background-position:-200% 0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glow{0%,100%{box-shadow:inset 0 0 0 rgba(201,154,63,0)}50%{box-shadow:inset 0 0 40px rgba(241,200,110,.45)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sp{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sans .ln,.cards .card,.verse .vl,ol.steps li{opacity:1!important;transform:none!important;filter:none!important}
  .squig path{stroke-dashoffset:0}
  h2{background-size:100% 3px}
  #petals,.tw,.spark{display:none}
}

/* article pages and links */
.more{display:inline-block;margin:0 0 12px;font-weight:600;text-decoration:none;color:var(--plum);border-bottom:2px solid var(--gold);transition:color .3s,letter-spacing .3s}
.more:hover{color:var(--rose);letter-spacing:.3px}
.mtext h3 a{color:inherit;text-decoration:none}
.mtext h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.crumbs{font-size:15px;color:var(--muted);padding:4px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--plum);text-decoration:underline}
.page-top{padding:18px 0 6px;text-align:center}
.page-top h1{font-size:clamp(30px,5vw,48px);margin:.2em 0 .1em}
.page-top .sub{max-width:660px;margin:8px auto 0;color:var(--muted)}
.artfig{margin:26px auto 0;max-width:820px}
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:1.6em}
.prose p,.prose li{font-size:19px}
.wtable{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0;background:var(--paper2);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(112,30,72,.10)}
.wtable th,.wtable td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gold-soft);font-size:17px}
.wtable th{font-family:"Cormorant Garamond",serif;font-size:19px;color:var(--plum);background:rgba(201,154,63,.14)}
.wtable tr:last-child td{border-bottom:0}
.wtable td:first-child{font-family:"Tiro Devanagari Sanskrit",serif;font-size:22px;color:var(--plum);white-space:nowrap}
.wtable tbody tr{transition:background .3s}
.wtable tbody tr:hover{background:rgba(241,217,160,.35)}
.wrapx{overflow-x:auto}
details.faq{background:var(--paper2);border:1px solid var(--gold-soft);border-radius:16px;margin:12px 0;padding:2px 20px;transition:box-shadow .3s}
details.faq[open]{box-shadow:0 10px 24px rgba(112,30,72,.14)}
details.faq summary{cursor:pointer;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:22px;color:var(--plum);padding:14px 28px 14px 0;list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:28px;color:var(--gold);transition:transform .35s}
details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.faq p{margin:0 0 16px;animation:faqin .5s ease-out}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:18px}
.related a{display:block;background:var(--paper2);border-radius:16px;padding:18px 20px;text-decoration:none;color:var(--ink);border:1px solid var(--gold-soft);transition:transform .3s,box-shadow .3s}
.related a:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 14px 28px rgba(112,30,72,.18)}
.related b{display:block;font-family:"Cormorant Garamond",serif;font-size:23px;color:var(--plum)}
.related .dev{font-family:"Tiro Devanagari Sanskrit",serif;color:var(--rose);font-size:19px}
.fnav{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:0 0 14px}
.fnav a{color:var(--muted);text-decoration:none;font-size:15px}
.fnav a:hover{color:var(--plum);text-decoration:underline}

.signup .note{display:block;margin-bottom:2px}
.signup h2{display:inline-block}

/* youtube link */
.yt{margin:0 0 18px}
.yt a{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--plum);color:var(--paper);text-decoration:none;font-weight:600;font-size:16px;
  box-shadow:0 8px 18px rgba(112,30,72,.25);transition:transform .25s,box-shadow .25s,background .25s}
.yt a:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(112,30,72,.32);background:var(--rose)}
.yt svg{width:20px;height:20px;fill:currentColor;animation:bob 3s ease-in-out infinite}

/* mobile */
@media(max-width:700px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  header{padding:12px 0 4px}
  header .wrap{flex-direction:column;align-items:flex-start;gap:2px}
  .logo{font-size:26px}
  .logo small{font-size:18px}
  nav{width:100%;display:flex;gap:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
  nav::-webkit-scrollbar{display:none}
  nav a{margin:0;padding:12px 11px;font-size:16px;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
  .hero{border-radius:18px}
  .intro{padding:34px 0 6px}
  section{padding:36px 0}
  h2{font-size:30px}
  .player{padding:18px 16px;gap:14px;transform:none}
  .player .play{width:60px;height:60px}
  .player .meta{flex:1 1 170px}
  .player .loop{padding:12px 16px}
  .eq{margin-left:auto}
  .signup{padding:26px 16px;transform:none}
  .sbtn{width:100%}
  .consent{text-align:left}
  .mcard{gap:20px;margin-top:34px}
  .mart{transform:none}
  .mart:hover{transform:none}
  .two{gap:24px}
  .verse{padding:20px 18px}
  .verse .dev{font-size:24px}
  .cards{gap:26px}
  .card .pic{height:230px}
  .wtable th,.wtable td{padding:10px 12px;font-size:16px}
  .wtable td:first-child{font-size:20px;white-space:normal}
  .prose p,.prose li{font-size:18px}
  details.faq summary{font-size:20px}
  .fnav{gap:2px 14px}
  .fnav a{padding:10px 6px;min-height:44px;display:inline-flex;align-items:center}
  .yt a{width:100%;justify-content:center}
  .more{padding:8px 0}
  .loop{min-height:44px}
}
@media(hover:none){
  .cards .card:hover,.related a:hover,.mart:hover{transform:none}
}

/* hero keeps its true 16:9 shape (the height attribute was overriding the ratio) */
.hero img{height:auto}
.contactline{max-width:620px;margin:0 auto 18px;color:var(--muted);font-size:16px}
.contactline a{color:var(--plum);font-weight:600;word-break:break-all}

/* ===== easier to read and use ===== */
:root{--fs:20px}
@media (prefers-color-scheme: light){:root{--muted:#5a3d4e;--rose:#a63f61}}
html.fs2{--fs:23px}
html.fs3{--fs:26px}
body{font-size:var(--fs);line-height:1.8}
.prose p,.prose li,.lead,.mtext p,.about p,.signup p,.two p,.verse p,.card p{font-size:1em}
.card p{font-size:.92em}
.wtable th,.wtable td{font-size:.92em}
.wtable td:first-child{font-size:1.15em}
.ribbon span{font-size:1.1em}
.consent{font-size:.85em}
.fine,.contactline{font-size:.85em}
.player .meta b{font-size:1.15em}
.player .meta span{font-size:.85em}
.loop{font-size:.8em}
.tap{font-size:var(--fs)}
.tap .of{font-size:.8em}
.sfrow input[type=email]{font-size:var(--fs);min-height:54px}
.yt a{font-size:.85em}
.more{font-size:.95em}
nav a{font-size:.9em}
details.faq summary{font-size:1.15em}
.mtext .verse .dev,.verse .dev{font-size:1.5em}
h1{font-size:clamp(34px,5.2vw,54px)}
/* plain, steady headings: no shimmer, no tilt on text boxes */
h1{background:none;-webkit-text-fill-color:currentColor;color:var(--plum);animation:none}
.player,.signup{transform:none}
.cards .card:nth-child(1),.cards .card:nth-child(2),.cards .card:nth-child(3){--r:0deg}
.mart,.mcard.rev .mart{transform:none}
.note,.card .where,.sign,.logo small{animation:none}
.jmsg,.smsg{font-family:"Nunito Sans",sans-serif;font-weight:600;font-size:1.05em}
.jmsg{color:var(--plum)}
/* big, labelled buttons */
button,.loop,.more,nav a,.fnav a,.yt a{min-height:48px}
.player .play{width:auto;height:auto;min-height:58px;padding:12px 28px;border-radius:999px;font-size:.95em;font-weight:700;display:inline-flex;align-items:center;gap:10px;font-family:inherit}
.player .play::before,.player .play::after{border-radius:999px}
.player:not(.playing) .play::before,.player:not(.playing) .play::after{animation-duration:3.4s}
/* clear keyboard focus and a skip link */
:focus-visible{outline:4px solid var(--plum);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-80px;background:var(--plum);color:#fff;padding:14px 20px;border-radius:12px;z-index:100;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
/* reading options bar */
.a11y{position:relative;z-index:3;background:var(--paper2);border-bottom:1px solid var(--gold-soft);padding:8px 0}
.a11y .wrap{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:center}
.a11y b{font-size:.8em;color:var(--muted);font-weight:700}
.a11y .fsl{font-size:.8em;min-width:4.5em;text-align:center;color:var(--ink);font-weight:600}
.a11y button{font:inherit;font-size:.82em;font-weight:700;min-height:46px;min-width:46px;padding:8px 16px;border-radius:999px;border:2px solid var(--gold);background:var(--paper);color:var(--plum);cursor:pointer}
.a11y button:hover{background:var(--gold-soft)}
.a11y button[aria-pressed=true]{background:var(--plum);color:var(--paper);border-color:var(--plum)}
/* calm mode: nothing moves, nothing decorates */
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.calm #petals,html.calm .tw,html.calm .spark,html.calm .rays,html.calm .aura,html.calm .ribbon,html.calm .sky{display:none!important}
html.calm .reveal,html.calm .sans .ln,html.calm .cards .card,html.calm .verse .vl,html.calm ol.steps li,html.calm .lotus-div .lp path{opacity:1!important;transform:none!important;filter:none!important}
html.calm .squig path{stroke-dashoffset:0}
html.calm h2{background-size:100% 3px}
/* high contrast */
html.contrast{--paper:#fff;--paper2:#fff;--ink:#000;--plum:#3b0a24;--muted:#1b1b1b;--rose:#7b1a3f;--gold:#6b4a00;--gold-soft:#8a6a2a}
html.contrast body{background-image:none}
html.contrast .sky,html.contrast #petals{display:none}
html.contrast .player,html.contrast .signup,html.contrast .card,html.contrast .mart,html.contrast .verse,html.contrast .wtable,html.contrast details.faq,html.contrast .related a,html.contrast .a11y{border:2px solid #000;box-shadow:none}
html.contrast a{text-decoration:underline}
html.contrast .player .play,html.contrast .yt a,html.contrast .sbtn{background:#3b0a24;color:#fff}
/* phones: roomy, wrapped navigation, stacked player controls */
@media(max-width:700px){
  nav{flex-wrap:wrap;overflow:visible;white-space:normal;margin:0;padding:0;gap:0 2px}
  nav a{padding:10px 12px}
  .a11y .wrap{justify-content:flex-start}
  .player{flex-direction:column;align-items:stretch}
  .player .meta{flex:1 1 100%}
  .player .play,.player .loop{width:100%;justify-content:center}
  .eq{display:none}
  .tap .cnt{font-size:clamp(44px,14vw,70px)}
}

/* fixes from the phone check */
.player .play::before,.player .play::after{display:none}
.player:not(.playing) .play{animation:playglow 3s ease-in-out infinite}
@keyframes playglow{0%,100%{box-shadow:0 6px 16px rgba(112,30,72,.3),0 0 0 0 rgba(201,154,63,.5)}50%{box-shadow:0 6px 16px rgba(112,30,72,.3),0 0 0 12px rgba(201,154,63,0)}}
footer{font-size:.85em}
.fnav a{font-size:1em}
.contactline,.fine{font-size:1em}
.contactline a{display:inline-block;padding:10px 2px}

.yt a{box-sizing:border-box;white-space:normal;text-align:center;font-size:1.05em}
.fnav a{overflow-wrap:anywhere}

/* long words and big text must never push the page sideways */
.mcard>*,.two>*,.cards>*,.related>*{min-width:0}
h1,h2,h3,.more,summary{overflow-wrap:break-word}
.verse .dev,.mtext .verse .dev{font-size:min(1.5em,8vw)}
@media(max-width:760px){.mcard,.mcard.rev{grid-template-columns:minmax(0,1fr)}.two{grid-template-columns:minmax(0,1fr)}}

@media(max-width:700px){
  .fnav{flex-direction:column;align-items:stretch;gap:0}
  .fnav a{display:block;text-align:center;padding:12px 6px;max-width:100%;min-height:48px;box-sizing:border-box}
}

/* ===== peacock garden game ===== */
.garden{margin-top:18px}
.garden canvas{display:block;width:100%;height:min(66vh,540px);min-height:340px;border-radius:22px;border:3px solid var(--gold);background:#d3ebbd;touch-action:pan-y;box-shadow:0 14px 34px rgba(112,30,72,.18);cursor:pointer}
.garden canvas:focus-visible{outline:4px solid var(--plum);outline-offset:4px}
html.contrast .garden canvas{border-color:#000;box-shadow:none}
.gmsg{min-height:2.4em;margin:14px 0 6px;font-weight:600;color:var(--plum);text-align:center}
.gpanel{display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center;margin-top:8px}
.gstats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gstats div{background:var(--paper2);border:2px solid var(--gold-soft);border-radius:16px;padding:10px 14px}
.gstats b{font-family:"Cormorant Garamond",serif;font-size:1.7em;color:var(--plum);margin-right:4px}
.gstats span{display:block;font-size:.8em;color:var(--muted)}
.gdpad{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:repeat(2,72px);gap:8px;justify-content:center}
.dp{font-size:1.4em;line-height:1;border-radius:20px;border:2px solid var(--plum);background:var(--paper);color:var(--plum);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;padding:0;min-height:0}
.dp:active,.dp:hover{background:var(--plum);color:var(--paper)}
.dp.up{grid-column:2;grid-row:1}.dp.left{grid-column:1;grid-row:2}.dp.down{grid-column:2;grid-row:2}.dp.right{grid-column:3;grid-row:2}
.gbtns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gbtns .loop{font-size:.9em;padding:14px 22px}
@media(max-width:700px){
  .gpanel{grid-template-columns:minmax(0,1fr)}
  .gdpad{grid-template-columns:repeat(3,78px);grid-template-rows:repeat(2,78px)}
  .garden canvas{height:min(60vh,460px);min-height:320px}
  .gbtns .loop{flex:1 1 100%}
}

.gstats b{font-family:"Nunito Sans",sans-serif;font-weight:600;font-variant-numeric:lining-nums;font-size:1.5em}

/* night garden switch */
[hidden]{display:none!important}
#gMode[aria-pressed=true]{background:#1f2a55;color:#fff;border-color:#1f2a55}

/* ===== temple finder ===== */
.ttease{max-width:680px;margin:0 auto;text-align:center;background:var(--paper2);border:2px dashed var(--gold);border-radius:26px;padding:30px 24px}
.ttease .note{display:block}
.yt-like{display:inline-flex;align-items:center;min-height:52px;padding:12px 26px;border-radius:999px;background:var(--plum);color:var(--paper);text-decoration:none;font-weight:700;box-shadow:0 8px 18px rgba(112,30,72,.25);transition:transform .25s,background .25s}
.yt-like:hover{transform:translateY(-3px);background:var(--rose)}
.tfsec{max-width:860px;margin:0 auto}
.tf{background:var(--paper2);border:2px solid var(--gold-soft);border-radius:22px;padding:22px}
.tfgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.tfield label,.tfbar label{font-weight:700;color:var(--plum);font-size:.9em}
.tf select,.tf input,.tfbar select{font:inherit;font-size:1em;min-height:56px;padding:10px 14px;border-radius:14px;border:2px solid var(--gold);background:var(--paper);color:var(--ink);width:100%;min-width:0}
.tf select:focus,.tf input:focus,.tfbar select:focus{outline:4px solid var(--plum);outline-offset:2px}
.tf select:disabled{opacity:.6}
.tfgo{margin-top:20px;width:100%;min-height:60px;font:inherit;font-size:1.05em;font-weight:700;border:0;border-radius:999px;background:var(--plum);color:var(--paper);cursor:pointer;box-shadow:0 8px 18px rgba(112,30,72,.25)}
.tfgo:hover{background:var(--rose)}
.tfgo:disabled{opacity:.6;cursor:wait}
.tfmsg{min-height:2.2em;margin:16px 0 4px;font-weight:600;color:var(--plum)}
.tfmsg.bad{color:#a02347}
.tfmsg.ok{color:var(--plum)}
.tfbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:10px 0 14px}
.tfbar select{width:auto;flex:1 1 280px}
.tlist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.tcard{background:var(--paper2);border:2px solid var(--gold-soft);border-radius:20px;padding:18px 20px;box-shadow:0 8px 20px rgba(112,30,72,.08)}
.ttop{display:flex;gap:14px;align-items:flex-start}
.trank{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--plum);color:var(--paper);font-weight:700}
.tname{margin:0;font-size:1.25em;line-height:1.3;overflow-wrap:anywhere}
.tmeta{margin:8px 0 2px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.stars{position:relative;display:inline-block;color:#d9c9b0;letter-spacing:3px;font-size:1.15em;line-height:1}
.stars::before{content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0;width:var(--p,0%);overflow:hidden;color:#e3a92f;white-space:nowrap}
.tscore{font-size:1.1em;color:var(--plum)}
.tcount{color:var(--muted);font-size:.9em}
.ttags{margin:4px 0}
.ttag{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--gold-soft);color:var(--ink);font-size:.8em;font-weight:700}
.taddr{margin:6px 0 10px;color:var(--muted);font-size:.92em}
.tact{display:flex;flex-wrap:wrap;gap:10px}
.tmap,.tbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border-radius:999px;font:inherit;font-size:.9em;font-weight:700;text-decoration:none;cursor:pointer}
.tmap{background:var(--plum);color:var(--paper);border:2px solid var(--plum)}
.tmap:hover{background:var(--rose);border-color:var(--rose)}
.tbtn{background:transparent;color:var(--plum);border:2px solid var(--gold)}
.tbtn:hover{background:var(--gold-soft)}
.tbtn[aria-pressed=true]{background:var(--plum);color:var(--paper);border-color:var(--plum)}
.tattr{margin:18px 0 0;font-size:.85em;color:var(--muted)}
@media(max-width:700px){
  .tfgrid{grid-template-columns:minmax(0,1fr)}
  .tcard{padding:16px}
  .tmap,.tbtn{flex:1 1 100%}
}
html.contrast .tf,html.contrast .tcard,html.contrast .ttease{border:2px solid #000}

/* temple photos */
.tcard{overflow:hidden}
.tphoto{position:relative;margin:-18px -20px 14px;aspect-ratio:16/9;background:linear-gradient(135deg,var(--gold-soft),var(--paper))}
.timg{display:block;width:100%;height:100%;object-fit:contain}
.tcredit{position:absolute;left:0;right:0;bottom:0;padding:6px 12px;font-size:.75em;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:right;overflow-wrap:anywhere}
@media(max-width:700px){.tphoto{margin:-16px -16px 12px}}