@font-face{font-display:swap;font-family:"Avenir Variable";font-weight:1 999;src:url(66174a725297be00e180.woff2) format("woff2")}:root{--link-color: CornflowerBlue;--link-focus-color: DarkOrange;--link-visited-color: MediumPurple}:where(*){box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}body{background-color:#000;color:#fff;display:grid;font-family:"Avenir Variable",sans-serif;font-variation-settings:"wght" 500;margin:0;min-block-size:100dvh;padding-block:0 env(safe-area-inset-bottom);place-content:center}body:has([data-loading]){pointer-events:none}:not(:defined){display:none}noscript{padding:1.5em;text-align:center}a{color:var(--link-color);outline:none;text-decoration:none}a:visited{color:var(--link-visited-color)}a:focus-visible,a:active{color:var(--link-focus-color)}@media(any-hover: hover){a{transition:color var(--transition)}a:hover{color:var(--link-focus-color)}}input,button{appearance:none;border:0;cursor:pointer;font-family:"Avenir Variable",sans-serif;outline:none}figure{margin:0}img,svg{block-size:auto;inline-size:100%;vertical-align:middle}svg{pointer-events:none}@keyframes scaleIn{0%,50%{opacity:0}50%{transform:scale(2)}100%{opacity:1}}@keyframes slideInUp{0%,50%{opacity:0}50%{transform:translate3d(0, 100%, 0)}100%{opacity:1}}@keyframes slideInDown{0%,50%{opacity:0}50%{transform:translate3d(0, -100%, 0)}100%{opacity:1}}@keyframes slideInLeft{0%,50%{opacity:0}50%{transform:translate3d(-100%, 0, 0)}100%{opacity:1}}@keyframes slideInRight{0%,50%{opacity:0}50%{transform:translate3d(100%, 0, 0)}100%{opacity:1}}moon-app{--app-gap: 0 .5rem;--app-grid: ". phase ." 2fr ". illumination ." 1fr "charts charts charts" ". date ." 1fr "prev location next" 2fr / var(--controls-size) minmax(auto, var(--charts-max-size)) var(--controls-size);--background-0: rgba(255, 255, 255, 0);--background-1: rgba(255, 255, 255, 0.15);--background-2: rgba(255, 255, 255, 0.25);--background-3: rgba(255, 255, 255, 0.7);--chart-size: 14.5rem;--charts-max-size: 30rem;--controls-size: 2.75rem;--fineprint: .75em;--transition: .3s;--transition-intro: 1s}@media(min-width: 36rem){moon-app{--app-gap: 0;--app-grid: ". phase ." 2fr ". illumination ." 1fr "prev charts next" ". date ." 1fr ". location ." 2fr / minmax(var(--controls-size), 1fr) minmax(var(--chart-size), var(--charts-max-size)) minmax(var(--controls-size), 1fr);--fineprint: .875em}}moon-app{block-size:100dvh;display:grid;gap:var(--app-gap);grid:var(--app-grid);inline-size:100vw}[id=phase]{grid-area:phase}[id=illumination]{grid-area:illumination}:is(moon-chart,moon-photo,moon-ticks){animation:scaleIn var(--transition-intro) ease;aspect-ratio:1;grid-area:charts;place-self:center}moon-location{animation:slideInUp var(--transition-intro) ease}[data-direction=prev]{animation:slideInLeft var(--transition-intro) ease;grid-area:prev}[data-direction=next]{animation:slideInRight var(--transition-intro) ease;grid-area:next}[id=date]{animation:slideInUp var(--transition-intro) ease;display:block;grid-area:date;padding-block:.5rem;padding-inline:1rem;place-self:center;transition:color var(--transition),transform var(--transition);white-space:nowrap}[id=date]:link,[id=date]:visited{color:#fff}[id=date]:focus-visible{color:hsla(0,0%,100%,.7)}[id=date].touch{transform:scale(0.8)}@media(any-hover: hover){[id=date]:hover{color:hsla(0,0%,100%,.7)}[id=date]:active{transform:scale(0.8)}}[id=date][data-today]{font-variation-settings:"wght" 600;pointer-events:none}[id=phase],[id=illumination]{animation:slideInDown var(--transition-intro) ease;font-size:.875em}[id=phase]{color:#fff;place-self:end center}[id=illumination]{color:hsla(0,0%,100%,.7);margin-block:.5rem 0;place-self:start center}[data-direction]{aspect-ratio:1;background-color:var(--background-1);border-radius:var(--controls-size);display:grid;inline-size:var(--controls-size);place-content:center;place-self:center;transition:background-color var(--transition),transform var(--transition)}[data-direction]:focus-visible{background-color:var(--background-2)}[data-direction].touch{transform:scale(0.8)}@media(any-hover: hover){[data-direction]:hover{background-color:var(--background-2)}[data-direction]:active{transform:scale(0.8)}}[data-direction] path{fill:none;stroke:#fff;stroke-width:2}[data-direction] svg{inline-size:1.5rem;transition:transform var(--transition)}@keyframes loading{0%{left:-20vw;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}100%{left:100%}}.progress-bar,.progress-bar::before{height:3px}.progress-bar{display:none;position:fixed;width:100vw}.progress-bar[data-loading]{display:block}.progress-bar::before{animation:loading 2s .3s linear infinite;background-color:#fff;content:"";display:block;left:-20vw;position:absolute;width:20vw}moon-chart{inline-size:100%;max-inline-size:var(--charts-max-size)}moon-chart text{font-size:.8125em}moon-chart[name=sun] circle{stroke:#f8c537}moon-chart[name=sun] text{fill:#f8c537}moon-chart[name=moon] circle{opacity:.5;stroke:#fff}moon-chart[name=moon] text{fill:#fff}moon-location{display:block;grid-area:location;place-self:center}moon-location form{background-color:var(--background-1);border-radius:var(--controls-size);display:grid;grid:"geo input reset"/var(--controls-size) 1fr var(--controls-size);transition:background-color var(--transition)}moon-location form:focus-within{background-color:var(--background-2)}@media(any-hover: hover){moon-location form:hover{background-color:var(--background-2)}}moon-location input{background:none;color:#fff;cursor:text;font-size:1em;grid-area:input;inline-size:100%;text-align:center}moon-location button{aspect-ratio:1;background-color:rgba(0,0,0,0);border-radius:50%;display:grid;inline-size:2.75rem;padding:0;place-content:center;transition:background-color var(--transition)}moon-location [type=submit]{grid-area:1/1/-1/-1;visibility:hidden}moon-location [type=reset]{color:#fff;grid-area:reset;opacity:.7;transition:opacity var(--transition)}moon-location [type=reset]:focus{opacity:1}@media(any-hover: hover){moon-location [type=reset]:hover{opacity:1}}moon-location [type=reset] svg{inline-size:2rem}moon-location [type=reset] circle{fill:currentColor}moon-location [type=reset] path{fill:none;stroke:rgba(0,0,0,.7);stroke-linecap:round;stroke-width:1}moon-location input:not(:focus)~[type=reset]{opacity:0}moon-location input:not(:focus)~[type=reset]:focus{opacity:1}moon-location [id=geo]{background-color:var(--background-0);color:#fff;grid-area:geo;opacity:.7;transition:background-color var(--transition),opacity var(--transition)}moon-location [id=geo].touch,moon-location [id=geo]:focus{background-color:var(--background-2);opacity:1}@media(any-hover: hover){moon-location [id=geo]:hover{background-color:var(--background-2);opacity:1}}moon-location [id=geo] svg{inline-size:2rem;padding:2px}moon-location [id=geo] circle,moon-location [id=geo] path{stroke:currentColor;stroke-width:1.5}moon-location [id=geo] circle{fill:currentColor}moon-location [id=geo] path{fill:none}moon-photo{aspect-ratio:1;border-radius:50%;display:grid;grid:1fr/1fr;inline-size:42.5%;max-inline-size:204px;overflow:hidden;place-items:center}moon-photo>*{grid-area:1/1}moon-photo img{transition:opacity .5s ease}moon-photo img[data-loading]{opacity:0}moon-photo[hemisphere=southern] img{transform:rotate(180deg)}moon-ticks{inline-size:100%;max-inline-size:var(--charts-max-size)}moon-ticks svg{aspect-ratio:1;inline-size:100%}moon-ticks [id=sweep-ticks] line{stroke:#000}moon-ticks [id=minor-ticks] line{stroke:hsla(0,0%,100%,.35)}moon-ticks [id=major-ticks] line{stroke:hsla(0,0%,100%,.7)}