:root {
  --dawn-parchment: #F7EBCB;
  --anemo-mint: #7EE6C6;
  --skyglass-blue: #8CC9FF;
  --liyue-amber: #D99A3D;
  --violet-electro: #9B6CFF;
  --deep-ink: #1B2545;
  --coral-lantern: #FF7F6E;
  --paper: rgba(247, 235, 203, .82);
  --ink-soft: rgba(27, 37, 69, .76);
  --title-font: "Cinzel Decorative", "Palatino Linotype", Georgia, serif;
  --serif-font: "Fraunces", Georgia, serif;
  --sans-font: "Nunito Sans", Inter, system-ui, sans-serif;
  --jp-font: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --design-chapter-token: "Interlude*";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep-ink); }
body {
  margin: 0;
  color: var(--deep-ink);
  font-family: var(--sans-font);
  overflow-x: hidden;
  background: var(--deep-ink);
}

body.journal-open .journal-cover { transform: translateX(-115%) rotateY(-38deg); opacity: 0; pointer-events: none; }
body.journal-open .daybook { filter: none; }

.journal-cover {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 62% 38%, rgba(126,230,198,.22), transparent 20%),
    radial-gradient(circle at 30% 70%, rgba(217,154,61,.22), transparent 26%),
    linear-gradient(120deg, #36254b, var(--deep-ink) 48%, #121a33);
  transition: transform 1.25s cubic-bezier(.76,.02,.18,1), opacity .8s ease .55s;
  transform-origin: left center;
  perspective: 1600px;
}
.journal-cover:before {
  content: "";
  position: absolute;
  inset: 6vh 10vw;
  border-radius: 28px 16px 16px 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 12%),
    repeating-linear-gradient(32deg, rgba(247,235,203,.045) 0 2px, transparent 2px 9px),
    linear-gradient(140deg, #26345d, #1b2545 56%, #111832);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 2px rgba(217,154,61,.34), inset 0 0 70px rgba(0,0,0,.22);
}
.cover-spine { position: absolute; left: 11.5vw; top: 7vh; bottom: 7vh; width: 6vw; border-radius: 30px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(217,154,61,.16), transparent); }
.cover-content { position: relative; z-index: 2; text-align: center; color: var(--dawn-parchment); transform: translateY(-2vh); }
.cover-content h1 { font-family: var(--title-font); font-size: clamp(3.5rem, 10vw, 10rem); margin: .15em 0 .25em; letter-spacing: .08em; text-shadow: 0 0 26px rgba(126,230,198,.28); }
.date-stamp, .marginalia { font-family: var(--jp-font); letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; }
.open-page, .page-cue {
  border: 1px solid rgba(217,154,61,.72);
  border-radius: 999px;
  color: var(--dawn-parchment);
  background: rgba(27,37,69,.45);
  padding: .85rem 1.35rem;
  font-family: var(--sans-font);
  letter-spacing: .08em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(217,154,61,.18), inset 0 0 18px rgba(247,235,203,.08);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.open-page:hover, .page-cue:hover { transform: translateY(-3px); background: rgba(255,127,110,.22); box-shadow: 0 0 34px rgba(255,127,110,.32); }

.compass-rose { width: 116px; height: 116px; margin: 0 auto; border-radius: 50%; border: 1px solid rgba(247,235,203,.58); position: relative; background: radial-gradient(circle, rgba(126,230,198,.32), transparent 63%); animation: pulseGlow 3.6s ease-in-out infinite; }
.compass-rose:before, .compass-rose:after { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(217,154,61,.65); border-radius: 50%; }
.compass-rose:after { inset: 33px; border-style: solid; border-color: rgba(126,230,198,.58); }
.compass-rose span, .compass-rose i { position: absolute; left: 50%; top: 50%; width: 10px; height: 78px; background: linear-gradient(var(--coral-lantern), transparent 50%, var(--skyglass-blue)); clip-path: polygon(50% 0, 100% 46%, 50% 100%, 0 46%); transform: translate(-50%, -50%); }
.compass-rose i { transform: translate(-50%, -50%) rotate(90deg); opacity: .75; }

.cover-pressed { position: absolute; width: 110px; height: 170px; border-radius: 60% 40% 60% 40%; opacity: .28; filter: blur(.3px); background: radial-gradient(circle at 50% 18%, var(--coral-lantern) 0 9%, transparent 10%), radial-gradient(ellipse at 50% 42%, var(--anemo-mint) 0 14%, transparent 15%); }
.pressed-a { right: 19vw; top: 18vh; transform: rotate(25deg); }
.pressed-b { left: 24vw; bottom: 16vh; transform: rotate(-37deg) scale(.75); }

.daybook { position: relative; filter: brightness(.7); transition: filter 1s ease; }
.sun-path { position: absolute; z-index: 6; inset: 0 0 auto 0; width: 100%; height: 500vh; pointer-events: none; overflow: visible; }
.sun-path path { fill: none; stroke: url(#none); stroke: rgba(247,235,203,.52); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 22 18; filter: drop-shadow(0 0 12px rgba(217,154,61,.42)); }
.scene { min-height: 100vh; position: relative; overflow: hidden; display: grid; align-items: center; padding: 8vh 8vw; isolation: isolate; }
.scene:before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .7; background-image: radial-gradient(rgba(27,37,69,.11) 1px, transparent 1px); background-size: 7px 7px; mix-blend-mode: multiply; }
.scene:after { content: ""; position: absolute; inset: -12%; z-index: -1; background: radial-gradient(ellipse at 24% 22%, rgba(255,255,255,.38), transparent 28%), radial-gradient(ellipse at 70% 60%, rgba(255,255,255,.16), transparent 34%); filter: blur(24px); }

.wind-gate { background: linear-gradient(150deg, var(--dawn-parchment), #dff8db 45%, var(--skyglass-blue)); }
.meadow-ledger { background: linear-gradient(150deg, #eaf6cf, var(--skyglass-blue) 45%, #f4cf8b); }
.rain-shrine { background: linear-gradient(160deg, #8fc9d9, #6f97bf 48%, #425780); color: var(--dawn-parchment); }
.amber-cliff { background: linear-gradient(150deg, #f6d28a, var(--liyue-amber) 45%, #8b4e45 90%); }
.moon-constellarium { background: radial-gradient(circle at 55% 70%, rgba(155,108,255,.32), transparent 25%), linear-gradient(155deg, #080e22, var(--deep-ink) 50%, #39265f); color: var(--dawn-parchment); }

.field-note, .vellum-tab, .stone-plaque { position: relative; z-index: 8; width: min(560px, 86vw); padding: clamp(1.4rem, 4vw, 3rem); backdrop-filter: blur(10px); }
.field-note { background: var(--paper); border: 1px solid rgba(217,154,61,.45); border-radius: 24px 42px 30px 18px; box-shadow: 0 25px 80px rgba(27,37,69,.18); transform: rotate(-2deg); }
.opening-note { margin-left: 7vw; }
.vellum-tab { background: rgba(247,235,203,.72); color: var(--deep-ink); border-radius: 55% 45% 50% 38% / 12% 18% 16% 15%; border: 1px solid rgba(126,230,198,.42); box-shadow: 0 24px 70px rgba(27,37,69,.18); }
.diagonal { margin-left: auto; transform: rotate(2deg); }
.stone-plaque { margin-left: 9vw; background: rgba(27,37,69,.45); border: 1px solid rgba(140,201,255,.38); border-radius: 18px; box-shadow: inset 0 0 45px rgba(247,235,203,.08), 0 25px 90px rgba(0,0,0,.24); }
.amber-note { margin-left: auto; background: rgba(247,235,203,.78); }
.moon-tab { margin: 0 auto; background: rgba(27,37,69,.42); color: var(--dawn-parchment); border-color: rgba(155,108,255,.55); text-align: center; }

h2 { font-family: var(--title-font); font-size: clamp(2.6rem, 7vw, 6rem); margin: .08em 0; line-height: .92; letter-spacing: .04em; }
h3 { font-family: var(--serif-font); font-size: clamp(1.25rem, 3vw, 2.2rem); font-weight: 500; margin: .55em 0; color: inherit; }
p { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }
.marginalia { color: var(--coral-lantern); margin: 0 0 .5rem; }
.page-cue { position: absolute; z-index: 11; right: 8vw; bottom: 9vh; color: var(--deep-ink); background: rgba(247,235,203,.62); }
.rain-shrine .page-cue, .moon-constellarium .page-cue { color: var(--dawn-parchment); background: rgba(27,37,69,.55); }

.astrolabe { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 10px; padding: 12px; border-radius: 999px; background: rgba(27,37,69,.42); border: 1px solid rgba(247,235,203,.25); backdrop-filter: blur(12px); }
.astrolabe button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(247,235,203,.22); background: rgba(247,235,203,.1); color: var(--dawn-parchment); cursor: pointer; position: relative; transition: transform .25s ease, background .25s ease; }
.astrolabe button span { font-size: 1.15rem; }
.astrolabe button em { position: absolute; right: 55px; top: 50%; transform: translateY(-50%); opacity: 0; white-space: nowrap; background: rgba(27,37,69,.75); padding: .35rem .55rem; border-radius: 99px; font-style: normal; font-size: .72rem; }
.astrolabe button:hover em { opacity: 1; }
.astrolabe button.active { background: var(--coral-lantern); transform: scale(1.12); box-shadow: 0 0 24px rgba(255,127,110,.5); }

.cloud { position: absolute; width: 42vw; height: 16vh; border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(20px); animation: cloudDrift 28s linear infinite; }
.cloud-one { top: 12vh; left: -18vw; } .cloud-two { top: 48vh; right: -26vw; animation-duration: 38s; }
.rings, .map-fragment { position: absolute; border: 1px dashed rgba(27,37,69,.18); border-radius: 50%; }
.rings { width: 62vw; height: 62vw; right: -14vw; bottom: -25vw; box-shadow: inset 0 0 0 28px rgba(126,230,198,.08), inset 0 0 0 82px rgba(217,154,61,.06); }
.map-fragment { width: 54vw; height: 38vw; left: -10vw; top: 16vh; transform: rotate(-18deg); box-shadow: inset 0 0 0 24px rgba(247,235,203,.18), inset 0 0 0 70px rgba(27,37,69,.04); }
.waypoint { position: absolute; right: 22vw; top: 28vh; width: 90px; height: 160px; background: linear-gradient(150deg, rgba(126,230,198,.75), rgba(140,201,255,.88), rgba(155,108,255,.45)); clip-path: polygon(50% 0, 88% 22%, 70% 84%, 50% 100%, 30% 84%, 12% 22%); filter: drop-shadow(0 0 32px rgba(126,230,198,.65)); animation: float 5s ease-in-out infinite; }
.waypoint span { position: absolute; inset: 22% 42%; background: rgba(255,255,255,.7); }

.botanical { position: absolute; z-index: 5; pointer-events: none; }
.botanical i { position: absolute; display: block; width: 54px; height: 86px; border-radius: 80% 20% 80% 20%; transform-origin: bottom center; background: var(--anemo-mint); box-shadow: inset -10px -10px 0 rgba(27,37,69,.08); animation: petalBreathe 4s ease-in-out infinite; }
.wind-fern { left: 13vw; bottom: 12vh; } .wind-fern i:nth-child(1){transform:rotate(-52deg)} .wind-fern i:nth-child(2){transform:rotate(-22deg)} .wind-fern i:nth-child(3){transform:rotate(18deg)} .wind-fern i:nth-child(4){transform:rotate(48deg)}
.meadow-flower { left: 14vw; bottom: 20vh; } .meadow-flower i { background: var(--dawn-parchment); width: 62px; height: 62px; border-radius: 60% 40% 65% 35%; } .meadow-flower i:nth-child(1){transform:rotate(0deg) translateY(-42px)} .meadow-flower i:nth-child(2){transform:rotate(72deg) translateY(-42px)} .meadow-flower i:nth-child(3){transform:rotate(144deg) translateY(-42px)} .meadow-flower i:nth-child(4){transform:rotate(216deg) translateY(-42px)} .meadow-flower i:nth-child(5){transform:rotate(288deg) translateY(-42px)}
.amber-osmanthus { left: 17vw; top: 24vh; } .amber-osmanthus i { background: var(--coral-lantern); width: 44px; height: 44px; } .amber-osmanthus i:nth-child(1){transform:rotate(0deg) translateY(-36px)} .amber-osmanthus i:nth-child(2){transform:rotate(60deg) translateY(-36px)} .amber-osmanthus i:nth-child(3){transform:rotate(120deg) translateY(-36px)} .amber-osmanthus i:nth-child(4){transform:rotate(180deg) translateY(-36px)} .amber-osmanthus i:nth-child(5){transform:rotate(240deg) translateY(-36px)} .amber-osmanthus i:nth-child(6){transform:rotate(300deg) translateY(-36px)}
.night-iris { right: 17vw; bottom: 26vh; } .night-iris i { background: var(--violet-electro); width: 72px; height: 110px; } .night-iris i:nth-child(1){transform:rotate(-36deg)} .night-iris i:nth-child(2){transform:rotate(-9deg)} .night-iris i:nth-child(3){transform:rotate(18deg)} .night-iris i:nth-child(4){transform:rotate(45deg)}

.grass { position: absolute; bottom: 0; width: 36vw; height: 32vh; opacity: .55; background: repeating-linear-gradient(84deg, transparent 0 13px, rgba(27,37,69,.25) 14px 16px, transparent 18px 30px); clip-path: polygon(0 100%, 8% 40%, 15% 100%, 24% 35%, 32% 100%, 45% 28%, 57% 100%, 70% 38%, 82% 100%, 94% 45%, 100% 100%); }
.grass-left { left: 0; } .grass-right { right: 0; transform: scaleX(-1); }
.sundial { position: absolute; right: 18vw; bottom: 18vh; width: 190px; height: 190px; border-radius: 50%; border: 2px solid rgba(217,154,61,.55); background: radial-gradient(circle, rgba(247,235,203,.28), transparent 66%); }
.sundial span { position: absolute; left: 50%; top: 14%; width: 8px; height: 76px; background: var(--deep-ink); transform-origin: bottom center; animation: compassSpin 12s linear infinite; }
.rain-layer { position: absolute; inset: 0; background-image: linear-gradient(105deg, transparent 0 48%, rgba(247,235,203,.36) 49% 50%, transparent 51%); background-size: 26px 70px; opacity: .28; animation: rainFall .8s linear infinite; }
.shrine-roof { position: absolute; right: 11vw; top: 18vh; width: 360px; height: 170px; background: linear-gradient(145deg, rgba(27,37,69,.8), rgba(155,108,255,.2)); clip-path: polygon(50% 0, 100% 55%, 86% 65%, 86% 100%, 14% 100%, 14% 65%, 0 55%); border-bottom: 4px solid rgba(247,235,203,.28); }
.ripple-field { position: absolute; right: 18vw; bottom: 14vh; width: 340px; height: 190px; }
.ripple-field span { position: absolute; inset: 30%; border: 2px solid rgba(140,201,255,.55); border-radius: 50%; animation: ripple 3s ease-out infinite; } .ripple-field span:nth-child(2){animation-delay:1s} .ripple-field span:nth-child(3){animation-delay:2s}
.cliff { position: absolute; bottom: -4vh; background: linear-gradient(130deg, #70423c, var(--liyue-amber)); clip-path: polygon(0 100%, 18% 20%, 34% 56%, 48% 12%, 66% 68%, 84% 18%, 100% 100%); opacity: .86; }
.cliff-a { left: 0; width: 58vw; height: 44vh; } .cliff-b { right: -6vw; width: 46vw; height: 66vh; opacity: .62; }
.spark-pot, .campfire { position: absolute; left: 26vw; bottom: 10vh; width: 120px; height: 90px; border-radius: 50% 50% 18% 18%; background: rgba(27,37,69,.72); }
.spark-pot span, .campfire span { position: absolute; bottom: 70px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--coral-lantern); animation: spark 2.2s ease-out infinite; box-shadow: 0 0 16px var(--coral-lantern); } .spark-pot span:nth-child(2), .campfire span:nth-child(2){animation-delay:.5s; left:35%} .spark-pot span:nth-child(3), .campfire span:nth-child(3){animation-delay:1s; left:65%} .spark-pot span:nth-child(4){animation-delay:1.45s; left:48%}
.campfire { left: 50%; transform: translateX(-50%); background: transparent; bottom: 8vh; }
.campfire:before { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 34px; border-radius: 50%; background: radial-gradient(var(--coral-lantern), rgba(217,154,61,.35), transparent 70%); filter: blur(4px); }
#constellationCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.petal-field { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.petal { position: absolute; width: 10px; height: 16px; border-radius: 80% 20% 80% 20%; background: var(--coral-lantern); opacity: .65; animation: drift var(--dur) linear forwards; }

@keyframes pulseGlow { 50% { box-shadow: 0 0 46px rgba(126,230,198,.45); transform: rotate(7deg); } }
@keyframes cloudDrift { to { transform: translateX(150vw); } }
@keyframes float { 50% { transform: translateY(-24px) rotate(4deg); } }
@keyframes petalBreathe { 50% { filter: brightness(1.18); scale: 1.05; } }
@keyframes compassSpin { to { transform: rotate(360deg); } }
@keyframes rainFall { to { background-position: 0 70px; } }
@keyframes ripple { from { transform: scale(.35); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@keyframes spark { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-160px) translateX(30px) scale(.15); opacity: 0; } }
@keyframes drift { to { transform: translate3d(var(--x), 110vh, 0) rotate(520deg); opacity: 0; } }

@media (max-width: 760px) {
  .scene { padding: 8vh 6vw 16vh; align-items: start; }
  .field-note, .vellum-tab, .stone-plaque { margin: 8vh auto 0; transform: none; }
  .astrolabe { top: auto; bottom: 14px; right: 50%; transform: translateX(50%); grid-auto-flow: column; }
  .astrolabe button em { display: none; }
  .page-cue { left: 6vw; right: auto; bottom: 11vh; }
  .shrine-roof, .sundial, .waypoint { opacity: .55; right: 4vw; }
}