:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --night: #10162d;
  --night-soft: #171c38;
  --lavender: #c9c1e8;
  --cream: #fff6e8;
  --muted: #acaac4;
  --gold: #f1d5a8;
  --pink: #efb8c1;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--night); scroll-behavior: smooth; }

body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 14%, rgba(76, 68, 117, .36), transparent 40rem),
    radial-gradient(ellipse at 7% 70%, rgba(72, 82, 123, .12), transparent 32rem),
    linear-gradient(180deg, #11172f 0%, #171a34 55%, #11162c 100%);
}

button, a { font: inherit; }
button { color: inherit; }

.sky {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: min(800px, 100vh);
  overflow: hidden;
  pointer-events: none;
  opacity: .8;
  mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%);
}

.sky-glow {
  position: absolute;
  top: -23rem;
  left: 50%;
  width: min(90vw, 900px);
  height: 52rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(139, 119, 173, .19), rgba(104, 102, 148, .055) 44%, transparent 68%);
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff1d7;
  box-shadow: 0 0 9px 2px rgba(255, 237, 207, .4);
  animation: twinkle 4.8s ease-in-out infinite alternate;
}
.star-a { top: 9%; left: 12%; animation-delay: -.9s; }
.star-b { top: 15%; left: 82%; width: 2px; height: 2px; animation-delay: -2.5s; }
.star-c { top: 31%; left: 8%; width: 2px; height: 2px; animation-delay: -3.2s; }
.star-d { top: 25%; left: 91%; animation-delay: -1.4s; }
.star-e { top: 43%; left: 18%; width: 2px; height: 2px; animation-delay: -2.2s; }
.star-f { top: 37%; left: 76%; width: 2px; height: 2px; animation-delay: -.3s; }
.star-g { top: 12%; left: 68%; width: 2px; height: 2px; animation-delay: -3.8s; }
.star-h { top: 48%; left: 88%; width: 2px; height: 2px; animation-delay: -1.7s; }

.cloud {
  position: absolute;
  width: 19rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(143, 139, 176, .055);
  filter: blur(20px);
  animation: drift 48s linear infinite alternate;
}
.cloud-one { top: 26%; left: -8rem; }
.cloud-two { top: 52%; right: -10rem; width: 23rem; animation-delay: -21s; animation-direction: alternate-reverse; }

.flight-trail {
  position: absolute;
  top: 17%;
  left: 18%;
  width: 64%;
  height: 6rem;
  border-top: 1px dashed rgba(241, 213, 168, .13);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.plane {
  position: absolute;
  top: -11px;
  left: 0;
  color: rgba(255, 238, 211, .68);
  font-size: 16px;
  transform: rotate(4deg);
  animation: plane-glide 20s ease-in-out infinite;
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(100% - 36px, 760px);
  min-height: 100vh;
  margin-inline: auto;
  padding: max(20px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom));
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 999px;
  color: #15182a;
  background: var(--cream);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cream);
  text-decoration: none;
}
.wordmark-moon { color: var(--gold); font-family: Georgia, serif; font-size: 24px; line-height: 1; }
.wordmark-text { color: rgba(255, 246, 232, .72); font-size: 10px; font-weight: 700; letter-spacing: .17em; }

.motion-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 5px 0 5px 7px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}
.motion-control:hover { color: var(--cream); }
.motion-control:focus-visible, .heart-button:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.switch-track {
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 19px;
  padding: 3px;
  border: 1px solid rgba(221, 214, 237, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  transition: background-color .2s ease, border-color .2s ease;
}
.switch-thumb { width: 11px; height: 11px; border-radius: 50%; background: #ddd6ed; transition: transform .2s ease, background-color .2s ease; }
.motion-control[aria-checked="true"] .switch-track { border-color: rgba(241, 213, 168, .58); background: rgba(241, 213, 168, .2); }
.motion-control[aria-checked="true"] .switch-thumb { transform: translateX(12px); background: var(--gold); }

.intro { position: relative; padding: 52px 0 30px; text-align: center; }
.moon-scene { position: relative; width: 88px; height: 88px; margin: 0 auto 24px; }
.moon-halo {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 226, 194, .08);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(241, 213, 168, .07), inset 0 0 24px rgba(180, 170, 207, .04);
}
.moon {
  position: absolute;
  inset: -7px 0 0;
  display: grid;
  place-items: center;
  color: #f4dcb6;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  text-shadow: 0 0 28px rgba(241, 213, 168, .22);
  transform: rotate(-18deg);
}
.moon-star { position: absolute; color: #f5e3c6; }
.moon-star-one { top: 11px; right: -2px; font-size: 13px; }
.moon-star-two { bottom: 9px; left: 0; font-size: 16px; color: var(--lavender); }
.eyebrow { margin: 0; color: #d4c1ad; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
h1 { margin: 15px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 8vw, 52px); font-weight: 400; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; }
.title-moon { display: inline-block; font-family: system-ui, sans-serif; font-size: .68em; vertical-align: .12em; }
.mobile-break { display: none; }
.subtitle { margin: 15px 0 0; color: #c6c2d4; font-size: 14px; letter-spacing: .01em; }

.countdown-panel {
  position: relative;
  overflow: hidden;
  padding: 22px clamp(18px, 5vw, 38px) 21px;
  border: 1px solid rgba(235, 225, 237, .13);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(175, 158, 205, .12), transparent 67%),
    linear-gradient(145deg, rgba(34, 39, 69, .92), rgba(25, 29, 54, .93));
  box-shadow: 0 24px 70px rgba(4, 7, 20, .22), inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
}
.countdown-panel::before, .countdown-panel::after { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); content: ""; opacity: .65; }
.countdown-panel::before { top: 24px; right: 24px; }
.countdown-panel::after { bottom: 21px; left: 23px; width: 3px; height: 3px; background: var(--lavender); }
.panel-topline { display: flex; align-items: center; justify-content: space-between; }
.panel-kicker { color: #d0c3d7; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.panel-orbit { position: relative; display: block; width: 27px; height: 27px; border: 1px solid rgba(224, 205, 181, .18); border-radius: 50%; }
.panel-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.panel-orbit i:nth-child(1) { top: 2px; right: 3px; }
.panel-orbit i:nth-child(2) { right: 1px; bottom: 6px; width: 3px; height: 3px; background: var(--lavender); }
.panel-orbit i:nth-child(3) { bottom: 2px; left: 5px; width: 2px; height: 2px; }

.countdown { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(4px, 2.2vw, 17px); margin: 15px 0 18px; }
.time-unit { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; }
.time-value { color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 10.5vw, 67px); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -.06em; line-height: 1; text-shadow: 0 0 22px rgba(236, 221, 248, .09); }
.time-label { color: #aaa8c0; font-size: clamp(8px, 2.2vw, 10px); font-weight: 700; letter-spacing: .12em; }
.time-separator { align-self: start; padding-top: 5px; color: rgba(221, 214, 237, .37); font-family: Georgia, serif; font-size: clamp(23px, 6vw, 34px); }
.arrival-note { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.arrival-note p { margin: 0; color: #f0e6d9; font-size: 13px; font-weight: 600; letter-spacing: .015em; }
.arrival-note p span { color: #d2bd9f; padding-inline: 3px; }
.arrival-caption { color: #a9a8be; font-size: 11px; }
.arrival-line { width: min(100%, 260px); height: 1px; background: linear-gradient(90deg, transparent, rgba(223, 203, 175, .2), transparent); }
.arrival-line:first-child { margin-bottom: 4px; }
.arrival-line:last-child { margin-top: 4px; }

.completed-state { display: grid; min-height: 122px; place-items: center; text-align: center; }
.completed-state p { max-width: 440px; margin: 12px 0; color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 6vw, 30px); line-height: 1.35; text-wrap: balance; }
.completed-sparkle { color: var(--gold); font-size: 18px; }
[hidden] { display: none !important; }

.note-section { margin: 31px 0 0; }
.note-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 5px 12px; }
.note-eyebrow { color: #dfcdbd; }
.note-date { margin: 5px 0 0; color: #aaa8c0; font-size: 12px; }
.note-index { display: inline-flex; align-items: center; gap: 7px; color: rgba(204, 193, 220, .55); font-family: Georgia, serif; font-size: 12px; letter-spacing: .06em; }
.note-index i { color: rgba(204, 193, 220, .3); font-style: normal; }

.message-card {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  padding: 27px clamp(23px, 7vw, 42px) 38px;
  border: 1px solid rgba(237, 225, 235, .14);
  border-radius: 23px;
  background:
    radial-gradient(ellipse at 96% 106%, rgba(167, 142, 174, .13), transparent 54%),
    linear-gradient(135deg, rgba(33, 38, 66, .94), rgba(27, 31, 57, .95));
  box-shadow: 0 19px 55px rgba(4, 7, 20, .18), inset 0 1px rgba(255, 255, 255, .035);
  transition: border-color .3s ease, background-color .3s ease;
}
.message-card.is-entering { animation: note-enter .45s cubic-bezier(.2, .8, .25, 1) both; }
.quote-mark { position: absolute; top: 8px; left: 19px; color: rgba(238, 209, 178, .27); font-family: Georgia, serif; font-size: 44px; line-height: 1; }
.message-text { position: relative; z-index: 1; max-width: 560px; margin: 4px 18px 0 0; color: #fff4e6; font-family: Georgia, "Times New Roman", serif; font-size: clamp(19px, 5.3vw, 26px); letter-spacing: -.015em; line-height: 1.5; text-wrap: pretty; }
.doodle { position: absolute; right: 13px; bottom: 6px; width: 105px; height: 65px; color: rgba(227, 191, 177, .73); opacity: .72; pointer-events: none; }
.snake { position: absolute; right: 29px; bottom: 0; width: 57px; height: 45px; color: #b8c09c; transform: rotate(-8deg); animation: snake-peek 8s ease-in-out infinite; }
.spider { position: absolute; right: 0; bottom: 10px; width: 37px; height: 48px; color: #c9b4cd; transform-origin: top center; animation: spider-sway 5.8s ease-in-out infinite; }
.heart-button { position: absolute; z-index: 2; right: 19px; bottom: 15px; display: grid; width: 38px; height: 38px; place-items: center; padding: 8px; border: 1px solid rgba(240, 205, 209, .22); border-radius: 50%; color: #efbdc6; background: rgba(22, 26, 49, .72); cursor: pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.heart-button:hover { transform: translateY(-2px); border-color: rgba(240, 205, 209, .5); background: rgba(64, 46, 69, .72); }
.heart-button svg { width: 20px; height: 20px; overflow: visible; fill: currentColor; }
.heart-button .sparkle-particle { position: absolute; top: 50%; left: 50%; color: #f6dcae; font-size: 12px; pointer-events: none; animation: sparkle-pop .85s ease-out both; }
.sparkle-1 { --spark-x: -24px; --spark-y: -24px; }
.sparkle-2 { --spark-x: 0px; --spark-y: -32px; animation-delay: .05s !important; }
.sparkle-3 { --spark-x: 24px; --spark-y: -22px; animation-delay: .1s !important; }
.sparkle-4 { --spark-x: -27px; --spark-y: -2px; animation-delay: .08s !important; }
.message-footnote { margin: 10px 5px 0; color: #918fa9; font-size: 11px; letter-spacing: .01em; }

.footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 38px 0 0; color: #cac1d0; text-align: center; }
.footer p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
.footer-star { color: #d6c29f; font-size: 10px; }
.noscript-note { position: relative; z-index: 2; max-width: 560px; margin: 16px auto; padding: 12px 18px; color: var(--cream); text-align: center; }
.offline-shell { display: grid; min-height: 100vh; align-content: center; text-align: center; }
.offline-link { color: var(--gold); }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

@keyframes twinkle { from { opacity: .32; transform: scale(.78); } to { opacity: .95; transform: scale(1.18); } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(15vw, 5px, 0); } }
@keyframes plane-glide { 0%, 17% { transform: translate3d(0, 0, 0) rotate(4deg); opacity: 0; } 26% { opacity: .9; } 72% { opacity: .9; } 87%, 100% { transform: translate3d(58vw, -19px, 0) rotate(4deg); opacity: 0; } }
@keyframes note-enter { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes snake-peek { 0%, 72%, 100% { transform: translateY(0) rotate(-8deg); } 78% { transform: translateY(-3px) rotate(-5deg); } 84% { transform: translateY(1px) rotate(-10deg); } }
@keyframes spider-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sparkle-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1); } }

@media (min-width: 700px) {
  .page-shell { width: min(100% - 64px, 720px); padding-top: max(26px, env(safe-area-inset-top)); }
  .intro { padding-top: 60px; padding-bottom: 36px; }
  .moon-scene { margin-bottom: 28px; }
  .countdown-panel { padding-top: 25px; padding-bottom: 23px; }
  .countdown { margin-top: 17px; margin-bottom: 21px; }
  .note-section { margin-top: 37px; }
  .message-card { min-height: 190px; }
  .doodle { right: 27px; bottom: 12px; transform: scale(1.08); transform-origin: bottom right; }
  .heart-button { right: 27px; bottom: 22px; }
  .footer { margin-top: 44px; }
}

@media (max-width: 420px) {
  .page-shell { width: min(100% - 28px, 760px); }
  .topbar { gap: 7px; }
  .wordmark { gap: 6px; }
  .wordmark-text { font-size: 8px; letter-spacing: .14em; }
  .motion-control { gap: 6px; font-size: 10px; }
  .intro { padding-top: 41px; }
  .moon-scene { width: 76px; height: 76px; margin-bottom: 22px; }
  .moon { font-size: 64px; }
  .mobile-break { display: initial; }
  .countdown-panel { padding-inline: 15px; border-radius: 22px; }
  .time-value { font-size: clamp(31px, 9.6vw, 40px); }
  .countdown { gap: 2px; }
  .time-separator { font-size: 23px; }
  .message-card { min-height: 193px; padding-inline: 23px; }
  .message-text { max-width: 100%; font-size: clamp(19px, 5.2vw, 22px); }
}

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