@font-face {
  font-family: Walkway;
  src: url('/assets/fonts/Walkway-SemiBold.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Special Elite';
  src: url('/assets/fonts/SpecialElite-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
:root {
  --scene-paper: #ffffff;
  --scene-ink: #000000;
  --scene-fade: 5000ms;
}
#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: var(--scene-paper);
  color: var(--scene-ink);
  contain: layout paint;
}
.scene-monochrome {
  position: absolute;
  inset: 0;
  background: #fff;
  color: #000;
  filter: invert(0);
}
#scene[data-night='true'] .scene-monochrome { filter: invert(1); }
#scene[data-transition='true'] .scene-monochrome { transition: filter var(--scene-fade) linear; }
.scene-garden {
  position: absolute;
  inset: auto 0 0;
  height: min(37svh, 440px);
  overflow: hidden;
  --ink: #000000;
  --paper: #ffffff;
}
.scene-garden svg { display: block; width: 100%; height: 100%; }
.scene-garden .ink-stroke {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.scene-garden .ink-fill { fill: #fff; }
.scene-sky { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene-sun, .scene-moon { position: absolute; width: 36px; height: 36px; margin: -18px; }
.scene-sun svg, .scene-moon svg { width: 100%; height: 100%; overflow: visible; }
.scene-sun { color: #000; opacity: 1; }
.scene-moon { color: #fff; opacity: 0; filter: drop-shadow(0 0 5px #ffffff50); }
.scene-moon path { fill: currentColor; stroke: none; }
.scene-stars { position: absolute; inset: 0; color: #fff; opacity: 0; }
.scene-stars svg { position: absolute; overflow: visible; filter: drop-shadow(0 0 3px #ffffff65); }
.scene-stars path { fill: currentColor; stroke: none; }
#scene[data-night='true'] .scene-sun { opacity: 0; }
#scene[data-night='true'] .scene-moon, #scene[data-night='true'] .scene-stars { opacity: 1; }
#scene[data-transition='true'] :is(.scene-sun, .scene-moon, .scene-stars) { transition: opacity var(--scene-fade) linear; }
.scene-clouds { position: absolute; inset: 0; overflow: hidden; opacity: .66; filter: invert(0); }
#scene[data-night='true'] .scene-clouds { filter: invert(1); }
#scene[data-transition='true'] .scene-clouds { transition: filter var(--scene-fade) linear; }
.scene-cloud {
  position: absolute;
  width: clamp(105px, 15vw, 220px);
  height: auto;
  opacity: .42;
  animation: scene-cloud-drift 190s ease-in-out infinite alternate;
}
.scene-cloud:nth-child(2n) { animation-direction: alternate-reverse; animation-duration: 240s; }
.scene-cloud path { stroke-linecap: round; stroke-linejoin: round; }
.scene-cloud path:first-child { fill: #fff; stroke: #000; }
.scene-cloud path:last-child { fill: none; stroke: #000; }
.scene-precipitation { position: absolute; inset: 0; width: 100%; height: 100%; color: #000; opacity: .19; }
.scene-rain-line { animation: scene-rain 1.7s linear infinite; }
.scene-snow-flake { animation: scene-snow 14s linear infinite; }
.scene-quiet-stars { opacity: .22; }
#scene[data-paused='true'] * { animation-play-state: paused !important; }
@keyframes scene-cloud-drift { from { transform: translateX(-2vw); } to { transform: translateX(5vw); } }
@keyframes scene-rain { from { transform: translate(0, -140px); } to { transform: translate(-25px, 170px); } }
@keyframes scene-snow { from { transform: translate(-12px, -100px); } to { transform: translate(30px, 130px); } }
@media (max-width: 700px) {
  .scene-garden { height: 31svh; }
  .scene-sun, .scene-moon { width: 29px; height: 29px; margin: -14.5px; }
  .scene-cloud { width: 110px; }
}
@media (max-height: 520px) and (min-width: 701px) { .scene-garden { height: 25svh; } }
@media (prefers-reduced-motion: reduce) {
  #scene *, #scene *::before, #scene *::after { animation: none !important; transition: none !important; }
}