/* Divya Upay — full-screen pages over a living divine background (sign-in, question, choice of kit). 12 Nov.
   Night blue and champagne gold, the same world as the session player; one memorable thing — the living emblem over the
   wordmark — and everything else quiet. Phone first; the computer gets the wide background and a larger mark. */
:root{
  --night:#050913; --ink:#F6F0E4; --gold:#E2C38A; --gold2:#F8E7BF; --deep:#B8914F;
  --mute:rgba(246,240,228,.72); --faint:rgba(246,240,228,.5); --line:rgba(226,195,138,.34); --glass:rgba(6,10,24,.56);
  --serif:"Cormorant Garamond","Tiro Devanagari Hindi",Georgia,serif; --sans:"Mukta",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body.stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;
  background:var(--night);isolation:isolate;overflow-x:hidden}
a{color:var(--gold2)}
button,input,textarea{font:inherit;color:inherit}

/* the world behind: a still first (instant), the video fades in over it once it plays; a veil keeps words readable */
.stage-still,.stage-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-3}
.stage-still{background:var(--night) center/cover no-repeat;animation:breathe 40s ease-in-out infinite alternate}
.moving .stage-still{animation:none}
.stage-bg{object-fit:cover;opacity:0;transition:opacity 1.8s ease;z-index:-2}
.stage-bg.on{opacity:1}
/* golden motes drifting towards you in the sign-in hall, which glides forward (13 Nov 04:54); drawn by stage.js, above the veil */
.stage-motes{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.stage-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 44% 26% at 50% 37%,rgba(5,9,19,.46) 0%,rgba(5,9,19,0) 100%),
             radial-gradient(ellipse 62% 52% at 50% 60%,rgba(5,9,19,.5) 0%,rgba(5,9,19,.22) 62%,rgba(5,9,19,.5) 100%),
             linear-gradient(180deg,rgba(5,9,19,.3) 0%,rgba(5,9,19,0) 28%,rgba(5,9,19,0) 62%,rgba(5,9,19,.62) 100%)}
@keyframes breathe{from{transform:scale(1.02)}to{transform:scale(1.08)}}

/* the centre column */
.hall{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top) + 28px) 16px 18px;width:100%}

/* the living emblem: its video's black disappears into the sky (screen blend); round, soft-edged */
.emblem{position:relative;width:clamp(104px,17vh,176px);aspect-ratio:1;mix-blend-mode:screen;flex:none}
.emblem video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 71%)}
.emblem svg{position:absolute;inset:0;width:100%;height:100%}
/* the turning chakra (the opening screen, "preparing your remedy" — Baldev 13 Nov 04:49 "chakkar pe ghoome"): the petals turn as
   a picture of their own (scripts/emblemring.sh); the video above it shows only the inner lotus and the diya, which stay upright */
.emblem .em-ring{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;animation:turn 40s linear infinite}
.emblem.spin video{-webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 38.6%,transparent 41.4%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 38.6%,transparent 41.4%)}
@keyframes turn{to{transform:rotate(360deg)}}
.prep .emblem .em-ring{animation-duration:60s}
.emblem svg path,.emblem svg circle{stroke:var(--gold)}
.emblem .flame{inset:auto;left:50%;top:50%;width:22%;height:auto;transform:translate(-50%,-56%)}
.emblem .flame-anim{transform-box:fill-box;transform-origin:50% 90%;animation:flick 2.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1,1)}30%{transform:scale(.96,1.05)}55%{transform:scale(1.03,.97)}80%{transform:scale(.98,1.03)}}
.emblem.sm{width:38px}

/* the wordmark: one family, set large, champagne gold with a soft glow — the page's single bold gesture */
.mark{margin-top:14px;font-family:var(--serif);font-weight:500;font-size:clamp(48px,11vw,84px);line-height:1;letter-spacing:.015em;
  background:linear-gradient(180deg,#FFF6DF 0%,var(--gold2) 38%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.55))}
.tagline{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.6vw,22px);color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 18px rgba(5,9,19,.9)}

/* the glass card */
.card{width:min(400px,100%);margin-top:clamp(22px,4vh,40px);padding:22px 20px 20px;text-align:left;
  background:var(--glass);border:1px solid var(--line);border-radius:20px;
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 30px 80px -20px rgba(0,0,0,.65)}
.card.wide{width:min(560px,100%)}
.pane{display:flex;flex-direction:column;gap:10px}
.lab{font-size:14px;color:var(--mute);letter-spacing:.01em}
.say{font-family:var(--serif);font-size:24px;line-height:1.2;color:var(--gold2);margin-bottom:2px}
.in,.phone{width:100%;background:rgba(2,4,12,.42);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:19px;outline:none}
.in{padding:13px 15px}
.in::placeholder,.phone input::placeholder{color:var(--faint)}
.phone{display:flex;align-items:center}
.phone span{padding:0 4px 0 15px;color:var(--mute);font-size:19px}
.phone input{flex:1;min-width:0;background:none;border:0;outline:none;padding:13px 15px 13px 6px;font-size:19px;letter-spacing:.04em}
.in:focus,.phone:focus-within,.pin input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,195,138,.2)}
.pin{display:flex;gap:12px}
.pin input{width:56px;height:62px;text-align:center;font-family:var(--serif);font-size:30px;font-weight:600;
  background:rgba(2,4,12,.42);border:1px solid var(--line);border-radius:12px;outline:none;caret-color:var(--gold)}
.pin.secret input{-webkit-text-security:disc}
.hint{font-size:14px;color:var(--faint)}
.go{margin-top:8px;width:100%;padding:14px 18px;border-radius:12px;border:1px solid var(--gold);cursor:pointer;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1206;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 12px 34px -14px rgba(226,195,138,.8)}
.go:active{transform:translateY(1px)}
.go[disabled]{opacity:.55;cursor:default}
.go:focus-visible,.link:focus-visible,a:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.link{background:none;border:0;padding:6px 0;color:var(--gold2);font-size:15px;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(248,231,191,.4)}
.link.quiet{color:var(--faint);text-decoration:none;cursor:default}
.pair{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.err{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(150,40,52,.32);border:1px solid rgba(232,128,140,.45);color:#FFE1E4;font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the question page and the choice of kit */
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 16px 6px;width:100%;max-width:1100px;margin:0 auto}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:22px;font-weight:500;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.who{display:flex;gap:14px;align-items:baseline;font-size:15px;color:var(--mute);text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap}
.brandmark span{white-space:nowrap}
@media (max-width:480px){.who .hi{display:none}.who{gap:12px;font-size:14px}.brandmark{font-size:19px;gap:8px}}
.title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,5vw,40px);line-height:1.15;color:var(--gold2)}
.sub{margin-top:8px;color:var(--mute);font-size:16px;max-width:52ch}
.area{margin-top:16px;min-height:160px;resize:vertical;line-height:1.5;font-size:18px}
.asked{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink)}
.asked a{font-family:var(--sans);font-style:normal;font-size:14px;margin-left:6px}
.kits{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.kitrow{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--ink);
  background:rgba(2,4,12,.36);border:1px solid var(--line)}
.kitrow:hover,.kitrow:focus-visible{border-color:var(--gold);background:rgba(2,4,12,.5)}
.kn{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--gold2)}
.kp{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--gold2);align-self:center;grid-row:span 2}
.kd{font-size:14px;color:var(--mute)}

.aside{text-align:center;padding:0 16px 6px;font-size:14px}
.aside a{color:var(--faint);text-decoration:none}
.aside a:hover{color:var(--gold2)}
.powered{text-align:center;font-size:12px;color:var(--faint);padding:0 16px calc(env(safe-area-inset-bottom) + 12px)}

/* the remedy's steps (/start): about you, the deity, a photo, the kit in tokens */
.flow .step{display:flex;flex-direction:column;gap:12px}
.flow .title{margin-bottom:2px}
.field{display:flex;flex-direction:column;gap:6px}
.row{display:flex;gap:12px}
.row>*{flex:1;min-width:0}
select.in{appearance:none;-webkit-appearance:none;padding-right:40px;
  background:rgba(2,4,12,.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E2C38A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center}
select.in option{background:#0b1022;color:var(--ink)}
input[type=date].in{color-scheme:dark}
/* the date and gender boxes side by side — an iPhone drew its date box wider and taller than its half (Baldev 13 Nov 06:13): both
   the same height, the date box held inside its half with its value on the left, and on an iPhone (which shows an empty date
   box blank) a quiet hint until a date is chosen */
.row .in{height:56px}
input[type=date].in{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;line-height:normal}
input[type=date].in::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date].in::-webkit-datetime-edit{padding:0}
.datebox{position:relative;min-width:0}
.row>.field:has(.datebox){flex:1.3}   /* a little more room for the date than for "Female" */
.datebox .ph{display:none;position:absolute;left:16px;right:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:17px;
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@supports (-webkit-touch-callout:none){.datebox:not(.has) .ph{display:block}}
select.in:invalid{color:var(--faint)}
.actions{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin-top:4px}
.actions .link{align-self:center}
.dots{display:flex;justify-content:center;gap:7px;margin-top:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(226,195,138,.28)}
.dots i.on{background:var(--gold2);box-shadow:0 0 8px rgba(248,231,191,.7)}
.deities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.deity{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:14px;
  border:1px solid var(--line);background:rgba(2,4,12,.36);cursor:pointer;text-align:center}
.deity input,.kitopt input{position:absolute;opacity:0;pointer-events:none}
.deity img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid rgba(226,195,138,.45)}
.deity .glyph{width:64px;height:64px;display:grid;place-items:center;font-size:30px;color:var(--gold2)}
.deity .nm{font-size:14px;line-height:1.25}
.deity:has(input:checked),.kitopt:has(input:checked){border-color:var(--gold);background:rgba(226,195,138,.13);box-shadow:0 0 0 2px rgba(226,195,138,.22)}
.deity:has(input:focus-visible),.kitopt:has(input:focus-visible){outline:2px solid var(--gold2);outline-offset:2px}
.photo{position:relative;display:flex;align-items:center;justify-content:center;width:150px;height:150px;margin:4px auto;border-radius:50%;
  border:1px dashed rgba(226,195,138,.55);background:rgba(2,4,12,.36);overflow:hidden;cursor:pointer}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .hint{font-size:14px;color:var(--mute);text-align:center;padding:0 16px}
.kitpick{display:flex;flex-direction:column;gap:10px}
.kitopt{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(2,4,12,.36);cursor:pointer}
.uses{min-height:1.4em;font-size:15px;color:var(--mute)}
.short{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(232,128,140,.45);background:rgba(150,40,52,.26);color:#FFE1E4;font-size:15px}
.short .need{color:#fff}
.ghostgo{display:block;margin-top:0;background:transparent;color:var(--gold2);box-shadow:none;text-align:center;text-decoration:none;font-size:20px}
.golink{display:block;text-align:center;text-decoration:none}
.gold{color:var(--gold2)}

/* tokens */
.who a{color:var(--gold2)}
.tok{padding:1px 10px;border-radius:999px;border:1px solid var(--line);text-decoration:none;background:rgba(5,9,19,.42)}
.balance{margin-top:8px;font-family:var(--serif);font-size:22px;color:var(--mute)}
.balance b{font-size:64px;line-height:1;font-weight:600;color:var(--gold2);margin-right:8px}
.h2{margin-top:22px;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--gold2)}
.tlog{list-style:none;margin-top:6px}
.tlog li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid rgba(226,195,138,.16)}
.tlog small{display:block;font-size:13px;color:var(--faint)}
.tlog .plus{color:#A8E6BA}
.tlog .minus{color:var(--mute)}
.back{margin-top:16px;font-size:15px}

/* the page swaps in place (stage.js DU.go — the resonance never cuts) */
#page{flex:1;display:flex;flex-direction:column;width:100%}
.du-busy #page{opacity:.55;transition:opacity .25s}

/* the opening screen (Baldev 12 Nov 23:31): the moving chakra, a light circling it like a loading ring; when it closes,
   "Tap to enter" — the tap starts the 741 Hz resonance and the page rises in */
.splash{display:none}
/* absolute, not fixed: a fixed layer would be a world of its own, and the emblem's black could no longer melt into the sky */
.du-intro,.du-intro body{overflow:hidden}
.du-intro .splash{position:absolute;top:0;left:0;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2vh,18px);padding:24px 16px;cursor:pointer;transition:opacity .9s ease;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,rgba(5,9,19,.28) 0%,rgba(5,9,19,.74) 72%,rgba(5,9,19,.9) 100%)}
.du-intro #page,.du-intro .powered{visibility:hidden}
.du-entering .splash{opacity:0;pointer-events:none}
.du-entering #page,.du-entering .powered{visibility:visible;animation:rise .9s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.splash-in{position:relative;display:grid;place-items:center;width:clamp(220px,42vmin,340px);aspect-ratio:1;border:0;padding:0;
  background:none;border-radius:50%;cursor:pointer;color:inherit}
.splash-in:focus-visible{outline:2px solid var(--gold2);outline-offset:8px}
.splash .emblem.big{width:80%;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.ring{position:absolute;inset:0;pointer-events:none}
.ring svg{display:block;width:100%;height:100%;overflow:visible}
.ring circle{fill:none;stroke-width:1.1}
.ring .track{stroke:rgba(226,195,138,.14)}
.ring .arc{stroke:var(--gold2);stroke-linecap:round;stroke-dasharray:56 246;transform-origin:50% 50%;
  filter:drop-shadow(0 0 3px rgba(248,231,191,.9));animation:spin 1.5s linear infinite}
.splash.ready .arc{animation:spin 1.5s linear infinite,closeRing 1.3s cubic-bezier(.4,0,.2,1) forwards}
.splash.ready .ring{animation:halo 3.2s ease-in-out 1.3s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes closeRing{to{stroke-dasharray:302 0}}
@keyframes halo{0%,100%{filter:drop-shadow(0 0 0 rgba(248,231,191,0))}50%{filter:drop-shadow(0 0 14px rgba(248,231,191,.55))}}
.splash-name{font-family:var(--serif);font-weight:500;font-size:clamp(34px,7vw,56px);line-height:1;letter-spacing:.015em;
  background:linear-gradient(180deg,#FFF6DF 0%,var(--gold2) 38%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.6))}
.splash-tap{min-height:1.5em;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,23px);color:var(--ink);
  text-shadow:0 1px 3px rgba(0,0,0,.85);opacity:0;transition:opacity .9s ease .5s}
.splash.ready .splash-tap{opacity:1;animation:invite 2.8s ease-in-out 1.4s infinite}
@keyframes invite{0%,100%{opacity:1}50%{opacity:.55}}

/* the sound: a small speaker in the corner (on: waves, off: a cross) */
.snd{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:15;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--gold2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;padding:0}
.snd svg{grid-area:1/1;width:21px;height:21px}
.snd svg path{fill:currentColor}
.snd svg .w{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.snd .on{display:none}
.snd.is-on .on{display:block}
.snd.is-on .off{display:none}
.snd:not(.is-on){color:var(--faint)}
.snd:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.du-intro .snd{visibility:hidden}

/* "preparing your remedy" in the stage */
.prep{text-align:center}
.prep .emblem{margin:0 auto 8px;width:clamp(96px,15vh,136px)}
.prep .steps{list-style:none;margin:18px auto 4px;max-width:360px;text-align:left;display:grid;gap:11px}
.prep .steps li{display:flex;align-items:center;gap:12px;color:var(--faint);transition:color .4s}
.prep .steps i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);flex:none;transition:background .4s,box-shadow .4s}
.prep .steps li.now{color:var(--ink)}
.prep .steps li.now i{background:var(--gold);box-shadow:0 0 12px var(--gold);animation:dot 1.4s ease-in-out infinite}
.prep .steps li.done{color:var(--mute)}
.prep .steps li.done i{background:var(--gold2);border-color:var(--gold2)}
@keyframes dot{50%{opacity:.45}}
.prep #failed{margin-top:16px;text-align:left}

@media (min-width:900px){
  .hall{padding-top:40px}
  .emblem{width:clamp(140px,21vh,196px)}
  .emblem.sm{width:42px}
}
@media (prefers-reduced-motion:reduce){
  .stage-still{animation:none}
  .stage-bg,.stage-motes{display:none}
  .emblem .em-ring{animation:none}
  .splash .emblem.big,.splash.ready .ring,.splash.ready .splash-tap,.du-entering #page,.du-entering .powered{animation:none}
  .ring .arc,.splash.ready .arc{animation:none;stroke-dasharray:302 0}
}