:root{
  --bg:#E9E6F2;--surface:rgba(255,255,255,.72);--surface2:#DDD6EE;--ink:#1E1838;--muted:#5E5680;--line:#C9C0E0;
  --gold:#8A6A22;--haldi:#7A5A16;--kumkum:#A3305A;--good:#1F7A62;--ok:#8A6A22;--bad:#A3305A;
  --goodbg:#D6EEE6;--okbg:#F1E6C8;--badbg:#F2D6E0;--glow:rgba(120,80,200,.18);--star:rgba(60,40,120,.35);--neb1:rgba(150,110,230,.22);--neb2:rgba(80,120,200,.16);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C0520;--surface:rgba(42,20,84,.6);--surface2:#271449;--ink:#ECE6F7;--muted:#9C92BC;--line:#4A2E86;
  --gold:#CFAA5E;--haldi:#DDB86E;--kumkum:#D4527A;--good:#72D3B4;--ok:#DDB86E;--bad:#E8668A;
  --goodbg:#0E2C2B;--okbg:#2C2414;--badbg:#34132B;--glow:rgba(175,110,255,.3);--star:rgba(235,225,255,.75);--neb1:rgba(59,29,110,.8);--neb2:rgba(140,50,170,.32);}}
:root[data-theme="dark"]{
  --bg:#0C0520;--surface:rgba(42,20,84,.6);--surface2:#271449;--ink:#ECE6F7;--muted:#9C92BC;--line:#4A2E86;
  --gold:#CFAA5E;--haldi:#DDB86E;--kumkum:#D4527A;--good:#72D3B4;--ok:#DDB86E;--bad:#E8668A;
  --goodbg:#0E2C2B;--okbg:#2C2414;--badbg:#34132B;--glow:rgba(175,110,255,.3);--star:rgba(235,225,255,.75);--neb1:rgba(59,29,110,.8);--neb2:rgba(140,50,170,.32);}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;color:var(--ink);background:var(--bg);font-family:Mukta,"Noto Sans Devanagari",system-ui,sans-serif;font-size:17px;line-height:1.55;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(1px 1px at 20px 30px,var(--star) 50%,transparent 51%) 0 0/180px 180px,
   radial-gradient(1px 1px at 120px 90px,var(--star) 50%,transparent 51%) 0 0/180px 180px,
   radial-gradient(1.5px 1.5px at 70px 150px,var(--star) 50%,transparent 51%) 0 0/260px 260px,
   radial-gradient(1px 1px at 200px 40px,var(--star) 50%,transparent 51%) 0 0/260px 260px,
   radial-gradient(1px 1px at 150px 220px,var(--star) 50%,transparent 51%) 0 0/320px 320px;
  opacity:.6}
body::after{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 35% at 25% 20%,var(--neb1),transparent 70%),radial-gradient(35% 30% at 80% 70%,var(--neb2),transparent 70%),radial-gradient(30% 25% at 60% 15%,var(--glow),transparent 70%);
  animation:mist 90s ease-in-out infinite alternate}
@keyframes mist{to{transform:translate(4%,-3%) rotate(6deg)}}
h1,h2,h3{font-family:"Tiro Devanagari Sanskrit",Georgia,serif;font-weight:400;margin:0}
a{color:var(--haldi)}
.wrap{max-width:1180px;margin:0 auto;padding:26px 18px 56px;position:relative;z-index:1}
.hero{text-align:center;padding:18px 0 26px;margin-bottom:24px}
.hero::after{content:"✦";display:block;margin:22px auto 0;max-width:560px;color:var(--gold);font-size:14px;line-height:1;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,transparent 46%,transparent 54%,var(--gold) 70%,transparent) center/100% 1px no-repeat}
.om{width:70px;height:70px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-family:"Tiro Devanagari Sanskrit",serif;font-size:36px;color:var(--gold);
  border:1px solid var(--gold);text-shadow:0 0 18px var(--gold);box-shadow:0 0 0 7px transparent,0 0 0 8px var(--line),0 0 50px var(--glow),inset 0 0 22px var(--glow)}
.brand{color:var(--muted);font-size:14px;letter-spacing:.32em}
.hero h1{font-size:clamp(36px,6.4vw,62px);line-height:1.15;margin-top:4px;letter-spacing:.02em;text-shadow:0 0 32px var(--glow),0 0 2px var(--gold)}
.hero .en{font-family:"Tiro Devanagari Sanskrit",serif;font-style:italic;font-size:clamp(18px,2.4vw,22px);color:var(--gold);margin:2px 0 0;letter-spacing:.04em}
.shloka{font-family:"Tiro Devanagari Sanskrit",serif;font-size:16px;color:var(--muted);margin:12px auto 0;max-width:640px;opacity:.85}
.hero .sub{font-size:15px;color:var(--muted);margin:10px 0 0}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.tabs button{font:inherit;font-size:16px;padding:7px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--gold);box-shadow:0 0 18px var(--glow),inset 0 0 12px var(--glow)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 50px -30px var(--glow)}
.panel::before{content:"✦";position:absolute;top:-10px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:13px;background:var(--bg);padding:0 8px;line-height:18px;border-radius:9px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:14px;color:var(--muted)}
input[type=text],input[type=number]{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);width:100%}
input::placeholder{color:var(--muted);opacity:.7}
.row{display:flex;gap:10px;align-items:center}
input[type=range]{flex:1;accent-color:var(--gold)}
.deg{width:84px!important}
.hint{font-size:14px;color:var(--muted);margin:4px 0 0}
.warn{font-size:14px;color:var(--bad);margin:6px 0 0}
svg{display:block;width:100%;height:auto;max-width:620px;margin:0 auto;touch-action:manipulation}
.mandala-wrap{position:relative;padding:6px 0;--mx:50%;--my:50%}
.mandala-wrap::before{content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),var(--glow),transparent 45%),radial-gradient(circle,var(--glow),transparent 65%);transition:background .2s}
#mandala{position:relative;filter:drop-shadow(0 0 22px var(--glow))}
.cell,.pcell{cursor:pointer}
.cell rect{stroke:var(--line);stroke-width:1;transition:fill .2s}
.pcell rect{transition:opacity .2s}
.pcell:hover rect,.cell:hover rect{stroke:var(--gold)}
.cell.sel rect{stroke:var(--gold);stroke-width:3}
.cell:focus,.pcell:focus{outline:none}
.cell:focus-visible rect,.pcell:focus-visible rect{stroke:var(--gold);stroke-width:3}
.purusha{filter:drop-shadow(0 0 8px var(--gold))}
.intro{animation:emerge 1.6s ease-out both}
.intro .pcell{animation:diya .5s both;animation-delay:calc(.5s + var(--k)*32ms)}
.intro .purusha{animation:appear 2s 1.6s both}
@keyframes emerge{from{opacity:0;filter:blur(8px)}}
@keyframes diya{from{opacity:0}to{opacity:1}}
@keyframes appear{from{opacity:0}}
@media (prefers-reduced-motion:reduce){body::after,.intro,.intro .pcell,.intro .purusha{animation:none}}
.picker h3{font-size:26px}
.zmeta{color:var(--muted);font-size:15px;margin:2px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:inherit;font-size:15px;padding:5px 12px;border-radius:999px;border:1px solid transparent;cursor:pointer;color:var(--ink);line-height:1.3;background:var(--surface2)}
.chip.f2{background:var(--goodbg)}.chip.f1{background:var(--okbg)}.chip.f0{background:var(--badbg)}
.chip:hover{border-color:var(--line)}
.chip[aria-pressed="true"]{border-color:var(--gold);font-weight:700;box-shadow:0 0 12px var(--glow)}
.chip[aria-pressed="true"]::before{content:"✦ ";color:var(--gold)}
.legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;font-size:14px;color:var(--muted);margin-top:12px}
.legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0;background:var(--c);box-shadow:0 0 8px var(--c)}
.legend+.hint{text-align:center}
.score{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.score .num{font-family:"Tiro Devanagari Sanskrit",serif;font-size:44px;line-height:1;width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;text-shadow:0 0 16px currentColor;box-shadow:0 0 30px -6px currentColor,inset 0 0 24px -8px currentColor}
.score .lbl{color:var(--muted);font-size:15px}
.res{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.res li{border-left:2px solid var(--c);background:linear-gradient(90deg,var(--surface2),transparent);border-radius:0 8px 8px 0;padding:10px 12px}
.res .t{font-weight:700}
.res .v{font-size:14px;color:var(--c);font-weight:700;margin-left:6px}
.res p{margin:3px 0 0;font-size:15px;color:var(--muted)}
.res p.rem{color:var(--ink)}
.empty{color:var(--muted);font-size:15px;padding:8px 0;font-style:italic}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn{font:inherit;font-size:15px;padding:9px 22px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--ink);cursor:pointer;box-shadow:0 0 20px -4px var(--glow),inset 0 0 14px var(--glow)}
.btn:hover{box-shadow:0 0 26px var(--glow),inset 0 0 18px var(--glow)}
.btn.ghost{border-color:var(--line);box-shadow:none;color:var(--muted)}
.btn.danger{background:var(--kumkum);border-color:var(--kumkum);color:#fff}
.sides{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.padas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:480px){.padas{grid-template-columns:repeat(2,1fr)}}
.pada{font:inherit;text-align:left;padding:9px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;color:var(--ink)}
.pada b{display:block;font-size:15px}.pada small{color:var(--muted);font-size:13px}
.pada.g{background:var(--goodbg)}.pada.n{background:var(--okbg)}.pada.b{background:var(--badbg)}
.pada:hover{border-color:var(--line)}
.pada[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 12px var(--glow)}
.padaout{margin-top:16px;padding:14px;border-radius:8px;background:linear-gradient(90deg,var(--surface2),transparent);border-left:2px solid var(--c)}
.padaout h3{font-size:24px}
section[hidden]{display:none}
.printhead{display:none}
footer{text-align:center;color:var(--muted);font-size:14px;margin-top:34px;font-family:"Tiro Devanagari Sanskrit",serif;letter-spacing:.1em}
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  body::before,body::after,.mandala-wrap::before{display:none!important}
  .tabs,.actions,.picker,.noprint,.hero .sub,.shloka,footer{display:none!important}
  section[hidden]{display:block!important}
  .grid{grid-template-columns:1fr 1fr}
  .panel{border:1px solid #999;box-shadow:none;break-inside:avoid;backdrop-filter:none}
  .printhead{display:block;margin-bottom:10px}
  #results2{display:none}
}
/* chakras, mantras, score counter */
.bg-ck{position:fixed;z-index:0;pointer-events:none;color:var(--gold);opacity:.09;width:min(70vw,720px)}
.bg-ck1{top:-18vw;left:-18vw}.bg-ck2{bottom:-22vw;right:-20vw;width:min(80vw,820px)}
.spin{transform-origin:100px 100px;animation:spin 80s linear infinite}
.spin.rev{animation-direction:reverse;animation-duration:110s}
.spin.slow{animation-duration:160s}
@keyframes spin{to{transform:rotate(360deg)}}
.chakra-hero{position:relative;width:min(290px,72vw);aspect-ratio:1;margin:8px auto 6px}
.chakra-hero svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;color:var(--gold);filter:drop-shadow(0 0 10px var(--glow))}
.chakra-hero .om{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;background:var(--bg)}
.mantra-band{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -18px 24px;padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mantra-band .track{display:flex;width:max-content;animation:marquee 70s linear infinite;font-family:"Tiro Devanagari Sanskrit",serif;font-size:17px;color:var(--gold);white-space:nowrap}
.mantra-band span{padding:0 22px;text-shadow:0 0 12px var(--glow)}
.mantra-band span::after{content:"✦";margin-left:44px;color:var(--muted);font-size:12px}
@keyframes marquee{to{transform:translateX(-50%)}}
.ck-behind{position:absolute;left:50%;top:50%;width:112%;max-width:690px;aspect-ratio:1;transform:translate(-50%,-50%);color:var(--gold);opacity:.22;pointer-events:none}
.ck-behind svg{width:100%;height:100%;max-width:none}
.gauge{position:relative;width:112px;height:112px;flex:none}
.gauge svg{width:100%;height:100%;max-width:none;transform:rotate(-90deg)}
.g-bg{fill:none;stroke:var(--line);stroke-width:6}
.g-fg{fill:none;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 5px currentColor)}
.gauge .num{position:absolute;inset:0;width:auto;height:auto;border:0;box-shadow:none;display:grid;place-items:center;font-size:40px;text-shadow:0 0 14px currentColor}
.meter{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;gap:8px;padding:5px 16px 5px 5px;border-radius:999px;
  background:var(--surface);border:1px solid var(--gold);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;box-shadow:0 0 26px var(--glow)}
.meter .gauge{width:50px;height:50px}.meter .g-bg,.meter .g-fg{stroke-width:7}
.meter .num{font-size:18px;text-shadow:none}
.meter b{display:block;font-family:"Tiro Devanagari Sanskrit",serif;font-weight:400;font-size:15px;line-height:1.1}
.meter small{color:var(--muted)}
.chakras7{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 22px;margin:0 0 16px}
.chakras7 span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);animation:float 5s ease-in-out infinite;animation-delay:var(--d)}
.chakras7 i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--cc);box-shadow:0 0 14px var(--cc),inset 0 0 10px var(--cc);position:relative}
.chakras7 i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--cc)}
@keyframes float{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.spin,.mantra-band .track,.chakras7 span{animation:none}}
@media print{.bg-ck,.mantra-band,.ck-behind,.meter,.chakras7{display:none!important}}
.map-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:860px){.map-grid{grid-template-columns:1fr}}
.map-stage{padding:12px}
.map-svg{max-width:none;width:100%;height:auto;touch-action:none;border-radius:6px;background:#fff}
.map-svg [data-drag]{cursor:grab}
.map-empty{text-align:center;padding:30px 10px 34px;position:relative;overflow:hidden}
.map-empty h2{font-size:28px;margin:10px 0 6px;position:relative}
.map-empty .hint{max-width:420px;margin:0 auto 18px;position:relative}
.map-empty .btn{position:relative}
.map-empty-ck{width:200px;height:200px;margin:0 auto;color:var(--gold);opacity:.55}
.map-empty-ck svg{width:100%;height:100%;max-width:none}
select{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);width:100%}
label.btn{display:inline-block}
.res .mk-del{float:right;font:inherit;font-size:13px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:1px 9px;cursor:pointer}
.res li.on{outline:1px solid var(--gold)}
#aiBtn[disabled]{opacity:.6;cursor:progress}
/* background voice button */
.voice-btn{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--gold);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;box-shadow:0 0 22px var(--glow)}
.voice-btn .bars{display:flex;align-items:flex-end;gap:2px;height:16px;width:18px}
.voice-btn .bars i{flex:1;background:var(--gold);border-radius:1px;height:30%}
.voice-btn.playing .bars i{animation:vbar .9s ease-in-out infinite}
.voice-btn.playing .bars i:nth-child(2){animation-delay:.15s}.voice-btn.playing .bars i:nth-child(3){animation-delay:.3s}.voice-btn.playing .bars i:nth-child(4){animation-delay:.45s}
@keyframes vbar{0%,100%{height:25%}50%{height:100%}}
.voice-btn .lbl{font-family:"Tiro Devanagari Sanskrit",serif}
@media (prefers-reduced-motion:reduce){.voice-btn.playing .bars i{animation:none;height:70%}}
@media (max-width:480px){.voice-btn .lbl{display:none}.voice-btn{padding:10px}}
@media print{.voice-btn{display:none!important}}
.pnav{display:inline-flex;gap:4px;margin-top:14px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pnav a{text-decoration:none;color:var(--muted);font-size:14px;padding:5px 14px;border-radius:999px}
.pnav a:hover{color:var(--ink)}
.pnav a[aria-current="page"]{color:var(--bg);background:var(--gold)}
@media print{.pnav{display:none}}