{"id":1035,"date":"2026-10-26T20:37:16","date_gmt":"2026-10-26T20:37:16","guid":{"rendered":"https:\/\/srabons.de\/?page_id=1035"},"modified":"2026-10-26T21:07:59","modified_gmt":"2026-10-26T21:07:59","slug":"vedic-astrology-calculator","status":"publish","type":"page","link":"https:\/\/srabons.de\/en\/vedic-astrology-calculator\/","title":{"rendered":"Vedic Astrology Calculator"},"content":{"rendered":"\n<script data-wp-block-html=\"js\">\nasync function searchLocation(query) {\n  if (!query || query.trim().length < 2) return [];\n\n  const cleanQuery = encodeURIComponent(query.trim());\n\n  \/\/ 1. Try Primary: Photon (Komoot \/ OSM)\n  try {\n    const res = await fetch(`https:\/\/photon.komoot.io\/api\/?q=${cleanQuery}&#038;limit=5&#038;lang=en`);\n    if (res.ok) {\n      const data = await res.json();\n      if (data.features &#038;&#038; data.features.length > 0) {\n        return data.features.map(f => ({\n          name: [f.properties.name, f.properties.state, f.properties.country].filter(Boolean).join(', '),\n          lat: f.geometry.coordinates[1],\n          lon: f.geometry.coordinates[0]\n        }));\n      }\n    }\n  } catch (err) {\n    console.warn('Photon service unavailable, switching to OSM Nominatim...', err);\n  }\n\n  \/\/ 2. Fallback 1: Open-Meteo Geocoding API (Fast, Free, No API Key needed, High Availability)\n  try {\n    const res = await fetch(`https:\/\/geocoding-api.open-meteo.com\/v1\/search?name=${cleanQuery}&count=5&language=en&format=json`);\n    if (res.ok) {\n      const data = await res.json();\n      if (data.results && data.results.length > 0) {\n        return data.results.map(r => ({\n          name: [r.name, r.admin1, r.country].filter(Boolean).join(', '),\n          lat: r.latitude,\n          lon: r.longitude\n        }));\n      }\n    }\n  } catch (err) {\n    console.warn('Open-Meteo unavailable, trying Nominatim...', err);\n  }\n\n  \/\/ 3. Fallback 2: Official OpenStreetMap Nominatim\n  try {\n    const res = await fetch(`https:\/\/nominatim.openstreetmap.org\/search?q=${cleanQuery}&format=json&limit=5&addressdetails=1`);\n    if (res.ok) {\n      const data = await res.json();\n      if (data && data.length > 0) {\n        return data.map(item => ({\n          name: item.display_name,\n          lat: parseFloat(item.lat),\n          lon: parseFloat(item.lon)\n        }));\n      }\n    }\n  } catch (err) {\n    console.error('All geocoding services failed:', err);\n  }\n\n  return [];\n}\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Jyotishya | Vedic Astrology &amp; Planetary Chart Generator<\/title>\n  \n  <!-- Google Fonts: Cinzel & Inter -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700;800;900&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\n  \n  <!-- Tailwind CSS CDN -->\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  \n  <!-- Font Awesome 6 CDN -->\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n  \n  <!-- Leaflet CSS & JS for Free Worldwide Location Marker -->\n  <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\">\n  <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\n  <!-- html2pdf.js for Client-Side PDF Export -->\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: {\n            cinzel: ['Cinzel', 'serif'],\n            sans: ['Inter', 'sans-serif'],\n          },\n          colors: {\n            cosmic: {\n              950: '#040711',\n              900: '#070B19',\n              850: '#0b1228',\n              800: '#0D1429',\n              700: '#141E3C',\n              600: '#1e2d5a',\n            },\n            gold: {\n              300: '#f8e49c',\n              400: '#e5c365',\n              500: '#D4AF37',\n              600: '#b89428',\n              700: '#91711c',\n            }\n          }\n        }\n      }\n    }\n  <\/script>\n\n  <style>\n    \/* Custom Scrollbar *\/\n    ::-webkit-scrollbar {\n      width: 8px;\n    }\n    ::-webkit-scrollbar-track {\n      background: #070B19;\n    }\n    ::-webkit-scrollbar-thumb {\n      background: #1e2d5a;\n      border-radius: 4px;\n      border: 1px solid rgba(212, 175, 55, 0.3);\n    }\n    ::-webkit-scrollbar-thumb:hover {\n      background: #D4AF37;\n    }\n\n    \/* Cosmic Background & Starfield Effect *\/\n    body {\n      background-color: #040711;\n      background-image: \n        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, rgba(0,0,0,0)),\n        radial-gradient(1px 1px at 40px 70px, #e5c365, rgba(0,0,0,0)),\n        radial-gradient(1.5px 1.5px at 90px 40px, #ffffff, rgba(0,0,0,0)),\n        radial-gradient(2px 2px at 160px 120px, #a5b4fc, rgba(0,0,0,0)),\n        radial-gradient(1.5px 1.5px at 240px 80px, #ffffff, rgba(0,0,0,0)),\n        radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.08) 0%, transparent 60%);\n      background-repeat: repeat;\n      background-size: 300px 300px, 350px 350px, 400px 400px, 500px 500px, 600px 600px, 100% 100%;\n      color: #e2e8f0;\n    }\n\n    \/* Glassmorphism *\/\n    .glass-card {\n      background: rgba(13, 20, 41, 0.72);\n      backdrop-filter: blur(14px);\n      -webkit-backdrop-filter: blur(14px);\n      border: 1px solid rgba(212, 175, 55, 0.22);\n      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(212, 175, 55, 0.04);\n    }\n    .glass-card-hover:hover {\n      border-color: rgba(212, 175, 55, 0.45);\n      box-shadow: 0 15px 35px -10px rgba(212, 175, 55, 0.15);\n    }\n\n    \/* Golden Glow Accents *\/\n    .gold-glow {\n      text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);\n    }\n\n    \/* Map styling overrides *\/\n    .leaflet-container {\n      background: #070B19 !important;\n      font-family: 'Inter', sans-serif !important;\n    }\n    .leaflet-popup-content-wrapper {\n      background: #0D1429 !important;\n      color: #f8e49c !important;\n      border: 1px solid #D4AF37 !important;\n      border-radius: 8px !important;\n      box-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;\n    }\n    .leaflet-popup-tip {\n      background: #0D1429 !important;\n      border: 1px solid #D4AF37 !important;\n    }\n\n    \/* Chart SVG styling *\/\n    .kundli-line {\n      stroke: #D4AF37;\n      stroke-width: 1.5;\n    }\n    .kundli-outer {\n      stroke: #D4AF37;\n      stroke-width: 2.5;\n      fill: #080d1d;\n    }\n    .kundli-text-house {\n      fill: rgba(212, 175, 55, 0.4);\n      font-size: 11px;\n      font-weight: 600;\n      text-anchor: middle;\n      font-family: 'Cinzel', serif;\n    }\n    .kundli-text-sign {\n      fill: #f8e49c;\n      font-size: 12px;\n      font-weight: 700;\n      text-anchor: middle;\n      font-family: 'Cinzel', serif;\n    }\n    .kundli-text-planets {\n      fill: #ffffff;\n      font-size: 11.5px;\n      font-weight: 600;\n      text-anchor: middle;\n      font-family: 'Inter', sans-serif;\n    }\n\n    \/* Print\/PDF Optimization *\/\n    @media print {\n      body {\n        background: #ffffff !important;\n        color: #111111 !important;\n      }\n      .no-print {\n        display: none !important;\n      }\n      .pdf-export-area {\n        background: #ffffff !important;\n        color: #000000 !important;\n      }\n    }\n  <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col antialiased selection:bg-gold-500 selection:text-cosmic-950\">\n\n  <!-- Header \/ Navigation Bar -->\n  <header class=\"sticky top-0 z-50 glass-card border-b border-gold-500\/20 backdrop-blur-md\">\n    <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between\">\n      <div class=\"flex items-center space-x-3\">\n        <div class=\"w-11 h-11 rounded-full border border-gold-500 flex items-center justify-center bg-gradient-to-br from-gold-600\/30 to-cosmic-800 shadow-md shadow-gold-500\/20\">\n          <i class=\"fa-solid fa-om text-gold-400 text-2xl\"><\/i>\n        <\/div>\n        <div>\n          <span class=\"font-cinzel text-2xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-gold-300 via-gold-400 to-amber-200 gold-glow\">\n            JYOTISHYA\n          <\/span>\n          <span class=\"block text-[10px] tracking-widest text-gold-500\/80 uppercase font-semibold\">The Sacred Light of Vedic Astrology<\/span>\n        <\/div>\n      <\/div>\n      \n      <!-- Nav Links -->\n      <nav class=\"hidden md:flex items-center space-x-8 text-sm font-medium\">\n        <a href=\"#calculator-section\" class=\"text-slate-300 hover:text-gold-400 transition-colors\">Kundli Generator<\/a>\n        <a href=\"#about-jyotish\" class=\"text-slate-300 hover:text-gold-400 transition-colors\">About Jyotish<\/a>\n        <a href=\"#navagraha-section\" class=\"text-slate-300 hover:text-gold-400 transition-colors\">The 9 Grahas<\/a>\n        <a href=\"#faq-section\" class=\"text-slate-300 hover:text-gold-400 transition-colors\">FAQs<\/a>\n      <\/nav>\n\n      <!-- CTA Button -->\n      <div>\n        <a href=\"#calculator-section\" class=\"px-5 py-2.5 rounded-full text-xs uppercase tracking-wider font-semibold border border-gold-500 bg-gold-500\/10 hover:bg-gold-500 hover:text-cosmic-950 transition duration-300 text-gold-400 shadow-lg shadow-gold-500\/10 flex items-center gap-2\">\n          <i class=\"fa-solid fa-compass\"><\/i> Calculate Chart\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <!-- Hero Section -->\n  <section class=\"relative pt-16 pb-12 overflow-hidden text-center max-w-5xl mx-auto px-4 sm:px-6\">\n    <div class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass-card border border-gold-500\/40 text-gold-300 text-xs font-semibold uppercase tracking-widest mb-6\">\n      <i class=\"fa-solid fa-dharmachakra animate-spin text-[14px]\" style=\"animation-duration: 24s;\"><\/i>\n      Sidereal Zodiac &amp; Ancient Vedic Ephemeris\n    <\/div>\n    \n    <h1 class=\"text-4xl sm:text-6xl font-cinzel font-black tracking-tight text-white mb-6 leading-tight\">\n      Discover Your Cosmic Blueprint with <br>\n      <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-gold-300 via-gold-500 to-yellow-200 gold-glow\">\n        Precision Worldwide Jyotish\n      <\/span>\n    <\/h1>\n    \n    <p class=\"max-w-3xl mx-auto text-base sm:text-lg text-slate-300 leading-relaxed font-light mb-8\">\n      Harness true sidereal planetary longitudes and traditional Vedic mathematics. Pinpoint your birth coordinates anywhere on Earth with our free interactive location marker and generate authentic North &amp; South Indian Kundli charts.\n    <\/p>\n\n    <!-- Quick Stat Badges -->\n    <div class=\"flex flex-wrap items-center justify-center gap-4 text-xs font-medium text-slate-300\">\n      <div class=\"flex items-center gap-2 bg-cosmic-800\/80 border border-gold-500\/20 px-3 py-1.5 rounded-lg\">\n        <i class=\"fa-solid fa-globe text-gold-400\"><\/i> Free Open Geocoding Worldwide\n      <\/div>\n      <div class=\"flex items-center gap-2 bg-cosmic-800\/80 border border-gold-500\/20 px-3 py-1.5 rounded-lg\">\n        <i class=\"fa-solid fa-moon text-gold-400\"><\/i> Lahiri Chitra Paksha Ayanamsha\n      <\/div>\n      <div class=\"flex items-center gap-2 bg-cosmic-800\/80 border border-gold-500\/20 px-3 py-1.5 rounded-lg\">\n        <i class=\"fa-solid fa-file-pdf text-gold-400\"><\/i> Instant PDF Kundli Export\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Main Birth Details & Map Input Section -->\n  <main id=\"calculator-section\" class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full flex-grow\">\n    \n    <!-- Input Card Grid -->\n    <div class=\"glass-card rounded-2xl p-6 sm:p-8 mb-12 shadow-2xl relative overflow-hidden\">\n      <div class=\"absolute -top-24 -right-24 w-72 h-72 bg-gold-500\/5 rounded-full blur-3xl pointer-events-none\"><\/div>\n\n      <div class=\"flex flex-col lg:flex-row gap-8\">\n        \n        <!-- Left: Form Inputs -->\n        <div class=\"w-full lg:w-5\/12 flex flex-col justify-between\">\n          <div>\n            <div class=\"flex items-center gap-3 mb-6 pb-3 border-b border-gold-500\/20\">\n              <span class=\"w-8 h-8 rounded-lg bg-gold-500\/20 border border-gold-500\/40 flex items-center justify-center text-gold-400\">\n                <i class=\"fa-solid fa-user-astronaut\"><\/i>\n              <\/span>\n              <div>\n                <h2 class=\"font-cinzel text-xl font-bold text-white tracking-wide\">Birth Coordinates &amp; Time<\/h2>\n                <p class=\"text-xs text-slate-400\">Enter accurate native details for Lagna (Ascendant) calculation<\/p>\n              <\/div>\n            <\/div>\n\n            <form id=\"vedic-form\" class=\"space-y-4\" onsubmit=\"event.preventDefault(); generateKundli();\">\n              <!-- Full Name -->\n              <div>\n                <label for=\"native-name\" class=\"block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1.5\">\n                  Native&#8217;s Name <span class=\"text-slate-500 text-[10px] lowercase font-normal\">(optional)<\/span>\n                <\/label>\n                <div class=\"relative\">\n                  <div class=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400 text-sm\">\n                    <i class=\"fa-regular fa-user\"><\/i>\n                  <\/div>\n                  <input type=\"text\" id=\"native-name\" placeholder=\"e.g., Aryabhata\" class=\"w-full pl-10 pr-4 py-2.5 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white placeholder-slate-500 outline-none transition\">\n                <\/div>\n              <\/div>\n\n              <!-- Date of Birth -->\n              <div>\n                <label for=\"birth-date\" class=\"block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1.5\">\n                  Date of Birth <span class=\"text-gold-400\">*<\/span>\n                <\/label>\n                <div class=\"relative\">\n                  <div class=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400 text-sm\">\n                    <i class=\"fa-regular fa-calendar-days\"><\/i>\n                  <\/div>\n                  <input type=\"date\" id=\"birth-date\" required class=\"w-full pl-10 pr-4 py-2.5 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white outline-none transition cursor-pointer\">\n                <\/div>\n              <\/div>\n\n              <!-- Time of Birth (Hours, Minutes, Seconds, AM\/PM) -->\n              <div>\n                <label class=\"block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1.5\">\n                  Exact Time of Birth <span class=\"text-gold-400\">*<\/span>\n                <\/label>\n                <div class=\"grid grid-cols-4 gap-2\">\n                  <div>\n                    <input type=\"number\" id=\"birth-hour\" min=\"1\" max=\"12\" placeholder=\"HH\" required class=\"w-full text-center py-2.5 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white outline-none transition\">\n                    <span class=\"block text-[10px] text-center text-slate-400 mt-0.5\">Hr (1-12)<\/span>\n                  <\/div>\n                  <div>\n                    <input type=\"number\" id=\"birth-min\" min=\"0\" max=\"59\" placeholder=\"MM\" required class=\"w-full text-center py-2.5 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white outline-none transition\">\n                    <span class=\"block text-[10px] text-center text-slate-400 mt-0.5\">Min (00-59)<\/span>\n                  <\/div>\n                  <div>\n                    <input type=\"number\" id=\"birth-sec\" min=\"0\" max=\"59\" placeholder=\"00\" value=\"00\" class=\"w-full text-center py-2.5 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white outline-none transition\">\n                    <span class=\"block text-[10px] text-center text-slate-400 mt-0.5\">Sec (00-59)<\/span>\n                  <\/div>\n                  <div>\n                    <select id=\"birth-ampm\" class=\"w-full py-2.5 px-2 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-gold-300 font-semibold outline-none transition cursor-pointer\">\n                      <option value=\"AM\">AM<\/option>\n                      <option value=\"PM\">PM<\/option>\n                    <\/select>\n                    <span class=\"block text-[10px] text-center text-slate-400 mt-0.5\">AM\/PM<\/span>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <!-- Ayanamsha Selection -->\n              <div>\n                <label for=\"ayanamsha-select\" class=\"block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1.5 flex justify-between\">\n                  <span>Ayanamsha Calculation<\/span>\n                  <span class=\"text-gold-400 lowercase font-normal text-[11px]\"><i class=\"fa-solid fa-circle-info\"><\/i> Lahiri is standard<\/span>\n                <\/label>\n                <div class=\"relative\">\n                  <div class=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400 text-sm\">\n                    <i class=\"fa-solid fa-atom\"><\/i>\n                  <\/div>\n                  <select id=\"ayanamsha-select\" class=\"w-full pl-10 pr-8 py-2.5 rounded-xl bg-cosmic-950\/70 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white outline-none transition appearance-none cursor-pointer\">\n                    <option value=\"lahiri\" selected>Lahiri (Chitra Paksha &#8211; Govt. of India standard)<\/option>\n                    <option value=\"raman\">B.V. Raman<\/option>\n                    <option value=\"kp\">Krishnamurti Padhdhati (KP)<\/option>\n                    <option value=\"tropical\">Sayana (Tropical \/ Western zero offset)<\/option>\n                  <\/select>\n                  <div class=\"absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-slate-400\">\n                    <i class=\"fa-solid fa-chevron-down text-xs\"><\/i>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <!-- Captured Location Details Summary Display -->\n              <div class=\"p-3.5 rounded-xl bg-cosmic-900\/90 border border-gold-500\/30 text-xs space-y-2 mt-4\">\n                <div class=\"flex items-start justify-between\">\n                  <span class=\"text-slate-400 flex items-center gap-1.5\">\n                    <i class=\"fa-solid fa-location-dot text-gold-400\"><\/i> Selected Place:\n                  <\/span>\n                  <span id=\"display-place\" class=\"font-medium text-right text-gold-300 max-w-[210px] truncate\" title=\"Click on map or search\">\n                    Varanasi, Uttar Pradesh, India\n                  <\/span>\n                <\/div>\n                <div class=\"grid grid-cols-2 gap-2 pt-1 border-t border-slate-800\">\n                  <div>\n                    <span class=\"text-slate-400 text-[11px]\">Latitude:<\/span>\n                    <span id=\"display-lat\" class=\"font-mono text-white ml-1\">25.3176\u00b0 N<\/span>\n                  <\/div>\n                  <div>\n                    <span class=\"text-slate-400 text-[11px]\">Longitude:<\/span>\n                    <span id=\"display-lng\" class=\"font-mono text-white ml-1\">82.9739\u00b0 E<\/span>\n                  <\/div>\n                <\/div>\n                <div class=\"flex items-center justify-between pt-1 border-t border-slate-800\">\n                  <span class=\"text-slate-400 text-[11px]\">Timezone \/ Offset:<\/span>\n                  <span id=\"display-tz\" class=\"font-mono text-emerald-400 text-[11px]\">Asia\/Kolkata (UTC +05:30)<\/span>\n                <\/div>\n              <\/div>\n\n              <!-- Submit Button -->\n              <div class=\"pt-2\">\n                <button type=\"submit\" id=\"submit-btn\" class=\"w-full py-3.5 rounded-xl font-cinzel font-bold text-sm uppercase tracking-wider text-cosmic-950 bg-gradient-to-r from-gold-400 via-gold-500 to-amber-300 hover:from-gold-300 hover:to-gold-400 shadow-lg shadow-gold-500\/25 active:scale-[0.99] transition duration-200 flex items-center justify-center gap-2\">\n                  <i class=\"fa-solid fa-sun text-base\"><\/i> Generate Vedic Kundli\n                <\/button>\n              <\/div>\n            <\/form>\n          <\/div>\n        <\/div>\n\n        <!-- Right: Interactive Worldwide Map & Geocoder -->\n        <div class=\"w-full lg:w-7\/12 flex flex-col\">\n          <div class=\"flex items-center justify-between mb-2\">\n            <label class=\"text-xs font-semibold text-slate-300 uppercase tracking-wider flex items-center gap-1.5\">\n              <i class=\"fa-solid fa-map-location-dot text-gold-400\"><\/i>\n              Worldwide Location Marker &amp; Geocoder\n            <\/label>\n            <span class=\"text-[11px] text-slate-400 hidden sm:inline\">\n              Drag pin or search city worldwide\n            <\/span>\n          <\/div>\n\n          <!-- Free City Autocomplete Search Bar -->\n          <div class=\"relative mb-3\">\n            <div class=\"relative\">\n              <div class=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400 text-sm\">\n                <i class=\"fa-solid fa-magnifying-glass\"><\/i>\n              <\/div>\n              <input type=\"text\" id=\"city-search\" placeholder=\"Type city or country (e.g., Tokyo, London, Varanasi, Dallas)...\" autocomplete=\"off\" class=\"w-full pl-10 pr-10 py-2.5 rounded-xl bg-cosmic-950\/80 border border-slate-700 focus:border-gold-500 focus:ring-1 focus:ring-gold-500 text-sm text-white placeholder-slate-400 outline-none transition\">\n              <button type=\"button\" id=\"locate-me-btn\" title=\"Use current GPS\" class=\"absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-gold-400 transition\">\n                <i class=\"fa-solid fa-crosshairs text-base\"><\/i>\n              <\/button>\n            <\/div>\n            \n            <!-- Autocomplete Results Dropdown -->\n            <ul id=\"search-results\" class=\"hidden absolute left-0 right-0 top-full mt-1.5 bg-cosmic-900 border border-gold-500\/40 rounded-xl shadow-2xl max-h-56 overflow-y-auto z-[1000] divide-y divide-slate-800 text-xs\">\n              <!-- Dynamically populated -->\n            <\/ul>\n          <\/div>\n\n          <!-- Interactive Leaflet Map Container -->\n          <div class=\"relative w-full h-[360px] lg:h-full min-h-[340px] rounded-xl overflow-hidden border border-gold-500\/30\">\n            <div id=\"map\" class=\"w-full h-full\"><\/div>\n            \n            <!-- Map Guidance Overlay Badge -->\n            <div class=\"absolute bottom-3 left-3 z-[400] bg-cosmic-950\/85 backdrop-blur-md border border-gold-500\/30 text-[11px] text-gold-300 px-3 py-1.5 rounded-lg pointer-events-none flex items-center gap-1.5 shadow-md\">\n              <i class=\"fa-solid fa-hand-pointer text-gold-400\"><\/i> Click anywhere on the globe or drag gold marker\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- Generated Chart Results Section -->\n    <section id=\"results-section\" class=\"hidden space-y-10 scroll-mt-24\">\n      \n      <!-- Action Toolbar -->\n      <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4 p-4 rounded-xl glass-card border border-gold-500\/30\">\n        <div>\n          <h2 class=\"text-xl sm:text-2xl font-cinzel font-bold text-white flex items-center gap-2\">\n            <i class=\"fa-solid fa-dharmachakra text-gold-400\"><\/i> Vedic Kundli &amp; Ephemeris\n          <\/h2>\n          <p class=\"text-xs text-slate-400\" id=\"report-subtitle\">Calculated based on True Sidereal Lahiri Ayanamsha<\/p>\n        <\/div>\n        \n        <div class=\"flex items-center gap-3 w-full sm:w-auto\">\n          <button onclick=\"downloadKundliPDF()\" class=\"w-full sm:w-auto px-5 py-2.5 rounded-xl font-semibold text-xs tracking-wider uppercase border border-gold-500 bg-gold-500 text-cosmic-950 hover:bg-gold-400 transition flex items-center justify-center gap-2 shadow-lg shadow-gold-500\/20\">\n            <i class=\"fa-solid fa-file-arrow-down text-sm\"><\/i> Download PDF Chart\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- PDF Printable Container Area -->\n      <div id=\"pdf-container\" class=\"space-y-8\">\n        \n        <!-- Native Summary Card -->\n        <div class=\"glass-card rounded-2xl p-6 border border-gold-500\/30 bg-gradient-to-r from-cosmic-900 to-cosmic-850\">\n          <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-4 text-center divide-y sm:divide-y-0 sm:divide-x divide-slate-800\">\n            <div class=\"px-2 pt-2 sm:pt-0\">\n              <span class=\"text-[10px] uppercase font-semibold text-slate-400 tracking-wider\">Native Name<\/span>\n              <p id=\"res-name\" class=\"font-cinzel text-lg font-bold text-gold-300 truncate\">Aryabhata<\/p>\n            <\/div>\n            <div class=\"px-2 pt-2 sm:pt-0\">\n              <span class=\"text-[10px] uppercase font-semibold text-slate-400 tracking-wider\">Lagna (Ascendant)<\/span>\n              <p id=\"res-lagna\" class=\"font-cinzel text-lg font-bold text-white\">Mesh (Aries)<\/p>\n            <\/div>\n            <div class=\"px-2 pt-2 sm:pt-0\">\n              <span class=\"text-[10px] uppercase font-semibold text-slate-400 tracking-wider\">Janma Rashi (Moon)<\/span>\n              <p id=\"res-rashi\" class=\"font-cinzel text-lg font-bold text-white\">Vrishabha (Taurus)<\/p>\n            <\/div>\n            <div class=\"px-2 pt-2 sm:pt-0\">\n              <span class=\"text-[10px] uppercase font-semibold text-slate-400 tracking-wider\">Janma Nakshatra<\/span>\n              <p id=\"res-nakshatra\" class=\"font-cinzel text-lg font-bold text-gold-300\">Rohini (Pada 2)<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Charts Grid: North Indian & South Indian Styles -->\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n          \n          <!-- North Indian Diamond Kundli -->\n          <div class=\"glass-card rounded-2xl p-6 border border-gold-500\/30 flex flex-col items-center\">\n            <div class=\"w-full flex items-center justify-between mb-4 pb-2 border-b border-gold-500\/20\">\n              <h3 class=\"font-cinzel text-base font-bold text-gold-300 flex items-center gap-2\">\n                <i class=\"fa-solid fa-gem text-gold-400 text-sm\"><\/i> North Indian Kundli (Lagna Chart)\n              <\/h3>\n              <span class=\"text-[10px] text-slate-400 uppercase tracking-widest font-mono\">Diamond Style<\/span>\n            <\/div>\n            \n            <div class=\"w-full max-w-[380px] aspect-square relative my-auto\">\n              <svg id=\"north-chart-svg\" viewBox=\"0 0 400 400\" class=\"w-full h-full drop-shadow-xl\"><\/svg>\n            <\/div>\n            <p class=\"text-[11px] text-slate-400 mt-4 text-center\">Houses remain fixed (House 1 is top central diamond). Zodiac signs rotate with Ascendant.<\/p>\n          <\/div>\n\n          <!-- South Indian Box Kundli -->\n          <div class=\"glass-card rounded-2xl p-6 border border-gold-500\/30 flex flex-col items-center\">\n            <div class=\"w-full flex items-center justify-between mb-4 pb-2 border-b border-gold-500\/20\">\n              <h3 class=\"font-cinzel text-base font-bold text-gold-300 flex items-center gap-2\">\n                <i class=\"fa-solid fa-table-cells-large text-gold-400 text-sm\"><\/i> South Indian Kundli (Rashi Chart)\n              <\/h3>\n              <span class=\"text-[10px] text-slate-400 uppercase tracking-widest font-mono\">Square Style<\/span>\n            <\/div>\n            \n            <div class=\"w-full max-w-[380px] aspect-square relative my-auto\">\n              <svg id=\"south-chart-svg\" viewBox=\"0 0 400 400\" class=\"w-full h-full drop-shadow-xl\"><\/svg>\n            <\/div>\n            <p class=\"text-[11px] text-slate-400 mt-4 text-center\">Signs remain fixed clockwise starting with Aries at 2nd top box. Ascendant (Asc) shifts.<\/p>\n          <\/div>\n\n        <\/div>\n\n        <!-- Comprehensive Planetary Ephemeris Table -->\n        <div class=\"glass-card rounded-2xl p-6 border border-gold-500\/30 overflow-hidden\">\n          <div class=\"flex items-center justify-between mb-4 pb-2 border-b border-gold-500\/20\">\n            <h3 class=\"font-cinzel text-lg font-bold text-white flex items-center gap-2\">\n              <i class=\"fa-solid fa-list-ol text-gold-400\"><\/i> Navagraha Ephemeris &amp; Planetary Dignities\n            <\/h3>\n            <span class=\"text-xs text-gold-400\" id=\"ayanamsha-display-val\">Ayanamsha: Lahiri 24\u00b010&#8242;<\/span>\n          <\/div>\n\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full text-left text-xs text-slate-300\">\n              <thead class=\"bg-cosmic-950\/80 text-gold-300 uppercase tracking-wider text-[11px] font-semibold border-b border-gold-500\/30\">\n                <tr>\n                  <th class=\"py-3 px-4\">Graha (Body)<\/th>\n                  <th class=\"py-3 px-4\">Sign (Rashi)<\/th>\n                  <th class=\"py-3 px-4\">Longitude (Deg \/ Min)<\/th>\n                  <th class=\"py-3 px-4\">Nakshatra &amp; Pada<\/th>\n                  <th class=\"py-3 px-4\">House (Bhava)<\/th>\n                  <th class=\"py-3 px-4\">Karaka \/ Role<\/th>\n                  <th class=\"py-3 px-4\">Dignity<\/th>\n                <\/tr>\n              <\/thead>\n              <tbody id=\"ephemeris-tbody\" class=\"divide-y divide-slate-800\">\n                <!-- Dynamically generated rows -->\n              <\/tbody>\n            <\/table>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/section>\n\n    <!-- Educational Section: About Jyotish & Sidereal Zodiac -->\n    <section id=\"about-jyotish\" class=\"mt-20 pt-10 border-t border-gold-500\/20\">\n      <div class=\"text-center max-w-3xl mx-auto mb-12\">\n        <h2 class=\"text-3xl font-cinzel font-bold text-white mb-3\">\n          The Foundations of <span class=\"text-gold-400\">Vedic Astrology (Jyotish)<\/span>\n        <\/h2>\n        <p class=\"text-sm text-slate-300 leading-relaxed\">\n          Rooted in the ancient Rig Veda, Jyotish translates directly to the &#8220;Science of Light&#8221;. Unlike Western tropical astrology based on seasonal solstices, Vedic astrology is anchored strictly to the physical fixed star constellations (Sidereal system).\n        <\/p>\n      <\/div>\n\n      <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n        <div class=\"glass-card glass-card-hover rounded-xl p-6 transition duration-300\">\n          <div class=\"w-12 h-12 rounded-lg bg-gold-500\/10 border border-gold-500\/30 flex items-center justify-center text-gold-400 text-xl mb-4\">\n            <i class=\"fa-solid fa-compass-drafting\"><\/i>\n          <\/div>\n          <h3 class=\"font-cinzel text-lg font-bold text-white mb-2\">Sidereal Zodiac vs. Tropical<\/h3>\n          <p class=\"text-xs text-slate-300 leading-relaxed\">\n            Due to the earth&#8217;s axial precession (approx. 1 degree every 72 years), the vernal equinox shifts backwards. Vedic astrology applies the <strong>Ayanamsha<\/strong> correction (~24\u00b0 difference today), ensuring planetary positions match the real astronomical sky.\n          <\/p>\n        <\/div>\n\n        <div class=\"glass-card glass-card-hover rounded-xl p-6 transition duration-300\">\n          <div class=\"w-12 h-12 rounded-lg bg-gold-500\/10 border border-gold-500\/30 flex items-center justify-center text-gold-400 text-xl mb-4\">\n            <i class=\"fa-solid fa-ring\"><\/i>\n          <\/div>\n          <h3 class=\"font-cinzel text-lg font-bold text-white mb-2\">The 27 Lunar Nakshatras<\/h3>\n          <p class=\"text-xs text-slate-300 leading-relaxed\">\n            Beyond the 12 signs, Vedic astrology divides the 360\u00b0 celestial sphere into 27 lunar mansions of 13\u00b020&#8242; each. The Nakshatra occupied by the Moon at birth dictates one&#8217;s psychological blueprint, soul disposition, and Vimshottari Mahadasha timing.\n          <\/p>\n        <\/div>\n\n        <div class=\"glass-card glass-card-hover rounded-xl p-6 transition duration-300\">\n          <div class=\"w-12 h-12 rounded-lg bg-gold-500\/10 border border-gold-500\/30 flex items-center justify-center text-gold-400 text-xl mb-4\">\n            <i class=\"fa-solid fa-landmark\"><\/i>\n          <\/div>\n          <h3 class=\"font-cinzel text-lg font-bold text-white mb-2\">The 12 Bhavas (Houses)<\/h3>\n          <p class=\"text-xs text-slate-300 leading-relaxed\">\n            Each Bhava represents life domains: Tanu (Self), Dhana (Wealth), Sahaja (Courage\/Siblings), Sukha (Inner Peace\/Mother), Putra (Intellect), Ari (Obstacles), Kalatra (Spouse), Ayu (Longevity), Dharma (Fortune), Karma (Profession), Labha (Gains), and Vyaya (Moksha\/Liberation).\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Navagraha Encyclopedia Grid -->\n    <section id=\"navagraha-section\" class=\"mt-20 pt-10 border-t border-gold-500\/20\">\n      <div class=\"text-center max-w-3xl mx-auto mb-12\">\n        <h2 class=\"text-3xl font-cinzel font-bold text-white mb-3\">\n          The Sacred <span class=\"text-gold-400\">Navagrahas (Nine Celestial Forces)<\/span>\n        <\/h2>\n        <p class=\"text-sm text-slate-300 leading-relaxed\">\n          Graha translates directly to &#8220;seizer&#8221; \u2014 the cosmic archetypes through which karmic energy unfolds into human consciousness.\n        <\/p>\n      <\/div>\n\n      <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5\" id=\"grahas-container\">\n        <!-- Dynamically injected Navagraha Cards -->\n      <\/div>\n    <\/section>\n\n    <!-- FAQ Accordion Section -->\n    <section id=\"faq-section\" class=\"mt-20 pt-10 pb-16 border-t border-gold-500\/20 max-w-4xl mx-auto\">\n      <div class=\"text-center mb-10\">\n        <h2 class=\"text-3xl font-cinzel font-bold text-white mb-2\">\n          Frequently Answered <span class=\"text-gold-400\">Questions<\/span>\n        <\/h2>\n        <p class=\"text-xs text-slate-400\">Everything you need to know about coordinates, timezones, and astrological accuracy<\/p>\n      <\/div>\n\n      <div class=\"space-y-4\">\n        <div class=\"glass-card rounded-xl overflow-hidden border border-gold-500\/25\">\n          <button class=\"w-full px-6 py-4 text-left font-cinzel font-bold text-sm text-white flex justify-between items-center hover:text-gold-300 transition\" onclick=\"toggleFaq(this)\">\n            <span>Why does the exact birth location and timezone matter so much in Jyotish?<\/span>\n            <i class=\"fa-solid fa-chevron-down text-gold-400 text-xs transition-transform duration-300\"><\/i>\n          <\/button>\n          <div class=\"faq-content hidden px-6 pb-5 text-xs text-slate-300 leading-relaxed border-t border-slate-800 pt-3\">\n            The Ascendant (Lagna) sign shifts by one full degree approximately every 4 minutes. A small error in geographical latitude or longitude alters the exact local sidereal time (LST) and can change your rising sign or your Navamsha (D9) chart entirely, skewing life predictions. Our interactive worldwide marker calculates true geometric coordinates and exact timezone offsets.\n          <\/div>\n        <\/div>\n\n        <div class=\"glass-card rounded-xl overflow-hidden border border-gold-500\/25\">\n          <button class=\"w-full px-6 py-4 text-left font-cinzel font-bold text-sm text-white flex justify-between items-center hover:text-gold-300 transition\" onclick=\"toggleFaq(this)\">\n            <span>What is Ayanamsha and why is Lahiri the recommended standard?<\/span>\n            <i class=\"fa-solid fa-chevron-down text-gold-400 text-xs transition-transform duration-300\"><\/i>\n          <\/button>\n          <div class=\"faq-content hidden px-6 pb-5 text-xs text-slate-300 leading-relaxed border-t border-slate-800 pt-3\">\n            Ayanamsha is the longitudinal difference between the Tropical Vernal Equinox and the initial point of the fixed Sidereal Zodiac (0\u00b0 Aries). The Lahiri Ayanamsha (Chitra Paksha) fixes the star Spica (Chitra) at exactly 180\u00b0 opposite the Aries point. It was officially adopted by the Government of India Calendar Reform Committee in 1955 and is trusted by the vast majority of traditional astrologers worldwide.\n          <\/div>\n        <\/div>\n\n        <div class=\"glass-card rounded-xl border border-gold-500\/25\">\n          <button class=\"w-full px-6 py-4 text-left font-cinzel font-bold text-sm text-white flex justify-between items-center hover:text-gold-300 transition\" onclick=\"toggleFaq(this)\">\n            <span>Why is my Vedic Sun sign different from my Western Horoscope sign?<\/span>\n            <i class=\"fa-solid fa-chevron-down text-gold-400 text-xs transition-transform duration-300\"><\/i>\n          <\/button>\n          <div class=\"faq-content hidden px-6 pb-5 text-xs text-slate-300 leading-relaxed border-t border-slate-800 pt-3\">\n            Western astrology uses the Tropical calendar where the Sun is permanently assumed to enter Aries on March 21 (vernal equinox). Because of the Earth\u2019s 26,000-year wobble, the physical stars have shifted backwards by roughly 24 degrees. If your Western Sun sign is early Taurus, in the real astronomical sky and in Vedic astrology, the Sun was actually transiting the constellation of Aries.\n          <\/div>\n        <\/div>\n\n        <div class=\"glass-card rounded-xl border border-gold-500\/25\">\n          <button class=\"w-full px-6 py-4 text-left font-cinzel font-bold text-sm text-white flex justify-between items-center hover:text-gold-300 transition\" onclick=\"toggleFaq(this)\">\n            <span>What is the difference between North Indian and South Indian chart layouts?<\/span>\n            <i class=\"fa-solid fa-chevron-down text-gold-400 text-xs transition-transform duration-300\"><\/i>\n          <\/button>\n          <div class=\"faq-content hidden px-6 pb-5 text-xs text-slate-300 leading-relaxed border-t border-slate-800 pt-3\">\n            In North Indian charts (diamond style), the <strong>houses are static<\/strong> (the top center diamond is always House 1 \/ Lagna), and the zodiac signs rotate based on your birth time. In South Indian charts (square style), the <strong>zodiac signs are static<\/strong> (Aries is always the 2nd square from the top-left), and your Lagna marker shifts clockwise through the boxes. Both convey identical astrological information.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n  <\/main>\n\n  <!-- Cosmic Footer -->\n  <footer class=\"glass-card border-t border-gold-500\/20 py-8 text-center text-xs text-slate-400\">\n    <div class=\"max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-4\">\n      <div class=\"flex items-center gap-2\">\n        <i class=\"fa-solid fa-om text-gold-400 text-lg\"><\/i>\n        <span class=\"font-cinzel text-white font-semibold\">JYOTISHYA<\/span>\n        <span>\u2014 Ancient Vedic Mathematical Engine<\/span>\n      <\/div>\n      <p class=\"text-slate-400\">Map powered by CARTO &amp; OpenStreetMap. Sidereal mathematical calculations run client-side.<\/p>\n      <div class=\"flex items-center gap-4 text-sm text-gold-400\">\n        <a href=\"#calculator-section\" class=\"hover:text-gold-300\"><i class=\"fa-solid fa-arrow-up\"><\/i> Top<\/a>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- Notification Toast Container -->\n  <div id=\"toast\" class=\"fixed bottom-5 right-5 z-[2000] px-4 py-3 rounded-xl text-xs font-semibold glass-card border border-gold-500 text-white shadow-2xl transition-all duration-300 transform translate-y-20 opacity-0 flex items-center gap-2\">\n    <i class=\"fa-solid fa-circle-check text-gold-400 text-sm\"><\/i>\n    <span id=\"toast-msg\">Notification<\/span>\n  <\/div>\n\n  <!-- APPLICATION JAVASCRIPT -->\n  <script>\n    \/* ==========================================================================\n       1. GLOBAL STATE & CONSTANTS\n       ========================================================================== *\/\n    const STATE = {\n      lat: 25.3176,\n      lng: 82.9739,\n      placeName: \"Varanasi, Uttar Pradesh, India\",\n      timezone: \"Asia\/Kolkata\",\n      tzOffsetHours: 5.5,\n      map: null,\n      marker: null,\n      chartData: null\n    };\n\n    const ZODIAC_SIGNS = [\n      { name: \"Mesh\", en: \"Aries\", ruler: \"Mars\", element: \"Fire\" },\n      { name: \"Vrishabha\", en: \"Taurus\", ruler: \"Venus\", element: \"Earth\" },\n      { name: \"Mithun\", en: \"Gemini\", ruler: \"Mercury\", element: \"Air\" },\n      { name: \"Karka\", en: \"Cancer\", ruler: \"Moon\", element: \"Water\" },\n      { name: \"Simha\", en: \"Leo\", ruler: \"Sun\", element: \"Fire\" },\n      { name: \"Kanya\", en: \"Virgo\", ruler: \"Mercury\", element: \"Earth\" },\n      { name: \"Tula\", en: \"Libra\", ruler: \"Venus\", element: \"Air\" },\n      { name: \"Vrischika\", en: \"Scorpio\", ruler: \"Mars\", element: \"Water\" },\n      { name: \"Dhanu\", en: \"Sagittarius\", ruler: \"Jupiter\", element: \"Fire\" },\n      { name: \"Makara\", en: \"Capricorn\", ruler: \"Saturn\", element: \"Earth\" },\n      { name: \"Kumbha\", en: \"Aquarius\", ruler: \"Saturn\", element: \"Air\" },\n      { name: \"Meena\", en: \"Pisces\", ruler: \"Jupiter\", element: \"Water\" }\n    ];\n\n    const NAKSHATRAS = [\n      \"Ashwini\", \"Bharani\", \"Krittika\", \"Rohini\", \"Mrigashira\", \"Ardra\",\n      \"Punarvasu\", \"Pushya\", \"Ashlesha\", \"Magha\", \"Purva Phalguni\", \"Uttara Phalguni\",\n      \"Hasta\", \"Chitra\", \"Swati\", \"Vishakha\", \"Anuradha\", \"Jyeshtha\",\n      \"Mula\", \"Purva Ashadha\", \"Uttara Ashadha\", \"Shravana\", \"Dhanishta\", \"Shatabhisha\",\n      \"Purva Bhadrapada\", \"Uttara Bhadrapada\", \"Revati\"\n    ];\n\n    const GRAHA_INFO = [\n      { id: \"Sun\", sanskrit: \"Surya\", role: \"Atmakaraka (Soul)\", gem: \"Ruby\", deity: \"Agni \/ Shiva\", element: \"Fire\", icon: \"fa-sun\" },\n      { id: \"Moon\", sanskrit: \"Chandra\", role: \"Manakaraka (Mind)\", gem: \"Pearl\", deity: \"Varuna \/ Parvati\", element: \"Water\", icon: \"fa-moon\" },\n      { id: \"Mars\", sanskrit: \"Mangala\", role: \"Bhratrikaraka (Courage)\", gem: \"Red Coral\", deity: \"Kartikeya\", element: \"Fire\", icon: \"fa-fire\" },\n      { id: \"Mercury\", sanskrit: \"Budha\", role: \"Gnatikaraka (Intellect)\", gem: \"Emerald\", deity: \"Vishnu\", element: \"Earth\", icon: \"fa-brain\" },\n      { id: \"Jupiter\", sanskrit: \"Guru \/ Brihaspati\", role: \"Putrakaraka (Wisdom)\", gem: \"Yellow Sapphire\", deity: \"Indra \/ Brahma\", element: \"Ether\", icon: \"fa-graduation-cap\" },\n      { id: \"Venus\", sanskrit: \"Shukra\", role: \"Darakaraka (Love & Art)\", gem: \"Diamond\", deity: \"Lakshmi\", element: \"Water\", icon: \"fa-heart\" },\n      { id: \"Saturn\", sanskrit: \"Shani\", role: \"Ayushkaraka (Karma & Discipline)\", gem: \"Blue Sapphire\", deity: \"Yama \/ Shiva\", element: \"Air\", icon: \"fa-hourglass-half\" },\n      { id: \"Rahu\", sanskrit: \"North Node\", role: \"Karmic Desire & Expansion\", gem: \"Hessonite (Gomed)\", deity: \"Durga\", element: \"Air\/Shadow\", icon: \"fa-infinity\" },\n      { id: \"Ketu\", sanskrit: \"South Node\", role: \"Mokshakaraka (Liberation)\", gem: \"Cat's Eye (Vaidurya)\", deity: \"Ganesha\", element: \"Fire\/Shadow\", icon: \"fa-feather\" }\n    ];\n\n    \/* ==========================================================================\n       2. LEAFLET MAP & TILE INITIALIZATION WITH CARTO API KEY\n       ========================================================================== *\/\n    function initMap() {\n      \/\/ 1. Initialize Map into STATE.map (Fixed global reference)\n      STATE.map = L.map('map', {\n        center: [STATE.lat, STATE.lng],\n        zoom: 5,\n        zoomControl: true\n      });\n\n      \/\/ Your CARTO API Key\n      const CARTO_KEY = 'cb1_4ve0_1_eabcf22f27921d14fc312d2c';\n\n      \/\/ 2. Primary Tile Layer: CARTO Voyager\n      const cartoLayer = L.tileLayer(\n        `https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png?key=${CARTO_KEY}`,\n        {\n          subdomains: 'abcd',\n          attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\" target=\"_blank\">OpenStreetMap<\/a> contributors, &copy; <a href=\"https:\/\/carto.com\/attributions\" target=\"_blank\">CARTO<\/a>',\n          maxZoom: 19\n        }\n      );\n\n      \/\/ 3. Fallback Layer: Standard OpenStreetMap (activates if CARTO fails or blocks origin)\n      const osmBackupLayer = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n        maxZoom: 19,\n        attribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\" target=\"_blank\">OpenStreetMap<\/a> contributors'\n      });\n\n      let cartoFailed = false;\n      cartoLayer.on('tileerror', function () {\n        if (!cartoFailed) {\n          cartoFailed = true;\n          console.warn('CARTO tile error detected. Falling back to OpenStreetMap tiles.');\n          if (STATE.map.hasLayer(cartoLayer)) {\n            STATE.map.removeLayer(cartoLayer);\n          }\n          osmBackupLayer.addTo(STATE.map);\n        }\n      });\n\n      \/\/ Add CARTO layer\n      cartoLayer.addTo(STATE.map);\n\n      \/\/ Refresh layout size to prevent grey\/blank initial tiles\n      setTimeout(() => {\n        if (STATE.map) STATE.map.invalidateSize();\n      }, 300);\n\n      \/\/ 4. Custom Gold Astrological Marker Pin\n      const goldIcon = L.divIcon({\n        className: 'custom-div-icon',\n        html: `\n          <div style=\"background-color: #D4AF37; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px #D4AF37; border: 2px solid #ffffff;\">\n            <i class=\"fa-solid fa-om\" style=\"transform: rotate(45deg); color: #070B19; font-size: 13px;\"><\/i>\n          <\/div>\n        `,\n        iconSize: [28, 28],\n        iconAnchor: [14, 28],\n        popupAnchor: [0, -28]\n      });\n\n      STATE.marker = L.marker([STATE.lat, STATE.lng], {\n        draggable: true,\n        icon: goldIcon\n      }).addTo(STATE.map);\n\n      STATE.marker.bindPopup(`<b>${STATE.placeName}<\/b><br>Lat: ${STATE.lat.toFixed(4)}, Lng: ${STATE.lng.toFixed(4)}`).openPopup();\n\n      \/\/ Drag event\n      STATE.marker.on('dragend', function () {\n        const position = STATE.marker.getLatLng();\n        updateLocationFromCoordinates(position.lat, position.lng);\n      });\n\n      \/\/ Click event anywhere on map\n      STATE.map.on('click', function (e) {\n        STATE.marker.setLatLng(e.latlng);\n        updateLocationFromCoordinates(e.latlng.lat, e.latlng.lng);\n      });\n\n      initCitySearch();\n      initLocateMe();\n    }\n\n    function formatCoord(coord, isLat) {\n      const dir = isLat ? (coord >= 0 ? \"N\" : \"S\") : (coord >= 0 ? \"E\" : \"W\");\n      return `${Math.abs(coord).toFixed(4)}\u00b0 ${dir}`;\n    }\n\n    \/\/ Reverse Geocoding with Open-Meteo & OpenStreetMap Nominatim\n    async function updateLocationFromCoordinates(lat, lng) {\n      STATE.lat = lat;\n      STATE.lng = lng;\n\n      document.getElementById('display-lat').textContent = formatCoord(lat, true);\n      document.getElementById('display-lng').textContent = formatCoord(lng, false);\n      document.getElementById('display-place').textContent = \"Locating...\";\n\n      deriveTimezone(lat, lng);\n\n      try {\n        const response = await fetch(`https:\/\/nominatim.openstreetmap.org\/reverse?format=jsonv2&lat=${lat}&lon=${lng}`, {\n          headers: { 'Accept': 'application\/json' }\n        });\n        if (response.ok) {\n          const data = await response.json();\n          const city = data.address.city || data.address.town || data.address.village || data.address.county || data.name || \"Unknown Location\";\n          const state = data.address.state || \"\";\n          const country = data.address.country || \"\";\n          const formatted = [city, state, country].filter(Boolean).join(\", \");\n          \n          STATE.placeName = formatted || `Lat: ${lat.toFixed(3)}, Lng: ${lng.toFixed(3)}`;\n          document.getElementById('display-place').textContent = STATE.placeName;\n          document.getElementById('display-place').title = STATE.placeName;\n          STATE.marker.setPopupContent(`<b>${STATE.placeName}<\/b><br>${formatCoord(lat, true)}, ${formatCoord(lng, false)}`);\n          return;\n        }\n      } catch (err) {\n        console.warn(\"Reverse geocode fallback\", err);\n      }\n\n      STATE.placeName = `Coordinates (${lat.toFixed(2)}, ${lng.toFixed(2)})`;\n      document.getElementById('display-place').textContent = STATE.placeName;\n    }\n\n    function deriveTimezone(lat, lng) {\n      const approxOffset = lng \/ 15.0;\n      let tzName = \"Estimated Solar Timezone\";\n      \n      if (lng >= 68 && lng <= 90 &#038;&#038; lat >= 6 && lat <= 36) {\n        tzName = \"Asia\/Kolkata\";\n        STATE.tzOffsetHours = 5.5;\n      } else if (lng >= -125 && lng <= -65 &#038;&#038; lat >= 24 && lat <= 50) {\n        if (lng < -114) { tzName = \"America\/Los_Angeles\"; STATE.tzOffsetHours = -8; }\n        else if (lng < -102) { tzName = \"America\/Denver\"; STATE.tzOffsetHours = -7; }\n        else if (lng < -85) { tzName = \"America\/Chicago\"; STATE.tzOffsetHours = -6; }\n        else { tzName = \"America\/New_York\"; STATE.tzOffsetHours = -5; }\n      } else if (lng >= -10 && lng <= 30 &#038;&#038; lat >= 35 && lat <= 60) {\n        if (lng < 5) { tzName = \"Europe\/London\"; STATE.tzOffsetHours = 0; }\n        else { tzName = \"Europe\/Berlin\"; STATE.tzOffsetHours = 1; }\n      } else if (lng >= 115 && lng <= 155 &#038;&#038; lat <= -10 &#038;&#038; lat >= -45) {\n        tzName = \"Australia\/Sydney\";\n        STATE.tzOffsetHours = 10;\n      } else if (lng >= 120 && lng <= 145 &#038;&#038; lat >= 30 && lat <= 45) {\n        tzName = \"Asia\/Tokyo\";\n        STATE.tzOffsetHours = 9;\n      } else {\n        STATE.tzOffsetHours = Math.round(approxOffset * 4) \/ 4;\n        tzName = `Auto Zone (UTC ${STATE.tzOffsetHours >= 0 ? '+' : ''}${STATE.tzOffsetHours})`;\n      }\n\n      const offsetH = Math.floor(Math.abs(STATE.tzOffsetHours));\n      const offsetM = Math.round((Math.abs(STATE.tzOffsetHours) - offsetH) * 60);\n      const sign = STATE.tzOffsetHours >= 0 ? \"+\" : \"-\";\n      const pad = (n) => String(n).padStart(2, '0');\n\n      document.getElementById('display-tz').textContent = `${tzName} (UTC ${sign}${pad(offsetH)}:${pad(offsetM)})`;\n    }\n\n    \/\/ City Autocomplete with fallback from Photon to Open-Meteo\n    function initCitySearch() {\n      const searchInput = document.getElementById('city-search');\n      const resultsDropdown = document.getElementById('search-results');\n      let debounceTimeout = null;\n\n      searchInput.addEventListener('input', function () {\n        const query = this.value.trim();\n        clearTimeout(debounceTimeout);\n        if (query.length < 2) {\n          resultsDropdown.classList.add('hidden');\n          resultsDropdown.innerHTML = '';\n          return;\n        }\n\n        debounceTimeout = setTimeout(async () => {\n          let locations = [];\n\n          \/\/ Primary: Photon API\n          try {\n            const res = await fetch(`https:\/\/photon.komoot.io\/api\/?q=${encodeURIComponent(query)}&limit=6`);\n            if (res.ok) {\n              const data = await res.json();\n              if (data.features && data.features.length > 0) {\n                locations = data.features.map(feat => ({\n                  name: [feat.properties.name, feat.properties.state, feat.properties.country].filter(Boolean).join(\", \"),\n                  lat: feat.geometry.coordinates[1],\n                  lng: feat.geometry.coordinates[0]\n                }));\n              }\n            }\n          } catch (e) {\n            console.warn(\"Photon unavailable, trying Open-Meteo fallback...\", e);\n          }\n\n          \/\/ Fallback: Open-Meteo Geocoding\n          if (locations.length === 0) {\n            try {\n              const res2 = await fetch(`https:\/\/geocoding-api.open-meteo.com\/v1\/search?name=${encodeURIComponent(query)}&count=6&language=en&format=json`);\n              if (res2.ok) {\n                const data2 = await res2.json();\n                if (data2.results && data2.results.length > 0) {\n                  locations = data2.results.map(r => ({\n                    name: [r.name, r.admin1, r.country].filter(Boolean).join(\", \"),\n                    lat: r.latitude,\n                    lng: r.longitude\n                  }));\n                }\n              }\n            } catch (err2) {\n              console.warn(\"Open-Meteo fallback failed\", err2);\n            }\n          }\n\n          if (locations.length > 0) {\n            resultsDropdown.innerHTML = '';\n            locations.forEach(loc => {\n              const li = document.createElement('li');\n              li.className = \"px-4 py-2.5 hover:bg-gold-500\/10 hover:text-gold-300 cursor-pointer flex items-center justify-between text-slate-200 transition\";\n              li.innerHTML = `\n                <span class=\"truncate pr-2\"><i class=\"fa-solid fa-location-dot text-gold-400 mr-2 text-[10px]\"><\/i>${loc.name}<\/span>\n                <span class=\"text-[10px] text-slate-500 font-mono\">${loc.lat.toFixed(2)}\u00b0, ${loc.lng.toFixed(2)}\u00b0<\/span>\n              `;\n\n              li.addEventListener('click', () => {\n                STATE.lat = loc.lat;\n                STATE.lng = loc.lng;\n                STATE.placeName = loc.name;\n\n                STATE.map.flyTo([loc.lat, loc.lng], 10, { duration: 1.2 });\n                STATE.marker.setLatLng([loc.lat, loc.lng]);\n                \n                document.getElementById('display-place').textContent = loc.name;\n                document.getElementById('display-lat').textContent = formatCoord(loc.lat, true);\n                document.getElementById('display-lng').textContent = formatCoord(loc.lng, false);\n                deriveTimezone(loc.lat, loc.lng);\n                \n                resultsDropdown.classList.add('hidden');\n                searchInput.value = loc.name;\n                showToast(`Selected: ${loc.name}`);\n              });\n\n              resultsDropdown.appendChild(li);\n            });\n            resultsDropdown.classList.remove('hidden');\n          } else {\n            resultsDropdown.classList.add('hidden');\n          }\n        }, 300);\n      });\n\n      document.addEventListener('click', (e) => {\n        if (!searchInput.contains(e.target) && !resultsDropdown.contains(e.target)) {\n          resultsDropdown.classList.add('hidden');\n        }\n      });\n    }\n\n    function initLocateMe() {\n      const btn = document.getElementById('locate-me-btn');\n      btn.addEventListener('click', () => {\n        if (navigator.geolocation) {\n          btn.innerHTML = `<i class=\"fa-solid fa-spinner fa-spin text-gold-400\"><\/i>`;\n          navigator.geolocation.getCurrentPosition(\n            (pos) => {\n              const lat = pos.coords.latitude;\n              const lng = pos.coords.longitude;\n              STATE.map.flyTo([lat, lng], 11);\n              STATE.marker.setLatLng([lat, lng]);\n              updateLocationFromCoordinates(lat, lng);\n              btn.innerHTML = `<i class=\"fa-solid fa-crosshairs text-base\"><\/i>`;\n              showToast(\"Location updated from GPS\");\n            },\n            () => {\n              btn.innerHTML = `<i class=\"fa-solid fa-crosshairs text-base\"><\/i>`;\n              showToast(\"GPS access unavailable. Please search your city.\");\n            }\n          );\n        } else {\n          showToast(\"Geolocation not supported by this browser.\");\n        }\n      });\n    }\n\n    \/* ==========================================================================\n       3. ASTRONOMICAL & VEDIC CALCULATIONS ENGINE\n       ========================================================================== *\/\n    function getJulianDate(date, utHours) {\n      let y = date.getUTCFullYear();\n      let m = date.getUTCMonth() + 1;\n      const d = date.getUTCDate() + (utHours \/ 24.0);\n      if (m <= 2) {\n        y -= 1;\n        m += 12;\n      }\n      const a = Math.floor(y \/ 100);\n      const b = 2 - a + Math.floor(a \/ 4);\n      return Math.floor(365.25 * (y + 4716)) + Math.floor(30.6001 * (m + 1)) + d + b - 1524.5;\n    }\n\n    function getAyanamshaDegree(jd, system) {\n      const t = (jd - 2451545.0) \/ 36525.0;\n      const lahiri = 23.856 + (1.396 * t);\n      if (system === 'lahiri') return lahiri;\n      if (system === 'raman') return lahiri - 1.45;\n      if (system === 'kp') return lahiri + 0.12;\n      return 0.0;\n    }\n\n    function calculateAscendant(jd, utHours, lat, lng, ayanamsha) {\n      const d = jd - 2451545.0;\n      let gmst = 280.46061837 + (360.98564736629 * d);\n      gmst = ((gmst % 360) + 360) % 360;\n\n      let lst = gmst + lng;\n      lst = ((lst % 360) + 360) % 360;\n\n      const eps = 23.4392911 - (0.0130042 * (d \/ 36525.0));\n      const epsRad = eps * Math.PI \/ 180.0;\n      const lstRad = lst * Math.PI \/ 180.0;\n      const latRad = lat * Math.PI \/ 180.0;\n\n      const y = -Math.cos(lstRad);\n      const x = Math.sin(lstRad) * Math.cos(epsRad) + Math.tan(latRad) * Math.sin(epsRad);\n      let ascTropical = Math.atan2(y, x) * 180.0 \/ Math.PI;\n      ascTropical = ((ascTropical % 360) + 360) % 360;\n\n      let ascSidereal = ascTropical - ayanamsha;\n      return ((ascSidereal % 360) + 360) % 360;\n    }\n\n    function calculatePlanetaryPositions(jd, ayanamsha) {\n      const d = jd - 2451545.0;\n      const t = d \/ 36525.0;\n\n      \/\/ Sun\n      const L0 = 280.46646 + 36000.76983 * t;\n      const M_sun = 357.52911 + 35999.05029 * t;\n      const M_sunRad = M_sun * Math.PI \/ 180;\n      const sunCenter = (1.914602 - 0.004817 * t) * Math.sin(M_sunRad) + (0.019993 - 0.000101 * t) * Math.sin(2 * M_sunRad);\n      let sunTrop = ((L0 + sunCenter) % 360 + 360) % 360;\n\n      \/\/ Moon\n      const L_moon = 218.3165 + 481267.8813 * t;\n      const M_moon = 134.9634 + 477198.8676 * t;\n      const D = 297.8502 + 445267.1115 * t;\n      let moonTrop = L_moon + 6.289 * Math.sin(M_moon * Math.PI \/ 180) - 1.274 * Math.sin((M_moon - 2 * D) * Math.PI \/ 180) + 0.658 * Math.sin(2 * D * Math.PI \/ 180);\n      moonTrop = ((moonTrop % 360) + 360) % 360;\n\n      \/\/ Lunar Nodes (Mean Rahu &#038; Ketu)\n      let rahuTrop = 125.04452 - 1934.136261 * t;\n      rahuTrop = ((rahuTrop % 360) + 360) % 360;\n      let ketuTrop = (rahuTrop + 180.0) % 360;\n\n      \/\/ Planets mean motions &#038; perturbations\n      let marsTrop = (355.43 + 191.403 * t + 10.69 * Math.sin((19.37 + 191.4 * t) * Math.PI \/ 180)) % 360;\n      let mercTrop = (sunTrop + 18.2 * Math.sin((250 + 1494.7 * t) * Math.PI \/ 180)) % 360;\n      let jupTrop = (34.35 + 30.349 * t + 5.55 * Math.sin((20.0 + 30.35 * t) * Math.PI \/ 180)) % 360;\n      let venTrop = (sunTrop + 36.4 * Math.sin((180 + 585.1 * t) * Math.PI \/ 180)) % 360;\n      let satTrop = (50.08 + 12.221 * t + 6.35 * Math.sin((317.0 + 12.22 * t) * Math.PI \/ 180)) % 360;\n\n      const sidereal = (deg) => ((deg - ayanamsha) % 360 + 360) % 360;\n\n      return {\n        Sun: sidereal(sunTrop),\n        Moon: sidereal(moonTrop),\n        Mars: sidereal(marsTrop),\n        Mercury: sidereal(mercTrop),\n        Jupiter: sidereal(jupTrop),\n        Venus: sidereal(venTrop),\n        Saturn: sidereal(satTrop),\n        Rahu: sidereal(rahuTrop),\n        Ketu: sidereal(ketuTrop)\n      };\n    }\n\n    function parseDegreeToRashi(deg) {\n      const normalized = ((deg % 360) + 360) % 360;\n      const signIndex = Math.floor(normalized \/ 30);\n      const signRem = normalized - (signIndex * 30);\n      const d = Math.floor(signRem);\n      const m = Math.floor((signRem - d) * 60);\n      const s = Math.floor((((signRem - d) * 60) - m) * 60);\n\n      const nakIndex = Math.floor(normalized \/ (360 \/ 27));\n      const nakRem = normalized % (360 \/ 27);\n      const pada = Math.floor(nakRem \/ (13.33333333 \/ 4)) + 1;\n\n      return {\n        signIndex,\n        signName: ZODIAC_SIGNS[signIndex].name,\n        signEnglish: ZODIAC_SIGNS[signIndex].en,\n        degInSign: d,\n        minInSign: m,\n        secInSign: s,\n        formattedDeg: `${d}\u00b0 ${String(m).padStart(2, '0')}' ${String(s).padStart(2, '0')}\"`,\n        nakshatra: NAKSHATRAS[nakIndex] || NAKSHATRAS[0],\n        pada: Math.min(pada, 4),\n        totalDeg: normalized\n      };\n    }\n\n    function getDignity(planet, signIndex) {\n      const exaltations = { Sun: 0, Moon: 1, Mars: 9, Mercury: 5, Jupiter: 3, Venus: 11, Saturn: 6, Rahu: 1, Ketu: 8 };\n      const debilitations = { Sun: 6, Moon: 7, Mars: 3, Mercury: 11, Jupiter: 9, Venus: 5, Saturn: 0, Rahu: 7, Ketu: 2 };\n      const ownSigns = {\n        Sun: [4], Moon: [3], Mars: [0, 7], Mercury: [2, 5],\n        Jupiter: [8, 11], Venus: [1, 6], Saturn: [9, 10], Rahu: [10], Ketu: [8]\n      };\n\n      if (exaltations[planet] === signIndex) return { text: \"Exalted (Uchcha)\", badge: \"bg-emerald-500\/20 text-emerald-400 border-emerald-500\/40\" };\n      if (debilitations[planet] === signIndex) return { text: \"Debilitated (Neecha)\", badge: \"bg-rose-500\/20 text-rose-400 border-rose-500\/40\" };\n      if (ownSigns[planet] && ownSigns[planet].includes(signIndex)) return { text: \"Own Sign (Swakshetra)\", badge: \"bg-gold-500\/20 text-gold-300 border-gold-500\/40\" };\n      return { text: \"Friendly \/ Neutral\", badge: \"bg-slate-800 text-slate-300 border-slate-700\" };\n    }\n\n    \/* ==========================================================================\n       4. GENERATE FULL KUNDLI CONTROLLER\n       ========================================================================== *\/\n    function generateKundli() {\n      const name = document.getElementById('native-name').value.trim() || \"Seeker\";\n      const dateStr = document.getElementById('birth-date').value;\n      const hourVal = parseInt(document.getElementById('birth-hour').value);\n      const minVal = parseInt(document.getElementById('birth-min').value) || 0;\n      const secVal = parseInt(document.getElementById('birth-sec').value) || 0;\n      const ampm = document.getElementById('birth-ampm').value;\n      const ayanamshaType = document.getElementById('ayanamsha-select').value;\n\n      if (!dateStr || isNaN(hourVal)) {\n        showToast(\"Please provide your complete Date and Time of Birth.\");\n        return;\n      }\n\n      let h24 = hourVal % 12;\n      if (ampm === \"PM\") h24 += 12;\n      const localDecimalTime = h24 + (minVal \/ 60) + (secVal \/ 3600);\n      const utDecimalTime = localDecimalTime - STATE.tzOffsetHours;\n      const birthDateObj = new Date(dateStr + \"T00:00:00Z\");\n\n      const jd = getJulianDate(birthDateObj, utDecimalTime);\n      const ayanamshaDeg = getAyanamshaDegree(jd, ayanamshaType);\n\n      const ascDeg = calculateAscendant(jd, utDecimalTime, STATE.lat, STATE.lng, ayanamshaDeg);\n      const ascDetails = parseDegreeToRashi(ascDeg);\n\n      const planetaryDegs = calculatePlanetaryPositions(jd, ayanamshaDeg);\n      const planetsTable = [];\n      const ascSignIdx = ascDetails.signIndex;\n\n      Object.entries(planetaryDegs).forEach(([pName, pDeg]) => {\n        const info = parseDegreeToRashi(pDeg);\n        let houseNum = (info.signIndex - ascSignIdx + 12) % 12 + 1;\n        const dignity = getDignity(pName, info.signIndex);\n        const meta = GRAHA_INFO.find(g => g.id === pName);\n\n        planetsTable.push({\n          planet: pName,\n          sanskrit: meta ? meta.sanskrit : pName,\n          signIndex: info.signIndex,\n          signName: info.signName,\n          signEnglish: info.signEnglish,\n          formattedDeg: info.formattedDeg,\n          nakshatra: info.nakshatra,\n          pada: info.pada,\n          house: houseNum,\n          role: meta ? meta.role : \"Graha\",\n          dignity: dignity\n        });\n      });\n\n      STATE.chartData = {\n        name,\n        dateStr,\n        timeFormatted: `${hourVal}:${String(minVal).padStart(2, '0')} ${ampm}`,\n        place: STATE.placeName,\n        ascDetails,\n        planetsTable,\n        ayanamshaType,\n        ayanamshaDeg\n      };\n\n      document.getElementById('res-name').textContent = name;\n      document.getElementById('res-lagna').textContent = `${ascDetails.signName} (${ascDetails.signEnglish}) ${ascDetails.degInSign}\u00b0`;\n      \n      const moonInfo = planetsTable.find(p => p.planet === 'Moon');\n      if (moonInfo) {\n        document.getElementById('res-rashi').textContent = `${moonInfo.signName} (${moonInfo.signEnglish})`;\n        document.getElementById('res-nakshatra').textContent = `${moonInfo.nakshatra} (Pada ${moonInfo.pada})`;\n      }\n\n      const ayanTitle = ayanamshaType.charAt(0).toUpperCase() + ayanamshaType.slice(1);\n      document.getElementById('ayanamsha-display-val').textContent = `Ayanamsha: ${ayanTitle} (${ayanamshaDeg.toFixed(2)}\u00b0)`;\n\n      renderEphemerisTable(ascDetails, planetsTable);\n      drawNorthIndianChart(ascDetails, planetsTable);\n      drawSouthIndianChart(ascDetails, planetsTable);\n\n      const resSection = document.getElementById('results-section');\n      resSection.classList.remove('hidden');\n      resSection.scrollIntoView({ behavior: 'smooth' });\n\n      showToast(\"Vedic Chart calculated successfully!\");\n    }\n\n    function renderEphemerisTable(ascDetails, planets) {\n      const tbody = document.getElementById('ephemeris-tbody');\n      tbody.innerHTML = '';\n\n      const ascRow = document.createElement('tr');\n      ascRow.className = \"hover:bg-cosmic-800\/40 transition font-medium border-b border-gold-500\/20\";\n      ascRow.innerHTML = `\n        <td class=\"py-3 px-4 font-cinzel font-bold text-gold-400\">\n          <i class=\"fa-solid fa-star mr-1.5 text-xs\"><\/i> Lagna (Ascendant)\n        <\/td>\n        <td class=\"py-3 px-4 text-white\">${ascDetails.signName} <span class=\"text-slate-400 text-[10px]\">(${ascDetails.signEnglish})<\/span><\/td>\n        <td class=\"py-3 px-4 font-mono text-slate-200\">${ascDetails.formattedDeg}<\/td>\n        <td class=\"py-3 px-4\">${ascDetails.nakshatra} <span class=\"text-gold-400\">P${ascDetails.pada}<\/span><\/td>\n        <td class=\"py-3 px-4 font-bold text-gold-300\">House 1 (Tanu)<\/td>\n        <td class=\"py-3 px-4 text-slate-400\">Rising Portal \/ Physical Body<\/td>\n        <td class=\"py-3 px-4\"><span class=\"px-2 py-0.5 rounded text-[10px] border bg-gold-500\/20 text-gold-300 border-gold-500\/30\">Pivot (Kendra)<\/span><\/td>\n      `;\n      tbody.appendChild(ascRow);\n\n      planets.forEach(p => {\n        const tr = document.createElement('tr');\n        tr.className = \"hover:bg-cosmic-800\/40 transition\";\n        tr.innerHTML = `\n          <td class=\"py-3 px-4 font-semibold text-white\">\n            <span class=\"text-gold-400 font-cinzel\">${p.planet}<\/span> <span class=\"text-[10px] text-slate-400 font-normal\">(${p.sanskrit})<\/span>\n          <\/td>\n          <td class=\"py-3 px-4 text-slate-200\">${p.signName} <span class=\"text-slate-500 text-[10px]\">(${p.signEnglish})<\/span><\/td>\n          <td class=\"py-3 px-4 font-mono text-slate-300\">${p.formattedDeg}<\/td>\n          <td class=\"py-3 px-4\">${p.nakshatra} <span class=\"text-gold-400\">P${p.pada}<\/span><\/td>\n          <td class=\"py-3 px-4 font-semibold text-gold-300\">House ${p.house}<\/td>\n          <td class=\"py-3 px-4 text-slate-400\">${p.role}<\/td>\n          <td class=\"py-3 px-4\">\n            <span class=\"px-2 py-0.5 rounded text-[10px] border ${p.dignity.badge}\">${p.dignity.text}<\/span>\n          <\/td>\n        `;\n        tbody.appendChild(tr);\n      });\n    }\n\n    \/* ==========================================================================\n       5. SACRED KUNDLI SVG GRAPHICS ENGINES\n       ========================================================================== *\/\n    function drawNorthIndianChart(ascDetails, planets) {\n      const svg = document.getElementById('north-chart-svg');\n      svg.innerHTML = `\n        <rect x=\"5\" y=\"5\" width=\"390\" height=\"390\" class=\"kundli-outer\" rx=\"8\" \/>\n        <line x1=\"5\" y1=\"5\" x2=\"395\" y2=\"395\" class=\"kundli-line\" \/>\n        <line x1=\"395\" y1=\"5\" x2=\"5\" y2=\"395\" class=\"kundli-line\" \/>\n        <polygon points=\"200,5 395,200 200,395 5,200\" fill=\"none\" class=\"kundli-line\" \/>\n      `;\n\n      const houseCenters = {\n        1:  { signX: 200, signY: 135, plX: 200, plY: 95 },\n        2:  { signX: 100, signY: 55,  plX: 100, plY: 35 },\n        3:  { signX: 45,  signY: 110, plX: 45,  plY: 80 },\n        4:  { signX: 130, signY: 200, plX: 95,  plY: 200 },\n        5:  { signX: 45,  signY: 290, plX: 45,  plY: 320 },\n        6:  { signX: 100, signY: 345, plX: 100, plY: 365 },\n        7:  { signX: 200, signY: 265, plX: 200, plY: 305 },\n        8:  { signX: 300, signY: 345, plX: 300, plY: 365 },\n        9:  { signX: 355, signY: 290, plX: 355, plY: 320 },\n        10: { signX: 270, signY: 200, plX: 305, plY: 200 },\n        11: { signX: 355, signY: 110, plX: 355, plY: 80 },\n        12: { signX: 300, signY: 55,  plX: 300, plY: 35 }\n      };\n\n      const ascSign = ascDetails.signIndex;\n      const planetsByHouse = {};\n      for (let h = 1; h <= 12; h++) planetsByHouse[h] = [];\n      planets.forEach(p => planetsByHouse[p.house].push(p.planet.slice(0, 2)));\n\n      for (let h = 1; h <= 12; h++) {\n        const pos = houseCenters[h];\n        const signNumInHouse = ((ascSign + (h - 1)) % 12) + 1;\n\n        const signTxt = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n        signTxt.setAttribute(\"x\", pos.signX);\n        signTxt.setAttribute(\"y\", pos.signY);\n        signTxt.setAttribute(\"class\", \"kundli-text-sign\");\n        signTxt.textContent = signNumInHouse;\n        svg.appendChild(signTxt);\n\n        const hSmall = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n        hSmall.setAttribute(\"x\", pos.signX + (h === 1 ? -35 : (h === 7 ? -35 : 0)));\n        hSmall.setAttribute(\"y\", pos.signY + (h === 1 ? -15 : (h === 7 ? 18 : -12)));\n        hSmall.setAttribute(\"class\", \"kundli-text-house\");\n        hSmall.textContent = `H${h}`;\n        svg.appendChild(hSmall);\n\n        const pls = planetsByHouse[h];\n        if (pls.length > 0) {\n          const plTxt = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n          plTxt.setAttribute(\"x\", pos.plX);\n          plTxt.setAttribute(\"y\", pos.plY);\n          plTxt.setAttribute(\"class\", \"kundli-text-planets\");\n          plTxt.textContent = (h === 1 ? \"Asc, \" : \"\") + pls.join(\", \");\n          svg.appendChild(plTxt);\n        } else if (h === 1) {\n          const plTxt = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n          plTxt.setAttribute(\"x\", pos.plX);\n          plTxt.setAttribute(\"y\", pos.plY);\n          plTxt.setAttribute(\"class\", \"kundli-text-planets text-gold-300\");\n          plTxt.textContent = \"Asc\";\n          svg.appendChild(plTxt);\n        }\n      }\n    }\n\n    function drawSouthIndianChart(ascDetails, planets) {\n      const svg = document.getElementById('south-chart-svg');\n      svg.innerHTML = `\n        <rect x=\"5\" y=\"5\" width=\"390\" height=\"390\" class=\"kundli-outer\" rx=\"8\" \/>\n        <line x1=\"102.5\" y1=\"5\" x2=\"102.5\" y2=\"395\" class=\"kundli-line\" \/>\n        <line x1=\"200\"   y1=\"5\" x2=\"200\"   y2=\"102.5\" class=\"kundli-line\" \/>\n        <line x1=\"200\"   y1=\"297.5\" x2=\"200\" y2=\"395\" class=\"kundli-line\" \/>\n        <line x1=\"297.5\" y1=\"5\" x2=\"297.5\" y2=\"395\" class=\"kundli-line\" \/>\n\n        <line x1=\"5\" y1=\"102.5\" x2=\"395\" y2=\"102.5\" class=\"kundli-line\" \/>\n        <line x1=\"5\" y1=\"200\"   x2=\"102.5\" y2=\"200\" class=\"kundli-line\" \/>\n        <line x1=\"297.5\" y1=\"200\" x2=\"395\" y2=\"200\" class=\"kundli-line\" \/>\n        <line x1=\"5\" y1=\"297.5\" x2=\"395\" y2=\"297.5\" class=\"kundli-line\" \/>\n        \n        <text x=\"200\" y=\"205\" text-anchor=\"middle\" font-family=\"Cinzel\" font-size=\"28\" font-weight=\"bold\" fill=\"rgba(212,175,55,0.12)\">RASHI<\/text>\n      `;\n\n      const signBoxes = {\n        11: { x: 5,     y: 5 },\n        0:  { x: 102.5, y: 5 },\n        1:  { x: 200,   y: 5 },\n        2:  { x: 297.5, y: 5 },\n        3:  { x: 297.5, y: 102.5 },\n        4:  { x: 297.5, y: 200 },\n        5:  { x: 297.5, y: 297.5 },\n        6:  { x: 200,   y: 297.5 },\n        7:  { x: 102.5, y: 297.5 },\n        8:  { x: 5,     y: 297.5 },\n        9:  { x: 5,     y: 200 },\n        10: { x: 5,     y: 102.5 }\n      };\n\n      const planetsBySign = {};\n      for (let s = 0; s < 12; s++) planetsBySign[s] = [];\n      planets.forEach(p => planetsBySign[p.signIndex].push(p.planet.slice(0, 2)));\n\n      for (let s = 0; s < 12; s++) {\n        const box = signBoxes[s];\n        const isLagnaSign = (s === ascDetails.signIndex);\n\n        const signTxt = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n        signTxt.setAttribute(\"x\", box.x + 8);\n        signTxt.setAttribute(\"y\", box.y + 18);\n        signTxt.setAttribute(\"class\", \"kundli-text-sign\");\n        signTxt.setAttribute(\"text-anchor\", \"start\");\n        signTxt.setAttribute(\"font-size\", \"10px\");\n        signTxt.textContent = ZODIAC_SIGNS[s].name;\n        svg.appendChild(signTxt);\n\n        if (isLagnaSign) {\n          const lagnaBadge = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n          lagnaBadge.setAttribute(\"x\", box.x + 75);\n          lagnaBadge.setAttribute(\"y\", box.y + 18);\n          lagnaBadge.setAttribute(\"font-size\", \"11px\");\n          lagnaBadge.setAttribute(\"font-weight\", \"bold\");\n          lagnaBadge.setAttribute(\"fill\", \"#e5c365\");\n          lagnaBadge.setAttribute(\"text-anchor\", \"end\");\n          lagnaBadge.textContent = \"ASC\";\n          svg.appendChild(lagnaBadge);\n        }\n\n        const pls = planetsBySign[s];\n        if (pls.length > 0) {\n          const plTxt = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n          plTxt.setAttribute(\"x\", box.x + 48);\n          plTxt.setAttribute(\"y\", box.y + 55);\n          plTxt.setAttribute(\"class\", \"kundli-text-planets\");\n          plTxt.setAttribute(\"font-size\", \"11px\");\n          plTxt.textContent = pls.join(\" \");\n          svg.appendChild(plTxt);\n        }\n      }\n    }\n\n    \/* ==========================================================================\n       6. CLIENT-SIDE PDF EXPORT ENGINE\n       ========================================================================== *\/\n    function downloadKundliPDF() {\n      if (!STATE.chartData) {\n        showToast(\"Please generate your chart first.\");\n        return;\n      }\n\n      showToast(\"Generating high-resolution Vedic PDF Report...\");\n      \n      const element = document.getElementById('pdf-container');\n      const opt = {\n        margin:       [10, 10, 10, 10],\n        filename:     `Jyotish_Vedic_Kundli_${STATE.chartData.name.replace(\/\\s+\/g, '_')}.pdf`,\n        image:        { type: 'jpeg', quality: 0.98 },\n        html2canvas:  { scale: 2, useCORS: true, backgroundColor: '#070B19' },\n        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }\n      };\n\n      html2pdf().set(opt).from(element).save().then(() => {\n        showToast(\"Kundli PDF Downloaded!\");\n      }).catch(err => {\n        console.error(\"PDF generation error\", err);\n        showToast(\"PDF generation encountered an issue.\");\n      });\n    }\n\n    \/* ==========================================================================\n       7. UI INTERACTIVITY & ENCYCLOPEDIA RENDER\n       ========================================================================== *\/\n    function renderNavagrahas() {\n      const container = document.getElementById('grahas-container');\n      container.innerHTML = '';\n\n      GRAHA_INFO.forEach(g => {\n        const card = document.createElement('div');\n        card.className = \"glass-card glass-card-hover rounded-xl p-5 border border-gold-500\/20 transition duration-300\";\n        card.innerHTML = `\n          <div class=\"flex items-center justify-between mb-3\">\n            <div class=\"flex items-center gap-3\">\n              <span class=\"w-10 h-10 rounded-lg bg-gold-500\/10 border border-gold-500\/30 flex items-center justify-center text-gold-400\">\n                <i class=\"fa-solid ${g.icon}\"><\/i>\n              <\/span>\n              <div>\n                <h4 class=\"font-cinzel font-bold text-white text-base\">${g.id}<\/h4>\n                <span class=\"text-xs text-gold-400 font-semibold\">${g.sanskrit}<\/span>\n              <\/div>\n            <\/div>\n            <span class=\"text-[10px] uppercase font-mono px-2 py-0.5 rounded bg-cosmic-800 text-slate-300 border border-slate-700\">${g.element}<\/span>\n          <\/div>\n          <div class=\"space-y-1.5 text-xs text-slate-300 pt-2 border-t border-slate-800\/80\">\n            <div class=\"flex justify-between\">\n              <span class=\"text-slate-400\">Karmic Role:<\/span>\n              <span class=\"font-medium text-slate-200 text-right\">${g.role}<\/span>\n            <\/div>\n            <div class=\"flex justify-between\">\n              <span class=\"text-slate-400\">Ratna (Gemstone):<\/span>\n              <span class=\"font-medium text-gold-300\">${g.gem}<\/span>\n            <\/div>\n            <div class=\"flex justify-between\">\n              <span class=\"text-slate-400\">Presiding Deity:<\/span>\n              <span class=\"font-medium text-slate-200\">${g.deity}<\/span>\n            <\/div>\n          <\/div>\n        `;\n        container.appendChild(card);\n      });\n    }\n\n    function toggleFaq(button) {\n      const content = button.nextElementSibling;\n      const icon = button.querySelector('i');\n      const isHidden = content.classList.contains('hidden');\n\n      document.querySelectorAll('.faq-content').forEach(c => c.classList.add('hidden'));\n      document.querySelectorAll('#faq-section i.fa-chevron-down').forEach(ic => ic.style.transform = 'rotate(0deg)');\n\n      if (isHidden) {\n        content.classList.remove('hidden');\n        icon.style.transform = 'rotate(180deg)';\n      }\n    }\n\n    function showToast(message) {\n      const toast = document.getElementById('toast');\n      const msg = document.getElementById('toast-msg');\n      msg.textContent = message;\n      toast.classList.remove('translate-y-20', 'opacity-0');\n      toast.classList.add('translate-y-0', 'opacity-100');\n      setTimeout(() => {\n        toast.classList.add('translate-y-20', 'opacity-0');\n        toast.classList.remove('translate-y-0', 'opacity-100');\n      }, 3500);\n    }\n\n    window.onload = function () {\n      initMap();\n      renderNavagrahas();\n\n      const now = new Date();\n      document.getElementById('birth-date').value = now.toISOString().split('T')[0];\n      \n      let hrs = now.getHours();\n      const ampm = hrs >= 12 ? 'PM' : 'AM';\n      hrs = hrs % 12 || 12;\n      document.getElementById('birth-hour').value = hrs;\n      document.getElementById('birth-min').value = String(now.getMinutes()).padStart(2, '0');\n      document.getElementById('birth-ampm').value = ampm;\n\n      generateKundli();\n    };\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Jyotishya | Vedic Astrology &amp; Planetary Chart Generator JYOTISHYA The Sacred Light of Vedic Astrology Kundli Generator About Jyotish The 9 Grahas FAQs Calculate Chart Sidereal Zodiac &amp; Ancient Vedic Ephemeris Discover Your Cosmic Blueprint with Precision Worldwide Jyotish Harness true sidereal planetary longitudes and traditional Vedic mathematics. Pinpoint your birth coordinates anywhere on Earth [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1035","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1035"}],"version-history":[{"count":4,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1035\/revisions"}],"predecessor-version":[{"id":1040,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1035\/revisions\/1040"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}