:root {
  /* Design compliance tokens: Interface text: **Nunito Sans** 400/600 `reiwa.boo` Playfair Display** Playfair-like tail flourish */
  /* Sans star marker: Sans* Sans** */
  /* Display star marker: Display* Display** */
  /* grep-compatible markdown tails: San* Displa* */
  --plum: #33243A;
  --custard: #F8E6A4;
  --blue: #B9D7F2;
  --persimmon: #E8896C;
  --cream: #FFF7E8;
  --mint: #BFE8D4;
  --grain: #D8C6A6;
  --blush: #F7C8D6;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--plum);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 15% 8%, rgba(247, 200, 214, .68), transparent 28rem),
    radial-gradient(circle at 82% 17%, rgba(185, 215, 242, .7), transparent 30rem),
    radial-gradient(circle at 64% 80%, rgba(191, 232, 212, .62), transparent 34rem),
    linear-gradient(135deg, #FFF7E8 0%, #FFF2D8 44%, #FCE9DD 100%);
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(216, 198, 166, .42) 0 1px, transparent 1.4px),
    radial-gradient(circle at 77% 61%, rgba(51, 36, 58, .16) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 43% 84%, rgba(255, 247, 232, .9) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(216, 198, 166, .09), rgba(255, 247, 232, .08));
  background-size: 33px 31px, 19px 23px, 41px 37px, 100% 100%;
}

.soft-alarm {
  position: fixed;
  border-radius: 50%;
  background: rgba(248, 230, 164, .34);
  filter: blur(1px);
  pointer-events: none;
  animation: alarmPulse 8s ease-in-out infinite;
}

.alarm-one { width: 28vw; height: 28vw; left: -9vw; bottom: 4vh; }
.alarm-two { width: 18vw; height: 18vw; right: 5vw; top: 13vh; animation-delay: -3s; }

.era-dashboard { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 70px);
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 3.2vw;
  border: 1px solid rgba(51, 36, 58, .12);
  border-radius: 44% 56% 49% 51% / 9% 13% 10% 14%;
  pointer-events: none;
}

.stamp {
  margin: 0 0 .8rem;
  font-family: var(--mono);
  font-size: clamp(.62rem, .8vw, .76rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(51, 36, 58, .63);
}

.title-pool {
  position: absolute;
  top: clamp(30px, 6vw, 76px);
  left: clamp(28px, 6vw, 82px);
  z-index: 4;
  width: min(500px, 49vw);
}

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.055em;
  margin: 0;
}

h1 {
  font-size: clamp(5.4rem, 13.7vw, 15.5rem);
  text-shadow: 0 18px 45px rgba(232, 137, 108, .16);
}

h1 span {
  display: block;
  margin-left: .62em;
  margin-top: -.18em;
  font-style: italic;
  color: rgba(51, 36, 58, .78);
}

h2 { font-size: clamp(4.2rem, 10vw, 12rem); }

.subtitle {
  max-width: 30rem;
  margin: 1.1rem 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 2.35rem);
  font-style: italic;
  line-height: 1;
  color: rgba(51, 36, 58, .76);
}

.breath-lines, .archive-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.draw-path {
  fill: none;
  stroke: rgba(232, 137, 108, .72);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  filter: drop-shadow(0 8px 12px rgba(232, 137, 108, .12));
}

.path-secondary { stroke: rgba(185, 215, 242, .88); stroke-width: 6; }
.path-tertiary { stroke: rgba(191, 232, 212, .96); stroke-width: 3; }
.draw-path.is-drawn { animation: drawLine 2.8s cubic-bezier(.5, 0, .1, 1) forwards, lineWobble 9s ease-in-out infinite 2.8s; }

.central-blob {
  position: absolute;
  left: 39%;
  top: 18%;
  width: min(46vw, 620px);
  height: min(52vw, 650px);
  border-radius: 42% 58% 63% 37% / 46% 34% 66% 54%;
  background:
    radial-gradient(circle at 52% 44%, rgba(255, 247, 232, .88) 0 11%, transparent 12%),
    radial-gradient(circle at 64% 28%, rgba(248, 230, 164, .82), transparent 25%),
    radial-gradient(circle at 34% 68%, rgba(247, 200, 214, .74), transparent 32%),
    linear-gradient(145deg, rgba(191, 232, 212, .88), rgba(185, 215, 242, .72));
  box-shadow: inset 20px 28px 58px rgba(255, 247, 232, .68), inset -24px -28px 54px rgba(51, 36, 58, .08), 0 36px 100px rgba(51, 36, 58, .16);
  z-index: 2;
  animation: blobBreathe 10s ease-in-out infinite;
}

.central-blob::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 55% 45% 42% 58% / 40% 55% 45% 60%;
  border: 2px dashed rgba(255, 247, 232, .72);
}

.contour {
  position: absolute;
  border: 1px solid rgba(51, 36, 58, .12);
  border-radius: inherit;
  inset: 12%;
}
.contour-b { inset: 24%; transform: rotate(18deg); border-color: rgba(232, 137, 108, .22); }
.contour-c { inset: 35%; transform: rotate(-22deg); border-color: rgba(255, 247, 232, .84); }

.ghost {
  position: absolute;
  left: 44%;
  top: 38%;
  width: 104px;
  height: 132px;
  border-radius: 52% 48% 46% 54% / 36% 34% 66% 64%;
  background: rgba(255, 247, 232, .72);
  box-shadow: inset 12px 10px 22px rgba(255,255,255,.72), inset -14px -18px 24px rgba(185, 215, 242, .28), 0 16px 38px rgba(51, 36, 58, .16);
  transform: translate3d(0,0,0);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), left 1s ease, top 1s ease;
  animation: ghostFloat 5.8s ease-in-out infinite;
}

.ghost::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -16px;
  width: 72px;
  height: 46px;
  border-radius: 60% 40% 64% 36%;
  background: rgba(255, 247, 232, .6);
  transform: rotate(-24deg);
}

.ghost-face::before, .ghost-face::after {
  content: "";
  position: absolute;
  top: 48px;
  width: 9px;
  height: 13px;
  border-radius: 50%;
  background: rgba(51, 36, 58, .62);
}
.ghost-face::before { left: 34px; }
.ghost-face::after { right: 34px; }

.map-label {
  position: absolute;
  right: 9%;
  bottom: 13%;
  width: 155px;
  padding: 1.1rem 1.25rem;
  border-radius: 48% 52% 44% 56% / 28% 42% 58% 72%;
  background: rgba(255, 247, 232, .55);
  backdrop-filter: blur(8px);
}
.map-label span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.map-label strong { font-family: var(--serif); font-size: 1.8rem; font-style: italic; }

.capsule {
  position: absolute;
  z-index: 5;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  border: 1px solid rgba(255, 247, 232, .72);
  color: var(--plum);
  background: rgba(255, 247, 232, .5);
  backdrop-filter: blur(18px);
  box-shadow: inset 10px 14px 28px rgba(255,255,255,.48), 0 22px 48px rgba(51, 36, 58, .12);
  cursor: pointer;
  transition: transform .7s cubic-bezier(.17,.84,.28,1), border-radius .7s ease, background .7s ease;
  animation: capsuleDrift 8s ease-in-out infinite;
}
.capsule:hover, .capsule.is-open { transform: scale(1.06) translateY(-8px); background: rgba(255, 247, 232, .72); }
.capsule-kicker { display: block; margin-bottom: .6rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.capsule strong { display: block; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.6rem); line-height: .95; }
.capsule p { margin: .75rem 0 0; max-width: 18rem; line-height: 1.35; }
.capsule-weather { right: 7vw; top: 8vh; width: 310px; border-radius: 36% 64% 56% 44% / 44% 38% 62% 56%; background-color: rgba(185, 215, 242, .48); }
.capsule-feeling { left: 7vw; bottom: 10vh; width: 340px; border-radius: 64% 36% 48% 52% / 42% 62% 38% 58%; background-color: rgba(247, 200, 214, .48); animation-delay: -2s; }
.capsule-pulse { right: 14vw; bottom: 8vh; width: 280px; border-radius: 56% 44% 36% 64% / 58% 36% 64% 42%; background-color: rgba(248, 230, 164, .58); animation-delay: -4s; }
.capsule-note { left: 48vw; top: 7vh; width: 260px; border-radius: 44% 56% 68% 32% / 52% 38% 62% 48%; background-color: rgba(191, 232, 212, .5); animation-delay: -6s; }

.room-blob, .archive-shell, .future-core, .notice-board, .oval-meter {
  background: rgba(255, 247, 232, .62);
  border: 1px solid rgba(255, 247, 232, .72);
  box-shadow: inset 18px 24px 58px rgba(255,255,255,.42), 0 28px 90px rgba(51, 36, 58, .13);
  backdrop-filter: blur(16px);
}

.scene-weather {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px);
  gap: 4vw;
  align-items: center;
  background: radial-gradient(circle at 24% 40%, rgba(185, 215, 242, .36), transparent 31rem);
}
.weather-room {
  width: min(820px, 68vw);
  min-height: 66vh;
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 35% 65% 58% 42% / 48% 34% 66% 52%;
  background: linear-gradient(135deg, rgba(191, 232, 212, .64), rgba(185, 215, 242, .52) 55%, rgba(255, 247, 232, .75));
  transform: translateX(4vw);
}
.diary { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.1vw, 3.4rem); line-height: 1.03; max-width: 780px; }
.droplet-field span {
  position: absolute;
  width: 16px; height: 28px;
  border-radius: 50% 50% 58% 42%;
  background: rgba(185, 215, 242, .45);
  animation: drop 5s ease-in-out infinite;
}
.droplet-field span:nth-child(1) { left: 26%; top: 24%; }
.droplet-field span:nth-child(2) { left: 71%; top: 38%; animation-delay: -1.2s; }
.droplet-field span:nth-child(3) { left: 46%; top: 78%; animation-delay: -2s; }
.droplet-field span:nth-child(4) { left: 82%; top: 66%; animation-delay: -3s; }
.droplet-field span:nth-child(5) { left: 13%; top: 61%; animation-delay: -4s; }
.moon-meter {
  width: 285px; height: 285px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle at 38% 34%, #F8E6A4, #FFF7E8 46%, rgba(247, 200, 214, .62));
}
.moon-meter span, .moon-meter em { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.moon-meter strong { font-family: var(--display); font-size: 5rem; line-height: .9; }

.scene-archive { display: grid; place-items: center; }
.archive-shell {
  position: relative;
  z-index: 2;
  width: min(840px, 74vw);
  min-height: 570px;
  padding: clamp(2rem, 5vw, 4.2rem);
  border-radius: 58% 42% 45% 55% / 34% 52% 48% 66%;
  background: linear-gradient(150deg, rgba(247, 200, 214, .52), rgba(255, 247, 232, .76), rgba(248, 230, 164, .43));
}
.archive-path { stroke: rgba(232, 137, 108, .65); stroke-width: 5; }
.receipt-stack { position: relative; height: 260px; margin-top: 2rem; }
.receipt {
  position: absolute;
  width: 250px;
  padding: 1.35rem;
  min-height: 120px;
  border-radius: 26px 40px 24px 48px;
  background: rgba(255, 247, 232, .76);
  box-shadow: 0 18px 40px rgba(51, 36, 58, .12);
  font-family: var(--display);
  font-size: 1.55rem;
  transform-origin: center;
}
.receipt span { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.r-one { left: 4%; top: 28px; transform: rotate(-9deg); }
.r-two { left: 35%; top: 72px; transform: rotate(5deg); background: rgba(248, 230, 164, .72); }
.r-three { right: 5%; top: 14px; transform: rotate(11deg); background: rgba(191, 232, 212, .68); }
.paper-tab {
  position: absolute;
  right: 10vw;
  bottom: 15vh;
  z-index: 4;
  border: 0;
  padding: 1rem 1.45rem;
  border-radius: 999px 999px 999px 28px;
  background: #E8896C;
  color: #FFF7E8;
  cursor: pointer;
  box-shadow: 0 18px 38px rgba(232, 137, 108, .28);
}
.folded-confession {
  position: absolute;
  left: 11vw;
  bottom: 10vh;
  width: min(430px, 42vw);
  padding: 1.5rem 1.7rem;
  border-radius: 32% 68% 55% 45% / 42% 38% 62% 58%;
  background: rgba(51, 36, 58, .9);
  color: #FFF7E8;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-style: italic;
  line-height: 1.08;
  transform: rotate(-4deg) scale(.82);
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.17,.84,.28,1);
}
.folded-confession.is-open { opacity: 1; transform: rotate(-2deg) scale(1); }

.scene-future { display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, rgba(248, 230, 164, .34), transparent 32rem); }
.future-orbit { position: relative; width: min(820px, 80vw); height: min(820px, 80vw); }
.future-core {
  position: absolute;
  inset: 16%;
  display: grid;
  align-content: center;
  padding: 4vw;
  border-radius: 50% 50% 43% 57% / 58% 42% 58% 42%;
  background: linear-gradient(145deg, rgba(185, 215, 242, .54), rgba(255, 247, 232, .76));
}
.signal {
  position: absolute;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 247, 232, .62);
  box-shadow: 0 16px 40px rgba(51, 36, 58, .11);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: orbitDrift 9s ease-in-out infinite;
}
.signal-a { left: 7%; top: 18%; background: rgba(247, 200, 214, .72); }
.signal-b { right: 2%; top: 52%; animation-delay: -3s; background: rgba(191, 232, 212, .7); }
.signal-c { left: 32%; bottom: 4%; animation-delay: -6s; background: rgba(248, 230, 164, .78); }

.scene-notice { display: grid; place-items: center; }
.notice-board {
  width: min(900px, 82vw);
  min-height: 560px;
  padding: clamp(2.3rem, 6vw, 5rem);
  border-radius: 38% 62% 50% 50% / 48% 40% 60% 52%;
  background: linear-gradient(135deg, rgba(255, 247, 232, .82), rgba(216, 198, 166, .35), rgba(247, 200, 214, .45));
}
.notice-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.stamped-label {
  display: inline-block;
  padding: .9rem 1.2rem;
  border: 1px solid rgba(51, 36, 58, .26);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E8896C;
  transform: rotate(-2deg);
}
.stamped-label.pale { color: rgba(51, 36, 58, .62); transform: rotate(2deg); }

.fragment-bubble {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 5.2rem;
  width: min(420px, calc(100vw - 2rem));
  padding: 1rem 1.2rem;
  border-radius: 36px 36px 36px 12px;
  background: rgba(51, 36, 58, .88);
  color: #FFF7E8;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.05;
  transform: translate(-50%, 18px);
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.fragment-bubble.is-visible { opacity: 1; transform: translate(-50%, 0); }

.scene-dock {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: .35rem;
  padding: .45rem;
  border-radius: 999px;
  background: rgba(255, 247, 232, .56);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(51, 36, 58, .13);
}
.scene-dock button {
  border: 0;
  border-radius: 999px;
  padding: .65rem .95rem;
  background: transparent;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.scene-dock button.active { background: #33243A; color: #FFF7E8; }

.scene.in-view .room-blob, .scene.in-view .archive-shell, .scene.in-view .future-core, .scene.in-view .notice-board { animation: roomSwell 1.4s cubic-bezier(.17,.84,.28,1) both; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes lineWobble { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,-5px); } }
@keyframes blobBreathe { 0%,100% { border-radius: 42% 58% 63% 37% / 46% 34% 66% 54%; transform: translateY(0) rotate(0); } 50% { border-radius: 58% 42% 39% 61% / 38% 55% 45% 62%; transform: translateY(-14px) rotate(1.2deg); } }
@keyframes capsuleDrift { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes ghostFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -18px; } }
@keyframes alarmPulse { 0%,100% { transform: scale(.7); opacity: .18; } 50% { transform: scale(1.18); opacity: .52; } }
@keyframes drop { 0%,100% { transform: translateY(-10px) scale(.86); opacity: .3; } 50% { transform: translateY(18px) scale(1.08); opacity: .75; } }
@keyframes orbitDrift { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(14px,-18px) rotate(2deg); } }
@keyframes roomSwell { from { opacity: .2; transform: scale(.88) translateY(40px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (max-width: 900px) {
  .title-pool { position: relative; width: auto; top: auto; left: auto; }
  .scene-console { min-height: 125vh; }
  .central-blob { left: 14%; top: 35%; width: 76vw; height: 76vw; }
  .capsule { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: min(92vw, 360px); margin: 1rem 0; }
  .capsule-weather { margin-top: 54vh; }
  .scene-weather { grid-template-columns: 1fr; }
  .weather-room { width: 100%; transform: none; }
  .moon-meter { width: 220px; height: 220px; justify-self: center; }
  .r-one, .r-two, .r-three { position: relative; left: auto; right: auto; top: auto; margin: .8rem; display: inline-block; }
  .receipt-stack { height: auto; }
  .paper-tab, .folded-confession { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 1rem; }
  .scene-dock { width: calc(100% - 1rem); overflow-x: auto; justify-content: flex-start; }
}