:root {
  --frosted-lilac: #D9D7FF;
  --milk-white: #F8F7FF;
  --blue-ink: #38446E;
  --cherry: #FF6F9F;
  --cyan: #9DEBFF;
  --night: #221B3D;
  --pearl: #FFFFFF;
  --lemon: #FFF0A8;
  --glass: linear-gradient(135deg, rgba(217,215,255,.72), rgba(157,235,255,.32), rgba(255,255,255,.64));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--blue-ink);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 24% 12%, rgba(255,240,168,.68), transparent 18rem),
    radial-gradient(circle at 82% 24%, rgba(157,235,255,.56), transparent 22rem),
    linear-gradient(180deg, var(--frosted-lilac) 0%, var(--milk-white) 54%, var(--night) 100%);
  overflow-x: hidden;
}

.frost-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.frost-field::before,
.frost-field::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.28) 43% 44%, transparent 45% 100%),
    linear-gradient(72deg, transparent 0 62%, rgba(56,68,110,.07) 63% 64%, transparent 65% 100%);
  filter: blur(.2px);
}

.frost-field::after {
  transform: rotate(8deg) scale(1.08);
  opacity: .55;
}

.pane {
  position: absolute;
  width: 42vmax;
  height: 42vmax;
  background: var(--glass);
  clip-path: polygon(10% 0, 100% 20%, 52% 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 4rem rgba(255,255,255,.4), 0 2rem 5rem rgba(56,68,110,.12);
  backdrop-filter: blur(18px);
  animation: slowPane 18s ease-in-out infinite alternate;
}

.pane-one { left: -10vmax; top: 2vh; }
.pane-two { right: -12vmax; top: 32vh; animation-delay: -5s; clip-path: polygon(36% 0, 100% 68%, 0 100%); }
.pane-three { left: 44vw; bottom: -20vmax; animation-delay: -9s; clip-path: polygon(0 18%, 88% 0, 54% 100%); }

.ruled-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 42px, rgba(56,68,110,.07) 43px 44px);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  opacity: .42;
}

.sticker-tabs {
  position: fixed;
  right: clamp(12px, 3vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: 12px;
}

.sticker-tabs a {
  width: 42px;
  height: 36px;
  display: grid;
  place-items: center;
  font-family: "Bungee", "Arial Black", sans-serif;
  font-size: 12px;
  color: var(--blue-ink);
  text-decoration: none;
  background: rgba(255,240,168,.78);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 22px rgba(34,27,61,.13), inset 0 0 18px rgba(255,255,255,.55);
  clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%, 10% 50%);
  transition: transform .25s ease, background .25s ease;
}

.sticker-tabs a.active { background: rgba(255,111,159,.82); color: var(--pearl); transform: translateX(-8px) rotate(-3deg); }

.diary-spine {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 44px));
  margin-left: clamp(22px, 13vw, 210px);
  padding: 0 0 12vh;
}

.scene {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(48px, 8vh, 92px) 0;
  perspective: 1200px;
}

.scene-glass {
  position: relative;
  min-height: min(76vh, 760px);
  padding: clamp(30px, 6vw, 64px);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 30px 18px 36px 20px;
  box-shadow: 0 30px 90px rgba(34,27,61,.16), inset 0 0 44px rgba(255,255,255,.52);
  backdrop-filter: blur(22px) saturate(1.18);
  overflow: visible;
  transform: translateY(34px) rotateX(4deg);
  opacity: .5;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.scene.is-visible .scene-glass { opacity: 1; transform: translateY(0) rotateX(0deg); }

.scene-glass::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(56,68,110,.18);
  border-radius: 24px 14px 30px 18px;
  pointer-events: none;
}

.chapter-tag {
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 14px;
  font-family: "Bungee", "Arial Black", sans-serif;
  font-size: clamp(12px, 1.8vw, 18px);
  letter-spacing: .04em;
  background: rgba(255,240,168,.8);
  color: var(--night);
  box-shadow: 5px 6px 0 rgba(255,111,159,.22), inset 0 0 16px rgba(255,255,255,.65);
  transform: rotate(-2deg);
  clip-path: polygon(0 8%, 94% 0, 100% 86%, 8% 100%);
}

h1, h2 {
  margin: 0;
  font-family: "Bungee", "Arial Black", sans-serif;
  font-weight: 400;
  color: var(--night);
  line-height: .94;
  text-shadow: .055em .065em 0 rgba(157,235,255,.52), -.025em .03em 0 rgba(255,111,159,.28), 0 20px 38px rgba(56,68,110,.14);
}

.title-lockup {
  position: relative;
  max-width: 7.6em;
  font-size: clamp(54px, 13vw, 138px);
  letter-spacing: -.06em;
  filter: drop-shadow(0 8px 1px rgba(255,255,255,.35));
}

h2 { max-width: 680px; font-size: clamp(38px, 7.4vw, 82px); }

.dot-heart { color: var(--cherry); }

.drawn-heart path,
.doodle path,
.starburst path {
  fill: none;
  stroke: var(--cherry);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.6));
}

.scene.is-visible .drawn-heart path,
.scene.is-visible .doodle path,
.scene.is-visible .starburst path { animation: drawPath 1.8s ease forwards .24s; }

.title-heart { position: absolute; right: 15%; top: 16%; width: 78px; transform: rotate(-12deg); }

.lyric,
.hand-note,
.margin-note,
.maybe {
  font-family: "Gaegu", "Comic Sans MS", cursive;
  color: var(--blue-ink);
}

.lyric {
  max-width: 520px;
  margin: 34px 0 0;
  font-size: clamp(24px, 4.1vw, 38px);
  line-height: 1.06;
  font-weight: 700;
}

.margin-note {
  position: absolute;
  font-size: 24px;
  color: var(--cherry);
  transform: rotate(-8deg);
}

.note-one { right: -48px; top: 26%; max-width: 150px; }
.note-two { left: -90px; bottom: 18%; max-width: 160px; transform: rotate(8deg); }

.skeleton-line {
  height: 17px;
  width: min(460px, 82%);
  margin-top: 40px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.85), rgba(157,235,255,.18));
  background-size: 220% 100%;
  box-shadow: inset 0 0 12px rgba(255,255,255,.7), 0 7px 24px rgba(56,68,110,.08);
  animation: shimmer 1.9s ease-in-out infinite;
}

.skeleton-line.short { width: 58%; margin-top: 13px; }
.line-wide { width: 66%; }

.reveal-text { opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .75s ease .45s, transform .75s ease .45s, filter .75s ease .45s; }
.scene.is-visible .reveal-text { opacity: 1; transform: translateY(0); filter: blur(0); }

.shard {
  position: absolute;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 0 0 24px rgba(157,235,255,.25);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.shard-a { width: 46%; height: 38%; right: 3%; top: 6%; clip-path: polygon(0 0, 100% 22%, 55% 100%); }
.shard-b { width: 30%; height: 44%; left: -8%; bottom: 16%; clip-path: polygon(42% 0, 100% 82%, 0 100%); }
.shard-c { width: 28%; height: 20%; right: 18%; bottom: -3%; clip-path: polygon(0 18%, 100% 0, 72% 100%, 12% 70%); }

.charm {
  position: absolute;
  transform-style: preserve-3d;
  filter: drop-shadow(0 22px 28px rgba(34,27,61,.18));
  animation: charmFloat 5.6s ease-in-out infinite;
}

.heart-key { right: 13%; top: 47%; width: 76px; height: 118px; animation-delay: -.8s; }
.key-heart { position: absolute; top: 0; left: 9px; width: 58px; height: 52px; background: linear-gradient(135deg, rgba(255,111,159,.72), rgba(255,255,255,.55)); clip-path: path("M29 50 C10 36 2 23 10 10 C18 0 27 9 29 15 C34 6 45 0 54 11 C66 26 48 39 29 50Z"); border: 1px solid rgba(255,255,255,.8); }
.key-stem { position: absolute; left: 35px; top: 48px; width: 9px; height: 70px; background: linear-gradient(180deg, rgba(157,235,255,.72), rgba(255,255,255,.55)); border-radius: 999px; box-shadow: 18px 48px 0 -2px rgba(157,235,255,.68), 26px 56px 0 -3px rgba(255,240,168,.78); }

.fold-corner { position: absolute; right: 0; top: 0; width: 130px; height: 130px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(217,215,255,.15)); clip-path: polygon(100% 0, 0 0, 100% 100%); border-top-right-radius: 30px; }

.transparent-cassette { right: 6%; top: 18%; width: 190px; height: 118px; border-radius: 20px; background: linear-gradient(135deg, rgba(157,235,255,.46), rgba(255,255,255,.52)); border: 1px solid rgba(255,255,255,.86); box-shadow: inset 0 0 28px rgba(255,255,255,.5); }
.transparent-cassette span:nth-child(1), .transparent-cassette span:nth-child(2) { position: absolute; top: 31px; width: 42px; height: 42px; border: 8px solid rgba(56,68,110,.22); border-radius: 50%; background: rgba(255,255,255,.28); }
.transparent-cassette span:nth-child(1) { left: 34px; }
.transparent-cassette span:nth-child(2) { right: 34px; }
.transparent-cassette span:nth-child(3) { position: absolute; left: 34px; right: 34px; bottom: 18px; height: 22px; border-radius: 999px; background: rgba(255,240,168,.42); }

.arrow-loop { position: absolute; left: -74px; top: 19%; width: 170px; transform: rotate(-10deg); }
.unsent-stack { margin-top: 74px; }
.hand-note { max-width: 440px; margin: 18px 0 0; font-weight: 700; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.blush-ticks { position: absolute; right: 22%; bottom: 16%; display: flex; gap: 8px; transform: rotate(-14deg); }
.blush-ticks i { width: 8px; height: 38px; background: var(--cherry); border-radius: 99px; opacity: .72; }

.orbit-ring { position: relative; height: 330px; margin: 34px 0 0; border: 1px dashed rgba(56,68,110,.18); border-radius: 50%; transform: rotate(-6deg); }
.orbit-ring::before { content: ""; position: absolute; inset: 22%; border: 1px dashed rgba(255,111,159,.22); border-radius: 50%; }
.faceted-bead { width: 88px; height: 88px; left: 12%; top: 18%; background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(157,235,255,.5) 45%, rgba(217,215,255,.6)); clip-path: polygon(50% 0, 88% 22%, 100% 64%, 62% 100%, 18% 88%, 0 42%); }
.folded-ticket { right: 9%; top: 27%; width: 156px; height: 78px; display: grid; place-items: center; font-family: "Bungee", sans-serif; color: var(--blue-ink); background: rgba(255,240,168,.8); clip-path: polygon(0 0, 82% 0, 100% 32%, 92% 100%, 0 100%); border: 1px solid rgba(255,255,255,.8); }
.cloudy-perfume { left: 41%; bottom: 3%; width: 98px; height: 126px; border-radius: 28px 28px 20px 20px; background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(217,215,255,.45), rgba(157,235,255,.42)); border: 1px solid rgba(255,255,255,.9); }
.cloudy-perfume::before { content: ""; position: absolute; left: 31px; top: -22px; width: 36px; height: 28px; border-radius: 8px 8px 3px 3px; background: rgba(255,255,255,.78); }
.cloudy-perfume span { position: absolute; inset: 36px 16px 24px; border-radius: 50%; background: rgba(255,255,255,.48); box-shadow: 20px 6px 0 rgba(157,235,255,.23), -10px 18px 0 rgba(255,240,168,.3); }
.starburst { position: absolute; right: -54px; bottom: 5%; width: 120px; transform: rotate(11deg); }

.ending-scene { color: var(--pearl); }
.ending-glass { background: linear-gradient(135deg, rgba(34,27,61,.7), rgba(56,68,110,.42), rgba(217,215,255,.24)); box-shadow: 0 34px 110px rgba(34,27,61,.4), inset 0 0 60px rgba(157,235,255,.22); }
.ending-glass h2, .ending-glass .chapter-tag { color: var(--pearl); }
.ending-glass .lyric { color: var(--milk-white); }
.envelope-3d { position: relative; width: min(410px, 78vw); height: 250px; margin: 48px auto 22px; transform-style: preserve-3d; transform: rotateX(8deg) rotateZ(-3deg); filter: drop-shadow(0 34px 34px rgba(0,0,0,.22)); }
.env-back, .env-front, .env-flap, .env-letter { position: absolute; inset: 0; }
.env-back { background: linear-gradient(135deg, rgba(217,215,255,.86), rgba(157,235,255,.4)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border: 1px solid rgba(255,255,255,.9); }
.env-letter { inset: 18px 34px auto; height: 154px; background: rgba(248,247,255,.92); transform: translateY(18px); transition: transform 1.1s ease; }
.scene.is-visible .env-letter { transform: translateY(-22px); }
.env-front { background: linear-gradient(155deg, rgba(255,255,255,.48), rgba(217,215,255,.62)); clip-path: polygon(0 18%, 50% 62%, 100% 18%, 100% 100%, 0 100%); border: 1px solid rgba(255,255,255,.76); }
.env-flap { background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(157,235,255,.28)); clip-path: polygon(0 0, 100% 0, 50% 68%); transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.scene.is-visible .env-flap { transform: rotateX(-58deg); }
.perforation { height: 1px; margin: 24px 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 10px, transparent 10px 19px); }
.maybe { margin: 28px 0 0; text-align: center; font-weight: 700; font-size: clamp(38px, 8vw, 78px); color: var(--lemon); transform: rotate(-3deg); }

@keyframes shimmer { 0% { background-position: 120% 0; opacity: .9; } 55% { opacity: .45; } 100% { background-position: -120% 0; opacity: .9; } }
@keyframes slowPane { from { transform: translate3d(0,0,0) rotate(-4deg); } to { transform: translate3d(2vw,-2vh,0) rotate(6deg); } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes charmFloat { 0%, 100% { transform: translate3d(0,0,0) rotateY(-12deg) rotateZ(-4deg); } 50% { transform: translate3d(0,-22px,34px) rotateY(18deg) rotateZ(6deg); } }

@media (max-width: 760px) {
  .diary-spine { width: calc(100vw - 30px); margin-left: 15px; }
  .scene-glass { padding: 28px 22px; min-height: 76vh; }
  .sticker-tabs { right: 7px; }
  .sticker-tabs a { width: 34px; height: 30px; font-size: 10px; }
  .margin-note { position: relative; right: auto; left: auto; top: auto; bottom: auto; display: block; margin: 18px 0; }
  .heart-key, .transparent-cassette { transform: scale(.76); right: 0; }
  .arrow-loop, .starburst { display: none; }
  .orbit-ring { height: 270px; }
}