/* Brahma Muhurta: the edge of the earth before dawn. Shiva and the lamp stand on the horizon; everything you need sits in the dark below it. */
:root{--bg:#030305;--ink:#f6f4ef;--soft:#a8b2c4;--acc:#ff9a4d;--line:rgba(255,255,255,.1);--h:clamp(290px,47svh,540px);--glow:rgba(255,160,80,.34)}
.stage{background:var(--bg)}
.sky{position:absolute;inset:0 0 auto;height:var(--h);z-index:-3;background:url(sky.webp) center/100% 100% no-repeat}
.stars{position:absolute;inset:0 0 auto;height:calc(var(--h)*.55);z-index:-3;background-image:radial-gradient(1.2px 1.2px at 12% 30%,#fff,transparent),radial-gradient(1px 1px at 22% 62%,#dfe9ff,transparent),radial-gradient(1px 1px at 8% 78%,#fff,transparent),radial-gradient(1.4px 1.4px at 84% 24%,#fff,transparent),radial-gradient(1px 1px at 92% 58%,#dfe9ff,transparent),radial-gradient(1px 1px at 76% 12%,#fff,transparent),radial-gradient(1px 1px at 34% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 66% 40%,#fff,transparent);animation:twinkle 7s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.45}}
.line{position:absolute;left:0;right:0;top:calc(var(--h)*.905);height:calc(var(--h)*.04);z-index:-2;background:linear-gradient(180deg,rgba(255,190,120,.55),rgba(255,110,40,.75) 45%,rgba(226,40,20,.75) 80%,transparent);filter:blur(1.5px);box-shadow:0 -14px 60px rgba(255,130,60,.42);animation:dawn 9s ease-in-out infinite}
@keyframes dawn{50%{opacity:.72;box-shadow:0 -18px 90px rgba(255,130,60,.6)}}
.shiva{position:absolute;top:0;left:50%;height:var(--h);aspect-ratio:1400/1211;transform:translateX(-50.4%);z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.shiva img{width:100%;height:100%;object-fit:cover}
.lamp{--fx:50.5%;--fy:72%;position:absolute;inset:0;pointer-events:none}
.lamp i{position:absolute;left:var(--fx);top:var(--fy);border-radius:50%;transform:translate(-50%,-50%)}
.lamp .halo{width:64%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,176,86,.5),rgba(255,120,40,.17) 38%,transparent 68%);mix-blend-mode:screen;animation:halo 3.7s ease-in-out infinite}
.lamp .core{width:13%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,240,200,.85),rgba(255,180,90,.3) 50%,transparent 72%);mix-blend-mode:screen;animation:flick 1.9s ease-in-out infinite}
.lamp canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes halo{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}62%{opacity:.72;transform:translate(-50%,-50%) scale(.97)}}
@keyframes flick{0%,100%{opacity:.8}18%{opacity:1}44%{opacity:.66}71%{opacity:.95}}
.in{margin-top:calc(var(--h) - 6px);flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px max(22px,env(safe-area-inset-bottom));width:100%}
h1{font-size:18px;font-weight:500;letter-spacing:-.008em;color:var(--soft)}
#tool{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;flex:1}
.times{font-size:clamp(50px,14.6vw,72px);line-height:1.04;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-top:4px;background:linear-gradient(180deg,#fff 30%,#ffd9b0);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.times small{font-size:.42em;letter-spacing:-.02em;margin-left:.1em}
.until{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:18px;font-weight:500;color:#ffc48d}
.until::before{content:'';width:8px;height:8px;border-radius:50%;background:#ff9a4d;box-shadow:0 0 12px #ff9a4d}
.until.now{color:#fff}
.until.now::before{animation:halo 2s infinite}
.track{position:relative;width:100%;margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);padding-top:16px}
.track::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#1f6fd8 22%,#ffd9a0 58%,#ff6a2c 80%,transparent)}
.track div{font-size:15px;line-height:1.3;color:var(--soft)}
.track b{display:block;font-size:19px;line-height:1.3;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.014em}
.where{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.chip{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;font-size:16px;font-weight:500;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--ink);white-space:nowrap}
.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:16px}
.chip select option,.chip select optgroup{color:#111}
.remind{width:100%;max-width:420px;min-height:58px;margin-top:auto;border-radius:999px;background:#fffaf0;color:#14060a;font-size:18px;font-weight:600;letter-spacing:-.01em;box-shadow:0 10px 44px var(--glow);transition:transform .16s}
.remind:active{transform:scale(.98)}
.where + .note{margin-top:8px}
.note{font-size:15px;line-height:1.4;color:var(--soft);min-height:0}
.after{height:14px;flex:none}
/* What the hour holds, in order */
.hour{position:relative;display:grid;gap:34px;margin-top:30px;padding-left:30px}
.hour::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#0c2a66,#1f6fd8 45%,#ff9a4d 88%,#ff5a26)}
.step{position:relative}
.step::before{content:'';position:absolute;left:-30px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid #ffd9a0}
.step time{display:block;font-size:15px;font-weight:600;color:var(--acc);margin-bottom:4px;font-variant-numeric:tabular-nums}
.step p{color:var(--soft);margin-top:6px}
.step .mant{margin-top:16px}
.step a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--acc)}
.week{display:grid;margin-top:18px}
.week div{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.week div:last-child{border-bottom:1px solid var(--line)}
.week span:first-child{color:var(--soft)}
.week span:last-child{font-weight:500}
@media (min-width:760px){:root{--h:clamp(320px,50svh,600px)}.times{font-size:80px}.track{margin-top:22px}}
@media (max-height:640px){:root{--h:clamp(220px,38svh,300px)}.times{font-size:46px}.track{margin-top:14px}.where{margin-top:12px}}