.hd{min-width:0;margin:0}.hd-mat{position:relative}.hd-tape{z-index:12;background:hsl(var(--sun)/.8);clip-path:polygon(0 10%,8% 0,50% 8%,92% 0,100% 14%,97% 52%,100% 90%,90% 100%,50% 92%,8% 100%,0 88%,3% 50%);pointer-events:none;width:74px;height:22px;position:absolute;top:-8px}.hd-tape-l{left:18px;transform:rotate(-6deg)}.hd-tape-r{width:84px;right:22px;transform:rotate(5deg)}.hd-stage{border-radius:14px 13px 15px}.hd-plane,.hd-plane>.pop,.hd-dusk{position:absolute;inset:0}.hd-sky{z-index:1}.hd-dusk{z-index:2}.hd-far{z-index:3}.hd-mid{z-index:4}.hd-front{z-index:5}.hd-tags{z-index:6;pointer-events:none}.hd-scene.is-on .hd-plane{will-change:transform}.hd-far .cel,.hd-mid .cel-static,.hd-front .cel-static{filter:drop-shadow(0 1.5px 0 hsl(var(--ink)/.16))drop-shadow(0 6px 7px hsl(var(--ink)/.2))}.hd-dusk{opacity:0;background-color:hsl(var(--sage-3));background-image:var(--grain);pointer-events:none;background-size:240px;transition:transform .54s steps(3,end),opacity .54s steps(3,end);transform:translateY(-100%)}.hd-stage[data-phase=peak] .hd-dusk{opacity:.45;transform:none}.hd-stage[data-phase=night] .hd-dusk{opacity:.55;background-color:hsl(var(--forest-2));transform:none}.hd .sun-body{transition:transform .72s steps(4,end)}.hd-stage[data-phase=peak] .sun-body{transform:translateY(96px)}.hd-stage[data-phase=night] .sun-body{transform:translateY(220px)}.hd-stage .flow{opacity:0;transition:opacity .36s steps(3,end)}.hd-stage[data-phase=sun] :is(.f-pv-a,.f-pv-b,.f-grid-fac,.f-grid-ev),.hd-stage[data-phase=dip] :is(.f-pv-a,.f-pv-b),.hd-stage[data-phase=backup] :is(.f-pv-a,.f-pv-b,.f-bess-fac,.f-bess-ev),.hd-stage[data-phase=peak] :is(.f-bess-fac,.f-bess-ev,.f-grid-fac),.hd-stage[data-phase=night] .f-grid-bess{opacity:1}.hd-stage .grid-el{transition:opacity .45s steps(3,end)}.hd-stage:is([data-phase=dip],[data-phase=backup]) .grid-el{opacity:.34}.hd-stage[data-phase=dip] .win{animation:1.6s step-end both blackout}.hd-stage[data-phase=night] .win:not(.win-keep){fill:hsl(var(--primary))}.hd-stage .spark{opacity:0}.hd-stage[data-phase=dip] .spark{opacity:1;animation:.32s step-end infinite jolt}.hd-stage:is([data-phase=peak],[data-phase=night]) .glint{visibility:hidden}.hd-tag{width:max-content;max-width:64%;font:400 14px/1.2 var(--font-hand),var(--font-tamil),cursive;color:hsl(var(--foreground));background-color:hsl(var(--card));background-image:var(--grain);box-shadow:0 1px 0 hsl(var(--ink)/.14),0 7px 10px -5px hsl(var(--ink)/.4);transform-origin:50% 100%;transform:rotate(var(--r,-2deg));background-size:240px;border-radius:4px 5px 4px 6px;padding:5px 10px 5px 21px;display:none;position:absolute}.hd-tag:lang(ta){font-family:var(--font-tamil),var(--font-body),sans-serif;font-size:13px;font-weight:500;line-height:1.35}.hd-tag:before{content:"";background:hsl(var(--sun));width:7px;height:7px;box-shadow:0 0 0 1.5px hsl(var(--primary));border-radius:50%;margin-top:-3.5px;position:absolute;top:50%;left:8px}.hd-stage[data-phase=sun] .hd-tag[data-for=sun],.hd-stage[data-phase=dip] .hd-tag[data-for=dip],.hd-stage[data-phase=backup] .hd-tag[data-for=backup],.hd-stage[data-phase=peak] .hd-tag[data-for=peak],.hd-stage[data-phase=night] .hd-tag[data-for=night]{animation:.36s step-end both tag-pop;display:block}@media (max-width:599px){.hd-tag{display:none!important}}html[data-motion=paused] .hd .pop,html[data-motion=paused] .hd-stage .hd-tag[data-for]{animation:none}.hd-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"clock clock""steps pause";align-items:center;gap:10px 8px;margin-top:16px;display:grid;container:hdbar/inline-size}.hd-clock{grid-area:clock;align-items:center;gap:10px;min-width:0;margin:0;display:flex}.hd-time{background:hsl(var(--primary));color:hsl(var(--primary-foreground));font:500 13px/1 var(--font-mono),ui-monospace,monospace;letter-spacing:.02em;border-radius:6px 5px 7px;flex:none;padding:6px 9px 5px}.hd-state{min-width:0;font:400 16px/1.25 var(--font-hand),var(--font-tamil),cursive;color:hsl(var(--primary))}.hd-state:lang(ta){font-family:var(--font-tamil),var(--font-body),sans-serif;font-size:14px;font-weight:500}.hd-steps{flex-wrap:wrap;grid-area:steps;gap:6px;min-width:0;display:flex}.hd-steps button{border:1.5px solid hsl(var(--foreground)/.14);background:hsl(var(--card));min-height:44px;color:hsl(var(--foreground)/.8);font:600 12.5px/1.1 var(--font-body),var(--font-tamil),sans-serif;white-space:nowrap;cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:7px 12px 7px 8px;transition:background-color .2s steps(2,end),color .2s steps(2,end);display:inline-flex}.hd-steps button:hover{background:hsl(var(--secondary))}.hd-steps button:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}.hd-n{background:hsl(var(--secondary));width:22px;height:22px;color:hsl(var(--primary));font:400 13px/1 var(--font-hand),cursive;border-radius:50%;place-items:center;display:inline-grid}.hd-steps button[aria-pressed=true]{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.hd-steps button[aria-pressed=true] .hd-n{background:hsl(var(--sun));color:hsl(var(--sun-foreground))}.hd-short{display:none}.hd-pause{grid-area:pause;justify-self:end}.hd-cap{margin-top:12px}.hd:lang(ta) .hd-pause{justify-content:center;width:44px;height:44px;padding:0}.hd:lang(ta) .hd-pause>span:not(.glyph){clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (min-width:1024px) and (max-width:1279px),(max-width:699px){.hd-pause{justify-content:center;width:44px;height:44px;padding:0}.hd-pause>span:not(.glyph){clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (max-width:599px){.hd-bar{grid-template-areas:"clock pause""steps steps"}.hd-steps{gap:4px}.hd-steps button{gap:5px;padding:6px 9px 6px 5px;font-size:12px}.hd-long{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hd-short{display:inline}}@container hdbar (max-width:330px){.hd-steps{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}}@container hdbar (max-width:640px){.hd:lang(ta) .hd-steps{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}}