:root {
  color-scheme: dark;
  --night: #111927;
  --river: #496f73;
  --gold: #f2a33a;
  --paper: #f2ead8;
  --ember: #b9503f;
  --ink: #241d19;
  --background-progress: 0;
  --background-offset: 0px;
  --background-width: 100vw;
  --background-height: 114vh;
  --transition-accent: #7abbe0;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  background: var(--night);
}

* { box-sizing: border-box; }

html {
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--night);
}

body.is-opening-locked { overflow: hidden; }

.opening-page {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #d8edfa;
  isolation: isolate;
  transition: opacity 560ms cubic-bezier(.22, .72, .18, 1), filter 560ms ease;
}

.opening-page__button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.opening-page__button:focus-visible {
  outline: 3px solid rgba(243, 250, 255, .92);
  outline-offset: -8px;
}

.opening-page__picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.opening-page__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 28px rgba(12, 48, 82, .26));
}

.keepsake { z-index: 19; background: #0869a3; }
.opening-page.is-leaving {
  opacity: 0;
  filter: brightness(1.1) saturate(.86);
}

.chapter-transition {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity 120ms ease;
}

.chapter-transition.is-active { opacity: 1; }

.chapter-transition__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.final-page {
  position: fixed;
  inset: 0;
  z-index: 18;
  overflow: hidden;
  background: #030303;
}

.final-page__picture,
.final-page__art {
  display: block;
  width: 100%;
  height: 100%;
}

.final-page__art {
  object-fit: cover;
  object-position: center;
  user-select: none;
  animation: final-arrival 900ms cubic-bezier(.2,.74,.2,1) both;
}

@keyframes final-arrival {
  from { opacity: 0; filter: brightness(.7); transform: scale(1.012); }
  to { opacity: 1; filter: brightness(1); transform: scale(1); }
}

.cover__open {
  overflow: hidden;
}

button, img { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--night);
}

.ambient__painting {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--background-width);
  height: var(--background-height);
  max-width: none;
  object-fit: fill;
  transform: translate3d(-50%, calc(-1 * var(--background-offset)), 0);
  filter: saturate(.94) contrast(1.02) brightness(.86);
  will-change: transform;
}

:root[data-day="0805"] .ambient { background: #315f47; }
:root[data-day="0805"] .ambient__painting { filter: saturate(.92) contrast(1.01) brightness(.78); }
:root[data-day="0805"] .ambient__veil {
  background:
    linear-gradient(180deg, rgba(20, 66, 42, .2), rgba(242, 236, 184, .08) 50%, rgba(19, 57, 42, .22)),
    radial-gradient(ellipse at center, rgba(246, 243, 205, .08), rgba(19, 54, 38, .16) 76%);
}

:root[data-day="0803"] .ambient { background: #8c5a58; }
:root[data-day="0803"] .ambient__painting { filter: saturate(.96) contrast(1.02) brightness(.82); }
:root[data-day="0803"] .ambient__veil {
  background:
    linear-gradient(180deg, rgba(49, 92, 112, .12), rgba(255, 191, 168, .05) 52%, rgba(91, 43, 50, .18)),
    radial-gradient(ellipse at center, rgba(255, 228, 195, .07), rgba(54, 66, 80, .13) 78%);
}

.ambient__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 13, 27, .22) 0%, rgba(20, 44, 52, .08) 48%, rgba(76, 36, 25, .12) 100%),
    radial-gradient(ellipse at center, rgba(242, 234, 216, .04), rgba(9, 16, 26, .16) 78%);
}

.ambient__grain {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.experience { position: relative; z-index: 1; isolation: isolate; }

.post-intro,
.day-ending {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.post-intro::before,
.day-ending::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 17, 30, .42), rgba(10, 17, 30, .12));
}

.post-intro__inner,
.day-ending__inner {
  width: min(100%, 470px);
}

.post-intro__eyebrow,
.identity__date,
.day-ending__kicker {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.post-intro__eyebrow {
  margin: 0 0 clamp(46px, 11vh, 92px);
  color: rgba(242, 234, 216, .64);
  font-size: 11px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.identity__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(242, 234, 216, .56);
}

.identity__name { margin: 0 0 5px; font-size: 18px; font-weight: 600; }
.identity__date { margin: 0; font-size: 10px; color: rgba(242, 234, 216, .58); }

.post-intro__quote {
  margin: clamp(32px, 7vh, 62px) 0 0;
  max-width: 13.5em;
  font-size: clamp(26px, 8.2vw, 40px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .32);
}

[data-sputnik] { white-space: nowrap; }

.scene {
  --scene-opacity: .62;
  --scene-lift: 0px;
  --scene-scale: 1;
  --scene-shift: 0px;
  min-height: 112svh;
  position: relative;
  display: grid;
  place-items: center;
}

.scene:nth-child(odd) { --scene-shift: clamp(-46px, -8vw, -22px); }
.scene:nth-child(even) { --scene-shift: clamp(22px, 8vw, 46px); }

.scene__sticky {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: auto;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.scene__poster {
  margin: 0;
  width: min(78vw, 51svh, 486px);
  aspect-ratio: 3 / 5;
  transform: translate3d(0, var(--scene-lift), 0) scale(var(--scene-scale));
  translate: var(--scene-shift) 0;
  opacity: var(--scene-opacity);
  filter: drop-shadow(0 24px 36px rgba(3, 8, 14, .26));
  transition: opacity 180ms linear;
  will-change: opacity;
}

.scene__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(242, 234, 216, .08);
  outline: 1px solid rgba(242, 234, 216, .18);
  outline-offset: -1px;
}

.scene__poster picture,
.ending-note__paper picture {
  display: block;
  width: 100%;
  height: 100%;
}

.scene__connector {
  position: absolute;
  z-index: 0;
  top: 50svh;
  left: 0;
  width: 100%;
  height: 120svh;
  overflow: visible;
  pointer-events: none;
}

.scene__connector svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scene__connector path {
  fill: none;
  stroke: rgba(255, 215, 119, .98);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(103, 188, 255, .86));
}

.scene__connector--wind-chime .wind-chime__ribbon {
  fill: none;
  stroke: rgba(250, 231, 116, .95);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(63, 155, 119, .82));
}

.scene__connector--wind-chime .wind-chime__cord {
  fill: none;
  stroke: rgba(255, 239, 159, .88);
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
}

.scene__connector--wind-chime .wind-chime__bell {
  fill: rgba(129, 231, 209, .18);
  stroke: rgba(205, 255, 240, .92);
  stroke-width: 1.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(102, 231, 195, .8));
}

.scene__connector--liquid .liquid__stream {
  fill: none;
  stroke: rgba(194, 112, 70, .92);
  stroke-width: 5.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(104, 48, 47, .44));
}

.scene__connector--liquid .liquid__highlight {
  fill: none;
  stroke: rgba(231, 239, 237, .86);
  stroke-width: 1.35;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: none;
}

.scene__connector--liquid .liquid__bubble {
  fill: rgba(219, 145, 135, .72);
  stroke: rgba(247, 231, 209, .88);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(98, 44, 45, .5));
}

:root[data-day="0803"] .scene__connector-node {
  fill: #f5d6bc;
  stroke: rgba(121, 71, 76, .92);
}

:root[data-day="0805"] .scene__connector-node {
  fill: #fff0a1;
  stroke: rgba(40, 133, 91, .96);
  filter: drop-shadow(0 0 5px rgba(239, 255, 167, .9));
}

.scene__connector[data-connector="wave"] path { stroke: rgba(255, 215, 119, .98); }
.scene__connector[data-connector="ice"] path { stroke: rgba(144, 218, 255, .98); }
.scene__connector[data-connector="petal"] path { stroke: rgba(218, 179, 255, .96); }

.scene__connector-node {
  fill: #fff4c9;
  stroke: rgba(107, 167, 235, .92);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(130, 191, 255, .95));
  opacity: .96;
}

.day-ending {
  min-height: auto;
  padding-block: clamp(42px, 8svh, 88px);
  overflow: clip;
  text-align: center;
}
.day-ending::before { background: linear-gradient(180deg, rgba(63, 37, 27, .04), rgba(19, 18, 23, .55)); }
.day-ending__kicker { margin: 0 0 42px; font-size: 11px; color: rgba(242, 234, 216, .68); }
.day-ending__inner {
  width: 100%;
  max-width: 620px;
}

.ending-note {
  --ending-shift: 0px;
  --ending-rotate: 0deg;
  min-height: 108svh;
  display: grid;
  place-items: center;
  position: relative;
}

.ending-note[data-ending="orbit"] {
  --ending-shift: clamp(-32px, -7vw, -20px);
  --ending-rotate: -2.4deg;
}

.ending-note[data-ending="echo"] {
  --ending-shift: clamp(22px, 8vw, 38px);
  --ending-rotate: 2.8deg;
}

.ending-note[data-ending="glimpse"] {
  --ending-shift: clamp(-28px, -6vw, -18px);
  --ending-rotate: -1.8deg;
}

.ending-note__paper {
  width: min(76vw, 52svh, 460px);
  aspect-ratio: 3 / 5;
  opacity: .16;
  transform: translate3d(var(--ending-shift), 30px, 0) rotate(var(--ending-rotate)) scale(.975);
  filter: drop-shadow(0 22px 30px rgba(4, 8, 14, .28));
  transition: opacity 800ms ease, transform 1000ms cubic-bezier(.2, .72, .2, 1);
  will-change: opacity, transform;
}

.ending-note.is-visible .ending-note__paper {
  opacity: 1;
  transform: translate3d(var(--ending-shift), 0, 0) rotate(var(--ending-rotate)) scale(1);
}

.ending-note__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ending__connector {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 108svh;
  overflow: visible;
  pointer-events: none;
}

.ending__connector svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ending__connector-track {
  fill: none;
  stroke: rgba(190, 45, 84, .94);
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(111, 14, 48, .72));
}

.ending__connector-node {
  fill: #f3a0b5;
  stroke: rgba(105, 13, 43, .96);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(227, 53, 101, .85));
}

.ending__connector--green .ending__connector-track {
  stroke: rgba(69, 139, 63, .92);
  filter: drop-shadow(0 0 6px rgba(38, 91, 45, .65));
}

.ending__connector--green .ending__connector-node {
  fill: #b8df75;
  stroke: rgba(32, 88, 43, .96);
  filter: drop-shadow(0 0 5px rgba(164, 220, 102, .8));
}

.ending-note[data-ending="breeze"] {
  --ending-shift: clamp(-32px, -7vw, -20px);
  --ending-rotate: -2.1deg;
}

.ending-note[data-ending="stillness"] {
  --ending-shift: clamp(22px, 8vw, 38px);
  --ending-rotate: 2.6deg;
}

.ending-note[data-ending="afterlight"] {
  --ending-shift: clamp(-28px, -6vw, -18px);
  --ending-rotate: -1.7deg;
}

.ending-note__paper { position: relative; z-index: 1; }

.chapter-next {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 24px max(72px, env(safe-area-inset-bottom));
}

.chapter-next__button {
  min-width: 176px;
  min-height: 96px;
  padding: 18px 24px;
  display: grid;
  place-items: center;
  gap: 12px;
  border: 0;
  color: rgba(255, 248, 231, .96);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-shadow: 0 2px 14px rgba(10, 18, 28, .7);
}

.chapter-next__line {
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 28% 72%, transparent);
}

.chapter-next__date {
  font: 500 clamp(24px, 8vw, 38px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .13em;
}

.chapter-next__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

[hidden] { display: none !important; }

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

noscript {
  position: fixed;
  inset: auto 16px 16px;
  padding: 12px;
  color: var(--ink);
  background: var(--paper);
}

@media (min-width: 760px) {
  .opening-page::before {
    content: "";
    position: absolute;
    inset: -34px;
    background: center / cover no-repeat url("../assets/cover/cover-22-script-v3-480.webp");
    filter: blur(28px) saturate(.82) brightness(.78);
    transform: scale(1.08);
    opacity: .72;
  }
  .keepsake::before {
    background-image: url("../assets/interlude/keepsake-sea-wechat-v2-480.webp");
    filter: blur(28px) saturate(.9) brightness(.66);
  }
  .opening-page__art { object-fit: contain; }
  .final-page::before {
    content: "";
    position: absolute;
    inset: -40px;
    background: center / cover no-repeat url("../assets/final/delivery/final-message-hd-v2-480.webp");
    filter: blur(32px) brightness(.42);
    transform: scale(1.08);
  }
  .final-page__picture { position: relative; z-index: 1; }
  .final-page__art { object-fit: contain; }
  .post-intro__inner { width: min(82vw, 520px); }
  .scene__poster { width: min(51vh, 486px); }
}

@media (horizontal-viewport-segments: 2) {
  .opening-page__picture {
    width: calc(env(viewport-segment-width 0 0) - 12px);
    margin-right: auto;
  }
  .final-page__picture {
    width: calc(env(viewport-segment-width 0 0) - 12px);
    margin-right: auto;
  }
  .final-page__art { object-fit: cover; }
  .post-intro__inner,
  .day-ending__inner,
  .scene__poster,
  .ending-note__paper {
    max-width: calc(env(viewport-segment-width 0 0) - 56px);
    justify-self: start;
    margin-left: 10px;
    translate: 0 0;
  }
}

.simulate-dual-segment .opening-page__picture {
  width: calc(50vw - 12px);
  margin-right: auto;
}

.simulate-dual-segment .final-page__picture {
  width: calc(50vw - 12px);
  margin-right: auto;
}

.simulate-dual-segment .final-page__art { object-fit: cover; }

.simulate-dual-segment .opening-page__art { object-fit: contain; }

.simulate-dual-segment .post-intro__inner,
.simulate-dual-segment .day-ending__inner,
.simulate-dual-segment .scene__poster,
.simulate-dual-segment .ending-note__paper {
  max-width: calc(50vw - 56px);
  justify-self: start;
  margin-left: 10px;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient__painting,
  .scene__poster,
  .scene__connector path {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .ambient__painting { transform: translate3d(-50%, 0, 0) !important; }
  .scene__poster { opacity: 1 !important; translate: none !important; }
  .scene__connector-node { opacity: 1 !important; }
  .ending-note__paper {
    opacity: 1 !important;
    transition: none !important;
    transform: translate3d(var(--ending-shift), 0, 0) rotate(var(--ending-rotate)) !important;
  }
  .opening-page,
  .chapter-transition,
  .final-page__art {
    animation: none !important;
    transition-duration: 120ms !important;
  }
  .chapter-transition.is-active { background: #0b111c; opacity: 1; }
}