/* Layout: full responsive site. Top nav + hero over an aurora, navagraha orbit, question marquee, bento of the three tools, FAQ.
   Effects are ports of react-bits (Aurora, SpotlightCard, BlurText, ShinyText, CountUp) and magicui (Border Beam, Shimmer Button, Orbiting Circles, Marquee, Meteors).
   Two themes: Night (the existing indigo look) and Day (saffron). */
:root{
  --bg:#0A0D1E; --bg2:#10142B; --surface:#151A36; --surface2:#1C2245;
  --line:rgba(var(--a-rgb),.20); --line2:rgba(var(--r-rgb),.16);
  --fg:#ECEBFA; --muted:#9DA2C8; --teal:#B7A6F5; --gold:#9AA4EE; --gold-hi:#C3C9FA; --gold-ink:#0E1030;
  --good:#6FD3A0; --warn:#F0B35A; --a-rgb:154,164,238; --r-rgb:183,166,245; --g1-rgb:92,75,214; --blur:18px;
  --f-display:"Poppins","Noto Sans Devanagari",system-ui,sans-serif;
  --f-body:"Mukta","Noto Sans Devanagari",system-ui,sans-serif;
  --f-data:"DM Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--f-body);overflow-x:hidden;position:relative;isolation:isolate}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.view[hidden]{display:none}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance}
h2{font-size:clamp(28px,4vw,42px);line-height:1.15}
h3{font-size:22px;line-height:1.3}
.eyebrow{font:500 12px var(--f-data);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}.small{font-size:14px}
.sample{font:500 10px var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:2px 7px;white-space:nowrap}
.sec{padding-block:72px}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;max-width:640px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line2)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{font:400 22px var(--f-display);display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.links{display:flex;gap:4px;margin-left:12px;flex:1}
.links button,.links a{background:none;border:0;padding:8px 14px;border-radius:8px;color:var(--muted);font-size:16px}
.links button:hover,.links a:hover{color:var(--fg)}
.links button[aria-current="true"],.links a[aria-current="true"]{color:var(--gold-hi);background:var(--surface)}
.nav .r{display:flex;gap:10px;align-items:center;margin-left:auto}
.seg2{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg2 button{background:none;border:0;padding:6px 12px;font-size:14px;color:var(--muted)}
.seg2 button[aria-pressed="true"]{background:var(--surface2);color:var(--fg)}
.btn-s{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 16px;font-size:15px}
.btn-s:hover{border-color:var(--gold)}

/* shimmer button (magicui) */
.shimmer{--spread:90deg;--cut:.06em;--speed:3s;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;white-space:nowrap;
  min-height:56px;padding:0 30px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font-weight:600;font-size:18px;
  box-shadow:0 10px 40px -14px color-mix(in srgb,var(--gold) 70%,transparent)}
.shimmer.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);border-color:transparent}
.shimmer .spark{position:absolute;inset:0;z-index:-30;overflow:visible;filter:blur(2px);container-type:size}
.shimmer .slide{position:absolute;inset:0;aspect-ratio:1;height:100cqh;border-radius:0;animation:slide var(--speed) ease-in-out infinite alternate}
.shimmer .slide::before{content:"";position:absolute;inset:-100%;width:auto;rotate:0deg;background:conic-gradient(from calc(270deg - (var(--spread)*.5)),transparent 0,#fff var(--spread),transparent var(--spread));animation:spin var(--speed) linear infinite}
.shimmer::after{content:"";position:absolute;inset:var(--cut);z-index:-20;border-radius:inherit;background:inherit}
.shimmer.gold::after{background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
@keyframes slide{to{transform:translate(calc(100cqw - 100%),0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:0 24px;border-radius:10px;border:1px solid var(--line2);background:none;font-size:17px}
.btn-ghost:hover{border-color:var(--teal)}

/* shiny text (react-bits) */
.shiny{background:linear-gradient(110deg,var(--gold) 35%,#fff 50%,var(--gold) 65%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4.5s linear infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-50% 0}}
/* blur text (react-bits) */
.bt span{display:inline-block;animation:bt .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*.14s + .15s)}
@keyframes bt{from{filter:blur(12px);opacity:0;transform:translateY(-16px)}60%{filter:blur(4px);opacity:.6;transform:translateY(4px)}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:56px 80px}
.skylayer{position:absolute;left:0;right:0;top:0;height:780px;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.aurora{position:absolute;inset:0;background:radial-gradient(70% 60% at 25% 0%,rgba(var(--g1-rgb),.35),transparent 70%),radial-gradient(60% 50% at 80% 10%,rgba(var(--a-rgb),.18),transparent 70%)}
.aurora canvas{width:100%;height:100%;display:block}
.dust{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dust span{position:absolute;border-radius:50%;background:var(--gold-hi);animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.1}50%{opacity:.9}}
.meteor{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 1px rgba(var(--r-rgb),.1);rotate:215deg;animation:meteor 7s linear infinite;opacity:0}
.meteor::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:60px;height:1px;background:linear-gradient(90deg,var(--teal),transparent)}
@keyframes meteor{0%{transform:translateX(0);opacity:1}70%{opacity:1}100%{transform:translateX(-520px);opacity:0}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(54px,9vw,104px);line-height:1.05;margin:14px 0 6px}
.hero .en{font:500 13px var(--f-data);letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
.hero .tag{font-size:clamp(18px,2.2vw,22px);line-height:1.55;max-width:34ch;margin:22px 0 28px;text-wrap:balance}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.note{font-size:14px;color:var(--muted);margin:16px 0 0;max-width:46ch}
.stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font:400 36px/1 var(--f-display);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.stats span{font-size:13px;color:var(--muted)}

/* orbiting circles (magicui) with navagraha */
.orbit-wrap{container-type:inline-size;width:min(100%,420px);aspect-ratio:1;margin-inline:auto;position:relative}
.orbit{--u:calc(100cqw/380);position:absolute;inset:0;display:grid;place-items:center}
.orbit .ring{position:absolute;border:1px dashed var(--line);border-radius:50%;width:calc(var(--r)*2*var(--u));height:calc(var(--r)*2*var(--u))}
.planet{position:absolute;left:50%;top:50%;width:calc(36*var(--u));height:calc(36*var(--u));margin:calc(-18*var(--u));display:grid;place-items:center;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);font-size:calc(18*var(--u));color:var(--teal);animation:orb calc(var(--d)*1s) linear infinite;box-shadow:0 0 18px -4px rgba(var(--r-rgb),.5)}
.planet.rev{animation-direction:reverse}
.planet.sun{color:var(--gold-hi);border-color:var(--gold)}
@keyframes orb{0%{transform:rotate(calc(var(--a)*1deg)) translateY(calc(var(--r)*var(--u))) rotate(calc(var(--a)*-1deg))}
  100%{transform:rotate(calc(var(--a)*1deg + 360deg)) translateY(calc(var(--r)*var(--u))) rotate(calc(var(--a)*-1deg - 360deg))}}
.yantra{width:calc(130*var(--u));height:calc(130*var(--u));filter:drop-shadow(0 0 22px rgba(var(--a-rgb),.5))}
.yantra .sp{transform-origin:100px 100px;animation:spin 80s linear infinite}
.yantra .sp2{transform-origin:100px 100px;animation:spin 120s linear infinite reverse}
.float{position:absolute;left:-2%;bottom:2%;z-index:2;width:min(240px,62%);padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(10px);border:1px solid transparent}
.float .row{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.float .row b{font:500 13px var(--f-data);font-variant-numeric:tabular-nums}

/* beam (magicui border-beam) */
.beam{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);overflow:hidden}
.beam::after{content:"";position:absolute;width:90px;aspect-ratio:1;background:linear-gradient(to left,var(--gold-hi),var(--teal),transparent);offset-path:rect(0 auto auto 0 round 12px);animation:beam 7s linear infinite}
@keyframes beam{from{offset-distance:0%}to{offset-distance:100%}}
/* spotlight card (react-bits) */
.spot{--mx:50%;--my:0%;position:relative;isolation:isolate;overflow:hidden;border-radius:14px;background:var(--surface);padding:24px;border:1px solid var(--line2)}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%)}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(180px circle at var(--mx) var(--my),var(--gold-hi),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot:hover::before,.spot:hover::after{opacity:1}

/* marquee (magicui) */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);display:flex;flex-direction:column;gap:12px}
.track{display:flex;gap:12px;width:max-content;animation:mq 60s linear infinite}
.marq:hover .track{animation-play-state:paused}
.track.rv{animation-direction:reverse;animation-duration:75s}
@keyframes mq{to{transform:translateX(-50%)}}
.q{white-space:nowrap;padding:12px 20px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-size:16px}
.q em{font-style:normal;color:var(--gold);margin-right:8px}

/* how it works */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.num{font:400 64px/1 var(--f-display);color:transparent;-webkit-text-stroke:1px var(--gold);margin-bottom:14px}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.b3{grid-column:span 3}.b3r{grid-column:span 3;grid-row:span 2}
.tool-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.slot{border:1.5px dashed var(--line);border-radius:14px;padding:24px;color:var(--muted);display:flex;gap:14px;align-items:center;font-size:15px}
.slot .dot{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--teal);font-size:20px}
.signrow{display:flex;gap:8px;flex-wrap:wrap}
.signrow span{width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;font-size:20px;color:var(--teal)}
.signrow span.on{border-color:var(--gold);color:var(--gold-hi)}
/* trust + faq */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ic{font-size:26px;color:var(--teal);margin-bottom:12px}
details{border-bottom:1px solid var(--line2)}
summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;cursor:pointer;font-size:19px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 26px var(--f-data);color:var(--gold);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px;color:var(--muted);max-width:68ch}
.faq{max-width:780px}
.cta-card{position:relative;border-radius:18px;padding:56px 24px;text-align:center;background:radial-gradient(70% 120% at 50% 0%,rgba(var(--g1-rgb),.28),transparent 70%),var(--surface);border:1px solid var(--line2);overflow:hidden}
.cta-card h2{margin-bottom:12px}
.foot{border-top:1px solid var(--line2);padding-block:32px 96px;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* app panels (flow, reading...) */
.panel-wrap{padding-block:48px 96px}
.panel{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:44px;align-items:start}
.prog{display:flex;gap:6px;margin:10px 0 24px}
.prog i{flex:1;height:4px;border-radius:4px;background:var(--surface2)}
.prog i.on{background:var(--gold)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-size:14px;color:var(--muted)}
.inp{width:100%;min-height:52px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);padding:0 14px}
.inp:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.inrow{display:flex;gap:8px}.inrow .inp{flex:1;min-width:0}
.mic{width:52px;flex:none;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--teal)}
.check{display:flex;gap:10px;align-items:center;font-size:15px;margin:-6px 0 18px}
.check input{width:20px;height:20px;accent-color:var(--gold)}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.topic{text-align:left;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px}
.topic .g{font-size:26px;color:var(--teal)}
.topic[aria-pressed="true"]{border-color:var(--gold);background:var(--surface2)}
.btn-full{width:100%}
.two{display:grid;grid-template-columns:420px 1fr;gap:28px;align-items:start}
.sticky{position:sticky;top:88px}
.chart{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.chart text{font-family:var(--f-data)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.fact{border:1px solid var(--line2);background:var(--surface);border-radius:12px;padding:12px 14px}
.fact .k{font:500 10px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fact .v{font:400 21px/1.3 var(--f-display);margin-top:2px}
.seg{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:16px 0}
.seg button{flex:none;border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:8px 18px}
.seg button[aria-selected="true"]{border-color:var(--gold);color:var(--gold-hi);background:var(--surface2)}
.read{font-size:18px;line-height:1.75}
.stack{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.list div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2)}
.list div:last-child{border:0}
.list b{font:500 14px var(--f-data);text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.bar{height:8px;border-radius:8px;background:var(--surface2);position:relative;margin-top:10px}
.bar i{position:absolute;top:0;bottom:0;border-radius:8px}
.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sign{aspect-ratio:1;border:1px solid var(--line2);background:var(--surface);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sign .g{font-size:28px;color:var(--teal)}
.sign span{font-size:14px}
.sign[aria-pressed="true"]{border-color:var(--gold);background:var(--surface2)}
.sign[aria-pressed="true"] .g{color:var(--gold-hi)}
.meter{display:flex;gap:5px}
.meter i{width:26px;height:7px;border-radius:4px;background:var(--surface2)}
.meter i.on{background:var(--gold)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{display:flex;flex-direction:column;gap:14px}
.plan ul{margin:0;padding-left:20px;color:var(--muted);font-size:15px;flex:1}
.price{font:400 40px/1 var(--f-display);color:var(--gold-hi)}

/* mobile tabs + prototype menu */
.tabs{display:none}

.scrim{position:fixed;inset:0;z-index:60;background:rgba(10,3,8,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.scrim[hidden]{display:none}
.sheet{width:min(100%,420px);background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative}


/* ===== glass, atmosphere, page motion ===== */
main,footer{position:relative;z-index:1}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34;animation:drift 28s ease-in-out infinite alternate}
.ambient .o1{width:46vw;height:46vw;left:-12vw;top:28vh;background:rgba(var(--g1-rgb),.75)}
.ambient .o2{width:40vw;height:40vw;right:-10vw;top:78vh;background:rgba(var(--a-rgb),.5);animation-delay:-10s;animation-duration:34s}
@keyframes drift{to{transform:translate3d(7vw,-12vh,0) scale(1.18)}}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.spot{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018)),color-mix(in srgb,var(--surface) 58%,transparent);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.03),0 26px 60px -30px rgba(0,0,0,.75)}
.slot,.fact,.float,.sheet,.birthcard,.pal{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),color-mix(in srgb,var(--surface) 55%,transparent);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px -30px rgba(0,0,0,.7)}
.reveal{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(8px)}}
.tilt{transition:transform .3s cubic-bezier(.2,.7,.2,1);will-change:transform}
.yan .sp{transform-origin:100px 100px;animation:spin 80s linear infinite}
.yan .sp2{transform-origin:100px 100px;animation:spin 120s linear infinite reverse}
[data-yantra]{display:contents}
.birthcard{position:sticky;top:96px;position:sticky;border-radius:16px;padding:28px 24px;border:1px solid var(--line2);overflow:hidden;text-align:center}
.birthcard .yan2{width:min(100%,250px);height:auto;margin:0 auto 14px;display:block;filter:drop-shadow(0 0 24px rgba(var(--a-rgb),.5))}
.birthcard .bc{display:flex;flex-direction:column;margin-top:14px}
.birthcard .bc .k{font:500 10px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.birthcard .bc .v{font:400 22px/1.3 var(--f-display);overflow-wrap:anywhere}
.dots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin:0 2px;animation:tw 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
.pal{position:fixed;top:72px;right:max(16px,env(safe-area-inset-right,0px));z-index:55;width:min(350px,calc(100vw - 32px));border-radius:16px;padding:18px;border:1px solid var(--line)}
.pal[hidden]{display:none}
.pal h3{font-size:20px;margin-bottom:12px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:10px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;line-height:1.2}
.sw:hover{border-color:var(--teal)}
.sw[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--a-rgb),.25)}
.dotsw{display:flex}.dotsw i{width:22px;height:22px;border-radius:50%;margin-left:-7px;border:2px solid rgba(0,0,0,.4)}.dotsw i:first-child{margin-left:0}
.pal .row2{display:flex;gap:12px;margin-top:14px}
.pal label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.pal input[type=color]{width:100%;height:42px;border:1px solid var(--line2);border-radius:10px;background:none;padding:2px;cursor:pointer}
.pal input[type=range]{accent-color:var(--gold)}
.pal .tg{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:14px;color:var(--muted)}
.pal .tg label{flex-direction:row;align-items:center;gap:8px}
.moonwrap{display:flex;gap:24px;align-items:center}
.moon{width:130px;height:130px;flex:none;filter:drop-shadow(0 0 26px rgba(255,255,255,.28))}
.moon .glow{animation:pulse 5s ease-in-out infinite;transform-origin:50px 50px}
@keyframes pulse{50%{opacity:.5;transform:scale(1.07)}}
.wheel{width:100%;max-width:300px;display:block;margin:0 auto 14px;overflow:visible}
#wheelG{transform-origin:150px 150px;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.wsign{transform-origin:0 0;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.wc{transition:fill .5s}.wt{transition:fill .5s}
.wheel .ringd{transform-origin:150px 150px;animation:spin 90s linear infinite}
.ringvis{position:relative;max-width:380px;width:100%;margin-inline:auto;aspect-ratio:1;display:grid;place-items:center}
.ringvis .ringtext{position:absolute;inset:0;width:100%;height:100%}
.ringtext .spinr{transform-origin:160px 160px;animation:spin 60s linear infinite}
.ringtext text{font:400 15px var(--f-display);fill:var(--gold-hi)}
.ringvis .yan3{width:48%;height:auto;filter:drop-shadow(0 0 26px rgba(var(--a-rgb),.55))}
.aboutgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:32px}
.aboutgrid p{margin-bottom:0!important}
.dr{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--k,0)*.1s)}
@keyframes draw{to{stroke-dashoffset:0}}
.fi{opacity:0;animation:fi .6s ease forwards;animation-delay:calc(var(--k,0)*.07s + .8s)}
@keyframes fi{to{opacity:1}}
.bar i.fill{transform-origin:left;animation:grow 1.4s cubic-bezier(.2,.7,.2,1) both .3s}
@keyframes grow{from{transform:scaleX(0)}}
.price{background:linear-gradient(110deg,var(--gold) 30%,#fff 50%,var(--gold) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
.calm *,.calm *::before,.calm *::after{animation:none!important}
.calm .dr{stroke-dasharray:none!important}.calm .fi{opacity:1!important}
@media (max-width:900px){.aboutgrid{grid-template-columns:1fr}.moonwrap{flex-direction:column;text-align:center}}

/* ===== new-age premium pass: one clear first action, floating nav, softer large radii ===== */
h1,h2,h3{font-weight:600}
:lang(en) h1{letter-spacing:-.03em}
.sec{padding-block:96px}
#views{padding-top:86px}
.nav{position:fixed;left:0;right:0;top:calc(14px + env(safe-area-inset-top,0px));background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.nav .wrap{pointer-events:auto;height:58px;width:calc(100% - 32px);max-width:980px;padding:0 10px 0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),color-mix(in srgb,var(--bg) 55%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 50px -24px rgba(0,0,0,.85)}
.brand{font-weight:600;font-size:18px}
.links button,.links a{border-radius:999px;font-size:15px}
.links button[aria-current="true"],.links a[aria-current="true"]{background:rgba(255,255,255,.1);color:var(--fg)}
.btn-s{border-radius:999px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.seg2{border-radius:999px;border-color:rgba(255,255,255,.14)}
.shimmer{border-radius:999px}
.shimmer.big{min-height:60px;padding:0 8px 0 28px;gap:16px}
.shimmer .arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.2);font-size:20px;flex:none}
.btn-ghost{border-radius:999px}
.spot{border-radius:22px;padding:28px}
.slot{border-radius:22px}.fact{border-radius:16px}.float{border-radius:18px}.sheet{border-radius:24px}.pal{border-radius:22px}.birthcard{border-radius:24px}
.inp,.mic{border-radius:14px}.topic{border-radius:18px}.sign{border-radius:18px}.cta-card{border-radius:28px}.q{border-radius:999px}
.beam::after{offset-path:rect(0 auto auto 0 round 22px)}
.meteor{display:none}
.hero{padding-block:84px 90px}
.hero h1{font-size:clamp(54px,9vw,104px);line-height:1.02;margin:22px 0 4px}
.pill-tag{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font:500 12px var(--f-data);letter-spacing:.08em;text-transform:uppercase}
.pill-tag i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.hero .tag{margin:20px 0 26px}
.coach{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px 8px;font:500 12px var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi)}
.coach b{display:inline-block;font-weight:500;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.qs{position:relative;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:stretch;max-width:640px;padding:8px;border-radius:30px}
.qs::before{content:"";position:absolute;inset:-5px;border-radius:34px;border:1px solid var(--gold);opacity:0;animation:ping 2.8s ease-out infinite;pointer-events:none}
@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
.qs .f{display:flex;flex-direction:column;padding:10px 18px;border-radius:22px;background:rgba(255,255,255,.045);min-width:0;transition:background .2s,box-shadow .2s}
.qs .f:focus-within{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--gold)}
.qs label{font:500 10px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qs input{background:none;border:0;outline:none;font-size:17px;padding:2px 0;min-width:0;width:100%;color:var(--fg);color-scheme:dark}
.qs input::placeholder{color:var(--muted)}
.qs .shimmer{align-self:stretch}
.minilinks{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap}
.minilinks button{background:none;border:0;padding:0;color:var(--muted);font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.minilinks button:hover{color:var(--fg)}
.stickycta{display:none}
@media (max-width:900px){
  .hero{padding-block:56px 56px}
  .qs{grid-template-columns:1fr 1fr}.qs .shimmer{grid-column:1/-1}
  .stickycta{display:block;position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:39;transform:translateY(160%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .stickycta.show{transform:none}
  .stickycta .shimmer{width:100%;justify-content:space-between}
  }

/* ===== voice presence: light, ripples, whisper ===== */
.halo{position:absolute;inset:-14%;z-index:0;pointer-events:none}
.halo canvas,.vorb canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rays{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(var(--a-rgb),.17) 0 3deg,transparent 3deg 14deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 20%,#000 38%,transparent 72%);mask-image:radial-gradient(closest-side,transparent 20%,#000 38%,transparent 72%);animation:spin 160s linear infinite}
.voice-sec .panel2{position:relative;border-radius:32px;padding:64px 24px 44px;text-align:center;overflow:hidden}
.vorb{position:relative;width:min(100%,440px);aspect-ratio:1;margin:8px auto 0}
.vorb .tap{position:absolute;left:26%;top:26%;width:48%;height:48%;border-radius:50%;background:none;border:0;cursor:pointer;z-index:2}
.vorb .tap:focus-visible{outline-offset:6px;border-radius:50%}
.whisper{font:italic 400 clamp(24px,3.6vw,38px)/1.5 "Tiro Devanagari Hindi",Georgia,serif;max-width:24ch;margin:-8px auto 0;min-height:3.1em;text-wrap:balance;color:var(--fg)}
.whisper span{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(8px);transition:opacity 1s ease,filter 1s ease,transform 1s ease;text-shadow:0 0 24px rgba(var(--a-rgb),.65)}
.whisper span.on{opacity:1;filter:blur(0);transform:none}
.whisper.out span{opacity:0;filter:blur(8px);transform:translateY(-6px);transition-duration:.9s}
.vstate{display:inline-flex;gap:10px;align-items:center;margin-top:22px;font:500 12px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.vstate i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:tw 1.4s ease-in-out infinite}
.vnote{max-width:52ch;margin:16px auto 0}
.voicecard{display:flex;gap:18px;align-items:center}
.vorb.mini{width:132px;flex:none;margin:0}
.whisper.small{font-size:20px;text-align:left;max-width:none;min-height:3.4em;margin:6px 0 0}
@media (max-width:900px){.voicecard{flex-direction:column;text-align:center}.whisper.small{text-align:center}}

/* ===== Day theme (saffron) ===== */
html[data-mode="day"] .spot{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.4)),color-mix(in srgb,var(--surface) 60%,transparent);border-color:rgba(var(--a-rgb),.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 50px -28px rgba(160,70,20,.38)}
html[data-mode="day"] .slot,html[data-mode="day"] .fact,html[data-mode="day"] .float,html[data-mode="day"] .sheet,html[data-mode="day"] .birthcard,html[data-mode="day"] .pal{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.45)),color-mix(in srgb,var(--surface) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 20px 44px -28px rgba(160,70,20,.38)}
html[data-mode="day"] .nav .wrap{background:rgba(255,255,255,.72);border-color:rgba(var(--a-rgb),.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 40px -22px rgba(160,70,20,.4)}
html[data-mode="day"] .tabs{background:rgba(255,246,234,.9)}
html[data-mode="day"] .btn-s{background:rgba(255,255,255,.7);border-color:rgba(var(--a-rgb),.25)}
html[data-mode="day"] .seg2{border-color:rgba(var(--a-rgb),.25);background:rgba(255,255,255,.5)}
html[data-mode="day"] .seg2 button[aria-pressed="true"]{background:rgba(var(--a-rgb),.14);color:var(--fg)}
html[data-mode="day"] .links button[aria-current="true"],.links a[aria-current="true"]{background:rgba(var(--a-rgb),.12);color:var(--fg)}
html[data-mode="day"] .pill-tag{background:rgba(255,255,255,.6);border-color:rgba(var(--a-rgb),.25)}
html[data-mode="day"] .qs .f{background:rgba(var(--a-rgb),.07)}
html[data-mode="day"] .qs .f:focus-within{background:rgba(var(--a-rgb),.12)}
html[data-mode="day"] .qs input{color-scheme:light}
html[data-mode="day"] .sw{background:rgba(255,255,255,.6)}
html[data-mode="day"] .grain{mix-blend-mode:multiply;opacity:.05}
html[data-mode="day"] .ambient i{opacity:.3}
html[data-mode="day"] .whisper span{text-shadow:none}
html[data-mode="day"] .scrim{background:rgba(60,25,10,.35)}
html[data-mode="day"] .price{background-image:linear-gradient(110deg,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%)}
html[data-mode="day"] .moon{filter:drop-shadow(0 8px 20px rgba(120,60,20,.35))}
html[data-mode="day"] .moon circle{fill:rgba(60,30,15,.14)!important;stroke:rgba(60,30,15,.28)!important}
html[data-mode="day"] .shimmer.gold{box-shadow:0 12px 34px -12px rgba(var(--a-rgb),.7)}
html[data-mode="day"] .dotsw i{border-color:rgba(255,255,255,.9)}
@media (max-width:900px){
  .nav .wrap{gap:8px;padding-left:16px}.nav .r{gap:6px}.btn-s{padding:6px 12px}
  #palBtn{display:none}#modeSeg span{display:none}.brand i{display:none}
}

/* ===== free reports: pick-3 pack ===== */
.offer{position:sticky;top:84px;z-index:20;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 22px;border-radius:26px;margin:24px 0 18px}
.offer .cnt{font:500 12px var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slots{display:flex;gap:10px;align-items:center;margin-top:8px}
.slotc{width:52px;height:52px;border-radius:50%;border:1.5px dashed var(--line);display:grid;place-items:center;font-size:22px;color:var(--teal);transition:all .35s}
.slotc.fill{border-style:solid;border-color:var(--gold);background:rgba(var(--a-rgb),.14);color:var(--gold-hi);box-shadow:0 0 22px -4px rgba(var(--a-rgb),.6)}
.offer.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.cats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin-bottom:8px}
.cats button{flex:none;padding:8px 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);font-size:15px}
.cats button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-hi);background:rgba(var(--a-rgb),.12)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rc{display:flex;flex-direction:column;gap:10px;padding:22px;cursor:pointer;text-align:left;width:100%}
.rc .top{display:flex;justify-content:space-between;align-items:center}
.rc .gl{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:var(--teal);background:rgba(var(--r-rgb),.12);border:1px solid var(--line2)}
.rc .tag{font:500 11px var(--f-data);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(var(--a-rgb),.16);color:var(--gold-hi)}
.rc h3{font-size:18px}
.rc p{margin:0;color:var(--muted);font-size:14px;flex:1}
.rc .foot2{display:flex;align-items:center;gap:10px;margin-top:4px}
.was{text-decoration:line-through;color:var(--muted);font:500 13px var(--f-data)}
.rc .pick{border-radius:999px;padding:8px 16px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px;margin-left:auto}
.rc[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 22px 50px -24px rgba(var(--a-rgb),.6)}
.rc[aria-pressed="true"] .pick{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);border-color:transparent;font-weight:600}
.price .was{-webkit-text-fill-color:var(--muted);color:var(--muted);font-size:.42em;margin-right:10px;vertical-align:middle}
.price .per{-webkit-text-fill-color:var(--muted);color:var(--muted);font:500 14px var(--f-body)}
.minilinks .hot{color:var(--gold-hi);text-decoration-color:var(--gold)}
.packrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line2)}
.packrow:last-of-type{border:0}
.packrow .gl{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:var(--teal);background:rgba(var(--r-rgb),.12);border:1px solid var(--line2);flex:none}
.packrow .nm{flex:1;min-width:0}
.stat{font:500 11px var(--f-data);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
.stat.ready{background:rgba(111,211,160,.16);color:var(--good)}
.stat.prep{background:rgba(var(--a-rgb),.14);color:var(--gold-hi);animation:tw 1.4s ease-in-out infinite}
html[data-mode="day"] .stat.ready{background:rgba(30,143,94,.12)}
@media (max-width:900px){.rgrid{grid-template-columns:1fr}.offer{top:76px}}

/* ===== online HTML report ===== */
.rpt{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.rcover{text-align:center;padding:44px 24px 34px;border-radius:28px;position:relative}
.rcover .gl{width:76px;height:76px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;font-size:36px;color:var(--gold-hi);background:rgba(var(--a-rgb),.14);border:1px solid var(--line);box-shadow:0 0 40px -8px rgba(var(--a-rgb),.6)}
.rcover h1{font-size:clamp(30px,5vw,46px);line-height:1.15;margin:6px 0 6px}
.rcover .who{color:var(--muted);margin:0 0 22px}
.rtools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rsec h3{margin-bottom:14px}
.rbul{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.rbul li{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:1.6}
.rbul li b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--f-data);background:rgba(var(--a-rgb),.16);color:var(--gold-hi);margin-top:2px}
.src{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.src span{font:500 11px var(--f-data);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.tl{display:flex;flex-direction:column;gap:12px}
.tl .row{display:grid;grid-template-columns:64px 1fr 84px;gap:14px;align-items:center}
.tl .row b{font:500 14px var(--f-data)}
.tl .row span{font-size:13px;color:var(--muted);text-align:right}
.tl .bar{margin:0}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;padding:12px 20px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);box-shadow:0 14px 40px -12px #000;font-size:15px}
.toast[hidden]{display:none}

/* ===== study-only filter ===== */
.studybar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-radius:20px;margin:6px 0 14px}
.studybar label{font-weight:600}
.studybar select{width:auto;min-width:240px;flex:none}
.rt{display:flex;align-items:center;gap:8px}
.stg{font:500 11px var(--f-data);letter-spacing:.06em;color:var(--muted)}
.empty{grid-column:1/-1;text-align:center;padding:40px 16px;color:var(--muted)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding-block:36px 56px}
  .links{display:none}
  .three,.trust,.plans,.grid2{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.b3,.b3r{grid-column:auto;grid-row:auto}
  .two{grid-template-columns:1fr}.sticky{position:static}.panel{grid-template-columns:1fr}.birthcard{position:static;order:-1}
  .sec{padding-block:52px}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line2);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .tabs button,.tabs a{background:none;border:0;padding:9px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);font-size:12px}
  .tabs .g{font-size:20px;line-height:1.2}
  .tabs button[aria-current="true"],.tabs a[aria-current="true"]{color:var(--gold-hi)}
    .foot{padding-bottom:120px}
  .float{left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.meteor{display:none}.dr{stroke-dasharray:none!important}.fi{opacity:1!important}}

/* anchors that play the prototype's buttons */
a.brand,.links a,.tabs a,a.btn-s,.minilinks a,a.shimmer,a.btn-ghost{text-decoration:none;color:inherit}
a.btn-s{display:inline-block}
.minilinks a{color:var(--muted);font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.minilinks a:hover{color:var(--fg)}.minilinks a.hot{color:var(--gold-hi);text-decoration-color:var(--gold)}
.tabs a{padding:9px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);font-size:12px}
.tabs a[aria-current="true"]{color:var(--gold-hi)}
.shimmer.gold.big{border:0}
.qerr{grid-column:1/-1;margin:0;min-height:0;font-size:14px;color:var(--warn)}
.qerr:empty{display:none}

/* pages that keep both languages in the DOM (reports) and show one with CSS */
body.lang-hi .en,body.lang-en .hi{display:none}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:62ch;margin:8px 0 0}
.answer{margin:22px 0 0;max-width:62ch;padding:18px 22px;border-radius:22px;border:1px solid var(--line2);background:var(--surface)}
.answer .k{font:500 11px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.answer p{margin:0;color:var(--fg);font-size:15px}
.rcw{display:flex;flex-direction:column;gap:10px;padding:22px}
.rcw[hidden],.cats[hidden],#pack[hidden],.empty[hidden],.studybar[hidden]{display:none}
.rc-link{display:flex;flex-direction:column;gap:10px;flex:1;text-decoration:none;color:inherit}
.rc-link:focus-visible{outline-offset:6px;border-radius:14px}
.rcw .nm small{display:block;font-size:13px;color:var(--muted);font-weight:400}
.rcw .pk{margin-left:auto}
.rcw .pr{display:flex;align-items:center;gap:10px;font:500 13px var(--f-data);color:var(--muted)}
.rcw .free{font:500 11px var(--f-data);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(var(--a-rgb),.16);color:var(--gold-hi)}
.rcw .was{text-decoration:line-through}
.rcw.picked{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 22px 50px -24px rgba(var(--a-rgb),.6)}
.pickbtn{min-height:44px;border-radius:999px;padding:8px 16px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px}
.pickbtn[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);border-color:transparent;font-weight:600}
.cats button,.studybar select{min-height:44px}
.cnt.warn{color:var(--warn)}
.catsec{margin-top:36px}
.catsec h3{margin:0 0 14px}
.packhead[hidden]{display:none}
.cats a{flex:none;padding:8px 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);font-size:15px;text-decoration:none;color:inherit}
.cats a:hover{border-color:var(--gold)}
.links a{white-space:nowrap}
@media (min-width:901px){.nav .wrap{max-width:1080px}.links{gap:0}.links a{padding:8px 11px}}
.rc.rcw,.rc.alw{cursor:default}.rc.alw{display:flex;flex-direction:column;gap:10px;padding:22px}
.brand,.btn-s,.seg2 button,.pill-tag{white-space:nowrap}
#pack:not([hidden])+#intro h1{font-size:clamp(22px,2.6vw,28px);color:var(--muted);font-weight:500}
.inp:focus-visible,.studybar select:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ===== /panchang: the old page's rows, bars and choghadiya cells on the site's tokens ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#v-panchang{--card:var(--surface);--panel:var(--surface2);--text:var(--fg);--bad:var(--warn);--gold2:var(--gold-hi);--btn-text:var(--gold-ink);--gold-text:var(--gold)}
#v-panchang .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
#v-panchang .sugwrap{position:relative;flex:1 1 220px;min-width:180px}
#city{width:100%;min-height:48px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.05);padding:0 18px;font-size:16px}
#city:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.dnav{display:flex;gap:8px}.dnav .btn-s{min-width:44px;min-height:44px;font-size:18px;line-height:1}
.dnav .today{font-size:15px}
.sug{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden;z-index:5;display:none;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.sug div{padding:12px 16px;cursor:pointer;min-height:44px}.sug div:hover{background:var(--surface2)}
#v-panchang .moonwrap{grid-column:1/-1}
#v-panchang .moonwrap .moon{width:130px;height:130px}
#v-panchang .grid2{gap:16px;align-items:stretch}
#v-panchang .spot.card{grid-column:auto}
#v-panchang .card h2{font:500 12px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
#v-panchang .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)}
#v-panchang .row:last-child{border-bottom:0}
#v-panchang .row .k{color:var(--muted);font-size:15px;flex:none}
#v-panchang .row .v{text-align:right}
#v-panchang .row .big{font-weight:600}
#v-panchang .row .upto{display:block;color:var(--gold);font:500 12px var(--f-data)}
#v-panchang .row.bad .big{color:var(--warn)}
#v-panchang .sunlist{display:flex;justify-content:space-between;margin-top:8px;font-size:15px}
#v-panchang .sunlist b{font:500 14px var(--f-data)}
#v-panchang .win .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
#v-panchang .win .top b{font:500 15px var(--f-data)}
#v-panchang .tl{display:block;position:relative;height:10px;border-radius:6px;background:var(--surface2);margin:14px 0 4px;overflow:hidden}
#v-panchang .tl i{position:absolute;top:0;bottom:0;border-radius:6px}
#v-panchang .tl .bad{background:var(--warn)}#v-panchang .tl .good{background:var(--good)}
#v-panchang .tl .off{background:repeating-linear-gradient(45deg,var(--good) 0 3px,transparent 3px 6px);opacity:.45}
#v-panchang .tl .nowtick{width:2px;background:var(--fg);border-radius:0}
#v-panchang .tlends{display:flex;justify-content:space-between;font:500 11px var(--f-data);color:var(--muted)}
#v-panchang .sunsvg{width:100%;max-width:440px;margin:0 auto;height:auto;overflow:visible;display:block}
#v-panchang .draw{stroke-dasharray:1;animation:skvdraw 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes skvdraw{from{stroke-dashoffset:1}}
#v-panchang .rise{animation:skvrise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0)*60ms)}
@keyframes skvrise{from{opacity:0;transform:translateY(10px)}}
html.calm #v-panchang .draw,html.calm #v-panchang .rise{animation:none!important}
#v-panchang .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 0}
#v-panchang .cell{border:1px solid var(--line2);border-radius:14px;padding:10px 12px;background:var(--surface2)}
#v-panchang .cell.good{border-color:rgba(111,211,160,.45)}#v-panchang .cell.bad{border-color:rgba(240,179,90,.45)}
#v-panchang .cell .nm{font-weight:600}
#v-panchang .cell.good .nm{color:var(--good)}#v-panchang .cell.bad .nm{color:var(--warn)}
#v-panchang .cell .tm{color:var(--muted);font:500 12px var(--f-data);margin-top:2px}
#v-panchang .seg{display:flex;gap:8px;margin:2px 0 8px;overflow:visible;padding:0}
#v-panchang .seg button{flex:1;min-height:44px;border:1px solid var(--line2);background:rgba(255,255,255,.04);border-radius:999px;color:var(--muted)}
#v-panchang .seg button.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(var(--a-rgb),.12)}
#v-panchang .legend{display:flex;gap:14px;justify-content:center;font-size:13px;color:var(--muted)}
#v-panchang .legend .d{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px}
@media (max-width:900px){#v-panchang .moonwrap{flex-direction:column;text-align:center}}
/* the lit half must stay visible against the unlit disc on a light page (tests/ui/panchang_visuals, check 5) */
html[data-mode="day"] #v-panchang .moon circle{fill:#2b2540!important;stroke:rgba(128,128,128,.45)!important}

/* ===== /rashifal: the picker, the wheel and the detail on the site's tokens ===== */
#v-rashifal .cats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px}
#v-rashifal .cats .tab{flex:none;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);font-size:15px}
#v-rashifal .cats .tab[aria-pressed="true"],#v-rashifal .cats .tab.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(var(--a-rgb),.12)}
#v-rashifal .rl{align-items:start}
#v-rashifal .signs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#v-rashifal .sign{aspect-ratio:auto;min-height:92px;padding:10px 4px;gap:3px;text-align:center}
#v-rashifal .sign .g{font-size:28px;color:var(--teal);line-height:1}
#v-rashifal .sign .nm{font-size:14px}
#v-rashifal .sign .stars{color:var(--gold);font-size:11px;letter-spacing:1px;margin:0}
#v-rashifal .sign .mineflag{position:absolute;top:0;right:0;background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:700;padding:2px 8px;border-radius:0 18px 0 10px}
#v-rashifal .sign{position:relative}
#v-rashifal .sticky{position:sticky;top:96px}
#v-rashifal .wheel{width:min(280px,72%);height:auto;display:block;margin:0 auto 10px;overflow:visible}
#v-rashifal .wheel .rot{transform-origin:150px 150px;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
html.calm #v-rashifal .wheel .rot{transition:none}
@media (prefers-reduced-motion:reduce){#v-rashifal .wheel .rot{transition:none}}
#v-rashifal .wheel .seg{fill:var(--gold);stroke:var(--line);stroke-width:1}
#v-rashifal .wheel .seg.on{stroke:var(--gold-hi);stroke-width:3}
#v-rashifal .wheel text{fill:var(--fg);font-size:20px;text-anchor:middle;dominant-baseline:central}
#v-rashifal .wheel .hub{fill:var(--bg);stroke:var(--line)}
#v-rashifal .dnm{font:600 24px/1.3 var(--f-display);margin:6px 0 2px;text-align:center}
#v-rashifal .dnm small{color:var(--muted);font-weight:400;font-size:14px;margin-left:6px}
#v-rashifal .drange{color:var(--muted);font-size:13px;text-align:center}
#v-rashifal .body{font-size:18px;line-height:1.75;margin:12px 0 16px}
#v-rashifal .meterrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
#v-rashifal .meter{display:flex;gap:5px}
#v-rashifal .meter i{width:26px;height:7px;border-radius:4px;background:var(--surface2)}
#v-rashifal .meter i.on{background:var(--gold)}
#v-rashifal .facts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#v-rashifal .fact{padding:10px 14px;font-size:14px}
#v-rashifal .fact b{display:block;font:500 10px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
#v-rashifal .remedy{border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:14px;padding:12px 14px;font-size:15px;margin:10px 0;background:rgba(255,255,255,.03)}
#v-rashifal .remedy .rl2{display:block;font:500 11px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
#v-rashifal .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
#v-rashifal .actions .btn-s{min-height:44px}
#v-rashifal .pick{text-align:center;color:var(--muted);padding:20px 8px}
@media (max-width:900px){#v-rashifal .sticky{position:static}#v-rashifal .signs{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){#v-rashifal .signs{grid-template-columns:repeat(3,1fr)}}
/* touch targets: 44px, as the product's tests require (the prototype's nav controls were 34px) */
.seg2 button,.btn-s,.tabs a,.links a{min-height:44px}
.seg2 button{display:inline-flex;align-items:center;justify-content:center}
.btn-s{display:inline-flex;align-items:center;justify-content:center}
#v-rashifal .sign:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}

/* /services — three plans, prices read from the checkout's own products */
#v-services .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
#v-services .price .was{text-decoration:line-through;margin-right:0}
#v-services .price .now{display:inline}
#v-services .plan a.shimmer,#v-services .plan a.btn-ghost{justify-content:center;text-decoration:none}
#v-services .foot{margin-top:26px}
#v-services .foot .links{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:8px}
#v-services .foot .links a{padding:0;display:inline-flex;align-items:center;min-height:44px;color:var(--gold-hi);text-decoration:underline}

/* /about — what it is, what it never does, your data; every line read from its source */
#v-about .trust{grid-template-columns:repeat(2,1fr)}
#v-about .trust .wide{grid-column:1/-1}
@media (max-width:760px){#v-about .trust{grid-template-columns:1fr}}
#v-about .never{margin:0;padding-left:1.1em}
#v-about .never li{margin:.3em 0}
#v-about .sys{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
#v-about .sys li{border:1px solid var(--line2);border-radius:999px;padding:6px 14px;font-size:.88rem}
#v-about .links{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:26px}
#v-about .links a{padding:0;display:inline-flex;align-items:center;min-height:44px;color:var(--gold-hi);text-decoration:underline}

/* the login sheet (site-login.js) */
html.login-open{overflow:hidden}
#login .sheet{max-height:calc(100dvh - 32px);overflow:auto}
#login .inp.cc{flex:none;width:68px;display:grid;place-items:center;text-align:center}
#login .loginmsg{min-height:1.4em;margin:10px 0 0;color:var(--muted)}
#login .loginmsg.bad{color:var(--gold-hi)}
#login .loginrow{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
#login .linkbtn{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--gold-hi);text-decoration:underline;cursor:pointer}
#login .linkbtn:disabled{color:var(--muted);text-decoration:none;cursor:default}
#login .loginalt{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:14px}
#login .loginalt .btn-ghost{justify-content:center}
#login .btn-ghost,#login .shimmer{min-height:52px}
#login button:focus-visible,#login a:focus-visible,#login input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* phones: the header's five controls did not fit at 360-390px and "Log in" ended past the screen edge */
@media (max-width:480px){
  .nav .wrap{gap:6px;padding-right:12px}
  .brand{font-size:18px}
  .nav .r{gap:4px}
  .seg2 button{padding:6px 8px}
  .btn-s{padding:6px 10px;font-size:14px}
}
@media (max-width:380px){
  .nav .wrap{padding-left:12px;padding-right:10px}
  .brand{font-size:16px}
}

/* /start: Samay's voice and asking a question under the reading */
#v-reading .voicecard{margin-top:6px}
#v-reading .askbox .inrow{align-items:stretch}
#v-reading .askbox .shimmer{min-height:52px;padding:0 22px;flex:none}
#v-reading .qa{border-top:1px solid var(--line2);margin-top:16px;padding-top:14px}
#v-reading .qa .you{margin:0 0 8px;color:var(--muted);font-style:italic}
#v-reading .qa .ans{margin:0 0 10px;line-height:1.7}
#v-reading .qa .ansplay{min-height:44px;padding:0 18px}
#v-reading .askwall{margin-top:16px;border:1px dashed var(--line);border-radius:16px;padding:16px}
#v-reading .askwall a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;text-decoration:none}
#v-reading .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#v-reading #vplay{min-height:44px;padding:0 20px}
#v-reading .two>*{min-width:0}
#v-reading .askbox .cats{flex-wrap:wrap;overflow:visible}
#v-reading .askbox .inp{min-width:0}

/* the free pack can be up to 7 picks (FREE_PACK_MAX): keep every slot on a 360-390px screen */
.slots{flex-wrap:wrap}
@media (max-width:480px){.slots{gap:6px}.slotc{width:38px;height:38px;font-size:18px}.pill-tag{max-width:100%;white-space:normal}}
.slotc{padding:0}


/* ── Review fixes (20 Oct 2026, from the Chrome review of the live site) ──────
   1. Day contrast. Accent-coloured TEXT (eyebrows, active tab / menu item, the
      hot mini link, pill tags) measured 3.4-4.4:1 on the Day gradients. The
      accent stays as the FILL colour; as text it is mixed toward black.
   2. Tiny type. Labels were 10px and 11px; the floor is now 12px.
   3. Small targets. Inline links, the "I don't know the time" checkbox row and
      the report's back link were 18-24px tall; they now have a 44px row.
   4. One h1 per page: page titles that were h2 are h1 with the same look.    */
html[data-mode="day"] .eyebrow,html[data-mode="day"] .qs-h,html[data-mode="day"] .pill-tag,
html[data-mode="day"] .minilinks .hot,html[data-mode="day"] .offer .cnt,
html[data-mode="day"] .links a[aria-current="true"],html[data-mode="day"] .links button[aria-current="true"],
html[data-mode="day"] .tabs a[aria-current="true"],html[data-mode="day"] .tabs button[aria-current="true"],
html[data-mode="day"] .tg-day{color:color-mix(in srgb,var(--gold) 68%,#000)}
html[data-mode="day"] .stars,html[data-mode="day"] .rate .st{color:color-mix(in srgb,var(--gold) 68%,#000)}
.sample,.qs label,.fact .k,.birthcard .bc .k,.src span,.offer .cnt,.field label{font-size:12px}
.minilinks a,.minilinks button{display:inline-flex;align-items:center;min-height:44px}
.check{min-height:44px;margin-top:0}
.check input{width:24px;height:24px}
.rhead a,.crumb a,a.back{display:inline-flex;align-items:center;min-height:44px}
h1.pg{font-size:clamp(28px,4vw,42px);line-height:1.15}
.rc .tag,.rcw .free,.stg,.answer .k,#v-panchang .tlends,#v-rashifal .sign .stars{font-size:12px}
html[data-mode="day"] #v-rashifal .sign .stars{color:color-mix(in srgb,var(--gold) 68%,#000)}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.vnote a,.muted.small a{padding-block:13px}   /* inline links inside a sentence: a taller hit area without changing the line */

/* ===== a single report's page (/reports/<slug>), on the prototype's report pieces ===== */
#v-rdetail .crumb{align-self:flex-start;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
#v-rdetail .rcover{padding:44px 24px 36px}
#v-rdetail .rcover .eyebrow{margin-bottom:4px}
#v-rdetail .rcover h1{font-weight:600}
#v-rdetail .rcover .who{max-width:56ch;margin:6px auto 20px;font-size:18px}
#v-rdetail .rcover .meta{justify-content:center;margin:0 0 24px}
#v-rdetail .rcover .meta span{text-transform:none;letter-spacing:.02em;font-size:13px}
#v-rdetail .rcover .meta .price{color:var(--gold-hi);border-color:rgba(var(--a-rgb),.45);background:rgba(var(--a-rgb),.1)}
#v-rdetail .rsec .h3{font:600 22px/1.3 var(--f-display);margin:0 0 14px}
#v-rdetail .rsec .lead{margin:0;font-size:19px;line-height:1.65;color:var(--fg);max-width:70ch}
#v-rdetail .rbul li{font-size:17px}
#v-rdetail details.faq{border-bottom:1px solid var(--line2)}
#v-rdetail details.faq:last-child{border-bottom:0}
#v-rdetail details.faq summary{font-size:18px;padding:16px 0}
#v-rdetail details.faq p{margin:0 0 18px;color:var(--muted);font-size:16px;max-width:68ch}
#v-rdetail .rend{text-align:center}
#v-rdetail .rend .rtools{margin-top:6px}
html[data-mode="day"] #v-rdetail .rcover .meta .price{color:color-mix(in srgb,var(--gold) 68%,#000)}
@media (min-width:900px){#v-rdetail .rcover h1{font-size:clamp(34px,4.4vw,52px)}}
/* report page: the price is a small pill like its neighbours, not the 40px shimmer used on /services */
#v-rdetail .src.meta .price{font:500 11px var(--f-data);background:none;-webkit-text-fill-color:currentColor;color:var(--gold-hi);animation:none}

/* ---- /terms /privacy /refund /contact /pricing /faq /remedies /how-samay-works /panchang/<city>: older
   content pages carried onto the shell. One scoped vocabulary, tokens only. ---- */
#v-doc{--text:var(--fg);--card:var(--surface);--gold-text:var(--gold-hi);--gold-text-hi:var(--gold-hi);--accent:var(--gold);--btn-text:var(--gold-ink);--gold2:var(--gold-hi)}
html[data-mode="day"] #v-doc{--gold-text:color-mix(in srgb,var(--gold) 68%,#000);--gold-text-hi:color-mix(in srgb,var(--gold) 55%,#000)}
#v-doc .panel-wrap{max-width:820px}
#v-doc .doc{padding:clamp(20px,4vw,40px);line-height:1.7}
#v-doc h1{font:600 clamp(26px,4vw,38px)/1.2 var(--f-display);margin:0 0 .3em}
#v-doc h1 small{display:block;font:400 .5em/1.4 var(--f-body);color:var(--muted);margin-top:.4em}
#v-doc h2{font:600 1.2rem/1.3 var(--f-display);margin:1.6em 0 .4em;color:var(--fg)}
#v-doc h3{font:600 1.02rem/1.3 var(--f-display);margin:1.2em 0 .3em}
#v-doc p,#v-doc li,#v-doc dd{color:var(--fg)}
#v-doc .muted,#v-doc .lede,#v-doc small,#v-doc .count{color:var(--muted)}
#v-doc a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
#v-doc ul,#v-doc ol{padding-left:1.3em}
#v-doc li{margin:.35em 0}
#v-doc table{width:100%;border-collapse:collapse;margin:12px 0;display:block;overflow-x:auto}
#v-doc td,#v-doc th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
#v-doc th{color:var(--gold-text);font-weight:600}
#v-doc nav.legalnav{margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.92rem}
#v-doc nav.legalnav a,#v-doc ul.topics a{display:inline-block;padding:8px 4px}
#v-doc footer.legalfoot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
#v-doc dl.faq dt{font-weight:600;margin-top:1.2em}
#v-doc dl.faq dd{margin:.35em 0 0}
#v-doc ul.topics{list-style:none;padding:0}
#v-doc ul.topics li{border-top:1px solid var(--line);padding:.7em 0}
#v-doc .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:.6em 0}
@media(max-width:560px){#v-doc .grid{grid-template-columns:1fr}}
#v-doc .rc{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px;text-decoration:none}
#v-doc .rc:hover{border-color:var(--gold)}
#v-doc .cat{font:600 .75rem/1.3 var(--f-data);text-transform:uppercase;letter-spacing:.1em;color:var(--gold-text);margin:1.6em 0 .3em;border-top:1px solid var(--line);padding-top:1.1em}
#v-doc .answer{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:15px 17px}
#v-doc .pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.8rem;color:var(--muted)}
#v-doc .cta{display:inline-block;background:var(--gold);color:var(--gold-ink);font-weight:700;padding:12px 26px;border-radius:999px;text-decoration:none}
#v-doc details.faq{border:1px solid var(--line);border-radius:10px;background:var(--card);margin:9px 0;overflow:hidden}
#v-doc details.faq summary{cursor:pointer;padding:13px 15px;font-weight:600;list-style:none}
#v-doc details.faq .a{padding:0 15px 14px;color:var(--muted)}

/* ---- /why: the comparison page, on the shell. Same content as before; tokens only. ---- */
#v-why{--warn-t:color-mix(in srgb,var(--warn) 85%,var(--fg));--bad:#E0707A}
html[data-mode="day"] #v-why{--bad:#B3261E;--warn-t:#8A5A00}
#v-why .wrap{padding-bottom:70px}
#v-why .hero{text-align:center;padding:clamp(30px,6vw,64px) 0 40px}
#v-why .hero-eyebrow,#v-why .sec-badge{font:500 11px/1.4 var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
html[data-mode="day"] #v-why .hero-eyebrow,html[data-mode="day"] #v-why .sec-badge{color:color-mix(in srgb,var(--gold) 68%,#000)}
#v-why .hero-title{font:600 clamp(30px,5vw,54px)/1.15 var(--f-display);margin:12px 0 16px}
#v-why .hero-title span{color:var(--gold-hi)}
html[data-mode="day"] #v-why .hero-title span{color:color-mix(in srgb,var(--gold) 68%,#000)}
#v-why .hero-sub{max-width:62ch;margin:0 auto 26px;color:var(--muted);line-height:1.75}
#v-why .hero-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:760px;margin:0 auto}
#v-why .hero-stat,#v-why .diff-card,#v-why .fear-card,#v-why .closing{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--line);border-radius:16px}
html[data-mode="day"] #v-why .hero-stat,html[data-mode="day"] #v-why .diff-card,html[data-mode="day"] #v-why .fear-card,html[data-mode="day"] #v-why .closing{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.4)),color-mix(in srgb,var(--surface) 60%,transparent)}
#v-why .hero-stat{padding:16px 10px}
#v-why .hs-num{font:600 clamp(26px,4vw,38px)/1 var(--f-display);color:var(--gold-hi)}
html[data-mode="day"] #v-why .hs-num{color:color-mix(in srgb,var(--gold) 68%,#000)}
#v-why .hs-label{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
#v-why .sec-header{text-align:center;margin:46px 0 26px}
#v-why .sec-title{font:600 clamp(24px,3.4vw,34px)/1.2 var(--f-display);margin:8px 0}
#v-why .sec-sub{color:var(--muted)}
#v-why .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#v-why .diff-card{padding:22px}
#v-why .diff-card.featured{border-color:rgba(var(--a-rgb),.5)}
#v-why .diff-num{font:500 12px var(--f-data);color:var(--muted)}
#v-why .diff-icon-row{display:flex;gap:12px;align-items:center;margin:8px 0}
#v-why .diff-icon{font-size:26px}
#v-why .diff-headline{font:600 1.2rem/1.25 var(--f-display)}
#v-why .diff-tagline{font:500 11px var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
#v-why .diff-body{line-height:1.7;margin-bottom:12px}
#v-why .proof-row{display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:var(--muted);font-size:.95rem;line-height:1.55}
#v-why .proof-dot{flex:0 0 7px;height:7px;border-radius:50%;background:var(--gold);margin-top:8px}
#v-why .diff-vs{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
#v-why .diff-vs span{color:var(--fg);font-weight:600}
#v-why .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:56px 0}
#v-why .compare-section{overflow-x:auto}
#v-why .compare-table{width:100%;min-width:640px;border-collapse:collapse}
#v-why .compare-table th,#v-why .compare-table td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line);font-size:.92rem}
#v-why .th-feature,#v-why .td-feat,#v-why .tr-label td{text-align:left}
#v-why .tr-label td{font:600 .78rem var(--f-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(var(--a-rgb),.06)}
#v-why .th-samay,#v-why .td-best{background:rgba(var(--a-rgb),.1);font-weight:600}
#v-why .td-yes{color:var(--good)}
#v-why .td-no{color:var(--bad)}
#v-why .td-partial{color:var(--warn-t)}
html[data-mode="day"] #v-why .td-yes{color:#1B6B3A}
#v-why .fear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#v-why .fear-card{padding:20px}
#v-why .fear-icon{font-size:22px;margin-bottom:8px}
#v-why .fear-problem{font-weight:600;color:var(--bad);margin-bottom:8px;line-height:1.5}
#v-why .fear-problem::before{content:"✕ "}
#v-why .fear-solve{color:var(--muted);line-height:1.7}
#v-why .fear-solve::before{content:"✦ ";color:var(--gold)}
#v-why .closing{text-align:center;padding:clamp(28px,5vw,54px) 22px;margin-top:56px}
#v-why .closing-title{font:600 clamp(24px,3.6vw,36px)/1.25 var(--f-display)}
#v-why .closing-sub{max-width:60ch;margin:14px auto 22px;color:var(--muted);line-height:1.7}
#v-why .closing-sub br,#v-why .hero-title br{display:none}
#v-why .closing .shimmer{display:inline-flex}
@media(max-width:820px){#v-why .diff-grid,#v-why .fear-grid{grid-template-columns:1fr}#v-why .hero-stat-row{grid-template-columns:1fr 1fr}}

/* ---- /my-pack ---- */
#v-doc .pack .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:14px 0}
#v-doc .pack .card[hidden]{display:none}
#v-doc .pack label{display:block;font-weight:600;margin:12px 0 4px}
#v-doc .pack input{width:100%;box-sizing:border-box;min-height:44px;padding:0 12px;border-radius:12px;font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
#v-doc .pack button,#v-doc .pack a.btn{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--gold);color:var(--gold-ink);font:600 15px var(--f-body);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
#v-doc .pack button[disabled]{opacity:.6}
#v-doc .pack .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#v-doc .pack .msg{min-height:20px;color:var(--gold-text-hi);margin-top:8px}
#v-doc .pack .sub{color:var(--muted);margin:0 0 18px}

/* ---- /sample-report: the animated example kundli, on the shell. Same content; the panels are the shell's glass, the colours are its tokens. ---- */
#v-sample{--ivory:var(--fg);--ivory-dim:var(--muted);--panel:transparent;--gold-text:var(--gold-hi);--good-t:var(--good);--warn-t:var(--warn);--bad-t:#E0707A;--ink-on:#10122A}
html[data-mode="day"] #v-sample{--gold-text:color-mix(in srgb,var(--gold) 68%,#000);--good-t:#1B6B3A;--warn-t:#8A5A00;--bad-t:#B3261E;--ink-on:#fff}
#v-sample .wrap{max-width:820px;padding-bottom:70px}
#v-sample .act{padding:clamp(34px,6vw,64px) 0;border-top:1px solid var(--line)}
#v-sample #cover{border-top:0;text-align:center;display:flex;flex-direction:column;align-items:center}
#v-sample .eyebrow{display:flex;align-items:center;gap:12px;font:500 11px/1.4 var(--f-data);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
#v-sample .eyebrow .rn{font:600 1.05rem var(--f-display);letter-spacing:.06em}
#v-sample .eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
#v-sample h1{font:600 clamp(2.2rem,7vw,4rem)/1.08 var(--f-display);margin:8px 0 0}
#v-sample h2{font:600 clamp(1.7rem,4.6vw,2.7rem)/1.15 var(--f-display);margin:12px 0 6px}
#v-sample .lede{font-size:clamp(1rem,2.2vw,1.12rem);line-height:1.75;color:var(--muted);max-width:62ch;margin-top:16px}
#v-sample .small{font-size:.85rem;color:var(--muted);line-height:1.6}
#v-sample .gold{color:var(--gold-text);font-weight:500}
#v-sample .brandmark{font:500 .8rem var(--f-data);letter-spacing:.4em;text-transform:uppercase;color:var(--gold-text)}
#v-sample .om{font:600 2.4rem var(--f-display);color:var(--gold-text);margin:6px 0 2px}
#v-sample .sub{color:var(--muted);margin-top:12px}
#v-sample .luminaries{display:grid;grid-template-columns:repeat(3,1fr);margin:30px auto 0;max-width:560px;width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden}
#v-sample .lum{padding:16px 8px}
#v-sample .lum+.lum{border-left:1px solid var(--line)}
#v-sample .lum .k{font:500 10px var(--f-data);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
#v-sample .lum .v{font:600 1.15rem var(--f-display);margin-top:6px}
#v-sample .lum .n{font-size:.78rem;color:var(--muted);margin-top:2px}
#v-sample .scrollcue{margin-top:30px;color:var(--muted);font:500 11px var(--f-data);letter-spacing:.2em;text-transform:uppercase}
#v-sample .rise{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
#v-sample .rise.in{opacity:1;transform:none}
#v-sample .d1{transition-delay:.05s}#v-sample .d2{transition-delay:.12s}#v-sample .d3{transition-delay:.2s}#v-sample .d4{transition-delay:.28s}#v-sample .d5{transition-delay:.36s}
#v-sample .meters{margin-top:26px;display:grid;gap:14px}
#v-sample .meter,#v-sample .card,#v-sample .mo,#v-sample .nx,#v-sample .whoami{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--line);border-radius:16px}
html[data-mode="day"] #v-sample .meter,html[data-mode="day"] #v-sample .card,html[data-mode="day"] #v-sample .mo,html[data-mode="day"] #v-sample .nx,html[data-mode="day"] #v-sample .whoami{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,255,255,.4)),color-mix(in srgb,var(--surface) 60%,transparent)}
#v-sample .meter{padding:16px 18px}
#v-sample .meter .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#v-sample .meter .name{font:600 1.1rem var(--f-display)}
#v-sample .meter .tag{font:600 10px var(--f-data);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:var(--ink-on)}
#v-sample .tag.mild{background:var(--good)}#v-sample .tag.mod{background:var(--warn)}#v-sample .tag.strong{background:#E0707A}
html[data-mode="day"] #v-sample .tag.mild{background:#1B6B3A}html[data-mode="day"] #v-sample .tag.mod{background:#8A5A00}html[data-mode="day"] #v-sample .tag.strong{background:#B3261E}
#v-sample .track{height:7px;border-radius:99px;background:rgba(var(--a-rgb),.14);margin:12px 0 10px;overflow:hidden}
#v-sample .fill{height:100%;width:0;border-radius:99px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
#v-sample .fill.mild{background:var(--good-t)}#v-sample .fill.mod{background:var(--warn-t)}#v-sample .fill.strong{background:var(--bad-t)}
#v-sample .meter .why{font-size:.88rem;color:var(--muted);line-height:1.55}
#v-sample .whoami{margin-top:24px;padding:14px 18px;border-left:3px solid var(--gold)}
#v-sample .colhead{font:600 11px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
#v-sample .timeline{margin:28px 0 6px}
#v-sample .tlbar{display:flex;height:60px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
#v-sample .seg{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;opacity:.38;filter:saturate(.55);border-right:1px solid rgba(0,0,0,.3)}
#v-sample .seg:last-child{border-right:0}
#v-sample .seg.on{opacity:1;filter:none}
#v-sample .seg .pl{font:600 .78rem var(--f-display);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.65)}
#v-sample .seg.now{outline:2px solid var(--gold-text);outline-offset:-2px}
#v-sample .seg.now::before{content:"NOW";position:absolute;top:-20px;left:50%;transform:translateX(-50%);font:600 10px var(--f-data);letter-spacing:.14em;color:var(--gold-text)}
#v-sample .tlaxis{display:flex;justify-content:space-between;margin-top:8px;font:500 11px var(--f-data);color:var(--muted)}
#v-sample .cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
#v-sample .card{padding:16px}
#v-sample .card .h{font:600 1.08rem var(--f-display);color:var(--gold-text)}
#v-sample .card .yr{font:500 11px var(--f-data);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:3px}
#v-sample .card p{font-size:.9rem;color:var(--muted);line-height:1.6;margin-top:8px}
#v-sample .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#v-sample .chip{font-size:.8rem;color:var(--gold-text);border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:rgba(var(--a-rgb),.06)}
#v-sample .twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
#v-sample .lst{list-style:none;padding:0;display:grid;gap:10px}
#v-sample .lst li{font-size:.92rem;color:var(--muted);line-height:1.55;padding-left:20px;position:relative}
#v-sample .lst li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:.7rem;top:.2em}
#v-sample .lst b{color:var(--fg);font-weight:600}
#v-sample .months{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:22px}
#v-sample .mo{padding:10px 6px;text-align:center;border-radius:12px}
#v-sample .mo .m{font:500 11px var(--f-data);color:var(--muted)}
#v-sample .mo .dot{width:9px;height:9px;border-radius:50%;margin:7px auto 5px}
#v-sample .mo.up .dot{background:var(--good-t)}#v-sample .mo.soft .dot{background:var(--warn-t)}
#v-sample .mo .t{font-size:.7rem;color:var(--muted);line-height:1.25}
#v-sample .num3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
#v-sample .nx{text-align:center;padding:16px 8px}
#v-sample .nx .big{font:600 2.1rem/1 var(--f-display);color:var(--gold-text)}
#v-sample .nx .lbl{font:600 10px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-top:8px}
#v-sample .nx .dsc{font-size:.8rem;color:var(--muted);margin-top:5px;line-height:1.4}
#v-sample .enddisc{max-width:620px;margin:20px auto 0;text-align:center;padding-top:34px;border-top:1px solid var(--line)}
#v-sample .rule{width:60px;height:1px;background:var(--gold);margin:20px auto;opacity:.6}
#v-sample .footbrand{font:600 .85rem var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
@media(max-width:620px){#v-sample .cards,#v-sample .twocol{grid-template-columns:1fr}#v-sample .months{grid-template-columns:repeat(4,1fr)}#v-sample .luminaries{grid-template-columns:1fr}#v-sample .lum+.lum{border-left:0;border-top:1px solid var(--line)}#v-sample .num3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#v-sample .rise{opacity:1;transform:none;transition:none}#v-sample .fill{transition:none}}
html.calm #v-sample .rise{opacity:1;transform:none;transition:none}

/* ---- the router (static/site-router.js): thin progress bar, the app bar's Back button, and the slide direction ---- */
#spaBar{position:fixed;left:0;top:0;height:2px;width:0;opacity:0;z-index:70;background:var(--gold-hi);box-shadow:0 0 8px rgba(var(--a-rgb),.6);transition:width .3s ease,opacity .2s ease;pointer-events:none}
html.app #spaBar{top:calc(56px + env(safe-area-inset-top,0px))}
.appback{display:none}
html.app .appback:not([hidden]){display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-8px;border:0;border-radius:50%;background:none;color:var(--fg);font:500 24px/1 var(--f-body);cursor:pointer}
html.app .appback:active{background:rgba(var(--a-rgb),.16)}
html.app .appback:not([hidden])+a.brand{margin-left:0}
html.vt-back::view-transition-old(root){animation:.16s ease both vtOutBack}
html.vt-back::view-transition-new(root){animation:.24s cubic-bezier(.2,.7,.2,1) both vtInBack}
@keyframes vtOutBack{to{opacity:0;transform:translateX(10px)}}
@keyframes vtInBack{from{opacity:0;transform:translateX(-14px)}}
/* ---- App mode: inside the installed app (Android APK / home-screen PWA) or on a touch phone. The website's floating
   pill menu, footer and long-page feel give way to a flat app bar, the bottom tab bar and page-to-page transitions. ---- */
#appSplash{display:none}
html.standalone #appSplash{display:grid;position:fixed;inset:0;z-index:300;place-items:center;background:var(--bg);color:var(--fg);text-align:center;pointer-events:none;animation:appSplashOut .4s ease .7s forwards}
#appSplash b{display:block;font:600 56px/1 var(--f-display);color:var(--gold-hi);text-shadow:0 0 30px rgba(var(--a-rgb),.5)}
#appSplash span{display:block;margin-top:10px;font:600 18px var(--f-display);letter-spacing:.2em}
@keyframes appSplashOut{to{opacity:0;visibility:hidden}}
.foot .legal{display:flex;gap:4px 14px;flex-wrap:wrap;width:100%}
.foot .legal a{padding:0 2px}
html.app{overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.app body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
html.app .nav,html.app .tabs,html.app button,html.app .btn-s,html.app .seg2,html.app a.shimmer,html.app a.btn-ghost{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
html.app #views{padding-top:calc(56px + env(safe-area-inset-top,0px))}
html.app .nav{top:0;padding-top:env(safe-area-inset-top,0px);pointer-events:auto;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line2)}
html.app .nav .wrap,html[data-mode="day"].app .nav .wrap{width:100%;max-width:none;height:56px;margin:0;padding:0 10px 0 16px;border:0;border-radius:0;background:none;box-shadow:none;gap:6px}
html[data-mode="day"].app .nav{background:rgba(255,246,234,.9)}
html.app .nav .links,html.app #palBtn{display:none}
html.app a.brand{font-size:17px}
html.app .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;border-top:1px solid var(--line2);padding-bottom:env(safe-area-inset-bottom,0px)}
html.app .tabs a{position:relative;min-height:58px;justify-content:center;font-size:11px;font-weight:500;transition:transform .12s ease,color .15s ease}
html.app .tabs a:active{transform:scale(.92)}
html.app .tabs .g{font-size:22px}
html.app .tabs a[aria-current="true"]{font-weight:600}
html.app .tabs a[aria-current="true"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--gold-hi)}
html.app .foot{padding-block:22px calc(96px + env(safe-area-inset-bottom,0px));font-size:13px}
html.app .foot .wrap>span:last-of-type{display:none}
html.app .foot .legal a{min-height:40px}
html.app .wrap{padding-inline:16px}
html.app h1.pg,html.app .view h1{font-size:clamp(26px,7.4vw,34px)}
html.app .spot{border-radius:18px}
html.app a,html.app button{-webkit-tap-highlight-color:transparent}
html.app .btn-s:active,html.app a.shimmer:active,html.app a.btn-ghost:active,html.app .seg2 button:active{transform:scale(.96)}
@media (min-width:901px){html.standalone .tabs{display:none}}
/* page-to-page: the bar and the tabs stay put, the page slides in */
@view-transition{navigation:auto}
.nav{view-transition-name:appbar}
.tabs{view-transition-name:tabbar}
::view-transition-old(root){animation:.16s ease both vtOut}
::view-transition-new(root){animation:.24s cubic-bezier(.2,.7,.2,1) both vtIn}
@keyframes vtOut{to{opacity:0;transform:translateX(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateX(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}#appSplash{display:none!important}}
html.calm::view-transition-old(root),html.calm::view-transition-new(root){animation:none}

/* /start, phone-app feel: language step, bottom-sheet time picker, category grid */
.langstep{text-align:center}.langstep .langorb{display:block;width:96px;height:96px;margin:0 auto 18px;opacity:.9}
.langstep h1 small{display:block;font-size:.55em;font-weight:500;color:var(--muted);margin-top:6px}
.langopt{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin:0 0 12px;padding:20px 16px;border:1px solid var(--line2);border-radius:18px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.langopt b{font-size:22px}.langopt:active{border-color:var(--gold);background:var(--surface2)}
.timebtn{display:none;align-items:center;justify-content:space-between;width:100%;text-align:left;cursor:pointer;min-height:48px}
html.app .timebtn{display:flex}html.app #timeRow{display:none}html.app #unk:checked ~ *{opacity:1}
.tsheet[hidden]{display:none}.tsheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end}
.tsheet .tback{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.tcard{position:relative;width:100%;background:var(--surface2,#14183a);border-radius:24px 24px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));animation:tsUp .22s ease-out}
.thead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.twheels{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;height:200px}
.tmark{position:absolute;left:0;right:0;top:80px;height:40px;border-radius:12px;background:rgba(var(--a-rgb,160,150,255),.16);pointer-events:none}
.twheel{height:200px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;text-align:center}
.twheel::-webkit-scrollbar{display:none}
.twheel .pad{display:block;height:80px}
.twheel button{display:block;width:100%;height:40px;scroll-snap-align:center;border:0;background:none;color:var(--fg);font:500 20px/40px var(--f-body,inherit);cursor:pointer}
body.sheet-open{overflow:hidden}
@keyframes tsUp{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tcard{animation:none}}
html.app .topics{grid-template-columns:1fr 1fr}
html.app .topic{min-height:112px}