*{box-sizing:border-box}
@font-face{font-family:'Potti Sreeramulu';src:url('assets/fonts/PottiSreeramulu.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:48px 0;background:#f6f4ec;color:#2c4434;font-family:'DM Sans','Noto Sans Telugu',sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #a1834b;outline-offset:5px}
.header{text-align:center;width:100%;max-width:460px;margin:0 auto;padding:0 24px 12px;flex-shrink:0}.brand{color:#2c4434;font-family:'Potti Sreeramulu','Noto Sans Telugu',sans-serif;font-size:48px;font-weight:500;font-synthesis:weight;letter-spacing:0;text-decoration:none}.brand span{color:#b7894e}
main{width:100%;max-width:460px;margin:0 auto;padding:0 24px;flex-shrink:0;display:grid;grid-template-columns:1fr;align-items:center;gap:24px}
.scene{overflow:clip;position:relative;width:100%;height:clamp(260px,82vw,350px);max-width:412px;justify-self:center;perspective:1200px;isolation:isolate;--rx:0deg;--ry:0deg}.scene-halo{position:absolute;inset:0 -4%;border-radius:50%;background:radial-gradient(ellipse,#dfe4c9 5%,#e8e8d7aa 43%,#f6f4ec00 70%);z-index:-2}
.art-world{position:absolute;width:74%;max-width:460px;aspect-ratio:1;left:50%;top:48%;transform:translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .4s ease-out;animation:float 7s ease-in-out infinite}.art-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:8px solid #f2efdf;box-shadow:0 5px 2px #7a734d1a,0 22px 35px #54613c22;transform:translateZ(20px)}.art-disc img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.035)}
.world-base{position:absolute;width:96%;height:91%;border-radius:50%;left:2%;background:linear-gradient(145deg,#cbd0a9,#9ba67a 70%,#76875c);box-shadow:0 22px 21px #4a5b3824}.base-back{top:14%;transform:scale(.96);background:#d6d9bd}.base-front{top:11%}
.login-content{width:100%;max-width:370px;justify-self:center}form label{font-family:'Noto Sans Telugu',sans-serif;font-size:12px;display:block;margin-bottom:10px}
input:not([type=checkbox]){width:100%;height:52px;border:1px solid #d6dbcb;border-radius:10px;background:#fffef9;color:#354e3d;padding:0 15px;font-size:16px;outline:none}input:focus-visible{border-color:#789266;box-shadow:0 0 0 3px #78926620}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.brand-caption{margin:4px 0 0;font-family:'Noto Sans Telugu',sans-serif;font-size:12px;color:#7b886a;letter-spacing:.2px}
.community-art{margin:0;min-width:0}.entry-row{display:flex;gap:12px;align-items:center}.phone-field{position:relative;flex:1;min-width:0}.country-code{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:14px;color:#7b886a;border-right:1px solid #dce0d2;padding-right:13px}.phone-field #phone{padding-left:69px}.continue-arrow{flex-shrink:0;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:#2e4a38;color:#fffdf0;box-shadow:0 5px 12px #344c3515;transition:background .2s,transform .2s}.continue-arrow:hover{background:#3d5e45;transform:translateX(2px)}.continue-arrow svg{width:22px;height:22px}.otp-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.text-button{background:none;border:0;color:#65784e;font-family:'Noto Sans Telugu',sans-serif;font-size:11px;padding:0 0 10px}.text-button:hover{text-decoration:underline}#otp{min-width:0;letter-spacing:7px}.form-status{font-family:'Noto Sans Telugu',sans-serif;font-size:11px;line-height:1.9;color:#7d6841;margin:14px 0 0}.form-status:empty{display:none}[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.brand{display:inline-block}.brand-caption{margin-top:3px}
.brand-lockup{display:inline-grid;justify-items:center}.brand-lockup .brand{position:relative}.brand-lockup .brand span{position:absolute;left:100%;bottom:0}.brand-lockup .brand-caption{text-align:center;justify-self:center}
.help-link{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));padding:10px 12px;color:#6b795d;font-size:12px;text-decoration:none;z-index:5}.help-link:hover{text-decoration:underline;color:#2c4434}#help{width:360px;max-width:calc(100% - 40px);padding:28px;border:1px solid #d6dbcb;border-radius:16px;background:#fffef9;color:#2c4434;box-shadow:0 20px 60px #2c443425}#help::backdrop{background:#263b314d;backdrop-filter:blur(4px)}#help h2{font-size:19px;font-weight:500;margin:0 0 18px}#help p{font-size:13px;line-height:1.8;color:#6b795d;margin:12px 0 0}.help-close{position:absolute;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:#6b795d;font-size:23px}
.phone-entry{position:relative;gap:0}.phone-entry #phone{padding-right:62px}.phone-entry .continue-arrow{position:absolute;right:4px;top:4px;width:44px;height:44px;border-radius:7px;box-shadow:none}.phone-entry .continue-arrow:hover{transform:none}

/* Projected three-dimensional orbit planes with front/back depth. */
.satellite:focus-visible{outline:1px solid var(--color)}
.earth{--light:#e7cfb2;--color:#b5936d;--shade:#88694b}
.fire{--light:#ffd27c;--color:#ef7846;--shade:#bd4530;--orb-size:13px}
.air{--light:#eff5f6;--color:#becfd4bb;--shade:#8fa7b5}
.water{--light:#cae8f4;--color:#69a9d0;--shade:#3e729e;--orb-size:14px}
.sky{--light:#68666f;--color:#25242b;--shade:#09090d;--orb-size:12px}

.art-world{z-index:1}.orbit{display:none}.orbit-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.orbit-guide.back{z-index:0}.orbit-guide.front{z-index:2}.orbit-guide path{fill:none;stroke:#aebc97;stroke-width:.8;stroke-opacity:.25}.orbit-guide.front path{stroke-opacity:.2}.satellite-axis{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
#village-globe{display:none;width:100%;height:100%;position:absolute;inset:0}.sphere-ready #village-globe{display:block}.sphere-ready .art-disc>img{display:none}.sphere-ready .art-disc{border:0;transform:none;box-shadow:inset 0 0 0 1px #b8bc9c44,0 18px 28px #54613c28}.sphere-ready .world-base{display:none}

/* Small spheres keep a comfortable 44px touch target. */
.satellite{position:absolute;left:0;top:0;width:44px;height:44px;border:0;padding:0;border-radius:50%;background:none;pointer-events:auto;transform:translate(-50%,-50%);outline-offset:1px}
.satellite::before{content:'';position:absolute;left:50%;top:50%;width:var(--orb-size,15px);height:var(--orb-size,15px);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 30% 25%,var(--light),var(--color) 65%,var(--shade));box-shadow:inset -2px -2px 4px #00000014,2px 5px 7px #40543220;transition:scale .25s ease,box-shadow .25s ease}
.satellite.element-active::before{scale:1.35;box-shadow:inset -2px -2px 4px #00000014,0 0 12px var(--light)}
.element-effects{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:50%;overflow:hidden}
.element-effects::before{content:'';position:absolute;inset:5%;border-radius:50%;opacity:0;animation:element-glow 2.8s ease both}
.element-effects.water::before{background:radial-gradient(ellipse,#a8cbd118,transparent 68%)}
.element-effects.air::before{background:radial-gradient(ellipse,#ffffff22,transparent 70%)}
.element-effects.fire::before{background:radial-gradient(ellipse at 50% 48%,#f3a05044,transparent 60%);animation-duration:4s}
.element-effects.earth::before{background:radial-gradient(ellipse,#c5aa8520,transparent 70%)}
.element-effects.sky::before{background:radial-gradient(ellipse,#d2e4f224,transparent 70%)}
.element-particle{position:absolute;left:var(--x);top:var(--y);display:block;opacity:0;animation-delay:var(--delay)!important;animation-fill-mode:both!important}
.water .element-particle{width:1px;height:13px;border-radius:2px;background:linear-gradient(transparent,#7aa8b999);animation:gentle-rain 1.1s ease-in 2}
@keyframes element-glow{0%,100%{opacity:0}25%,65%{opacity:1}}
@keyframes gentle-rain{0%{opacity:0;transform:translate(8px,-25px) rotate(14deg)}20%{opacity:.65}100%{opacity:0;transform:translate(-9px,55px) rotate(14deg)}}
@media(prefers-reduced-motion:reduce){.element-effects::before{opacity:.55}.element-particle{opacity:.45}.water .element-particle{height:5px}.satellite::before{transition:none}}

body{transition:background-color 1s ease}
body[data-element-theme=earth]{background-color:#f4eee7}
body[data-element-theme=water]{background-color:#edf3f5}
body[data-element-theme=fire]{background-color:#f8eee4}
body[data-element-theme=air]{background-color:#f6f7f4}
body[data-element-theme=sky]{background-color:#eef3f7}
.water .element-particle::after{content:'';position:absolute;left:-1px;bottom:0;width:3px;height:5px;border-radius:60% 60% 65% 65%;background:#8ebbd0aa;box-shadow:inset 1px 0 #e9f6fb88}
.scene-halo,.orbit-guide{transition:opacity .8s ease}

/* A few independent particles replace the ornamental creeper. */
.air .element-particle{width:12px;height:12px;left:8%;animation:air-drift 2.1s ease-in-out}
.element-particle.leaf span{display:block;width:10px;height:5px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#c1bd88,#8c9e68);box-shadow:inset 0 1px #e4dfb866;transform:rotate(var(--turn))}
.element-particle.flower span{position:absolute;left:4px;top:4px;width:4px;height:4px;border-radius:50%;background:#d4ae65;box-shadow:0 -3px 0 1px #efd3c7,3px -1px 0 1px #f3e1d1,2px 3px 0 1px #efd3c7,-2px 3px 0 1px #f3e1d1,-3px -1px 0 1px #efd3c7}
@keyframes air-drift{0%{opacity:0;transform:translate(-20px,8px) rotate(-20deg)}20%,70%{opacity:.6}100%{opacity:0;transform:translate(230px,-12px) rotate(100deg)}}
@keyframes planet-smoke{0%{opacity:.45;transform:translate(-50%,8px) scale(.55)}25%{opacity:.85;transform:translate(calc(-50% + var(--smoke-drift)*.3),-25px) scale(1)}65%{opacity:.55;transform:translate(calc(-50% + var(--smoke-drift)*.7),-60px) scale(1.5)}100%{opacity:0;transform:translate(calc(-50% + var(--smoke-drift)),-90px) scale(1.8)}}
.earth-creeper{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;animation:creeper-lifetime 5s ease both}
.creeper-stem{fill:none;stroke:#819362;stroke-width:.6;stroke-linecap:round;stroke-dasharray:1;animation:short-creeper-grow 1.6s ease var(--delay,0s) both}
.creeper-leaf,.creeper-flower{transform-box:fill-box;transform-origin:center;animation:short-creeper-bloom .7s ease var(--delay) both}
.sky .sky-star{width:8px;height:8px;background:none;filter:drop-shadow(0 0 3px #fff0bf);animation:globe-star 2.9s ease-in-out}
.sky .sky-star::before{content:'';position:absolute;inset:0;background:#fff5d4;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
@keyframes short-creeper-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes short-creeper-bloom{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes globe-star{0%{opacity:.3;transform:scale(.6)}35%,65%{opacity:.95;transform:scale(1.1)}100%{opacity:0;transform:scale(.7)}}
@keyframes creeper-lifetime{0%,82%{opacity:1}100%{opacity:0}}
.globe-fire{position:absolute;left:50%;bottom:12%;width:46px;height:56px;transform:translateX(-50%);pointer-events:none;z-index:2;animation:globe-fire-lifetime 4s ease both}
.globe-fire::before{content:'';position:absolute;inset:24% -28% -18%;background:radial-gradient(ellipse at 50% 75%,#ffb34f33,transparent 67%);animation:globe-firelight 1.4s ease-in-out infinite alternate}
.fire-filter-definitions{position:absolute;width:0;height:0;overflow:hidden}
.flame-plume{position:absolute;inset:0;filter:url(#element-fire-merge)}
.flame-base{position:absolute;left:22%;bottom:0;width:56%;height:8px;border-radius:50%;background:linear-gradient(#ffac35,#dc572c)}
.flame-tongue{position:absolute;left:var(--flame-x);bottom:0;width:11px;height:18px;border-radius:60% 45% 55% 40%;background:#ed7131;animation:globe-flame-rise var(--flame-speed) cubic-bezier(.45,.1,.65,1) var(--flame-delay) infinite;transform-origin:center bottom}
@keyframes globe-flame-rise{0%{transform:translate(-50%,3px) scale(1);background:#e9692e;opacity:.95}50%{background:#ffb737;opacity:.95}100%{transform:translate(-50%,-38px) scale(.12,.35);background:#ffdc74;opacity:0}}
@keyframes globe-firelight{from{opacity:.35;scale:.98}to{opacity:.55;scale:1.02}}
@keyframes globe-fire-lifetime{0%{opacity:.3}15%,72%{opacity:.55}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.globe-fire{opacity:.4}.flame-plume{filter:none}.flame-tongue{transform:translate(-50%,-8px) scale(.7);background:#f4a841}.globe-fire::before{opacity:.5}}
@media(prefers-reduced-motion:reduce){.creeper-stem{stroke-dashoffset:0}.creeper-leaf,.creeper-flower{opacity:1;scale:1}}
