@property --s06-text{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --s06-dim{syntax:"<color>";inherits:true;initial-value:#6181b2}
@property --s06-line{syntax:"<color>";inherits:true;initial-value:#092959}
@property --s06-accent{syntax:"<color>";inherits:true;initial-value:#fcfdfe}
@property --s06-edge{syntax:"<color>";inherits:true;initial-value:#6c8ec3}
@property --s06-note{syntax:"<color>";inherits:true;initial-value:#b3cbef}
@property --s06-bg{syntax:"<color>";inherits:true;initial-value:#051938}

.s06{
  --container-pbs:56px;
  --container-pbe:0px;
  --container-pbs-tb:56px;
  --container-pbe-tb:0px;
  --container-pbs-dt:80px;
  --container-pbe-dt:0px;
  --s06-ease:cubic-bezier(.65,0,.35,1);
  --s06-text:#ffffff;
  --s06-dim:#6181b2;
  --s06-line:#092959;
  --s06-accent:#fcfdfe;
  --s06-edge:#6c8ec3;
  --s06-note:#b3cbef;
  --s06-bg:#051938;
  --s06-blend:exclusion;
  --s06-menu-bg:rgba(6,33,75,.6);
  --s06-menu-edge:#6c8ec3;
  --s06-pick:#0253bd;
  --s06-soft:rgba(252,253,254,.1);
  position:relative;
  isolation:isolate;
  background-color:var(--s06-bg);
  color:var(--s06-text);
}

.s06.is-ready{
  transition-property:--s06-text,--s06-dim,--s06-line,--s06-accent,--s06-edge,--s06-note,--s06-bg;
  transition-duration:1.2s;
  transition-timing-function:var(--s06-ease);
}

.s06-bg{
  position:absolute;
  z-index:-1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.s06-sky{
  position:absolute;
  inset:0;
  opacity:0;
}

.s06.is-ready .s06-sky{
  transition:opacity 1.2s var(--s06-ease);
}

.s06-sky--pre-dawn{
  background:radial-gradient(103.24% 102.63% at 50% 102.63%,rgb(25,119,252) 0,rgb(78,143,244) 9.84%,rgb(115,170,255) 20.83%,rgb(177,208,255) 34.13%,rgb(212,229,255) 44.86%,rgb(244,248,255) 58.59%,rgb(248,250,253) 100%);
}

.s06-sky--sunrise{
  background:radial-gradient(102.68% 99.11% at 50% 104.6%,rgb(114,169,255) 0,rgb(141,186,255) 15.77%,rgb(186,213,255) 30.62%,rgb(203,223,255) 38.04%,rgb(237,244,255) 50.11%,rgb(255,255,255) 63.1%,rgb(252,253,254) 77.95%,rgb(248,250,253) 98.81%);
}

.s06-sky--daytime{
  background:radial-gradient(102.84% 104.98% at 50% 104.98%,rgb(51,108,196) 1.33%,rgb(118,162,231) 15.71%,rgb(187,214,255) 33.15%,rgb(220,234,255) 45%,rgb(248,250,253) 60%);
}

.s06-sky--dusk{
  background:radial-gradient(102.83% 103.24% at 49.98% 104.51%,rgb(163,199,255) 0,rgb(176,207,255) 16.73%,rgb(187,214,255) 33.03%,rgb(214,230,255) 43.38%,rgb(250,253,255) 59.16%,rgb(253,254,255) 76.24%,rgb(248,250,253) 100%);
}

.s06-sky--sunset{
  background:radial-gradient(103.12% 100% at 50% 100%,rgb(151,192,255) 0,rgb(137,183,255) 15.52%,rgb(161,198,255) 30.09%,rgb(209,227,255) 45.72%,rgb(230,240,255) 54.96%,rgb(248,250,253) 88.16%);
}

.s06-sky--night{
  background:radial-gradient(102.82% 106.44% at 50% 106.44%,rgb(252,253,254) 1.11%,rgb(38,115,230) 28.73%,rgb(0,76,175) 45.76%,rgb(0,48,116) 63.37%,rgb(0,39,98) 78.67%,rgb(6,33,75) 100%);
}

.s06-sky--small{
  inset:auto;
  left:50%;
  bottom:0;
  width:1218px;
  height:936px;
  margin-left:-609px;
  opacity:1;
  background:radial-gradient(155.66% 78.1% at 50% 104.07%,rgb(225,237,255) 1.11%,rgb(38,115,230) 22.58%,rgb(0,57,135) 42.92%,rgb(0,48,116) 61.78%,rgb(0,39,98) 80.71%,rgb(6,33,75) 100%);
}

.s06-frame{
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:max(16px,calc((100% - 1266px) / 2));
  width:min(1266px,calc(100% - 32px));
  box-sizing:border-box;
  border-inline:1px solid var(--s06-line);
  mix-blend-mode:var(--s06-blend);
  pointer-events:none;
  display:none;
}

.s06-container{
  z-index:auto;
}

.s06-row{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.s06 .s06-title{
  align-self:center;
  max-width:8.7376em;
  margin:0;
  color:var(--s06-text);
  text-align:center;
  text-wrap:pretty;
}

.s06-menu{
  display:none;
}

.s06-list{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:64px 16px;
  margin:0 -16px;
  padding:0 16px;
  list-style:none;
  color:#fff;
}

.s06-list::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:74%;
  height:1px;
  transform:translate(-50%,-.5px);
  background:linear-gradient(90deg,rgba(225,237,255,0),#fcfdfe 50%,rgba(225,237,255,0));
}

.s06-stat{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

.s06 .s06-val,
.s06 .s06-desc{
  display:block;
  margin:0;
  color:inherit;
}

.s06 .s06-val{
  text-wrap:balance;
}

.s06 .s06-desc{
  max-width:180px;
  text-wrap:balance;
}

.s06-note{
  margin:0;
  font-size:13px;
  line-height:1.5;
  font-weight:var(--fw-300);
  color:var(--s06-note);
  text-align:center;
  text-wrap:balance;
}

.s06-note--list{
  max-width:34em;
  margin:40px auto 0;
  color:#b3cbef;
}

.s06-stage{
  display:none;
}

.s06-globe{
  position:relative;
  display:flex;
  justify-content:center;
  height:300px;
  margin:40px -16px 0;
  overflow:hidden;
}

.s06-globe-canvas{
  display:block;
  flex:none;
  width:768px;
  height:300px;
}

@media (min-width:640px){
  .s06-frame{
    display:block;
  }

  .s06-row{
    gap:56px;
  }

  .s06-stat{
    grid-column:span 4;
  }

  .s06-list{
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
}

@media (min-width:940px){
  .s06-row{
    gap:80px;
  }

  .s06-sky--small,
  .s06-list,
  .s06-note--list,
  .s06-globe{
    display:none;
  }

  .s06-sky--night{
    opacity:0;
  }

  .s06:not([data-tod]) .s06-sky--night,
  .s06[data-tod="night"] .s06-sky--night,
  .s06[data-tod="pre-dawn"] .s06-sky--pre-dawn,
  .s06[data-tod="sunrise"] .s06-sky--sunrise,
  .s06[data-tod="daytime"] .s06-sky--daytime,
  .s06[data-tod="dusk"] .s06-sky--dusk,
  .s06[data-tod="sunset"] .s06-sky--sunset{
    opacity:1;
  }

  .s06[data-tod]:not([data-tod="night"]){
    --s06-text:#0b1a32;
    --s06-dim:#7b8ba4;
    --s06-line:#e6ecf5;
    --s06-note:#64748d;
    --s06-bg:#ffffff;
    --s06-blend:multiply;
    --s06-menu-bg:rgba(248,250,253,.55);
    --s06-menu-edge:color-mix(in srgb,var(--s06-accent) 20%,transparent);
    --s06-pick:color-mix(in srgb,var(--s06-accent) 12%,transparent);
    --s06-soft:color-mix(in srgb,var(--s06-accent) 7%,transparent);
  }

  .s06[data-tod="pre-dawn"]{
    --s06-accent:#0065e5;
    --s06-edge:rgb(193,217,255);
  }

  .s06[data-tod="sunrise"]{
    --s06-accent:#0970f7;
    --s06-edge:rgb(210,228,255);
  }

  .s06[data-tod="daytime"]{
    --s06-accent:#013b8b;
    --s06-edge:rgb(181,205,241);
  }

  .s06[data-tod="dusk"]{
    --s06-accent:#436eb1;
    --s06-edge:rgb(216,230,251);
  }

  .s06[data-tod="sunset"]{
    --s06-accent:#004eb4;
    --s06-edge:rgb(181,205,241);
  }

  .s06-menu{
    position:relative;
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:16px;
    margin:0 -15px;
    border-block:1px solid transparent;
    --i:0;
  }

  .s06-menu::before,
  .s06-menu::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:var(--s06-line);
    mix-blend-mode:var(--s06-blend);
    pointer-events:none;
  }

  .s06-menu::before{
    top:-1px;
  }

  .s06-menu::after{
    bottom:-1px;
  }

  .s06-item{
    grid-column:span 3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:40px 0;
    border:0;
    border-radius:8px;
    background:none;
    font:inherit;
    text-align:center;
    color:var(--s06-dim);
    cursor:pointer;
    transition:color .3s cubic-bezier(.25,1,.5,1);
  }

  .s06-item[aria-pressed="true"]{
    color:var(--s06-text);
  }

  .s06-item:focus-visible{
    outline:2px solid color-mix(in srgb,var(--s06-text) 75%,transparent);
    outline-offset:-2px;
  }

  .s06 .s06-item .s06-desc{
    max-width:220px;
  }

  .s06-ind{
    position:absolute;
    left:calc(15px + (100% - 14px) / 4 * var(--i));
    width:calc((100% - 78px) / 4);
    z-index:1;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--s06-accent) 50%,transparent);
    transition:left .4s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
  }

  .s06-ind--top{
    top:-1px;
  }

  .s06-ind--bottom{
    bottom:-1px;
  }

  .s06-stage{
    position:relative;
    display:block;
    aspect-ratio:1264/532;
  }

  .s06-canvas{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }

  .s06-note--stage{
    position:absolute;
    z-index:1;
    top:16px;
    left:50%;
    width:max-content;
    max-width:calc(100% - 112px);
    transform:translateX(-50%);
    pointer-events:none;
  }
}

.s06-tod{
  position:absolute;
  z-index:3;
  top:24px;
  right:8px;
}

.s06-tod[hidden]{
  display:none;
}

.s06-tod-trigger{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--s06-edge);
  border-radius:4px;
  background:transparent;
  color:var(--s06-accent);
  cursor:pointer;
}

.s06-tod-trigger:focus-visible{
  outline:2px solid color-mix(in srgb,var(--s06-accent) 60%,transparent);
  outline-offset:1px;
}

.s06-tod-list{
  position:absolute;
  z-index:2;
  top:calc(100% + 8px);
  right:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-sizing:border-box;
  min-width:114.3px;
  margin:0;
  padding:8px;
  list-style:none;
  border:1px solid var(--s06-menu-edge);
  border-radius:6px;
  background:var(--s06-menu-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.s06-tod-list[hidden]{
  display:none;
}

.s06-tod-opt{
  display:flex;
  align-items:center;
  gap:8px;
  height:28px;
  padding:0 8px 0 6px;
  border-radius:4px;
  color:var(--s06-accent);
  font-size:14px;
  line-height:1;
  font-weight:var(--fw-400);
  white-space:nowrap;
  cursor:pointer;
}

.s06-tod-opt[aria-selected="true"]{
  background:var(--s06-pick);
}

.s06-tod-opt[data-active]:not([aria-selected="true"]){
  background:var(--s06-soft);
}

@media (hover:hover){
  .s06-tod-opt:hover:not([aria-selected="true"]){
    background:var(--s06-soft);
  }
}

.s06-ico{
  display:block;
  flex:none;
  width:20px;
  height:20px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.s06-ico .ic-part{
  opacity:0;
  stroke-dasharray:0 1;
}

.s06-ico .ic-sun{
  transform:translateY(0);
}

.s06.is-ready .s06-ico .ic-part,
.s06.is-ready .s06-ico .ic-sun{
  transition:opacity .35s ease,stroke-dasharray .35s ease,transform .35s ease;
}

.s06-ico[data-state="pre-dawn"] .ic-sun{
  transform:translateY(1.6px);
}

.s06-ico[data-state="dusk"] .ic-sun{
  transform:translateY(-.8px);
}

.s06-ico[data-state="sunset"] .ic-sun{
  transform:translateY(-1.2px);
}

.s06-ico[data-state="night"] .ic-sun{
  opacity:0;
}

.s06-ico[data-state="pre-dawn"] .ic-arc-top,
.s06-ico[data-state="sunset"] .ic-arc-bottom,
.s06-ico[data-state="night"] .ic-moon,
.s06-ico[data-state="daytime"] .ic-ray,
.s06-ico[data-state="sunrise"] .ic-ray-r,
.s06-ico[data-state="sunrise"] .ic-ray-br,
.s06-ico[data-state="sunrise"] .ic-ray-b,
.s06-ico[data-state="sunrise"] .ic-ray-bl,
.s06-ico[data-state="sunrise"] .ic-ray-l,
.s06-ico[data-state="dusk"] .ic-ray-t,
.s06-ico[data-state="dusk"] .ic-ray-tr,
.s06-ico[data-state="dusk"] .ic-ray-tl,
.s06-ico[data-state="dusk"] .ic-ray-r,
.s06-ico[data-state="dusk"] .ic-ray-l,
.s06-ico[data-state="sunset"] .ic-ray-t,
.s06-ico[data-state="sunset"] .ic-ray-tr,
.s06-ico[data-state="sunset"] .ic-ray-tl{
  opacity:1;
  stroke-dasharray:1 1;
}

.s06-ico[data-state="sunrise"] .ic-arc-top,
.s06-ico[data-state="dusk"] .ic-arc-bottom{
  opacity:1;
  stroke-dasharray:.06 .14;
}

@media (prefers-reduced-motion:reduce){
  .s06.is-ready,
  .s06.is-ready .s06-sky,
  .s06.is-ready .s06-ico .ic-part,
  .s06.is-ready .s06-ico .ic-sun,
  .s06-item,
  .s06-ind{
    transition:none;
  }
}