:root  {
  font-family: 'Grenze Gotisch', Georgia, serif;
  color: #172b33;
  -webkit-font-smoothing: antialiased;
}

*  {
  box-sizing: border-box;
}

body  {
  min-width: 320px;
  min-height: 100svh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #a9c6d0;
}

button, input  {
  font: inherit;
}

button  {
  cursor: pointer;
}

.login-card  {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 480px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 32px;
  background: rgb(244 252 255 / 36%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow: 0 32px 90px rgb(15 50 69 / 22%), 0 8px 24px rgb(15 50 69 / 10%), inset 0 1px 0 rgb(255 255 255 / 90%);
}

.login-card::before  {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgb(255 255 255 / 24%), transparent 35%, transparent 65%, rgb(255 255 255 / 8%));
  content: "";
  pointer-events: none;
}

.scene-panel  {
  position: relative;
  min-height: 456px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 22px;
  background: #16374b;
  box-shadow: 0 8px 24px rgb(6 35 50 / 12%), inset 0 0 0 1px rgb(255 255 255 / 18%);
}

.landscape-scene  {
  --celestial-drop: 260px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 23% 17%, rgb(255 235 202 / 65%), transparent 48%), linear-gradient(#94b5ce, #cededc 48%, #789bad);
}

.landscape-scene::before  {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 18%, rgb(172 87 85 / 20%), transparent 46%), linear-gradient(#160e25, #292039 49%, #31263c 74%, #140f22);
  content: "";
  opacity: 0;
  transition: opacity 1400ms ease;
}

.landscape-scene::after  {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(118deg, transparent 9%, rgb(255 255 255 / 15%) 10%, rgb(255 255 255 / 2%) 34%, transparent 35%, transparent 69%, rgb(255 255 255 / 9%) 70%, transparent 88%), radial-gradient(ellipse at 0 0, rgb(255 255 255 / 24%), transparent 60%);
  content: "";
  pointer-events: none;
}

.scene-sky-objects  {
  mask: var(--sky-mask) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--sky-mask) 0 0 / 100% 100% no-repeat;
  position: absolute;
  z-index: 1;
  inset: 0;
}

.scene-sun, .scene-moon  {
  position: absolute;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.scene-sun  {
  top: 15%;
  left: 23%;
  border: 1px solid rgb(255 254 231 / 88%);
  background: url("images/sun.svg") center / cover;
  box-shadow: inset 2px 3px 8px rgb(255 255 255 / 80%), inset -3px -5px 10px rgb(214 147 67 / 24%), 0 0 35px 12px rgb(255 225 148 / 24%);
  transition: transform 1100ms cubic-bezier(.4,0,.2,1) 300ms;
}

.scene-moon  {
  top: 14%;
  right: 19%;
  border: 1px solid rgb(255 219 170 / 84%);
  background: url("images/moon-halloween.svg") center / cover;
  box-shadow: inset 2px 3px 7px rgb(255 238 209 / 70%), inset -4px -5px 10px rgb(180 80 33 / 28%), 0 0 34px 10px rgb(255 163 78 / 18%);
  transform: translate(-24px, var(--celestial-drop));
  transition: transform 1100ms cubic-bezier(.4,0,.2,1);
}

.scene-land  {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1400ms ease;
}

.scene-day  {
  opacity: 1;
}

.scene-night  {
  opacity: 0;
}

body.night .scene-day  {
  opacity: 0;
}

body.night .scene-night  {
  opacity: 1;
}

.scene-panel::after  {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(transparent 36%, rgb(3 20 34 / 16%) 53%, rgb(3 20 34 / 74%) 100%);
  content: "";
  pointer-events: none;
}

body.night .landscape-scene::before  {
  opacity: 1;
}

.landscape-scene::after, .login-card::before  {
  transition: opacity 1400ms ease;
}

body.night .landscape-scene::after  {
  opacity: .18;
}

body.night .login-card::before  {
  opacity: .2;
}

body.night .scene-panel  {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px #b67b481a;
}

body.night .scene-sun  {
  transform: translate(26px, var(--celestial-drop));
  transition-delay: 0ms;
}

body.night .scene-moon  {
  transform: translate(0, 0);
  transition-delay: 350ms;
}

.page-landscape  {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.page-landscape::after  {
  background: linear-gradient(118deg, transparent 12%, rgb(255 255 255 / 9%) 13%, transparent 38%, transparent 72%, rgb(255 255 255 / 5%) 73%, transparent 95%), linear-gradient(transparent 50%, rgb(3 20 34 / 16%) 100%);
}

.scene-copy  {
  position: absolute;
  z-index: 4;
  top: 75%;
  left: 50%;
  width: min(82%, 250px);
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 12px rgb(0 10 25 / 24%);
}

.scene-copy h2  {
  margin: 0 0 19px;
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.2;
}

.scene-copy p  {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.form-panel  {
  position: relative;
  display: flex;
  align-items: center;
  padding: 82px clamp(28px, 4vw, 46px) 40px;
  border-radius: 22px;
  background: rgb(255 255 255 / 12%);
}

.login-form  {
  width: 100%;
}

h1  {
  margin: 0 0 42px;
  color: #173e4b;
  font-size: 30px;
  text-align: center;
}

.field  {
  position: relative;
  margin-bottom: 16px;
}

.email-owl  {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: calc(100% - 3.5px);
  width: 50.4px;
  height: 58.8px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2.8px 4.2px rgb(0 0 0 / 30%));
  transition: opacity 220ms ease;
}

.owl-vector  {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.owl-breath  {
  transform-origin: 1500px 3100px;
}

.owl-head  {
  transform-origin: 1500px 1850px;
  transform: translate(var(--owl-head-x, 0px), var(--owl-head-y, 0px)) rotate(var(--owl-tilt, 0deg));
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}

.owl-gaze  {
  transform: translate(var(--owl-gaze-x, 0px), var(--owl-gaze-y, 0px));
  transition: transform 260ms ease-out;
}

.owl-eyes  {
  transform-box: fill-box;
  transform-origin: center;
}

.email-owl.is-lit .owl-breath  {
  animation: owl-breathe 3.6s ease-in-out infinite;
}

.email-owl.is-lit .owl-eyes  {
  animation: owl-blink 4.8s ease-in-out infinite;
}

.email-owl.just-lit .owl-vector  {
  animation: owl-startle 650ms cubic-bezier(.2,.8,.2,1);
}

@keyframes owl-breathe  {
  0%,100%  {
    transform: translateY(0) scale(1);
  }
  50%  {
    transform: translateY(-16px) scale(1.014,1.018);
  }
}

@keyframes owl-blink  {
  0%,5%,11%,55%,61%,100%  {
    transform: scaleY(1);
  }
  8%,58%  {
    transform: scaleY(.06);
  }
}

@keyframes owl-startle  {
  0%,100%  {
    transform: translateY(0);
  }
  35%  {
    transform: translateY(-4px) rotate(-3deg);
  }
  65%  {
    transform: translateY(-1px) rotate(2deg);
  }
}

.sr-only  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.field input  {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 14px;
  outline: none;
  background: rgb(255 255 255 / 34%);
  color: #173e4b;
  font-size: 16px;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 50%), 0 4px 12px rgb(15 50 69 / 4%);
}

.field input::placeholder  {
  color: #526f7b;
}

.field input:focus  {
  border-color: #238997;
  box-shadow: 0 0 0 3px rgb(20 129 144 / 14%), inset 0 1px 0 rgb(255 255 255 / 70%);
}

.field.password input  {
  padding-right: 46px;
  font-family: inherit;
}

.field.password input::placeholder  {
  font-family: inherit;
}

.eye  {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transform: translateY(-50%);
}

.eye:hover img  {
  filter: brightness(1.25);
}

.eye img  {
  width: 18px;
  height: 18px;
}

body.night.flashlight-on .eye img  {
  opacity: 0;
}

body:not(.night) .eye[aria-pressed="true"]  {
  background: rgb(20 129 144 / 12%);
}

.text-action  {
  padding: 0;
  border: 0;
  background: transparent;
  color: #176978;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.text-action:hover  {
  color: #104e5d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.forgot  {
  display: block;
  margin: 0 0 24px auto;
}

.submit  {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 14px;
  background: linear-gradient(135deg, #148d9d, #136a7b);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgb(16 110 127 / 23%), inset 0 1px 0 rgb(255 255 255 / 22%);
}

.submit img  {
  width: 17px;
  height: 17px;
  transition: transform 180ms ease;
}

.submit:hover  {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgb(16 110 127 / 30%), inset 0 1px 0 rgb(255 255 255 / 30%);
}

.submit:hover img  {
  transform: translateX(3px);
}

.submit:active  {
  transform: translateY(0);
}

.signup-row  {
  margin: 23px 0 0;
  color: #425f6b;
  font-size: 14px;
  text-align: center;
}

.status  {
  margin: 14px 0 0;
  color: #256a75;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.status:empty  {
  display: none;
}

body.night .login-card  {
  border-color: #98623940;
  box-shadow: 0 32px 90px #06020c80, 0 8px 24px #06020c50,
  inset 0 1px 0 #c48a5014, inset 0 -1px 0 #b875470d;
}

body.night .form-panel  {
  background-color: rgb(21 13 31 / 40%);
  box-shadow: inset 0 0 0 1px #b67b481a;
}

body.night h1  {
  color: #f5f8fa;
}

body.night .field input  {
  border-color: #ac774a45;
  background-color: rgb(32 23 43 / 68%);
  color: #f5f8fa;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 4px 12px rgb(0 8 20 / 6%);
}

body.night .field input::placeholder  {
  color: #b1c7d4;
}

body.night.flashlight-on #password  {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #e5f7f5;
}

body.night.flashlight-on #password::placeholder  {
  -webkit-text-fill-color: #b1c7d4;
}

body.night .eye img  {
  filter: brightness(2);
}

body.night .signup-row  {
  color: #c1cbd2;
}

body.night .status  {
  color: #a1e4e9;
}

.flash-beam  {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  filter: blur(12px);
  transform-origin: 0 50%;
}

.flash-beam::before  {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(255 224 156 / 75.4%) 0%, rgb(255 219 145 / 55.9%) 16%, rgb(255 214 140 / 32.5%) 35%, rgb(255 207 130 / 14.3%) 55%, rgb(255 202 124 / 3.9%) 75%, rgb(255 202 124 / 0%) 96%, transparent 100%);
  mask: var(--beam-mask) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--beam-mask) 0 0 / 100% 100% no-repeat;
  content: "";
}

.password-reveal  {
  position: fixed;
  z-index: 6;
  overflow: hidden;
  color: #e9fbf9;
  font: 16px 'Grenze Gotisch', Georgia, serif;
  pointer-events: none;
}

.password-reveal > span  {
  position: absolute;
  top: 0;
  left: 17px;
  display: block;
  height: 52px;
  line-height: 52px;
  white-space: pre;
}

.password-reveal .reveal-char  {
  --lit: 0;
  position: relative;
  display: inline-block;
  width: 1ch;
  height: 100%;
  vertical-align: top;
}

.reveal-char .masked-char, .reveal-char .plain-char  {
  position: absolute;
  inset: 0;
  text-align: center;
  transition: opacity 90ms linear;
}

.reveal-char .masked-char  {
  opacity: calc(1 - var(--lit));
  color: #f5f8fa;
}

.reveal-char .plain-char  {
  opacity: var(--lit);
}

.flashlight  {
  position: fixed;
  z-index: 7;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgb(255 246 157 / 80%));
  transform-origin: center;
}

.flashlight img  {
  width: 33px;
  height: 33px;
}

.flash-beam, .flashlight, .password-reveal  {
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}

body.night.flashlight-on .flash-beam, body.night.flashlight-on .flashlight, body.night.flashlight-on .password-reveal  {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

:focus-visible  {
  outline: 3px solid #05c4d6;
  outline-offset: 3px;
}

@media (max-width: 640px)  {
  .login-card  {
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 26px;
  }
  .scene-panel  {
    min-height: 220px;
    border-radius: 18px;
  }
  .scene-copy  {
    width: min(88%, 340px);
  }
  .scene-copy h2  {
    margin-bottom: 7px;
    font-size: 21px;
  }
  .scene-copy p  {
    font-size: 11px;
  }
  .form-panel  {
    padding: 26px 22px 24px;
  }
  h1  {
    margin-bottom: 22px;
    font-size: 28px;
  }
  .field  {
    margin-bottom: 14px;
  }
  .forgot  {
    margin-bottom: 18px;
  }
  .signup-row  {
    margin-top: 18px;
  }
}

@media (max-width: 380px)  {
  .form-panel  {
    padding-inline: 19px;
  }
}

@media (prefers-reduced-motion: reduce)  {
  *, *::before, *::after  {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .email-owl *  {
    animation: none !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))  {
  .login-card  {
    background-color: rgb(236 247 250 / 95%);
  }
  body.night .login-card  {
    background-color: rgb(4 12 23 / 97%);
  }
}

.summit-stage  {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1400ms ease;
}

.summit-stage > svg  {
  display: block;
  width: 100%;
  height: 100%;
}

body.night .summit-stage  {
  opacity: 1;
}

.theme-toggle  {
  opacity: .95;
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 86px;
  padding: 0;
  border: 1px solid #e6f7f4bd;
  border-radius: 24px;
  background: linear-gradient(160deg, #e2efecb8, #79a4b2ad);
  box-shadow: inset 0 1px 0 #ffffff9c, inset 0 -2px 7px #345e6e1a, 0 5px 14px #264f6024;
}

.theme-toggle:hover  {
  box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -2px 7px #345e6e1a, 0 6px 18px #264f6030, 0 0 0 3px #e4f8f130;
}

.theme-toggle-thumb  {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffffff, #e7f4f0);
  box-shadow: inset 0 1px 0 #ffffffed, 0 2px 5px #244b6030;
}

.theme-toggle svg  {
  position: absolute;
  left: 10px;
  width: 22px;
  height: 22px;
}

.theme-toggle .theme-sun  {
  top: 10px;
  color: #3f7584;
}

.theme-toggle .theme-moon  {
  bottom: 10px;
  color: #3d667b80;
}

body.night .theme-toggle  {
  border-color: #b47c55a0;
  box-shadow: inset 0 2px 7px #08040f70, inset 0 -2px 7px #08040f20, 0 4px 16px #08040f55;
}

body.night .theme-toggle:hover  {
  box-shadow: inset 0 2px 7px #08040f70, inset 0 -2px 7px #08040f20, 0 4px 16px #08040f55, 0 0 0 3px #d18b4230;
}

body.night .theme-toggle-thumb  {
  transform: translateY(42px);
  box-shadow: inset 0 1px 0 #ffffffb0, 0 0 12px #ffc37b30, 0 2px 5px #09041360;
}

body.night .theme-toggle .theme-sun  {
  color: #e8ad6e70;
}

body.night .theme-toggle .theme-moon  {
  color: #623956;
}

body.night .submit  {
  border-color: #f4ae6266;
  box-shadow: 0 8px 22px #b54f2829, inset 0 1px 0 #ffdfa438;
  color: #241222;
}

body.night .text-action  {
  color: #ffc48d;
}

body.night .text-action:hover  {
  color: #ffe2bc;
}

body.night .field input:focus  {
  border-color: #eaa267;
  box-shadow: 0 0 0 3px #eea26222;
}

@media (max-width: 640px)  {
  .theme-toggle  {
    top: 14px;
    right: 14px;
  }
}

.login-shell  {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
}

.login-shell .login-card  {
  width: 100%;
}

.halloween-vines  {
  position: absolute;
  z-index: 3;
  inset: -42px -44px;
  pointer-events: none;
}

.halloween-vines > svg  {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body  {
  padding: 65px 62px;
}

@media (max-width: 640px)  {
  body  {
    padding: 48px 32px;
  }
  .login-shell  {
    width: min(430px, 100%);
  }
  .halloween-vines  {
    inset: -25px -27px;
  }
}

body  {
  padding-top: 100px;
  padding-bottom: 85px;
}

.lantern-flame  {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

body.night .lantern-flame  {
  animation: candle-flame 870ms ease-in-out infinite alternate;
}

body.night .lantern-glass  {
  animation: candle-glass 1730ms ease-in-out infinite;
}

body.night .lantern-halo  {
  animation: candle-halo 2190ms ease-in-out infinite;
}

body.night .pumpkin-glow  {
  animation: pumpkin-light 3100ms ease-in-out infinite;
}

body.night .lantern-swing  {
  transform-origin: 0px -25px;
  animation: lantern-sway 4700ms ease-in-out infinite;
}

body.night .lantern-ember  {
  animation: candle-ember 1900ms ease-out infinite;
}

body.night .halloween-vines .lantern-flame  {
  animation-delay: var(--fire-delay, 0ms);
}

body.night .halloween-vines .lantern-halo, body.night .halloween-vines .lantern-glass  {
  animation-delay: var(--glow-delay, 0ms);
}

@keyframes candle-flame  {
  0%  {
    transform: scale(.9, 1.05) skewX(-5deg);
    opacity: .9;
  }
  22%  {
    transform: scale(1.08, .88) skewX(4deg);
  }
  45%  {
    transform: scale(.85, 1.16) skewX(-3deg);
    opacity: 1;
  }
  68%  {
    transform: scale(1.03, .97) skewX(6deg);
  }
  100%  {
    transform: scale(.92, 1.1) skewX(-4deg);
    opacity: .94;
  }
}

@keyframes candle-glass  {
  0%,100%  {
    opacity: .62;
  }
  15%,54%  {
    opacity: .78;
  }
  34%,72%  {
    opacity: .57;
  }
  86%  {
    opacity: .73;
  }
}

@keyframes candle-halo  {
  0%,100%  {
    opacity: .18;
  }
  31%  {
    opacity: .32;
  }
  51%  {
    opacity: .22;
  }
  76%  {
    opacity: .29;
  }
}

@keyframes pumpkin-light  {
  0%,100%  {
    opacity: .75;
  }
  43%  {
    opacity: 1;
  }
  68%  {
    opacity: .83;
  }
}

@keyframes lantern-sway  {
  0%,100%  {
    transform: rotate(-1.4deg);
  }
  50%  {
    transform: rotate(1.4deg);
  }
}

@keyframes candle-ember  {
  0%  {
    transform: translate(0,0);
    opacity: 0;
  }
  20%  {
    opacity: .8;
  }
  100%  {
    transform: translate(3px,-20px);
    opacity: 0;
  }
}

@media (max-width: 640px)  {
  body  {
    padding-top: 70px;
    padding-bottom: 60px;
  }
}

@media (prefers-reduced-motion: reduce)  {
  .halloween-vines *  {
    animation: none !important;
  }
}

#halloween-spider  {
  position: fixed;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
}

#halloween-spider.is-active  {
  opacity: 1;
}

.scene-sun::before, .scene-moon::before, .scene-sun::after, .scene-moon::after  {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.scene-sun::before, .scene-moon::before  {
  inset: -27px;
  background: radial-gradient(circle, #ffdda43b 12%, #ffd79318 45%, transparent 72%);
  animation: celestial-breathe 4800ms ease-in-out infinite;
}

.scene-sun::after, .scene-moon::after  {
  inset: -10px;
  border: 1px solid #ffe1b922;
  box-shadow: 0 0 12px #ffd79720;
  animation: celestial-ring 4800ms ease-out infinite;
}

.scene-sun::before  {
  background: radial-gradient(circle, #ffe68166, #ffd76330 43%, transparent 72%);
  animation-duration: 3900ms;
}

.scene-sun::after  {
  border-color: #fff1b43b;
  animation-duration: 3900ms;
}

@keyframes celestial-breathe  {
  0%,100%  {
    transform: scale(.92);
    opacity: .5;
  }
  50%  {
    transform: scale(1.17);
    opacity: 1;
  }
}

@keyframes celestial-ring  {
  0%  {
    transform: scale(.85);
    opacity: 0;
  }
  20%  {
    opacity: .55;
  }
  100%  {
    transform: scale(1.7);
    opacity: 0;
  }
}

.sky-flight  {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms ease;
}

body.night .sky-flight  {
  opacity: 1;
}

.sky-bat, .sky-witch  {
  position: absolute;
  left: -18%;
  top: var(--fly-height, 24%);
  width: var(--fly-size, 30px);
  color: #100919;
  animation: sky-roam var(--fly-duration, 19s) linear infinite;
  animation-delay: var(--fly-delay, 0s);
  animation-play-state: paused;
}

.flyer-facing  {
  display: block;
  width: 100%;
  animation: flight-turn var(--fly-duration, 19s) steps(1) infinite;
  animation-delay: var(--fly-delay, 0s);
  animation-play-state: paused;
}

.sky-flight svg  {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.bat-wing  {
  transform-origin: 0 1px;
  animation: bat-flap 220ms ease-in-out infinite alternate;
  animation-play-state: paused;
}

.bat-wing-right  {
  animation-name: bat-flap-right;
}

body.night .sky-bat, body.night .sky-witch, body.night .flyer-facing, body.night .bat-wing  {
  animation-play-state: running;
}

.bat-1  {
  --fly-height: 18%;
  --fly-duration: 23s;
  --fly-delay: -4s;
  --fly-size: 29px;
}

.bat-2  {
  --fly-height: 31%;
  --fly-duration: 29s;
  --fly-delay: -12s;
  --fly-size: 23px;
  opacity: .78;
}

.bat-3  {
  --fly-height: 9%;
  --fly-duration: 18s;
  --fly-delay: -9s;
  --fly-size: 19px;
  opacity: .68;
}

.bat-4  {
  --fly-height: 25%;
  --fly-duration: 26s;
  --fly-delay: -18s;
  --fly-size: 34px;
}

.bat-5  {
  --fly-height: 13%;
  --fly-duration: 31s;
  --fly-delay: -6s;
  --fly-size: 17px;
  opacity: .65;
}

.bat-6  {
  --fly-height: 35%;
  --fly-duration: 22s;
  --fly-delay: -15s;
  --fly-size: 25px;
}

.scene-panel .sky-bat  {
  --fly-size: 20px;
}

.scene-panel .bat-2  {
  --fly-size: 16px;
}

.scene-panel .bat-3  {
  --fly-size: 13px;
}

.sky-witch  {
  --fly-duration: 38s;
  --fly-delay: -7s;
}

@keyframes sky-roam  {
  0%  {
    left: -18%;
    transform: translateY(0) rotate(-3deg);
  }
  12%  {
    transform: translateY(-12px) rotate(3deg);
  }
  25%  {
    transform: translateY(9px) rotate(-4deg);
  }
  38%  {
    transform: translateY(-8px) rotate(2deg);
  }
  50%  {
    left: 112%;
    transform: translateY(0);
  }
  62%  {
    transform: translateY(10px) rotate(-2deg);
  }
  75%  {
    transform: translateY(-13px) rotate(3deg);
  }
  88%  {
    transform: translateY(7px) rotate(-3deg);
  }
  100%  {
    left: -18%;
    transform: translateY(0);
  }
}

@keyframes flight-turn  {
  0%  {
    transform: scaleX(1);
  }
  50%  {
    transform: scaleX(-1);
  }
}

@keyframes bat-flap  {
  from  {
    transform: rotate(-13deg) scaleY(.58);
  }
  to  {
    transform: rotate(15deg) scaleY(1);
  }
}

@keyframes bat-flap-right  {
  from  {
    transform: rotate(13deg) scaleY(.58);
  }
  to  {
    transform: rotate(-15deg) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce)  {
  .scene-sun::before, .scene-moon::before, .scene-sun::after, .scene-moon::after, .sky-flight *  {
    animation: none !important;
  }
  .sky-bat  {
    left: 22%;
  }
  .bat-2  {
    left: 72%;
  }
  .bat-3  {
    left: 48%;
  }
  .bat-4, .bat-5, .bat-6, .sky-witch  {
    display: none;
  }
}

.sky-witch  {
  --fly-size: 100px;
  left: var(--witch-left);
  top: var(--witch-top);
  animation-name: witch-roam;
  filter: drop-shadow(0 1px 0 #ae7b9655);
}

@keyframes witch-roam  {
  0%,100%  {
    left: var(--witch-left);
    transform: translateY(0) rotate(-3deg);
  }
  12%,62%  {
    transform: translateY(-8px) rotate(2deg);
  }
  25%,75%  {
    transform: translateY(7px) rotate(-2deg);
  }
  38%,88%  {
    transform: translateY(-5px) rotate(2deg);
  }
  50%  {
    left: var(--witch-right);
    transform: translateY(0) rotate(3deg);
  }
}

.sky-witch img  {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}

body.night .field input:hover:not(:focus)  {
  border-color: #c697736e;
}

body.night :focus-visible  {
  outline-color: #efae74;
}

.pumpkin-face-normal, .pumpkin-face-smile  {
  transition: opacity 240ms ease;
}

.pumpkin-face-smile  {
  opacity: 0;
}

.pumpkin-reaction.is-beam-lit .pumpkin-face-normal  {
  opacity: 0;
}

.pumpkin-reaction.is-beam-lit .pumpkin-face-smile  {
  opacity: 1;
}

.pumpkin-reaction  {
  transform-origin: 0 30px;
}

.pumpkin-reaction.is-beam-lit  {
  animation: pumpkin-chuckle 1100ms ease-in-out infinite;
}

@keyframes pumpkin-chuckle  {
  0%, 52%, 100%  {
    transform: translateY(0) rotate(0) scale(1);
  }
  16%  {
    transform: translateY(-1.5px) rotate(-2deg) scale(1.025,.985);
  }
  30%  {
    transform: translateY(0) rotate(1.5deg) scale(.99,1.015);
  }
  42%  {
    transform: translateY(-.7px) rotate(-1deg) scale(1.012,.992);
  }
}

.leaf-reaction  {
  transform-box: view-box;
  transform-origin: 0 0;
}

body.night-exiting .sky-bat, body.night-exiting .sky-witch,
body.night-exiting .flyer-facing  {
  animation-play-state: paused;
}

body.night-exiting .theme-toggle-thumb  {
  transform: translateY(0);
}

body.night-exiting .scene-moon  {
  transform: translate(-24px, var(--celestial-drop));
  transition-delay: 2200ms;
}

body.night-exiting .scene-sun  {
  transform: translate(0, 0);
  transition-delay: 2700ms;
}

h1, .scene-copy h2  {
  font-family: 'Grenze Gotisch', Georgia, serif;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: .6px;
}

.submit  {
  font-size: 16px;
}

:root  {
  --theme-duration: 1400ms;
  --theme-easing: cubic-bezier(.4,0,.2,1);
}

.login-card::after  {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, #25172eed, #160e22f2 60%, #211329ed) padding-box, linear-gradient(135deg, #d99a647d, #76536b70 27%, #36273e 52%, #9a604a88 78%, #e6ac7666) border-box;
  opacity: 0;
  transition: opacity var(--theme-duration) var(--theme-easing);
}

.login-card::before  {
  z-index: 1;
}

.login-card > .scene-panel, .login-card > .form-panel  {
  z-index: 2;
}

.theme-toggle::before, .theme-toggle-thumb::before, .submit::before  {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--theme-duration) var(--theme-easing);
}

.theme-toggle::before  {
  background: linear-gradient(160deg, #21132f, #3b2144);
}

.theme-toggle-thumb  {
  z-index: 1;
}

.theme-toggle-thumb::before  {
  background: radial-gradient(circle at 35% 25%, #fff7de, #f2cf9d);
}

.theme-toggle svg  {
  z-index: 2;
}

.submit  {
  position: relative;
  isolation: isolate;
  background-clip: padding-box;
}

.submit::before  {
  z-index: -1;
  background: linear-gradient(135deg, #f69b49, #ce622b);
}

body.night .login-card::after, body.night .theme-toggle::before,
body.night .theme-toggle-thumb::before, body.night .submit::before  {
  opacity: 1;
}

.login-card, .form-panel, .scene-panel, .field input  {
  transition: background-color var(--theme-duration) var(--theme-easing), border-color var(--theme-duration) var(--theme-easing), box-shadow var(--theme-duration) var(--theme-easing), color var(--theme-duration) var(--theme-easing);
}

.submit  {
  transition: transform 180ms ease, border-color var(--theme-duration) var(--theme-easing), box-shadow var(--theme-duration) var(--theme-easing), color var(--theme-duration) var(--theme-easing);
}

.theme-toggle  {
  transition: border-color var(--theme-duration) var(--theme-easing), box-shadow var(--theme-duration) var(--theme-easing);
}

.theme-toggle-thumb  {
  transition: transform 600ms cubic-bezier(.22,1,.36,1), box-shadow var(--theme-duration) var(--theme-easing);
}

h1, .signup-row, .status, .text-action, .field input::placeholder,
.theme-toggle svg  {
  transition: color var(--theme-duration) var(--theme-easing);
}

.eye  {
  transition: background-color var(--theme-duration) var(--theme-easing);
}

.eye img  {
  transition: opacity 700ms ease, filter var(--theme-duration) var(--theme-easing);
}