/* Zindagi Maida Ho Gayi Hai: styles */
:root{
  --ink:#2E3A52; --ink-2:#56627A; --paper:#EEF2F5; --liver:#C4513E; --peach:#F0A987;
  --neg:#E0705F; --mid:#E9A93B; --pos:#5DBB8A; --letterbox:#DCE3EA;
  --display:"Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --letterbox:#141A26; } }
:root[data-theme="dark"]{ --letterbox:#141A26; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--letterbox);font-family:var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent}
*,*::before,*::after{box-sizing:border-box}
#fit{position:relative;width:100%;height:100%;display:grid;place-items:center}
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center;overflow:hidden;border-radius:18px;background:var(--paper);box-shadow:0 30px 80px rgba(20,30,50,.25);user-select:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:4px solid #3E7BD6;outline-offset:4px}

/* scenes */
#scenes .scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
#scenes .scene.on{opacity:1}

/* hero liver */
#hero{position:absolute;width:400px;height:410px;left:600px;top:470px;transition:left 1.1s cubic-bezier(.6,0,.3,1),top 1.1s cubic-bezier(.6,0,.3,1),transform 1.1s cubic-bezier(.6,0,.3,1);z-index:5;pointer-events:none;overflow:visible}
#hero.start{left:1010px;top:250px;transform:scale(1.28)}
#hero.final{left:250px;top:470px}
#hero.sofa{left:120px;top:312px;transform:scale(.9);transform-origin:190px 273px}
.belt{animation:belt .45s linear infinite}
@keyframes belt{to{stroke-dashoffset:-32}}
.eq rect{transform-box:fill-box;transform-origin:bottom;animation:eq .9s ease-in-out infinite alternate}
.eq rect:nth-child(2){animation-delay:.2s}.eq rect:nth-child(3){animation-delay:.4s}.eq rect:nth-child(4){animation-delay:.1s}
@keyframes eq{from{transform:scaleY(.3)}}
.pathmove{animation:pathmove 1.4s linear infinite}
@keyframes pathmove{to{stroke-dashoffset:84}}
.tvcar{animation:tvcar 2.4s linear infinite}
@keyframes tvcar{from{transform:translateX(-40px)}to{transform:translateX(150px)}}
#hero.gone{opacity:0;transition:opacity .5s}

/* screens */
.screen{position:absolute;inset:0;z-index:6;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.screen.on{opacity:1;visibility:visible;transition:opacity .6s}

/* start */
#start{z-index:4;background:radial-gradient(circle at 76% 50%,#FFFFFF 0,#F5F8FA 28%,var(--paper) 60%)}
#start .rings{position:absolute;left:1210px;top:470px}
#start .rings i{position:absolute;border-radius:50%;border:2px dashed #C9D4E0;transform:translate(-50%,-50%)}
.orbit{position:absolute;left:1210px;top:470px;width:0;height:0;animation:spin 60s linear infinite}
.orbit .o{position:absolute;width:108px;height:108px;margin:-54px;border-radius:50%;background:#fff;border:5px solid #36507A;display:grid;place-items:center;box-shadow:0 10px 24px rgba(46,58,82,.14)}
.orbit .o svg{width:76px;height:76px;animation:spin 60s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
#start .copy{position:absolute;left:110px;top:118px;width:740px}
#start h1{font-family:var(--display);font-weight:800;font-size:116px;line-height:.92;letter-spacing:-.02em;margin:0;color:var(--ink)}
#start h1 span{display:block}
#start .lede{font-size:29px;line-height:1.4;color:var(--ink-2);margin:24px 0 32px;max-width:640px}
#start form{display:flex;flex-wrap:wrap;gap:18px;align-items:center;width:730px}
#start .fld{display:flex;flex-direction:column;gap:6px}
#start .fld span{font:600 18px var(--body);color:var(--ink-2);padding-left:24px}
#start .err{flex-basis:100%;margin:-4px 0 0 24px;font:600 19px var(--body);color:#C2412F;min-height:0;display:none}
#start .err.on{display:block;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
#start input.bad{border-color:#E0705F;background:#FFF6F4}
#start label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#start input{font:500 26px var(--body);color:var(--ink);padding:0 26px;height:74px;width:356px;border-radius:40px;border:3px solid #C9D4E0;background:#fff;outline:none;transition:border-color .2s}
#start input:focus{border-color:#36507A}
.btn{height:78px;padding:0 40px;border-radius:40px;border:0;background:var(--ink);color:#fff;font:700 28px var(--body);box-shadow:0 10px 0 #1C2438,0 18px 30px rgba(46,58,82,.25);transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(6px);box-shadow:0 4px 0 #1C2438,0 8px 16px rgba(46,58,82,.2)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 10px 0 #C9D4E0,0 18px 30px rgba(46,58,82,.12)}
.btn.ghost:active{box-shadow:0 4px 0 #C9D4E0}
#start .fine{margin-top:22px;font-size:20px;color:#7A8499}

/* HUD */
#hud{position:absolute;inset:0 0 auto 0;height:110px;z-index:8;opacity:0;transition:opacity .6s;pointer-events:none}
#hud.on{opacity:1}
.rail{position:absolute;left:36px;top:28px;display:flex;align-items:center;gap:0;padding:10px 18px;border-radius:40px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(20,30,50,.12)}
.rail .st{display:flex;align-items:center;gap:10px;padding:0 6px}
.rail .dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#E4E9F0;transition:background .4s,transform .4s}
.rail .dot svg{width:28px;height:28px}
.rail .nm{font:600 20px var(--body);color:#8A93A6;transition:color .4s}
.rail .pt{font:700 16px var(--body);padding:2px 9px;border-radius:12px;color:#fff;display:none}
.rail .ln{width:28px;height:4px;border-radius:2px;background:#DCE2EA;margin:0 4px}
.rail .st.now .dot{background:#FFE7A8;transform:scale(1.12)}
.rail .st.now .nm{color:var(--ink)}
.rail .st.done .nm{color:var(--ink-2)}
.rail .st.done .pt{display:inline-block}
.scorebox{position:absolute;right:36px;top:28px;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 26px;border-radius:40px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(20,30,50,.12)}
.scorebox .lab{font:600 20px var(--body);color:var(--ink-2)}
.meter{position:relative;width:170px;height:14px;border-radius:7px;background:linear-gradient(90deg,#D9604F,#E88E5A 30%,#EDBB45 50%,#9ACD72 72%,#4FBF84)}
.meter i{position:absolute;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:4px solid var(--ink);transition:left 1.1s cubic-bezier(.3,1.3,.5,1)}
.scorebox .num{min-width:74px;height:54px;border-radius:27px;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 32px var(--display);padding:4px 14px 0}

/* question */
#q{position:absolute;left:0;right:0;top:118px;text-align:center;z-index:7;pointer-events:none}
#q h2{display:inline-block;margin:0;font:800 60px/1 var(--display);color:var(--ink);padding:14px 38px 8px;border-radius:44px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(20,30,50,.14);transform-origin:50% 100%}
#q h2:empty{display:none}
#q.dark h2{background:rgba(24,31,56,.78);color:#fff}
#q h2.in{animation:qIn .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes qIn{from{opacity:0;transform:translateY(-20px) scale(.9)}}

/* bubbles */
#bubbles{position:absolute;inset:0;z-index:7;pointer-events:none}
.bub{position:absolute;width:250px;height:250px;margin:-125px;border-radius:50%;background:#fff;border:9px solid #36507A;display:grid;place-items:center;padding:0;pointer-events:auto;box-shadow:0 18px 36px rgba(20,30,50,.22);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s;animation:bubIn .7s cubic-bezier(.2,1.5,.4,1) both}
.bub svg{width:200px;height:200px;pointer-events:none}
.bub:hover{transform:translateY(-8px) scale(1.04);box-shadow:0 26px 44px rgba(20,30,50,.28)}
.bub:active{transform:scale(.96)}
.bub.idle{animation:bubIn .7s cubic-bezier(.2,1.5,.4,1) both,float 3.6s ease-in-out .8s infinite}
@keyframes bubIn{from{opacity:0;transform:translateY(80px) scale(.3)}}
@keyframes float{50%{translate:0 -10px}}
.trail{position:absolute;border-radius:50%;background:#fff;border:6px solid #36507A;pointer-events:none;animation:bubIn .5s cubic-bezier(.2,1.5,.4,1) both}
.bub.out,.trail.out{animation:none;transition:transform .45s,opacity .45s;transform:scale(.4);opacity:0}
.bub.pick{animation:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform:scale(1.12);z-index:3}
.flyer{position:absolute;z-index:9;pointer-events:none}
.absorb{position:absolute;z-index:9;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#FFFBEA 0,#FFE6A3 55%,rgba(255,214,120,0) 72%)}
.absorb-ring{position:absolute;z-index:8;width:180px;height:180px;border-radius:50%;pointer-events:none;border:4px solid rgba(255,244,210,.9);box-shadow:0 0 24px rgba(255,230,160,.8),inset 0 0 24px rgba(255,230,160,.6)}

/* feedback */
.pop{position:absolute;z-index:9;font:800 64px var(--display);color:#fff;padding:6px 26px 0;border-radius:40px;pointer-events:none;box-shadow:0 12px 26px rgba(0,0,0,.2)}
#card{position:absolute;left:50%;top:196px;width:900px;margin-left:-450px;z-index:8;display:flex;align-items:center;gap:28px;padding:26px 30px 26px 26px;border-radius:36px;background:rgba(255,255,255,.95);box-shadow:0 24px 50px rgba(20,30,50,.22);opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .45s,transform .45s cubic-bezier(.2,1.3,.4,1),visibility 0s .45s}
#card.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.2,1.3,.4,1)}
#card .ic{flex:none;width:132px;height:132px;border-radius:50%;border:6px solid #36507A;display:grid;place-items:center;background:#fff}
#card .ic svg{width:104px;height:104px}
#card .tx{flex:1}
#card .chip{display:inline-block;font:800 26px var(--display);color:#fff;padding:2px 16px 0;border-radius:18px;margin-bottom:8px}
#card p{margin:0;font:500 26px/1.38 var(--body);color:var(--ink)}
#card .btn{flex:none;height:70px;font-size:24px;padding:0 32px}

/* time card */
#tc{position:absolute;inset:0;z-index:20;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
#tc.on{opacity:1;visibility:visible;transition:opacity .5s}
#tc > svg{position:absolute;inset:0;width:100%;height:100%}
#tc .bg{position:absolute;inset:0;will-change:opacity}
#tcBgB{opacity:0}
#tcClip{position:absolute;left:0;top:0;width:1600px;height:561px;overflow:hidden}
#tcArm{position:absolute;left:800px;top:560px;width:0;height:0;will-change:transform}
#tcOrb{position:absolute;left:380px;top:0;width:240px;height:240px;margin:-120px;will-change:transform}
#tcOrb svg{width:100%;height:100%;overflow:visible}
#tcOrb .halo{transform-origin:center;transform-box:fill-box;animation:halo 2.4s ease-in-out infinite}
#tcOrb .rays{transform-origin:center;transform-box:fill-box;animation:spin 24s linear infinite}
@keyframes halo{50%{transform:scale(1.12);opacity:.28}}
#tc .t{position:absolute;left:0;right:0;top:600px;text-align:center;color:#fff}
#tc .t b{display:block;font:800 120px/1 var(--display);letter-spacing:-.01em}
#tc .t span{display:block;margin-top:10px;font:600 26px var(--body);opacity:.85}

/* final */
#final .panel{position:absolute;right:56px;top:56px;bottom:56px;width:560px;border-radius:40px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 30px 60px rgba(20,30,50,.25);padding:44px 48px;display:flex;flex-direction:column;text-align:center}
#final .who{font:600 21px var(--body);color:var(--ink-2)}
#final .dcode{align-self:center;font:700 16px var(--body);letter-spacing:.04em;color:var(--ink-2);background:#E8EDF3;padding:4px 14px;border-radius:12px;margin-bottom:8px}
#final .big{font:800 170px/1 var(--display);margin:14px 0 0;letter-spacing:-.03em}
#final .state{display:inline-block;align-self:center;font:700 26px var(--body);color:#fff;padding:6px 22px;border-radius:24px;margin-top:4px}
#final .msg{font:500 25px/1.4 var(--body);margin:20px 0 26px;color:var(--ink)}
.gauge{position:relative;margin:0 6px 34px}
.gauge .bar{display:flex;gap:4px;height:18px}
.gauge .bar i{flex:1;border-radius:4px;opacity:.35;transition:opacity .4s}
.gauge .bar i.hit{opacity:1}
.gauge .mk{position:absolute;top:-16px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:16px solid var(--ink);margin-left:-12px;transition:left 1.6s cubic-bezier(.3,1.2,.5,1)}
.gauge .ends{display:flex;justify-content:space-between;margin-top:8px;font:600 17px var(--body);color:#7A8499}
.recap{display:flex;justify-content:space-between;gap:8px;margin-bottom:auto}
.recap .r{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.recap .r .c{width:74px;height:74px;border-radius:50%;background:#fff;border:4px solid #36507A;display:grid;place-items:center}
.recap .r svg{width:58px;height:58px}
.recap .r small{font:600 16px var(--body);color:var(--ink-2)}
.recap .r b{font:800 20px var(--display);padding:1px 10px 0;border-radius:12px;color:#fff}
#final .acts{display:flex;gap:16px;justify-content:center;margin-top:24px}
#final .acts .btn{height:68px;font-size:21px;padding:0 24px;white-space:nowrap}

/* takeaway */
#take{background:radial-gradient(circle at 50% 20%,#FFFFFF,var(--paper) 70%)}
#take .head{position:absolute;left:0;right:0;top:70px;text-align:center}
#take h2{font:800 132px/.9 var(--display);margin:0;color:var(--ink);letter-spacing:-.02em}
#take h2 span{display:block}
#take .row{position:absolute;left:120px;right:120px;top:388px;display:flex;justify-content:space-between;align-items:flex-end}
#take .mini{width:240px;text-align:center;position:relative}
#take .mini svg{width:220px;height:226px;display:block;margin:0 auto}
#take .mini b{display:block;font:700 22px var(--body);color:var(--ink)}
#take .mini small{display:block;font:600 17px var(--body);color:#7A8499;margin-top:2px}
#take .mini.you::before{content:"";position:absolute;left:4px;right:4px;top:-8px;bottom:-12px;border-radius:30px;background:#fff;box-shadow:0 14px 32px rgba(20,30,50,.14);z-index:-1}
#take .mini .tag{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font:700 17px var(--body);color:#fff;background:var(--ink);padding:5px 14px;border-radius:14px;white-space:nowrap}
#take .truths{position:absolute;left:100px;right:100px;bottom:64px;display:flex;justify-content:space-between;gap:36px;align-items:center}
#take .truths p{margin:0;font:600 25px/1.3 var(--body);color:var(--ink-2);max-width:290px;text-align:left;display:flex;gap:14px;align-items:center}
#take .truths p i{flex:none;width:14px;height:14px;border-radius:50%}
#take .again{position:static;flex:none;margin-left:12px}

/* ambient animation classes used inside SVG art */
.twinkle{animation:tw 2.8s ease-in-out infinite}
@keyframes tw{50%{opacity:.25}}
.drift{animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(40px)}}
.beam{animation:beam 5s ease-in-out infinite}
@keyframes beam{50%{opacity:.14}}
.alarm{animation:alarm 3s ease-in-out infinite}
@keyframes alarm{0%,70%,100%{rotate:0deg}73%{rotate:12deg}76%{rotate:-12deg}79%{rotate:10deg}82%{rotate:-8deg}85%{rotate:0deg}}
.sunrise{animation:rise 9s ease-out infinite alternate}
@keyframes rise{from{transform:translateY(40px)}to{transform:translateY(-30px)}}
.steam path{animation:steam 2.4s ease-in-out infinite;opacity:.7}
.steam path+path{animation-delay:.8s}
@keyframes steam{0%{transform:translateY(8px);opacity:0}40%{opacity:.8}100%{transform:translateY(-10px);opacity:0}}
.feed{animation:feed 4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes feed{0%,20%{transform:translateY(0)}45%,70%{transform:translateY(-64px)}95%,100%{transform:translateY(-128px)}}
.heart{transform-box:fill-box;transform-origin:center;animation:beat 1.2s ease-in-out infinite}
@keyframes beat{15%{transform:scale(1.2)}30%{transform:scale(1)}}
.lv-drop{animation:lvdrop 1.6s ease-in infinite}.lv-drop.d2{animation-delay:.5s}.lv-drop.d3{animation-delay:1s}
@keyframes lvdrop{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.lv-rain path{animation:lvrain .8s linear infinite}.lv-rain path:nth-child(2n){animation-delay:.4s}
@keyframes lvrain{from{transform:translateY(-6px);opacity:0}30%{opacity:1}to{transform:translateY(14px);opacity:0}}
.lv-bolt{animation:bolt 3s steps(1) infinite}
@keyframes bolt{0%,88%{opacity:0}90%,94%{opacity:1}96%{opacity:0}}
.lv-squig{animation:squig 1.4s ease-in-out infinite alternate}
@keyframes squig{to{opacity:.35;transform:scale(1.03)}}
.lv-sun{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
.rain path{animation:rain .7s linear infinite}.rain path:nth-child(3n){animation-delay:.25s}.rain path:nth-child(3n+1){animation-delay:.5s}
@keyframes rain{from{transform:translate(8px,-40px)}to{transform:translate(-8px,40px)}}
.bolt{animation:bolt 4s steps(1) infinite}
.flash{animation:flash 4s steps(1) infinite}
@keyframes flash{0%,89%{opacity:0}90%{opacity:.14}92%{opacity:0}93%{opacity:.1}94%{opacity:0}}
.flicker{animation:flick 3.2s steps(1) infinite}
@keyframes flick{0%,40%{opacity:1}42%{opacity:.4}44%{opacity:1}70%{opacity:.6}72%,100%{opacity:1}}
.firefly{animation:ff 3.4s ease-in-out infinite}
@keyframes ff{0%,100%{opacity:.1;transform:translate(0,0)}50%{opacity:1;transform:translate(14px,-18px)}}
.rays{animation:spin 30s linear infinite}
.tvflick{animation:tvf 1.8s steps(3) infinite}
@keyframes tvf{50%{opacity:.08}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
}

/* sound toggle */
#muteBtn{position:absolute;left:26px;bottom:26px;z-index:40;width:72px;height:72px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(20,30,50,.2);transition:transform .15s,background .2s}
#muteBtn:active{transform:scale(.92)}
#muteBtn svg{width:34px;height:34px;grid-area:1/1}
#muteBtn .off{display:none}
#muteBtn.muted{color:#8A93A6;background:rgba(255,255,255,.75)}
#muteBtn.muted .on{display:none}
#muteBtn.muted .off{display:block}
#muteBtn.hint::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(62,123,214,.7);animation:hint 1.6s ease-out infinite}
@keyframes hint{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
#toast{position:absolute;left:112px;bottom:30px;z-index:41;max-width:900px;padding:14px 20px;border-radius:18px;background:rgba(30,38,56,.94);color:#fff;font:600 19px/1.35 var(--body);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none}
#toast.on{opacity:1;transform:none}