@font-face {
  font-family:Sol Bodoni;
  src:url('./bodonimoda.ttf') format('truetype');
  font-weight:400 900;
  font-display:swap
}
@font-face {
  font-family:Sol Atkinson;
  src:url('./atkinsonhyperlegiblenext.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap
}
:root {
  --sol-fuchsia:#cd2a5b;
  --sol-blue:#243e8d;
  --sol-chalk:#f5f0e8;
  --sol-pad:clamp(1.5rem,4.15vw,5rem);
  --sol-display:'Sol Bodoni',Georgia,serif;
  --sol-body:'Sol Atkinson',Arial,sans-serif
}
* {
  box-sizing:border-box
}
body.sol-page {
  margin:0;
  background:var(--sol-blue);
  color:var(--sol-chalk);
  font-family:var(--sol-body);
  font-size:1rem;
  line-height:1.45;
  -webkit-font-smoothing:antialiased
}
.sol-page button {
  font:inherit
}
.sol-page ::selection {
  background:var(--sol-fuchsia);
  color:var(--sol-chalk)
}
.sol-introduction {
  position:relative;
  isolation:isolate;
  min-height:max(48rem,100svh);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0 var(--sol-pad);
  color:var(--sol-chalk);
  background:var(--sol-blue);
  font-family:var(--sol-body)
}
.sol-scene {
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:var(--sol-blue)
}
.sol-art {
  position:absolute;
  display:block;
  max-width:none;
  width:var(--sol-art-w,100%);
  height:var(--sol-art-h,100%);
  left:var(--sol-art-x,0);
  top:var(--sol-art-y,0);
  object-fit:cover;
  object-position:64% 55%
}
.sol-sky-window {
  display:none;
  position:absolute;
  inset:0 0 auto;
  height:var(--sol-horizon,55.4%);
  overflow:hidden
}
.sol-ready .sol-sky-window {
  display:block
}
.sol-night {
  position:absolute;
  inset:0;
  background:var(--sol-blue);
  opacity:0;
  pointer-events:none
}
.sol-masthead {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  padding-top:clamp(2.2rem,3.5vw,4rem)
}
.sol-brand {
  width:clamp(280px,43vw,760px);
  line-height:0;
  max-width:76%
}
.sol-brand img {
  display:block;
  width:100%;
  height:auto
}
.sol-brand-note {
  font-size:1rem;
  line-height:1.5;
  white-space:nowrap;
  margin:.2rem 0 0;
  text-align:right
}
.sol-brand-note span {
  font-size:.875rem
}
.sol-intro-content {
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-top:auto;
  margin-bottom:clamp(2.5rem,5vh,4rem)
}
.sol-launch h1 {
  font-family:var(--sol-display);
  font-size:clamp(4.25rem,7.65vw,9.5rem);
  font-weight:500;
  font-optical-sizing:auto;
  letter-spacing:-.04em;
  line-height:1.06;
  margin:0
}
.sol-invitation {
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.5;
  margin:0 0 .6rem;
  max-width:24ch
}
.sol-footer {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1.6rem;
  min-height:4rem;
  font-size:.875rem
}
.sol-footer p {
  margin:0
}
.sol-replay {
  color:inherit;
  background:none;
  border:0;
  padding:.5rem 0;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:1.5rem;
  font-size:.875rem!important;
  cursor:pointer
}
.sol-replay[hidden] {
  display:none
}
.sol-replay:focus-visible {
  outline:2px solid var(--sol-chalk);
  outline-offset:7px
}
.sol-replay:disabled {
  cursor:default
}
.sol-replay-icon {
  position:relative;
  display:block;
  flex:none;
  width:1.125rem;
  height:.75rem;
  margin-bottom:.1rem;
  overflow:hidden;
  border-bottom:1px solid currentColor
}
.sol-replay-icon::before {
  content:'';
  position:absolute;
  left:50%;
  bottom:.125rem;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:currentColor;
  transform:translateX(-50%)
}
.sol-replay:disabled .sol-replay-icon::before {
  animation:sol-control-rise 1600ms cubic-bezier(.2,.6,.25,1) both
}
@keyframes sol-control-rise {
  from {
    transform:translate(-50%,.75rem)
  }
  to {
    transform:translate(-50%,0)
  }
}
/* One arrival, then stillness. No perpetual movement or cursor tracking. */
.sol-dawn .sol-rising-sky {
  animation:sol-rise 4600ms cubic-bezier(.2,.6,.25,1) both
}
.sol-dawn .sol-night {
  animation:sol-light 4600ms cubic-bezier(.2,.6,.25,1) both
}
.sol-enter .sol-brand {
  animation:sol-arrive 1400ms 120ms ease-out both
}
.sol-enter .sol-brand-note {
  animation:sol-arrive 1400ms 480ms ease-out both
}
.sol-enter .sol-launch {
  animation:sol-arrive 1600ms 900ms ease-out both
}
.sol-enter .sol-invitation {
  animation:sol-arrive 1400ms 1600ms ease-out both
}
.sol-enter .sol-footer {
  animation:sol-arrive 1200ms 2000ms ease-out both
}
@keyframes sol-rise {
  from {
    transform:translateY(64px)
  }
  to {
    transform:translateY(0)
  }
}
@keyframes sol-light {
  from {
    opacity:.38
  }
  to {
    opacity:0
  }
}
@keyframes sol-arrive {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1800px) {
  .sol-invitation {
    font-size:1.35rem
  }
  .sol-footer {
    font-size:1rem
  }
}
@media(max-width:1000px) {
  .sol-brand {
    width:52vw
  }
  .sol-launch h1 {
    font-size:clamp(4rem,8.25vw,6.6rem)
  }
  .sol-invitation {
    font-size:1rem
  }
  .sol-intro-content {
    gap:1rem
  }
}
@media(max-width:700px) {
  :root {
    --sol-pad:1.5rem
  }
  .sol-introduction {
    min-height:49rem
  }
  .sol-masthead {
    padding-top:2rem;
    display:block
  }
  .sol-brand {
    width:100%;
    max-width:100%
  }
  .sol-brand-note {
    margin-top:1.25rem;
    display:flex;
    justify-content:space-between;
    text-align:left;
    font-size:.875rem
  }
  .sol-brand-note br {
    display:none
  }
  .sol-intro-content {
    display:block;
    margin-bottom:1.5rem
  }
  .sol-launch h1 {
    font-size:clamp(3.4rem,12.7vw,5.7rem);
    line-height:1.06;
    letter-spacing:-.04em
  }
  .sol-invitation {
    font-size:1rem;
    line-height:1.45;
    margin:1.35rem 0 0;
    max-width:none
  }
  .sol-footer {
    padding-bottom:1.35rem;
    font-size:.875rem
  }
  .sol-replay {
    gap:.8rem;
    font-size:.875rem!important
  }
}
@media(max-width:360px) {
  :root {
    --sol-pad:1.25rem
  }
  .sol-introduction {
    min-height:47rem
  }
  .sol-launch h1 {
    font-size:2.95rem
  }
  .sol-replay {
    gap:.4rem
  }
  .sol-footer {
    font-size:.8125rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .sol-introduction *,.sol-introduction *::before,.sol-introduction *::after {
    animation:none!important;
    transition:none!important
  }
  .sol-sky-window {
    display:none!important
  }
  .sol-night {
    opacity:0!important
  }
  .sol-replay {
    display:none!important
  }
}

/* One blue ink field keeps the question and its guidance readable over the sun. */
.sol-masthead {
  align-items:center
}
.sol-brand-note,.sol-place {
  margin:0;
  font-size:1rem;
  line-height:1.4
}
.sol-place {
  text-align:right
}
.sol-guess {
  position:relative;
  align-self:center;
  flex-shrink:0;
  width:min(27rem,100%);
  margin:clamp(5rem,11svh,8rem) 0 0;
  padding:1.25rem;
  background:var(--sol-blue);
  color:var(--sol-chalk)
}
.sol-guess label {
  display:block;
  margin:0 0 1rem;
  text-align:center;
  font-size:1.0625rem;
  line-height:1.5;
  text-wrap:balance
}
.sol-question-finish {
  display:block
}
.sol-guess-row {
  display:flex;
  border:1px solid rgba(245,240,232,.8)
}
.sol-guess input {
  width:100%;
  min-width:0;
  min-height:3.25rem;
  padding:.8rem 1rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sol-chalk);
  font:1rem var(--sol-body)
}
.sol-guess input::placeholder {
  color:rgba(245,240,232,.8);
  opacity:1
}
.sol-guess input:focus-visible {
  outline:2px solid var(--sol-chalk);
  outline-offset:-4px
}
.sol-guess button {
  min-width:5rem;
  min-height:3.25rem;
  padding:.8rem 1.1rem;
  border:0;
  border-radius:0;
  background:var(--sol-chalk);
  color:var(--sol-blue);
  cursor:pointer;
  font-size:1rem;
  transition:background-color 800ms ease-out
}
.sol-guess button:hover {
  background:#fff
}
.sol-guess button:focus-visible {
  outline:2px solid var(--sol-blue);
  outline-offset:-5px
}
.sol-guess-hint {
  margin:.85rem 0 0;
  min-height:2.8em;
  text-align:center;
  font-size:.875rem;
  line-height:1.4;
  text-wrap:balance
}
.sol-guess-hint span {
  display:block
}
/* Dissolve the water into the exact fuchsia beneath the unchanged native marks. */
.sol-footer {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  margin:0 calc(-1 * var(--sol-pad));
  padding:1.5rem var(--sol-pad);
  gap:.875rem;
  background:var(--sol-fuchsia)
}
.sol-footer::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:4rem;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(205,42,91,0),rgba(205,42,91,.16) 25%,rgba(205,42,91,.68) 70%,var(--sol-fuchsia))
}
.sol-signature {
  --sol-wordmark-width:15.75rem;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:.875rem
}
.sol-tanimal {
  display:block;
  width:auto;
  height:calc(var(--sol-wordmark-width) * .19);
  margin-bottom:calc(var(--sol-wordmark-width) * .008);
  flex:none
}
.sol-signature .sol-brand {
  width:var(--sol-wordmark-width);
  max-width:none;
  padding-bottom:0
}
.sol-footer-details {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.25rem 2rem;
  width:100%;
  max-width:32rem;
  text-align:center
}
.sol-intro-content {
  flex-shrink:0;
  padding-top:4rem;
  margin-bottom:4rem
}
.sol-enter .sol-guess {
  animation:sol-guess-arrive 1500ms 600ms ease-out both
}
@keyframes sol-guess-arrive {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:1000px) {
  .sol-signature {
    --sol-wordmark-width:13rem
  }
}
@media(max-width:700px) {
  .sol-introduction {
    min-height:max(55rem,100svh,calc(100vw + 21rem))
  }
  .sol-masthead {
    display:flex;
    gap:1rem
  }
  .sol-brand-note,.sol-place {
    display:block;
    margin:0;
    font-size:.875rem
  }
  .sol-guess {
    margin-top:clamp(6rem,13svh,9rem);
    padding:1.1rem 1rem 1rem
  }
  .sol-guess label {
    margin-bottom:.9rem;
    font-size:1rem;
    line-height:1.5
  }
  .sol-guess button {
    min-width:4.25rem
  }
  .sol-launch h1 {
    font-size:clamp(3rem,12.4vw,5.5rem);
    line-height:1.14;
    letter-spacing:-.035em
  }
  .sol-intro-content {
    margin-bottom:4.25rem
  }
  .sol-invitation {
    margin-top:1.35rem;
    line-height:1.55
  }
  .sol-footer {
    gap:.75rem;
    padding-top:1.5rem;
    padding-bottom:1.1rem
  }
  .sol-footer::before {
    height:4.25rem
  }
  .sol-signature {
    --sol-wordmark-width:12rem;
    gap:.625rem
  }
  .sol-footer-details {
    column-gap:1.25rem
  }
}
@media(max-width:360px) {
  .sol-launch h1 {
    font-size:2.85rem
  }
  .sol-guess {
    padding:1rem .85rem
  }
  .sol-guess label {
    font-size:.9375rem
  }
  .sol-signature {
    --sol-wordmark-width:11rem
  }
}