:root {
  --moon-cyan: #B7F7FF;
  --sunset: #FF9A62;
  --honey: #FFD36E;
  --violet: #5B2B7E;
  --mint: #7AD9C2;
  --plum: #241238;
  --white: #F8FDFF;
  --body: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'M PLUS Rounded 1c', 'Nunito Sans', system-ui, sans-serif;
  --meta: 'Quicksand', 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 211, 110, 0.9), transparent 22rem),
    radial-gradient(circle at 76% 19%, rgba(183, 247, 255, 0.75), transparent 25rem),
    radial-gradient(circle at 60% 84%, rgba(255, 154, 98, 0.65), transparent 32rem),
    linear-gradient(145deg, #241238 0%, #5B2B7E 40%, #FF9A62 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(248,253,255,0.55) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 0 46%, rgba(255,211,110,0.22) 47% 49%, transparent 50% 100%),
    repeating-linear-gradient(135deg, rgba(183,247,255,0.08) 0 2px, transparent 2px 28px);
  background-size: 58px 58px, 160px 160px, 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.75;
}

.skyfield { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sunset-orb {
  position: absolute; width: 24rem; height: 24rem; left: -5rem; top: 8vh; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--white), var(--honey) 26%, var(--sunset) 63%, rgba(255,154,98,0) 72%);
  filter: blur(1px); opacity: 0.85;
}
.cd-halo { position: absolute; border-radius: 50%; border: 2px solid rgba(183,247,255,0.34); box-shadow: inset 0 0 30px rgba(248,253,255,0.22), 0 0 35px rgba(122,217,194,0.2); }
.halo-one { width: 34rem; height: 34rem; right: -10rem; top: 6rem; }
.halo-two { width: 18rem; height: 18rem; left: 16%; bottom: 8rem; }
.pattern.numerals { position: absolute; inset: auto -5rem 20% auto; width: 65rem; transform: rotate(-24deg); font-family: var(--meta); font-size: 2rem; letter-spacing: 1.2rem; color: rgba(248,253,255,0.12); }
.manga-streak { position: absolute; height: 16rem; width: 130vw; left: -15vw; transform: rotate(-16deg); background: linear-gradient(90deg, transparent, rgba(248,253,255,0.24), transparent 28%, rgba(255,211,110,0.18), transparent 60%); clip-path: polygon(0 40%, 100% 0, 100% 34%, 0 100%); }
.streak-one { top: 33vh; }
.streak-two { top: 118vh; opacity: 0.6; }

.scroll-ribbon {
  position: fixed; z-index: 20; left: -4rem; top: 2rem; width: 34rem; display: flex; justify-content: space-around;
  transform: rotate(-12deg); padding: 0.55rem 1.5rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(183,247,255,0.42), rgba(248,253,255,0.24), rgba(255,154,98,0.34));
  border: 1px solid rgba(248,253,255,0.5); box-shadow: inset 0 1px 0 rgba(248,253,255,0.8), 0 18px 42px rgba(36,18,56,0.3); backdrop-filter: blur(16px);
}
.scroll-ribbon span { font-family: var(--meta); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--plum); }

.lunar-planner { position: relative; min-height: 520vh; padding: 8vh 4vw 16vh; }
.scene { position: relative; min-height: 98vh; display: flex; align-items: center; margin: -5vh 0; }
.scene-opening { min-height: 105vh; }

.planner-plane, .diagonal-pane {
  position: relative; width: min(76rem, 88vw); margin-left: 6vw; border: 1px solid rgba(248,253,255,0.56); border-radius: 38px;
  background: linear-gradient(135deg, rgba(183,247,255,0.42) 0%, rgba(248,253,255,0.23) 42%, rgba(255,154,98,0.34) 100%);
  box-shadow: inset 0 1px 0 rgba(248,253,255,0.9), inset 0 -18px 38px rgba(91,43,126,0.16), 0 35px 90px rgba(36,18,56,0.45);
  backdrop-filter: blur(18px) saturate(1.4);
}
.planner-plane { min-height: 72vh; padding: 1rem 2rem 3rem; transform: rotate(-8deg) skew(-4deg); overflow: hidden; }
.planner-plane::after, .diagonal-pane::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(248,253,255,0.52), transparent 20%, transparent 62%, rgba(255,211,110,0.22));
  mix-blend-mode: screen;
}
.chrome-bar { height: 2.4rem; display: flex; align-items: center; gap: 0.55rem; transform: skew(4deg); color: var(--plum); font-family: var(--meta); font-weight: 700; }
.signal-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--mint); box-shadow: inset 0 2px 2px rgba(248,253,255,0.9), 0 0 14px var(--mint); }
.chrome-title { margin-left: 0.5rem; letter-spacing: 0.15em; font-size: 0.74rem; }

.appointment-slot { margin: 10vh 0 0 7vw; max-width: 44rem; transform: skew(4deg) rotate(1deg); padding: 2rem; border-radius: 30px; background: rgba(36,18,56,0.38); border: 1px solid rgba(248,253,255,0.42); box-shadow: inset 0 0 40px rgba(183,247,255,0.15), 0 0 44px rgba(255,211,110,0.22); }
.slot-label, .date-stamp { display: inline-block; font-family: var(--meta); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; font-weight: 700; color: var(--honey); margin-bottom: 0.8rem; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; line-height: 0.94; letter-spacing: -0.05em; text-shadow: 0 5px 20px rgba(36,18,56,0.28); }
h1 { font-size: clamp(4rem, 12vw, 11rem); color: var(--white); }
h2 { font-size: clamp(2.5rem, 6vw, 6.7rem); color: var(--white); }
p { font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.62; font-weight: 600; color: rgba(248,253,255,0.88); }
#slidingDomain { display: inline-block; transform: translateX(var(--domain-slide, -1.2rem)); filter: drop-shadow(0 0 24px rgba(255,211,110,0.55)); }

.notification { position: absolute; right: 7vw; bottom: 13vh; width: min(25rem, 72vw); padding: 1.25rem 1.35rem; transform: rotate(7deg); color: var(--plum); }
.notification strong, .notification span { display: block; }
.notification strong { font-family: var(--display); font-size: 1.35rem; }
.notification span { font-weight: 800; }
.aero-bubble, .moon-chip, .time-chip, .sticker, .notification {
  border-radius: 28px; background: radial-gradient(circle at 25% 15%, rgba(248,253,255,0.98), rgba(183,247,255,0.52) 34%, rgba(255,154,98,0.34) 100%);
  border: 1px solid rgba(248,253,255,0.72); box-shadow: inset 0 2px 2px rgba(248,253,255,0.92), inset 0 -12px 22px rgba(91,43,126,0.14), 0 16px 34px rgba(36,18,56,0.28);
}
.hover-lift { transition: transform 260ms ease, box-shadow 260ms ease, filter 260ms ease; }
.hover-lift:hover { transform: translateY(-9px) rotate(var(--hover-rotate, 0deg)); box-shadow: inset 0 2px 2px rgba(248,253,255,1), 0 26px 54px rgba(91,43,126,0.45), 0 0 28px rgba(255,211,110,0.38); filter: saturate(1.18); }

.moon-sticker { position: absolute; right: 8%; top: 20%; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--white), var(--moon-cyan) 45%, rgba(91,43,126,0.55)); box-shadow: inset -16px -18px 24px rgba(36,18,56,0.26), 0 0 50px rgba(183,247,255,0.62); }
.moon-sticker span { position: absolute; width: 7.4rem; height: 7.4rem; top: 1.7rem; left: 3.2rem; border-radius: 50%; background: rgba(36,18,56,0.72); box-shadow: inset 0 0 20px rgba(183,247,255,0.2); }
.time-chip { position: absolute; padding: 0.72rem 1rem; color: var(--plum); font-family: var(--meta); font-weight: 700; }
.chip-a { left: 9%; bottom: 13%; transform: skew(4deg) rotate(8deg); }
.chip-b { right: 20%; bottom: 18%; transform: skew(4deg) rotate(-9deg); }

.diagonal-pane { min-height: 56vh; padding: 3.5rem; transform: rotate(-8deg) skew(-5deg); clip-path: polygon(3% 0, 100% 9%, 96% 100%, 0 88%); }
.forbidden, .getaway { margin-left: 13vw; }
.uplink, .dawn { margin-left: 2vw; transform: rotate(7deg) skew(5deg); clip-path: polygon(0 13%, 97% 0, 100% 86%, 5% 100%); }
.inner-rail { position: relative; z-index: 2; transform: skew(5deg) rotate(8deg); max-width: 58rem; }
.uplink .inner-rail, .dawn .inner-rail { transform: skew(-5deg) rotate(-7deg); }
.split-rail { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: center; max-width: 68rem; }
.date-stamp { color: var(--plum); background: rgba(255,211,110,0.8); padding: 0.55rem 0.85rem; border-radius: 999px; box-shadow: inset 0 1px rgba(248,253,255,0.8); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(2.8rem, 1fr)); gap: 0.55rem; margin-top: 1.6rem; max-width: 42rem; transform: rotate(-2deg); }
.calendar-grid span { min-height: 3.2rem; display: grid; place-items: center; border-radius: 16px; font-family: var(--meta); font-weight: 700; color: var(--plum); background: rgba(248,253,255,0.58); border: 1px solid rgba(248,253,255,0.7); box-shadow: inset 0 1px rgba(248,253,255,0.9); }
.calendar-grid .forbidden-mark { color: var(--white); background: linear-gradient(135deg, var(--violet), var(--sunset)); box-shadow: 0 0 30px rgba(255,211,110,0.58); position: relative; }
.calendar-grid .forbidden-mark::after { content: ""; position: absolute; width: 160%; height: 5px; border-radius: 99px; background: var(--honey); transform: rotate(-17deg); box-shadow: 0 0 15px var(--honey); }
.forbidden-chip { position: absolute; right: 7%; top: 9%; padding: 0.8rem 1.1rem; transform: rotate(12deg); color: var(--plum); font-family: var(--meta); font-weight: 700; z-index: 4; }

.bamboo-signal { position: relative; height: 22rem; }
.bamboo-signal i { position: absolute; bottom: 0; width: 1.65rem; border-radius: 999px; background: linear-gradient(90deg, #7AD9C2, #F8FDFF 42%, #7AD9C2); box-shadow: inset 4px 0 10px rgba(36,18,56,0.18), 0 0 20px rgba(122,217,194,0.45); transform-origin: bottom; }
.bamboo-signal i:nth-child(1) { left: 2rem; height: 18rem; transform: rotate(-10deg); }
.bamboo-signal i:nth-child(2) { left: 6rem; height: 21rem; transform: rotate(5deg); }
.bamboo-signal i:nth-child(3) { left: 10rem; height: 16rem; transform: rotate(-4deg); }
.bamboo-signal i:nth-child(4) { left: 14rem; height: 19rem; transform: rotate(12deg); }
.arc { position: absolute; border: 3px solid rgba(183,247,255,0.78); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 12px var(--moon-cyan)); }
.arc-one { width: 8rem; height: 8rem; right: 3rem; top: 3rem; }
.arc-two { width: 12rem; height: 12rem; right: 0; top: 0; }
.arc-three { width: 16rem; height: 16rem; right: -2rem; top: -2rem; }
.koi-comet { position: absolute; font-size: 5rem; color: var(--honey); text-shadow: 0 0 24px rgba(255,211,110,0.7); }
.comet-one { right: 9%; bottom: 9%; transform: rotate(-18deg); }
.comet-two { left: 7%; top: 16%; transform: rotate(-22deg); }

.sticker-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.sticker { border: 0; padding: 1rem 1.2rem; font: 800 1rem var(--meta); color: var(--plum); cursor: pointer; --hover-rotate: -3deg; }
.bubble-one, .bubble-two { position: absolute; width: 9rem; height: 9rem; }
.bubble-one { right: 12%; top: 10%; }
.bubble-two { right: 31%; bottom: 7%; width: 5rem; height: 5rem; }
.final-rail { max-width: 50rem; }
.crescent-cursor { width: 9rem; height: 9rem; margin-top: 2rem; border-radius: 50%; background: var(--honey); box-shadow: 0 0 35px rgba(255,211,110,0.76), inset -12px -12px 18px rgba(255,154,98,0.5); animation: pulseCursor 1.5s ease-in-out infinite; position: relative; }
.crescent-cursor span { position: absolute; width: 7rem; height: 7rem; border-radius: 50%; background: rgba(36,18,56,0.92); top: 0.65rem; left: 2rem; }

[data-shimmer] { --mx: 45%; --my: 25%; background-image: radial-gradient(circle at var(--mx) var(--my), rgba(248,253,255,0.96), rgba(183,247,255,0.52) 30%, rgba(255,154,98,0.34) 100%); }

@keyframes pulseCursor { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes chipWobble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
[data-chip] { animation: chipWobble 4.8s ease-in-out infinite; }
[data-chip]:nth-child(even) { animation-delay: -1.4s; }

@media (max-width: 760px) {
  .scroll-ribbon { left: -7rem; top: 1rem; width: 30rem; }
  .lunar-planner { padding-left: 1rem; padding-right: 1rem; }
  .planner-plane, .diagonal-pane { width: 94vw; margin-left: 0; border-radius: 28px; }
  .planner-plane { padding: 0.8rem 1rem 2rem; transform: rotate(-5deg) skew(-2deg); }
  .appointment-slot { margin: 7vh 0 0; padding: 1.3rem; }
  .moon-sticker { width: 7rem; height: 7rem; right: 3%; top: 16%; }
  .moon-sticker span { width: 4.5rem; height: 4.5rem; left: 2rem; top: 0.9rem; }
  .diagonal-pane { padding: 2rem 1.4rem; min-height: 66vh; }
  .split-rail { grid-template-columns: 1fr; }
  .bamboo-signal { height: 16rem; transform: scale(0.78); transform-origin: left top; }
  .calendar-grid { grid-template-columns: repeat(4, 1fr); }
  .notification { right: 4vw; bottom: 5vh; }
}