:root {
  /* Design typography token coverage: Space Mono* Mono** for charm IDs. */
  --honey-cream: #F4E7C5;
  --matcha-lacquer: #2F8F5B;
  --pale-mint-glow: #DFFFD6;
  --champagne-chrome: #C8A85B;
  --deep-tea-shadow: #121611;
  --soft-taupe-resin: #786443;
  --aurora-cyan: #A7F3FF;
  --pearl-white: #FFF9EA;
  --display: "Limelight", "Georgia", serif;
  --secondary: "Poiret One", "Trebuchet MS", sans-serif;
  --body: "Josefin Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--deep-tea-shadow);
  font-family: var(--body);
  background:
    radial-gradient(circle at 12% 10%, rgba(223, 255, 214, 0.94), transparent 20rem),
    radial-gradient(circle at 84% 18%, rgba(167, 243, 255, 0.6), transparent 21rem),
    linear-gradient(135deg, var(--pearl-white) 0%, var(--honey-cream) 42%, #ead8a9 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(47, 143, 91, 0.12) 0 1px, transparent 1.7px),
    linear-gradient(120deg, transparent 0 47%, rgba(200, 168, 91, 0.22) 48%, transparent 50% 100%);
  background-size: 22px 22px, 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.48;
  z-index: 0;
}

.aurora-field,
.deco-rays,
.ripple-layer,
.cursor-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.aurora-field {
  z-index: 1;
  background:
    linear-gradient(115deg, transparent 10%, rgba(167, 243, 255, 0.0) 29%, rgba(167, 243, 255, 0.62) 39%, rgba(223, 255, 214, 0.25) 46%, transparent 57%),
    linear-gradient(64deg, transparent 35%, rgba(47, 143, 91, 0.24) 45%, rgba(255, 249, 234, 0.2) 52%, transparent 65%);
  filter: blur(12px) saturate(1.2);
  mix-blend-mode: screen;
  animation: auroraSlide 15s ease-in-out infinite alternate;
}

.deco-rays {
  z-index: 2;
  opacity: 0.46;
  background:
    conic-gradient(from 225deg at 88% 22%, transparent 0 4deg, rgba(200, 168, 91, 0.55) 5deg 6deg, transparent 7deg 14deg),
    conic-gradient(from 26deg at 17% 76%, transparent 0 7deg, rgba(200, 168, 91, 0.34) 8deg 9deg, transparent 10deg 18deg);
}

.ripple-layer {
  z-index: 40;
  overflow: hidden;
}

.cursor-glow {
  z-index: 3;
  width: 18rem;
  height: 18rem;
  inset: auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 255, 214, 0.42), rgba(167, 243, 255, 0.2) 36%, transparent 68%);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.day-bracelet {
  position: relative;
  z-index: 5;
}

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

.scene-label {
  position: absolute;
  top: clamp(1rem, 3vw, 2.4rem);
  left: clamp(1rem, 4vw, 3.8rem);
  z-index: 10;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--soft-taupe-resin);
  text-transform: uppercase;
}

.plaque,
.forecast-plaque,
.aurora-copy {
  border: 1px solid rgba(255, 249, 234, 0.78);
  box-shadow:
    inset 0 1px 1px rgba(255, 249, 234, 0.95),
    inset 0 -22px 44px rgba(120, 100, 67, 0.12),
    0 24px 80px rgba(18, 22, 17, 0.22),
    0 0 0 1px rgba(200, 168, 91, 0.28);
  backdrop-filter: blur(14px);
}

.scene-morning {
  padding-top: 14vh;
}

.hero-plaque {
  position: relative;
  width: min(62vw, 46rem);
  min-height: 21rem;
  margin-left: 3vw;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 3.2rem 1.6rem 4.8rem 2rem;
  background:
    linear-gradient(135deg, rgba(255, 249, 234, 0.92), rgba(244, 231, 197, 0.74)),
    radial-gradient(circle at 28% 70%, rgba(223, 255, 214, 0.72), transparent 18rem);
  transform: rotate(-4deg);
}

.hero-plaque::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(200, 168, 91, 0.52);
  border-radius: inherit;
  background: linear-gradient(110deg, transparent, rgba(167, 243, 255, 0.36), transparent 42%);
  animation: plaqueSheen 7s ease-in-out infinite;
}

.plaque-caption {
  position: relative;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--matcha-lacquer);
  text-transform: uppercase;
}

.wordmark,
.final-wordmark {
  position: relative;
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(3.9rem, 10vw, 9.8rem);
  font-weight: 400;
  letter-spacing: 0.075em;
  line-height: 0.9;
  color: var(--matcha-lacquer);
  text-shadow:
    0 2px 0 var(--pearl-white),
    0 -1px 0 rgba(18, 22, 17, 0.25),
    0 12px 22px rgba(47, 143, 91, 0.18);
}

.engraved-note {
  position: relative;
  width: min(28rem, 90%);
  margin: 1.4rem 0 0 0.5rem;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.45;
  color: var(--soft-taupe-resin);
}

.plaque-rings,
.plaque-rings::before,
.plaque-rings::after {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(47, 143, 91, 0.28);
}

.plaque-rings {
  right: 8%;
  bottom: 10%;
  width: 12rem;
  height: 12rem;
  animation: slowPulse 5s ease-in-out infinite;
}

.plaque-rings::before,
.plaque-rings::after {
  content: "";
  inset: 18%;
}

.plaque-rings::after {
  inset: 37%;
  background: rgba(223, 255, 214, 0.26);
}

.day-dial {
  position: absolute;
  width: clamp(19rem, 34vw, 34rem);
  height: clamp(19rem, 34vw, 34rem);
  transform-style: preserve-3d;
  filter: drop-shadow(0 2rem 3rem rgba(47, 143, 91, 0.28));
  animation: floatDial 8s ease-in-out infinite;
}

.dial-right {
  right: 5vw;
  top: 18vh;
  transform: rotateX(58deg) rotateZ(18deg);
}

.chrome-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: clamp(0.65rem, 1.4vw, 1.1rem) solid rgba(200, 168, 91, 0.65);
  background: radial-gradient(circle, rgba(255, 249, 234, 0.2), rgba(167, 243, 255, 0.13) 50%, rgba(18, 22, 17, 0.06));
  box-shadow: inset 0 0 30px rgba(255, 249, 234, 0.7), 0 0 0 2px rgba(255, 249, 234, 0.35);
}

.clover-leaf {
  position: absolute;
  width: 43%;
  height: 43%;
  left: 28.5%;
  top: 7%;
  border-radius: 64% 64% 52% 52%;
  background:
    linear-gradient(130deg, rgba(255, 249, 234, 0.65), rgba(167, 243, 255, 0.24) 28%, rgba(47, 143, 91, 0.64) 72%),
    radial-gradient(circle at 32% 22%, rgba(223, 255, 214, 0.92), transparent 36%);
  box-shadow: inset -18px -18px 35px rgba(18, 22, 17, 0.12), inset 18px 14px 28px rgba(255, 249, 234, 0.46);
  transform-origin: 50% 100%;
}

.leaf-b { transform: rotate(90deg); top: 28.5%; left: 50%; }
.leaf-c { transform: rotate(180deg); top: 50%; }
.leaf-d { transform: rotate(270deg); top: 28.5%; left: 7%; }

.calendar-bead {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 24%, var(--pearl-white), var(--honey-cream) 48%, rgba(200, 168, 91, 0.55));
  border: 2px solid rgba(200, 168, 91, 0.66);
  box-shadow: 0 1rem 2rem rgba(18, 22, 17, 0.18), inset 0 0 18px rgba(255, 249, 234, 0.8);
  font-family: var(--secondary);
  color: var(--deep-tea-shadow);
}

.calendar-bead span {
  display: block;
  margin-top: 1rem;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.7;
}

.calendar-bead small {
  display: block;
  margin-top: -1.3rem;
  font-family: var(--mono);
  color: var(--matcha-lacquer);
}

.chat-bubble,
.date-tab,
.jelly-button,
.tiny-interface,
.sticker {
  position: absolute;
  z-index: 8;
  border-radius: 999px;
  border: 1px solid rgba(255, 249, 234, 0.78);
  background: rgba(255, 249, 234, 0.68);
  box-shadow: 0 16px 42px rgba(18, 22, 17, 0.16), inset 0 1px 1px rgba(255, 249, 234, 0.9);
  backdrop-filter: blur(10px);
}

.chat-bubble {
  right: 26vw;
  top: 14vh;
  padding: 0.95rem 1.3rem;
  color: var(--matcha-lacquer);
  font-weight: 700;
  transform: rotate(8deg);
  animation: popFloat 4.5s ease-in-out infinite;
}

.date-tab {
  padding: 0.8rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--deep-tea-shadow);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
}

.tab-glow { left: 9vw; bottom: 14vh; transform: rotate(5deg); }

.scene-forecast {
  background: linear-gradient(180deg, transparent, rgba(223, 255, 214, 0.24));
}

.forecast-plaque {
  position: absolute;
  left: 9vw;
  top: 22vh;
  width: min(39rem, 64vw);
  padding: clamp(1.7rem, 4vw, 3.2rem);
  border-radius: 2rem 4.5rem 2rem 3rem;
  background: linear-gradient(145deg, rgba(244, 231, 197, 0.83), rgba(255, 249, 234, 0.72));
}

.tilted-left { transform: rotate(-5deg); }

h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 6.5rem);
  letter-spacing: 0.08em;
  line-height: 0.95;
  color: var(--matcha-lacquer);
}

.forecast-plaque p,
.aurora-copy p,
.closing-aside {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  color: var(--soft-taupe-resin);
}

.tab-one { right: 13vw; top: 18vh; transform: rotate(10deg); }
.tab-two { right: 28vw; top: 49vh; transform: rotate(-7deg); background: rgba(223, 255, 214, 0.66); }
.tab-three { right: 8vw; bottom: 16vh; transform: rotate(4deg); background: rgba(167, 243, 255, 0.42); }

button.date-tab {
  font: inherit;
}

.jelly-button {
  padding: 1.2rem 1.5rem;
  color: var(--matcha-lacquer);
  background: linear-gradient(135deg, rgba(223, 255, 214, 0.58), rgba(167, 243, 255, 0.34));
}

.jelly-a { left: 16vw; bottom: 13vh; }
.jelly-b { right: 17vw; bottom: 33vh; }

.tiny-interface {
  left: 47vw;
  top: 67vh;
  padding: 0.65rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--soft-taupe-resin);
  transform: rotate(2deg);
}

.scene-aurora {
  min-height: 108vh;
}

.glass-leaf-stage {
  position: absolute;
  left: 8vw;
  top: 15vh;
  width: min(44vw, 36rem);
  height: min(64vw, 42rem);
  perspective: 1000px;
}

.glass-leaf {
  position: absolute;
  inset: 4% 14% 4% 18%;
  border-radius: 68% 12% 68% 18% / 64% 22% 70% 24%;
  background:
    linear-gradient(125deg, rgba(255, 249, 234, 0.74), rgba(167, 243, 255, 0.44) 30%, rgba(47, 143, 91, 0.5) 64%, rgba(223, 255, 214, 0.5)),
    radial-gradient(circle at 40% 30%, rgba(255, 249, 234, 0.75), transparent 30%);
  border: 2px solid rgba(255, 249, 234, 0.56);
  box-shadow: inset -24px -30px 58px rgba(18, 22, 17, 0.14), 0 30px 70px rgba(47, 143, 91, 0.24);
  transform: rotateZ(-22deg) rotateY(18deg);
  animation: glassRotate 9s ease-in-out infinite;
  overflow: hidden;
}

.leaf-vein {
  position: absolute;
  width: 2px;
  height: 86%;
  left: 51%;
  top: 7%;
  background: linear-gradient(var(--pearl-white), rgba(200, 168, 91, 0.62), transparent);
  transform: rotate(12deg);
  box-shadow: 0 0 18px var(--pale-mint-glow);
}

.trapped-light {
  position: absolute;
  inset: -20%;
  background: linear-gradient(120deg, transparent 24%, rgba(167, 243, 255, 0.0) 34%, rgba(167, 243, 255, 0.86) 42%, rgba(223, 255, 214, 0.22) 50%, transparent 61%);
  animation: trappedSlide 5.8s ease-in-out infinite;
}

.chrome-date-ring {
  position: absolute;
  right: -8%;
  bottom: 10%;
  padding: 1.1rem 1.6rem;
  border-radius: 999px;
  border: 2px solid rgba(200, 168, 91, 0.72);
  font-family: var(--secondary);
  font-size: clamp(1.5rem, 3vw, 2.7rem);
  color: var(--matcha-lacquer);
  background: rgba(255, 249, 234, 0.62);
  box-shadow: inset 0 0 24px rgba(255, 249, 234, 0.76), 0 24px 52px rgba(18, 22, 17, 0.16);
}

.aurora-copy {
  position: absolute;
  right: 8vw;
  top: 32vh;
  width: min(41rem, 48vw);
  padding: clamp(1.7rem, 4vw, 3.4rem);
  border-radius: 4rem 2rem 3rem 2rem;
  background: linear-gradient(145deg, rgba(255, 249, 234, 0.64), rgba(223, 255, 214, 0.36));
  transform: rotate(3deg);
}

.deco-fan {
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  width: 18rem;
  height: 9rem;
  border-radius: 12rem 12rem 0 0;
  background: repeating-conic-gradient(from 225deg at 50% 100%, rgba(200, 168, 91, 0.65) 0 2deg, transparent 3deg 13deg);
  opacity: 0.5;
}

.scene-evening {
  min-height: 105vh;
  background: radial-gradient(circle at 68% 38%, rgba(167, 243, 255, 0.28), transparent 26rem);
}

.sticker-sheet {
  position: relative;
  width: min(84vw, 70rem);
  height: 74vh;
  margin: 10vh auto 0;
}

.sticker {
  display: grid;
  place-items: center;
  min-width: 7rem;
  min-height: 4.4rem;
  padding: 1rem 1.4rem;
  font-weight: 700;
  color: var(--matcha-lacquer);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease;
}

.seal-one { left: 5%; top: 18%; transform: rotate(-12deg); background: rgba(223, 255, 214, 0.68); }
.seal-two { right: 18%; top: 5%; width: 8rem; height: 8rem; font-family: var(--secondary); font-size: 4rem; border-radius: 50%; }
.chrome-icon { left: 28%; bottom: 18%; width: 5.5rem; height: 5.5rem; font-size: 2rem; color: var(--champagne-chrome); }
.tape { right: 4%; bottom: 24%; transform: rotate(11deg); background: rgba(167, 243, 255, 0.32); }
.dew { left: 12%; bottom: 5%; transform: rotate(7deg); }
.final-wordmark {
  left: 28%;
  top: 32%;
  width: auto;
  min-height: 8rem;
  padding: 1.1rem 2rem;
  border-radius: 2.4rem;
  font-size: clamp(3rem, 8vw, 7.8rem);
  background: rgba(255, 249, 234, 0.74);
}

.sticker:not(.assembled) {
  opacity: 0.72;
  transform: translateY(26px) rotate(0deg) scale(0.94);
}

.closing-aside {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  width: min(25rem, 60vw);
  margin: 0;
  padding: 1rem 1.2rem;
  border-radius: 1.5rem;
  background: rgba(255, 249, 234, 0.56);
  box-shadow: 0 18px 48px rgba(18, 22, 17, 0.12);
}

.chapter-dots {
  position: fixed;
  z-index: 30;
  right: 1.3rem;
  top: 50%;
  display: grid;
  gap: 0.65rem;
  transform: translateY(-50%);
}

.dot {
  width: 0.82rem;
  height: 0.82rem;
  overflow: hidden;
  border: 1px solid var(--champagne-chrome);
  border-radius: 50%;
  color: transparent;
  background: rgba(255, 249, 234, 0.62);
  box-shadow: 0 0 0 0 rgba(223, 255, 214, 0.0);
  transition: background 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

.dot.active {
  background: var(--matcha-lacquer);
  transform: scale(1.45);
  box-shadow: 0 0 0 0.45rem rgba(223, 255, 214, 0.36);
}

.ripple {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(223, 255, 214, 0.95);
  background: radial-gradient(circle, rgba(223, 255, 214, 0.38), transparent 58%);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleSpread 1.35s ease-out forwards;
}

@keyframes auroraSlide {
  from { transform: translateX(-8%) translateY(2%) rotate(0deg); }
  to { transform: translateX(8%) translateY(-4%) rotate(3deg); }
}

@keyframes plaqueSheen {
  0%, 100% { opacity: 0.18; transform: translateX(-8%); }
  45% { opacity: 0.82; transform: translateX(9%); }
}

@keyframes slowPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.48; }
  50% { transform: scale(1.08); opacity: 0.86; }
}

@keyframes floatDial {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: -1rem 1.4rem; rotate: -2deg; }
}

@keyframes popFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.7rem; }
}

@keyframes glassRotate {
  0%, 100% { transform: rotateZ(-22deg) rotateY(16deg) rotateX(0deg); }
  50% { transform: rotateZ(-16deg) rotateY(-18deg) rotateX(5deg); }
}

@keyframes trappedSlide {
  from { transform: translateX(-42%) rotate(2deg); }
  to { transform: translateX(42%) rotate(2deg); }
}

@keyframes rippleSpread {
  to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

@media (max-width: 820px) {
  .scene { padding: 5rem 1.1rem; }
  .hero-plaque,
  .forecast-plaque,
  .aurora-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    margin: 0;
  }
  .hero-plaque { min-height: 26rem; }
  .day-dial { right: -5rem; top: 47vh; opacity: 0.86; }
  .chat-bubble { right: 1rem; top: 10vh; }
  .tab-glow { left: 1rem; bottom: 6rem; }
  .tab-one, .tab-two, .tab-three, .jelly-a, .jelly-b, .tiny-interface {
    position: relative;
    display: inline-flex;
    inset: auto;
    margin: 0.6rem 0.3rem;
  }
  .scene-forecast { padding-top: 8rem; }
  .glass-leaf-stage { position: relative; left: auto; top: auto; width: 100%; height: 25rem; }
  .aurora-copy { margin-top: 1rem; }
  .deco-fan { right: 0; bottom: 4rem; }
  .sticker-sheet { width: 100%; height: 70vh; }
  .final-wordmark { left: 4%; top: 36%; }
  .closing-aside { width: calc(100% - 2rem); right: 1rem; }
}