:root {
  --sky-ink: #f2eee4;
  --sky-muted: #a9b8bc;
  --sky-line: rgba(211, 226, 220, .18);
  --sky-accent: #e7a36c;
  --sky-bg: #07151d;
  --sky-panel: rgba(10, 31, 38, .86);
}

.my-sky-page { background: #f7f6f2; color: var(--sky-ink); }
.my-sky-main { max-width: var(--page-max, 1200px); margin-inline: auto; padding: 0; }
.my-sky-shell { min-height: 0; padding: clamp(1.2rem, 3vw, 3rem) clamp(1rem, 4vw, 4.5rem) .75rem; background: radial-gradient(circle at 50% 42%, #17343b 0, #0a2028 34%, #07151d 72%); }
.my-sky-heading, .my-sky-controls { max-width: 72rem; margin-inline: auto; }
.my-sky-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.my-sky-kicker { margin: 0; color: var(--sky-accent); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.my-sky-heading h1 { margin: 0; border: 1px solid rgba(231, 163, 108, .38); border-radius: 999px; background: rgba(23, 52, 59, .62); color: var(--sky-ink); padding: .35rem .75rem; font-family: Georgia, serif; font-size: clamp(.85rem, 1.5vw, 1.05rem); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.my-sky-heading__context { display: flex; align-items: center; gap: .7rem; }
.my-sky-current-meaning-hint { max-width: 72rem; margin: .55rem auto .35rem; padding-inline: 1rem; color: var(--sky-muted); font-size: .78rem; line-height: 1.35; text-align: center; }
.my-sky-drishti { max-width: 72rem; margin: 1rem auto 0; border-top: 1px solid rgba(190, 177, 255, .2); padding-top: .75rem; }
.my-sky-drishti h2 { margin: 0; color: #d9c8ff; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.my-sky-drishti__rail { display: flex; gap: .35rem; overflow-x: auto; padding: .2rem .1rem .35rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.my-sky-drishti__rail::-webkit-scrollbar { display: none; }
.my-sky-drishti__item { display: grid; flex: 0 0 3.45rem; min-height: 3.65rem; place-items: center; gap: .12rem; border: 1px solid rgba(190, 177, 255, .25); border-radius: .4rem; background: rgba(190, 177, 255, .035); color: #c9bcdf; padding: .2rem; cursor: pointer; font: inherit; font-size: .62rem; line-height: 1.1; }
.my-sky-drishti__item img { width: 1.8rem; height: 1.8rem; object-fit: contain; opacity: .92; filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 4px rgba(190, 177, 255, .24)); }
.my-sky-drishti__item:hover, .my-sky-drishti__item:focus-visible, .my-sky-drishti__item.is-selected { border-color: #e0d0ff; color: #f2eee4; outline: none; }
.my-sky-drishti__item:hover, .my-sky-drishti__item:focus-visible { background: rgba(190, 177, 255, .08); }
.my-sky-drishti__item.is-selected { border-width: 2px; background: rgba(190, 177, 255, .13); box-shadow: 0 0 0 .16rem rgba(190, 177, 255, .18), 0 0 1rem rgba(190, 177, 255, .24); }
.my-sky-drishti__item.is-selected img { opacity: 1; }
.my-sky-drishti__summary { margin-top: .55rem; border-top: 1px solid rgba(190, 177, 255, .16); padding-top: .55rem; color: var(--sky-ink); font-size: .72rem; }
.my-sky-drishti__summary-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.my-sky-drishti__summary h3, .my-sky-drishti__summary p { margin: 0; }
.my-sky-drishti__summary h3 { color: #f0e8ff; font-size: .76rem; font-weight: 600; text-shadow: 0 0 8px rgba(190, 177, 255, .18); }
.my-sky-drishti__positions { margin-top: .2rem !important; color: var(--sky-muted); }
.my-sky-drishti__positions, .my-sky-drishti__targets { font-size: .7rem; line-height: 1.35; }
.my-sky-drishti__targets { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem; margin-top: .25rem; color: var(--sky-muted); }
.my-sky-drishti__targets-label { flex: 0 0 auto; }
.my-sky-drishti__target { display: inline-flex; align-items: center; gap: .12rem; white-space: nowrap; }
.my-sky-drishti__clear { display: inline-grid; flex: 0 0 2rem; width: 2rem; height: 2rem; min-height: 2rem; place-items: center; border: 1px solid rgba(224, 208, 255, .38); border-radius: 50%; background: rgba(190, 177, 255, .045); color: #ded2f2; padding: 0; cursor: pointer; font: inherit; font-size: 1.05rem; line-height: 1; }
.my-sky-drishti__clear:hover, .my-sky-drishti__clear:focus-visible { border-color: #e0d0ff; background: rgba(190, 177, 255, .14); color: #f2eee4; outline: 2px solid #cdb9ef; outline-offset: 2px; }
.my-sky-mode { display: flex; gap: .4rem; margin: 0; border: 0; background: transparent; padding: 0; color: var(--sky-muted); }
.my-sky-mode legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.my-sky-mode label { display: inline-flex; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgba(190, 177, 255, .3); border-radius: .55rem; background: rgba(7, 21, 29, .72); padding: .35rem .7rem; color: var(--sky-muted); font-size: .72rem; font-weight: 500; line-height: 1.15; text-align: center; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; }
.my-sky-mode input { position: absolute; opacity: 0; }
.my-sky-mode label:hover { border-color: rgba(190, 177, 255, .58); background: rgba(20, 39, 48, .9); color: var(--sky-ink); }
.my-sky-mode label:has(input:checked) { border-color: rgba(231, 163, 108, .95); background: rgba(231, 163, 108, .24); color: var(--sky-ink); font-weight: 600; box-shadow: 0 0 0 1px rgba(231, 163, 108, .18), inset 0 0 .7rem rgba(231, 163, 108, .08); }
.my-sky-mode label:has(input:focus-visible) { outline: 2px solid var(--sky-accent); outline-offset: 2px; }
.sky-stage { max-width: 76rem; margin: 1rem auto 0; }
.sky-field { position: relative; width: min(100%, 76rem); height: min(74vh, 52rem); min-height: 28rem; overflow: hidden; border: 1px solid rgba(214, 233, 225, .14); background: linear-gradient(145deg, rgba(15, 45, 52, .75), rgba(4, 17, 24, .82)); box-shadow: inset 0 0 8rem rgba(123, 178, 164, .08); }
.sky-rays, .sky-drishti-rays, .sky-rasi-layer, .sky-graha-layer, .sky-natal-graha-layer, .sky-label-layer, .sky-lagna, .sky-lagna-label, .sky-ambient { position: absolute; inset: 0; }
.sky-ambient { z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 24% 35%, rgba(80, 142, 168, .08), transparent 42%), radial-gradient(ellipse at 76% 64%, rgba(111, 79, 145, .06), transparent 38%); animation: sky-ambient-drift 60s ease-in-out infinite alternate; }
.sky-ambient::before, .sky-ambient::after { position: absolute; inset: -8%; content: ""; pointer-events: none; }
.sky-ambient::before { background: radial-gradient(circle at 18% 22%, rgba(226, 239, 232, .22) 0 1px, transparent 1.5px), radial-gradient(circle at 71% 18%, rgba(226, 239, 232, .16) 0 1px, transparent 1.5px), radial-gradient(circle at 43% 78%, rgba(226, 239, 232, .14) 0 1px, transparent 1.5px), radial-gradient(circle at 87% 72%, rgba(226, 239, 232, .18) 0 1px, transparent 1.5px); background-size: 29% 37%, 41% 53%, 47% 61%, 67% 43%; opacity: .42; animation: sky-star-drift 82s ease-in-out infinite alternate; }
.sky-ambient::after { background: radial-gradient(ellipse at 55% 45%, rgba(48, 106, 131, .09), transparent 44%); transform: scale(1.04); animation: sky-haze-drift 72s ease-in-out infinite alternate-reverse; }
.sky-sparkle { position: absolute; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; transform: translate3d(0, 0, 0) scale(.9); }
.sky-sparkle--warm { left: 15%; top: 27%; background: rgba(255, 231, 176, .8); box-shadow: 0 0 5px rgba(255, 220, 148, .28); animation: sky-sparkle-warm 7s ease-in-out -2s infinite; }
.sky-sparkle--cool { left: 82%; top: 23%; background: rgba(185, 220, 236, .72); box-shadow: 0 0 5px rgba(142, 199, 224, .24); animation: sky-sparkle-cool 9s ease-in-out -5s infinite; }
.sky-sparkle--violet { left: 27%; top: 74%; background: rgba(211, 199, 238, .7); box-shadow: 0 0 5px rgba(184, 161, 225, .22); animation: sky-sparkle-violet 11s ease-in-out -7s infinite; }
.sky-sparkle--neutral { left: 74%; top: 78%; background: rgba(231, 235, 224, .68); box-shadow: 0 0 5px rgba(225, 231, 220, .2); animation: sky-sparkle-neutral 13s ease-in-out -10s infinite; }
.sky-rays { z-index: 1; }
.sky-drishti-rays { z-index: 2; pointer-events: none; }
.sky-graha-layer { z-index: 3; }
.sky-natal-graha-layer { z-index: 3; }
.sky-ray, .sky-lagna { position: absolute; left: 50%; top: 50%; width: 1px; height: 100%; transform-origin: 0 0; background: var(--sky-line); }
.sky-drishti-ray { --drishti-ray-color: #c4b0ed; position: absolute; width: 1.5px; transform-origin: 0 0; background: repeating-linear-gradient(to bottom, var(--drishti-ray-color) 0, var(--drishti-ray-color) 7px, transparent 7px, transparent 13px); box-shadow: 0 0 6px var(--drishti-ray-color); animation: sky-drishti-flow 2.1s linear infinite; }
.sky-drishti-ray::after { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid var(--drishti-ray-color); content: ""; filter: drop-shadow(0 0 2px var(--drishti-ray-color)); transform: translateX(-50%); }
.sky-drishti-ray--sun { --drishti-ray-color: #F2AD5B; }
.sky-drishti-ray--moon { --drishti-ray-color: #D7E5FF; }
.sky-drishti-ray--mars { --drishti-ray-color: #E47770; }
.sky-drishti-ray--mercury { --drishti-ray-color: #77CFA2; }
.sky-drishti-ray--jupiter { --drishti-ray-color: #E6C45E; }
.sky-drishti-ray--venus { --drishti-ray-color: #DFA4CE; }
.sky-drishti-ray--saturn { --drishti-ray-color: #929FE4; }
.sky-lagna { z-index: 2; width: 2px; background: var(--sky-accent); box-shadow: 0 0 7px rgba(231, 163, 108, .72), 0 0 17px rgba(184, 57, 48, .28), 0 0 28px rgba(184, 57, 48, .14); }
.sky-lagna-label { z-index: 5; inset: auto; transform: translate(-50%, -50%); color: var(--sky-accent); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sky-marker, .sky-graha { position: absolute; transform: translate(-50%, -50%); }
.sky-marker { width: clamp(2.5rem, 6vw, 4rem); height: clamp(2.5rem, 6vw, 4rem); object-fit: contain; opacity: .85; }
.sky-graha { display: block; width: clamp(3.4rem, 8vw, 6rem); pointer-events: none; }
.sky-graha.sky-graha--drishti-source { pointer-events: auto; cursor: pointer; }
.sky-graha img { width: 100%; height: auto; object-fit: contain; }
.sky-graha-artwork { transform-origin: center; animation: sky-graha-breathe 14s ease-in-out infinite; }
.sky-graha--natal .sky-graha-artwork { animation: none; opacity: .62; filter: grayscale(.15) sepia(.2) hue-rotate(205deg) saturate(2.2) drop-shadow(0 0 4px rgba(171, 135, 226, .45)); }
.sky-graha--natal .sky-graha-artwork::after { content: ""; }
.sky-graha--drishti-selected .sky-graha-artwork { opacity: 1; filter: grayscale(.05) sepia(.12) hue-rotate(205deg) saturate(2.4) drop-shadow(0 0 5px rgba(215, 190, 255, .9)) drop-shadow(0 0 13px rgba(190, 177, 255, .56)); }
.sky-graha--drishti-receiver .sky-graha-artwork { filter: grayscale(.1) sepia(.16) hue-rotate(205deg) saturate(2.1) drop-shadow(0 0 6px rgba(223, 204, 255, .52)); }
.sky-graha--overlap .sky-graha-artwork { transform: translate3d(-3px, 2px, 0); }
.sky-graha-artwork--moon { animation-duration: 12s; animation-delay: -1s; }
.sky-graha-artwork--mercury { animation-duration: 10s; animation-delay: -2.25s; }
.sky-graha-artwork--venus { animation-duration: 12s; animation-delay: -4.5s; }
.sky-graha-artwork--sun { animation-duration: 14s; animation-delay: -6s; }
.sky-graha-artwork--mars { animation-duration: 15s; animation-delay: -7.5s; }
.sky-graha-artwork--jupiter { animation-duration: 16s; animation-delay: -9s; }
.sky-graha-artwork--saturn { animation-duration: 16s; animation-delay: -10.5s; }
.sky-graha-artwork--rahu { animation-duration: 13s; animation-delay: -5.75s; }
.sky-graha-artwork--ketu { animation-duration: 13.5s; animation-delay: -8.25s; }
@keyframes sky-ambient-drift { from { transform: translate3d(-.35%, -.2%, 0) scale(1); } to { transform: translate3d(.35%, .2%, 0) scale(1.025); } }
@keyframes sky-star-drift { from { transform: translate3d(-.25%, .15%, 0); opacity: .34; } to { transform: translate3d(.25%, -.15%, 0); opacity: .48; } }
@keyframes sky-haze-drift { from { transform: translate3d(-.4%, .25%, 0) scale(1.04); } to { transform: translate3d(.4%, -.25%, 0) scale(1.08); } }
@keyframes sky-graha-breathe { 0%, 100% { transform: translate3d(-1.5px, .5px, 0) scale(.99); } 50% { transform: translate3d(1.5px, -.5px, 0) scale(1.01); } }
@keyframes sky-drishti-flow { from { background-position: 0 0; } to { background-position: 0 13px; } }
@keyframes sky-sparkle-warm { 0%, 100% { opacity: .18; transform: translate3d(-1px, .5px, 0) scale(.85); } 62% { opacity: .55; transform: translate3d(1px, -.5px, 0) scale(1.1); } 78% { opacity: .25; } }
@keyframes sky-sparkle-cool { 0%, 100% { opacity: .18; transform: translate3d(1px, 0, 0) scale(.88); } 64% { opacity: .5; transform: translate3d(-1px, 1px, 0) scale(1.08); } 80% { opacity: .24; } }
@keyframes sky-sparkle-violet { 0%, 100% { opacity: .16; transform: translate3d(0, -1px, 0) scale(.86); } 60% { opacity: .48; transform: translate3d(1px, 1px, 0) scale(1.08); } 76% { opacity: .23; } }
@keyframes sky-sparkle-neutral { 0%, 100% { opacity: .17; transform: translate3d(-1px, 0, 0) scale(.87); } 66% { opacity: .46; transform: translate3d(1px, -1px, 0) scale(1.06); } 82% { opacity: .22; } }
.sky-label-layer { z-index: 4; pointer-events: none; }
.sky-graha-label { position: absolute; max-width: 8rem; color: var(--sky-ink); font-size: .78rem; font-weight: 500; line-height: 1.2; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); white-space: nowrap; }
.sky-graha-label--natal { color: #cdb9ef; }
.sky-observer { --observer-mark-size: 2.75rem; position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; transform: translate(-50%, -50%); color: var(--sky-ink); }
.sky-observer-mark { position: absolute; left: 0; top: 0; width: var(--observer-mark-size); height: var(--observer-mark-size); border: 1px solid rgba(231, 163, 108, .85); border-radius: 50%; background: radial-gradient(circle, rgba(231, 163, 108, .3), transparent 68%); transform: translate(-50%, -50%); }
.sky-observer-label { position: absolute; left: 0; top: calc(var(--observer-mark-size) / 2 + .35rem); transform: translateX(-50%); color: var(--sky-accent); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sky-state { position: absolute; inset: auto 1rem 1rem; color: var(--sky-muted); text-align: center; }
.sky-birth-lagna-ray { position: absolute; inset: 0; pointer-events: none; color: #d9c8ff; }
.sky-birth-lagna-ray-line { position: absolute; left: 50%; top: 50%; z-index: 2; width: 1px; transform-origin: 0 0; background: #c8a9ff; box-shadow: 0 0 6px rgba(200, 169, 255, .68), 0 0 16px rgba(184, 161, 225, .24); }
.sky-birth-lagna-ray-label { position: absolute; z-index: 5; transform: translate(-50%, -50%); color: #d9c8ff; font-size: .68rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.sky-birth-lagna { position: absolute; z-index: 5; transform: translate(-50%, -50%); color: #d9c8ff; text-align: center; }
.sky-birth-lagna--together { opacity: .8; }
.sky-birth-lagna-marker { display: block; width: 1.35rem; height: 1.35rem; margin: auto; border: 2px solid #d9c8ff; border-radius: 50%; background: rgba(171, 135, 226, .25); box-shadow: 0 0 8px rgba(184, 161, 225, .6); }
.sky-birth-lagna-label { display: block; margin-top: .25rem; font-size: .7rem; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.sky-layer-legend { display: flex; justify-content: center; gap: .8rem; margin-top: .45rem; color: var(--sky-muted); font-size: .62rem; }
.sky-layer-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.sky-layer-marker { display: inline-block; width: .48rem; height: .48rem; border-radius: 50%; background: var(--sky-accent); }
.sky-layer-marker--natal { background: transparent; border: 1px solid #cdb9ef; }
.my-sky-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem 0; }
.my-sky-personal-time { max-width: 72rem; margin: 1.25rem auto 0; border-top: 1px solid rgba(190, 177, 255, .24); padding: 1.25rem 0 2rem; }
.my-sky-personal-time > h2 { margin: 0 0 1rem; color: #d9c8ff; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.my-sky-personal-time__unavailable { margin: 0; color: var(--sky-muted); font-size: .9rem; }
.my-sky-period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.my-sky-period { border: 1px solid rgba(190, 177, 255, .24); background: rgba(12, 27, 38, .62); padding: 1rem; }
.my-sky-period--dasha { border-color: rgba(190, 177, 255, .42); }
.my-sky-period__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.my-sky-period__graha { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.my-sky-period h3 { margin: 0; color: var(--sky-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.my-sky-period__head strong { color: var(--sky-ink); font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.my-sky-period__timeline { position: relative; min-height: 2.25rem; margin: .8rem 0 .35rem; padding-top: .9rem; }
.my-sky-period__track { position: relative; display: block; height: .35rem; border-radius: 999px; background: linear-gradient(to right, #8d78cf var(--personal-time-progress), rgba(141, 120, 207, .22) var(--personal-time-progress)); }
.my-sky-period__track::before, .my-sky-period__track::after { position: absolute; top: 50%; width: .7rem; height: .7rem; border: 2px solid #b9a9ed; border-radius: 50%; background: var(--sky-bg); content: ""; transform: translateY(-50%); }
.my-sky-period__track::before { left: 0; } .my-sky-period__track::after { right: 0; }
.my-sky-period__today-marker { position: absolute; left: var(--personal-time-progress); top: calc(.9rem + .175rem); width: .75rem; height: .75rem; border: 2px solid #f7d98b; border-radius: 50%; background: #e7b95e; box-shadow: 0 0 0 .2rem rgba(231, 185, 94, .14), 0 0 .7rem rgba(231, 185, 94, .5); transform: translate(-50%, -50%); }
.my-sky-period__today { position: absolute; left: clamp(1.35rem, var(--personal-time-progress), calc(100% - 1.35rem)); top: 0; color: #e7c477; font-size: .62rem; transform: translateX(-50%); white-space: nowrap; }
.my-sky-period__dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; color: var(--sky-muted); font-size: .76rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.my-sky-period__dates time { min-width: 0; color: var(--sky-ink); }
.my-sky-period__dates time:last-child { text-align: right; }
.my-sky-period__facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--sky-muted); font-size: .76rem; line-height: 1.4; }
.my-sky-period__facts b { color: var(--sky-ink); font-weight: 500; }
.my-sky-period__facts { margin: .45rem 0 0; }
.my-sky-next-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.my-sky-next-period { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .6rem; border-bottom: 1px solid rgba(211, 226, 220, .14); padding: .55rem 0; color: var(--sky-muted); font-size: .78rem; }
.my-sky-next-period span { flex-basis: 100%; color: #c9c1ec; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.my-sky-next-period strong { color: var(--sky-ink); font-weight: 500; }
.my-sky-next-period time { color: var(--sky-muted); }
.my-sky-personal-entry { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: .8rem auto 0; border: 1px solid rgba(231, 163, 108, .26); background: rgba(10, 31, 38, .58); padding: .8rem 1rem; animation: my-sky-entry-breathe 8s ease-in-out infinite; }
.my-sky-personal-entry h2 { margin: 0; color: var(--sky-ink); font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.my-sky-personal-entry p { margin: .2rem 0 0; color: var(--sky-muted); font-size: .82rem; line-height: 1.35; }
.my-sky-personal-entry__link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 3rem; border-color: rgba(231, 163, 108, .88); background: rgba(231, 163, 108, .14); color: var(--sky-ink); font-weight: 600; text-align: center; line-height: 1.25; text-decoration: none; }
.my-sky-personal-entry__link:hover, .my-sky-personal-entry__link:focus-visible { background: rgba(231, 163, 108, .24); }
@keyframes my-sky-entry-breathe { 0%, 100% { border-color: rgba(231, 163, 108, .26); box-shadow: 0 0 0 rgba(184, 161, 225, 0); } 50% { border-color: rgba(231, 163, 108, .44); box-shadow: 0 0 14px rgba(184, 161, 225, .12); } }
.sky-button, .sky-icon-button { min-height: 2.75rem; border: 1px solid rgba(231, 163, 108, .72); border-radius: .45rem; background: rgba(4, 17, 24, .68); color: var(--sky-ink); padding: .65rem .9rem; cursor: pointer; }
.sky-button:hover, .sky-button:focus-visible, .sky-icon-button:focus-visible { background: rgba(231, 163, 108, .12); outline: 2px solid var(--sky-accent); outline-offset: 2px; }
.sky-button:disabled { cursor: not-allowed; opacity: .45; }
.graha-sheet { width: min(48rem, calc(100% - 2rem)); border: 1px solid var(--sky-line); border-radius: 0; background: #0a2028; color: var(--sky-ink); }
.meaning-sheet { width: min(42rem, calc(100% - 2rem)); max-height: min(82vh, 48rem); overflow: hidden; border: 1px solid rgba(231, 163, 108, .55); border-radius: .8rem; background: #0a2028; color: var(--sky-ink); box-shadow: 0 1rem 3rem rgba(0, 8, 12, .45), 0 0 0 1px rgba(231, 163, 108, .04); }
.meaning-sheet[open] { display: flex; flex-direction: column; }
.graha-sheet::backdrop { background: rgba(0, 8, 12, .72); }
.meaning-sheet::backdrop { background: rgba(0, 8, 12, .72); }
.graha-sheet__head { position: relative; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--sky-line); }
.graha-sheet__head form { position: absolute; right: 0; margin: 0; }
.graha-sheet__head h2 { margin: .75rem auto; font-family: Georgia, serif; font-weight: 400; text-align: center; }
.meaning-sheet__head { padding-inline: .75rem; }
.meaning-sheet__head form { right: .75rem; }
.meaning-sheet__head h2 { max-width: calc(100% - 4rem); color: var(--sky-ink); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.meaning-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .35rem 1.25rem 1rem; }
.meaning-sheet__footer { flex: 0 0 auto; border-top: 1px solid var(--sky-line); background: #0a2028; padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom)); }
.meaning-sheet__actions { display: grid; gap: .55rem; }
.meaning-sheet__ai-cta { display: block; width: 100%; min-height: 2.875rem; border: 1px solid rgba(231, 163, 108, .82); border-radius: .55rem; background: rgba(231, 163, 108, .16); color: #ffe3b8; padding: .65rem 1rem; cursor: pointer; font: inherit; font-weight: 600; }
.meaning-sheet__ai-cta:hover, .meaning-sheet__ai-cta:focus-visible { background: rgba(231, 163, 108, .28); outline: 2px solid var(--sky-accent); outline-offset: 2px; }
.meaning-sheet__report-cta { display: block; width: 100%; min-height: 2.875rem; border: 1px solid rgba(231, 163, 108, .82); border-radius: .55rem; background: rgba(231, 163, 108, .16); color: #ffe3b8; padding: .65rem 1rem; text-align: center; text-decoration: none; font: inherit; font-weight: 600; box-sizing: border-box; }
.meaning-sheet__report-cta:hover, .meaning-sheet__report-cta:focus-visible { background: rgba(231, 163, 108, .28); outline: 2px solid var(--sky-accent); outline-offset: 2px; }
.meaning-sheet__section { border-bottom: 1px solid var(--sky-line); padding: .85rem 0; }
.meaning-sheet__section h3 { margin: 0 0 .3rem; color: var(--sky-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.meaning-sheet__section p { margin: 0; color: var(--sky-ink); line-height: 1.55; white-space: pre-wrap; }
.meaning-sheet__section--core { padding-top: .8rem; padding-bottom: 1rem; }
.meaning-sheet__section--core p { color: #ffe3b8; font-size: 1rem; line-height: 1.55; }
.meaning-sheet__section--note p { color: var(--sky-muted); font-size: .84rem; line-height: 1.55; }
.meaning-sheet__close { display: inline-grid; flex: 0 0 2rem; width: 2rem; height: 2rem; min-height: 2rem; place-items: center; border: 1px solid rgba(231, 163, 108, .55); border-radius: 50%; background: rgba(10, 31, 38, .72); padding: 0; cursor: pointer; }
.meaning-sheet__close-icon { position: relative; display: block; width: 12px; height: 12px; }
.meaning-sheet__close-icon::before, .meaning-sheet__close-icon::after { position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: #f1dfbf; content: ""; transform-origin: center; }
.meaning-sheet__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.meaning-sheet__close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.meaning-sheet__close:hover, .meaning-sheet__close:focus-visible { border-color: #f0b982; background: rgba(231, 163, 108, .16); outline: 2px solid var(--sky-accent); outline-offset: 2px; }
.sky-meaning-trigger { display: inline-grid; width: 1.45rem; height: 1.45rem; min-height: 1.45rem; margin-left: .25rem; place-items: center; border: 1px solid rgba(231, 163, 108, .62); border-radius: 50%; background: rgba(231, 163, 108, .08); color: var(--sky-accent); padding: 0; cursor: pointer; font: inherit; font-size: .85rem; line-height: 1; pointer-events: auto; vertical-align: middle; }
.sky-meaning-trigger:hover, .sky-meaning-trigger:focus-visible { background: rgba(231, 163, 108, .2); outline: 2px solid var(--sky-accent); outline-offset: 2px; }
.graha-list { display: grid; gap: .5rem; padding-top: 1rem; }
.lagna-summary, .lagna-comparison, .graha-details { display: grid; gap: .35rem; border-bottom: 1px solid var(--sky-line); padding: .75rem 0; }
.lagna-summary h3, .lagna-comparison h3, .graha-details h3 { margin: 0; color: var(--sky-muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lagna-summary p { margin: 0; color: var(--sky-ink); }
.lagna-summary__unavailable { color: var(--sky-muted); }
.lagna-comparison__head, .lagna-comparison__row { display: grid; grid-template-columns: minmax(6rem, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.lagna-comparison__head { color: var(--sky-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.lagna-comparison__row { align-items: start; color: var(--sky-ink); }
.lagna-comparison__side-label { display: none; color: var(--sky-muted); font-size: .7rem; text-transform: uppercase; }
.graha-row { display: grid; gap: .25rem; border-bottom: 1px solid var(--sky-line); padding: .5rem 0; }
.graha-row__primary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.graha-row__rasi { color: var(--sky-ink); text-align: right; }
.graha-retrograde { color: #ef7068; font-weight: 700; }
.graha-row small { color: var(--sky-muted); }
.graha-comparison { display: grid; gap: .5rem; padding-top: 1rem; }
.graha-comparison__head, .graha-comparison__row { display: grid; grid-template-columns: minmax(6rem, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.graha-comparison__head { color: var(--sky-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.graha-comparison__row { border-bottom: 1px solid var(--sky-line); padding: .55rem 0; }
.graha-comparison__name { color: var(--sky-ink); font-weight: 600; }
.graha-comparison__side { display: grid; gap: .15rem; }
.graha-comparison__side-label { display: none; color: var(--sky-muted); font-size: .7rem; text-transform: uppercase; }
.graha-comparison__facts { color: var(--sky-ink); line-height: 1.35; }
@media (max-width: 49.99rem) {
  body.my-sky-page > footer { display: none; }
  .my-sky-shell { min-height: 100vh; padding-inline: 0; padding-bottom: 0; }
  .my-sky-heading, .my-sky-controls { padding-inline: 1rem; }
  .my-sky-drishti { margin-inline: 1rem; }
  .my-sky-personal-entry { align-items: flex-start; margin-inline: 1rem; flex-direction: column; }
  .my-sky-personal-entry__link { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
  .my-sky-personal-time { margin-inline: 1rem; }
  .my-sky-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .65rem; row-gap: .45rem; align-items: start; }
  .my-sky-kicker { grid-column: 1; grid-row: 1; min-width: 0; }
  .my-sky-heading__context { display: contents; }
  .my-sky-heading h1 { grid-column: 2; grid-row: 1; justify-self: end; width: fit-content; max-width: 100%; padding: .3rem .55rem; font-size: .8rem; white-space: nowrap; text-align: right; }
  .my-sky-mode { display: grid; grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 100%; min-width: 0; min-inline-size: 0; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .my-sky-mode label { width: 100%; min-width: 0; min-height: 3rem; box-sizing: border-box; padding: .35rem .28rem; color: var(--sky-muted); font-size: clamp(.78rem, 3.4vw, .88rem); font-weight: 600; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .my-sky-mode label:has(input:checked) { border-color: rgba(231, 163, 108, .72); background: rgba(231, 163, 108, .28); color: var(--sky-ink); font-weight: 600; }
  .sky-stage { width: 100%; margin-inline: 0; }
  .sky-field { width: 100vw; min-height: 24rem; border: 0; }
  .sky-observer { --observer-mark-size: 2.5rem; }
  .sky-graha { width: 44px; }
  .sky-graha-artwork { animation-name: sky-graha-breathe-mobile; }
  .sky-graha-label { max-width: 6.5rem; font-size: .7rem; }
  .sky-graha--overlap .sky-graha-artwork { transform: translate3d(-1.5px, 1px, 0); }
  .sky-button--location, .sky-button--details { min-height: 2.5rem; font-size: .82rem; padding: .5rem .72rem; }
  .graha-sheet { width: calc(100% - 2rem); }
  .meaning-sheet { width: min(calc(100% - 1rem), 42rem); max-height: calc(100dvh - 1rem); margin: auto; box-sizing: border-box; }
  .my-sky-drishti__summary { font-size: .68rem; }
  .my-sky-drishti__summary h3 { font-size: .72rem; }
  .meaning-sheet__ai-cta,
  .meaning-sheet__report-cta { min-height: 2.75rem; padding: .5rem .8rem; font-size: .9rem; line-height: 1.25; }
  .meaning-sheet__body { padding-inline: 1rem; }
  .meaning-sheet__footer { padding-inline: 1rem; }
  .meaning-sheet__section--core p { font-size: .96rem; }
  .lagna-comparison__head { display: none; }
  .lagna-comparison__row { grid-template-columns: 1fr; gap: .6rem; }
  .lagna-comparison__side-label { display: block; }
  .graha-comparison__head { display: none; }
  .graha-comparison__row { display: grid; grid-template-columns: 1fr; gap: .6rem; padding: .7rem 0; }
  .graha-comparison__side-label { display: block; }
  .my-sky-period-grid, .my-sky-next-periods { grid-template-columns: 1fr; }
  .my-sky-period { border-color: rgba(211, 226, 220, .42); background: rgba(8, 25, 34, .82); padding: .9rem; }
  .my-sky-period--dasha { border-color: rgba(231, 163, 108, .56); }
  .my-sky-period__head { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .my-sky-period__graha { align-self: flex-start; }
  .my-sky-period__head strong { font-size: 1.2rem; }
  .my-sky-period__dates { gap: .3rem; }
  .my-sky-period__timeline { margin-top: 1rem; }
  .my-sky-period__facts { margin-top: .65rem; }
  .my-sky-next-period { margin-top: .75rem; border-top: 1px solid rgba(211, 226, 220, .24); border-bottom: 0; padding-top: .75rem; line-height: 1.45; }
  .my-sky-next-period span { color: #e7c477; }
}
@keyframes sky-graha-breathe-mobile { 0%, 100% { transform: translate3d(-1px, .35px, 0) scale(.995); } 50% { transform: translate3d(1px, -.35px, 0) scale(1.005); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .my-sky-personal-entry, .sky-ambient, .sky-ambient::before, .sky-ambient::after, .sky-graha-artwork, .sky-sparkle { animation: none !important; transform: none !important; } .sky-drishti-ray { animation: none !important; } .sky-sparkle { opacity: .2 !important; } }

.sky-rasi-layer { z-index: 1; pointer-events: none; }
.sky-rasi-marker { --rasi-shift-x: 0px; --rasi-shift-y: 0px; --rasi-marker-size: clamp(2.5rem, 6vw, 4rem); position: absolute; width: 0; height: 0; transform: translate(calc(-50% + var(--rasi-shift-x)), calc(-50% + var(--rasi-shift-y))); }
.sky-marker { display: block; width: var(--rasi-marker-size); height: var(--rasi-marker-size); transform: translate(-50%, -50%); object-fit: contain; opacity: .98; filter: brightness(1.2) contrast(1.1) saturate(1.15) drop-shadow(0 0 6px rgba(190, 177, 255, .32)); }
.sky-rasi-name { position: absolute; top: calc(var(--rasi-marker-size) / 2 + .35rem); left: 0; max-width: 7rem; color: #c9c1ec; font-size: .58rem; line-height: 1.1; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); white-space: normal; transform: translateX(-50%); }
.sky-rasi-marker.is-drishti-target .sky-marker { filter: brightness(1.35) contrast(1.1) saturate(1.2) drop-shadow(0 0 8px rgba(218, 198, 255, .68)); }
.sky-rasi-marker.is-drishti-target .sky-rasi-name { color: #e2d6ff; text-shadow: 0 0 7px rgba(203, 181, 255, .62), 0 1px 3px rgba(0, 0, 0, .85); }
.sky-rasi-marker--6 .sky-rasi-name, .sky-rasi-marker--7 .sky-rasi-name, .sky-rasi-marker--8 .sky-rasi-name, .sky-rasi-marker--9 .sky-rasi-name { top: auto; bottom: calc(var(--rasi-marker-size) / 2 + .15rem); }
.sky-lagna-education { margin: .6rem 1rem .1rem; color: var(--sky-muted); font-size: .62rem; line-height: 1.25; text-align: center; }
@media (max-width: 49.99rem) { .sky-rasi-marker { --rasi-marker-size: 2.5rem; --rasi-shift-x: 0px; --rasi-shift-y: 0px; } .sky-rasi-name { max-width: 5.5rem; font-size: clamp(.48rem, 1.8vw, .58rem); } .sky-lagna-education { margin: .5rem .5rem .1rem; font-size: .55rem; } }