:root{color-scheme:light;--paper:#eef3f6;--ink:#193449;--muted:#485b66;--ivory:#f4ead4;--sky:#4a89b3;font-family:Switzer,Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
body{margin:0}
main{height:100svh;min-height:640px;display:flex;flex-direction:column}
button,input{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid #285d82;outline-offset:5px}
::selection{background:#193449;color:#f5f0e6}
.sky-stage{position:relative;width:100%;flex:1 1 auto;min-height:0;overflow:hidden;isolation:isolate;container-type:size;background:var(--sky);--sun-size:clamp(112px,11vw,156px)}
.sky{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;pointer-events:none}
.compass{position:absolute;z-index:7;bottom:26px;right:clamp(26px,3vw,64px);width:clamp(60px,4vw,76px);pointer-events:none}
.compass img{display:block;width:100%;height:auto}
.cloud-parallax{position:absolute;inset:0;pointer-events:none}
.far{z-index:2}.middle{z-index:4}.near{z-index:5}
.cloud{position:absolute;height:auto;max-width:none;pointer-events:none;user-select:none}
.mirrored{transform:scaleX(-1)}
.cloud-far-left{width:45%;left:-18%;top:52%;opacity:.74}
.cloud-far-right{width:45%;right:-18%;top:52%;opacity:.74}
.cloud-middle-left,.cloud-middle-right{width:90%;height:95%;object-fit:fill;top:22%}
.cloud-middle-left{left:-45%}
.cloud-middle-right{right:-45%}
.cloud-near-left{width:85%;height:82%;object-fit:fill;left:-50%;top:50%}
.cloud-near-right{width:85%;height:82%;object-fit:fill;right:-50%;top:50%}
.cloud-near-bottom{width:110%;height:56%;object-fit:fill;left:-5%;top:80%}
.cloud-wings{position:absolute;inset:0;z-index:6;pointer-events:none}
.cloud-wing{position:absolute;width:45%;height:120%;object-fit:fill;top:22%;pointer-events:none;user-select:none}
.wing-left{left:-15%}
.wing-right{right:-15%}
.identity{position:absolute;z-index:1;width:clamp(300px,30vw,470px);left:50%;top:57%;transform:translate(-50%,-50%);text-align:center;color:var(--ivory)}
.identity-mark{display:block;width:100%;height:auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.solar-track{position:absolute;z-index:3;left:4%;right:4%;top:3%;height:42%;pointer-events:none}
.trajectory{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trajectory-base{stroke:var(--ivory);stroke-opacity:.45;stroke-width:1}
.trajectory-progress{stroke:var(--ivory);stroke-width:1.5}
.sun{position:absolute;width:var(--sun-size);aspect-ratio:1;left:calc(100% - var(--sun-size));top:24%;pointer-events:none;opacity:0}
.sun img{width:100%;height:100%;display:block}
.sun-value{position:absolute;left:49.6%;top:49.2%;transform:translate(-50%,-50%);display:flex;align-items:baseline;justify-content:center;color:#633b20;white-space:nowrap;font-family:'Bodoni Moda',Georgia,serif;font-variant-numeric:lining-nums tabular-nums}
.number{font-size:clamp(18px,1.75vw,25px);font-weight:400;line-height:1}.percent{font-size:10px;margin-left:2px}
input[type=range]{display:block;width:100%;height:18px;margin:0;accent-color:#315e80;cursor:ew-resize}
.no-script{margin:0;padding:20px 32px;line-height:1.5}

@media(max-width:600px){
  .sky-stage{--sun-size:clamp(76px,23vw,96px)}
  .compass{display:none}
  .sky{object-position:54% center}
  .solar-track{left:calc(-1 * var(--sun-size) - 20px);right:calc(-1 * var(--sun-size) - 20px);top:5%;height:18%}
  .number{font-size:clamp(15px,4.5vw,18px)}.percent{font-size:9px}
  .identity{width:min(300px,65cqh,82vw);top:58%}
  .cloud-far-left{width:100%;left:-84%;top:52%}
  .cloud-far-right{width:100%;right:-84%;top:52%}
  .cloud-middle-left{width:200%;height:78%;left:-177%;top:25%}
  .cloud-middle-right{width:200%;height:78%;right:-177%;top:25%}
  .cloud-near-left{width:180%;height:68%;left:-139%;top:54%}
  .cloud-near-right{width:180%;height:68%;right:-139%;top:54%}
  .cloud-near-bottom{width:180%;height:44%;left:-40%;top:80%}
  .cloud-wing{width:100%;height:104%}
  .wing-left{left:-69%;top:26%}
  .wing-right{right:-69%;top:26%}
}

@media(forced-colors:active){.sky-stage{background:Canvas}.identity h1{color:CanvasText}}