:root {
  color-scheme: light dark;
  --sky-top: #9abed4;
  --sky-mid: #d6e8ef;
  --sky-bottom: #f4f1e8;
  --sky-text: #203849;
  --sky-lead: #385467;
  --sky-muted: #667e8e;
  --sky-link: #3d6f8f;
  --sky-haze: rgba(255, 255, 255, 0.16);
  --sky-temperature: rgba(255, 255, 255, 0);
  --sky-shade: rgba(0, 0, 0, 0);
  --today-bg-top: #151b24;
  --today-bg-mid: #1b2430;
  --today-bg-bottom: #0f141c;
  --today-text: #e9edf0;
  --today-muted: #929ba4;
  --side: clamp(24px, 7vw, 80px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 16px;
  line-height: 1.82;
  letter-spacing: 0;
}

.today-page {
  background: var(--today-bg-bottom);
}

a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
}

a:hover {
  opacity: 0.82;
}

a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.45rem;
}

.sky-page {
  color: var(--sky-text);
  background:
    linear-gradient(180deg, var(--sky-haze), transparent 38%),
    radial-gradient(circle at 58% 16%, var(--sky-temperature), transparent 48%),
    linear-gradient(180deg, var(--sky-shade), transparent 64%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-bottom) 100%);
  transition:
    background 90s linear,
    color 90s linear;
}

.sky-page.sky-morning {
  --sky-haze: rgba(255, 255, 255, 0.19);
  --sky-temperature: rgba(255, 235, 205, 0.08);
}

.sky-page.sky-day {
  --sky-haze: rgba(255, 255, 255, 0.14);
  --sky-temperature: rgba(225, 244, 255, 0.05);
}

.sky-page.sky-evening {
  --sky-haze: rgba(255, 244, 228, 0.1);
  --sky-temperature: rgba(241, 196, 166, 0.08);
  --sky-shade: rgba(45, 52, 70, 0.03);
}

.sky-page.sky-night {
  --sky-haze: rgba(255, 255, 255, 0.045);
  --sky-temperature: rgba(164, 188, 226, 0.035);
  --sky-shade: rgba(0, 0, 0, 0.1);
}

.sky-page::before,
.sky-page.sky-rain::after,
.today-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sky-page::before {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 52%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.1) 68%, rgba(255, 255, 255, 0.18) 100%);
}

.sky-page.sky-rain::after {
  z-index: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(180, 205, 218, 0.04), rgba(52, 74, 92, 0.035));
  opacity: 0.55;
  backdrop-filter: blur(0.35px) saturate(0.96);
}

.sky-stage,
.today-stage {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}

.sky-stage {
  overflow: hidden;
}

.quiet {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
}

.quiet--sky {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  pointer-events: none;
}

h1,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: inherit;
  font-size: clamp(3rem, 13vw, 6.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.lead {
  margin: 2.8rem 0 0;
  color: var(--sky-lead);
  font-size: clamp(1rem, 3.6vw, 1.14rem);
}

.sub {
  position: absolute;
  left: var(--side);
  bottom: clamp(108px, 18vh, 168px);
  max-width: min(20em, calc(100vw - var(--side) * 2));
  margin: 0;
  color: var(--sky-muted);
  font-size: 0.78rem;
  line-height: 1.9;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 4200ms ease,
    transform 4200ms ease;
  pointer-events: none;
}

.sub.is-visible {
  opacity: 0.3;
  transform: translateY(0);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
  margin-top: 10vh;
  color: var(--sky-link);
  font-size: 0.78rem;
}

.actions a:not(:first-child) {
  color: var(--sky-muted);
}

.quiet--sky h1 {
  position: absolute;
  top: clamp(56px, 14vh, 132px);
  left: var(--side);
  margin: 0;
  color: var(--sky-muted);
  font-size: clamp(0.76rem, 2.2vw, 0.92rem);
  line-height: 1.7;
  opacity: 0.28;
}

.quiet--sky .actions {
  position: absolute;
  right: var(--side);
  bottom: clamp(32px, 8vh, 72px);
  left: var(--side);
  margin: 0;
  color: var(--sky-muted);
  font-size: 0.72rem;
  opacity: 0.28;
  transition: opacity 900ms ease;
  pointer-events: auto;
}

.quiet--sky .actions:hover,
.quiet--sky .actions:focus-within {
  opacity: 0.56;
}

.quiet--sky .actions a {
  text-decoration-color: rgba(102, 126, 142, 0.16);
}

.shooting-star {
  position: fixed;
  top: var(--star-top, 12vh);
  left: var(--star-left, 24vw);
  z-index: 0;
  width: clamp(56px, 13vw, 118px);
  height: 1px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(237, 243, 250, 0.72), transparent);
  box-shadow: 0 0 7px rgba(237, 243, 250, 0.18);
  transform: translate3d(0, 0, 0) rotate(-13deg);
  transition:
    opacity 320ms ease,
    transform 1500ms ease-out;
}

.shooting-star.is-visible {
  opacity: 0.32;
  transform: translate3d(34vw, 10vh, 0) rotate(-13deg);
}

.today-stage {
  display: grid;
  place-items: center;
  padding: clamp(40px, 8vw, 88px) var(--side);
  color: var(--today-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 35%),
    linear-gradient(180deg, var(--today-bg-top) 0%, var(--today-bg-mid) 52%, var(--today-bg-bottom) 100%);
}

.today-stage::before {
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.035) 62%, transparent 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 48%, rgba(255, 255, 255, 0.024));
}

.quiet--today {
  display: grid;
  justify-items: start;
  width: min(100%, 680px);
}

.today-message {
  margin: 0;
  color: var(--today-text);
  font-size: clamp(2.7rem, 12vw, 6.1rem);
  font-weight: 400;
  line-height: 1.26;
  transition:
    opacity 1400ms ease,
    transform 1400ms ease;
}

.today-message span {
  display: block;
}

.today-message.is-changing {
  opacity: 0.16;
  transform: translateY(5px);
}

.actions--today {
  margin-top: 13vh;
  color: var(--today-muted);
}

.actions--today a {
  color: var(--today-muted);
}

@media (max-width: 520px) {
  .quiet--sky {
    margin-left: 0;
  }

  .actions {
    margin-top: 9vh;
  }

  .today-stage {
    place-items: center start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .shooting-star {
    display: none !important;
  }
}