:root {
  color-scheme: dark;
  --night: #111326;
  --night-soft: #1c1b35;
  --plum: #39243e;
  --lavender: #cbbbe0;
  --cream: #f4ead7;
  --gold: #d8b875;
  --ink: #34283a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--sans); }
a { color: inherit; }
html.is-cover-active, body.is-cover-active { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.is-cover-active { width: 100%; height: 100vh; height: 100svh; }

@media (hover: hover) and (pointer: fine) {
  a, button, [role="button"], input[type="button"], input[type="submit"], summary { cursor: pointer; }
  input:not([type="button"]):not([type="submit"]), textarea, select, [contenteditable="true"] { cursor: text; }
  .wand-pointer:not([hidden]) { display: block; }
}
.wand-pointer { position: fixed; inset: 0 auto auto 0; z-index: 10000; width: 32px; height: 32px; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 3px rgb(8 9 20 / 75%)); }
.wand-pointer[hidden] { display: none !important; }
.wand-pointer svg { display: block; width: 100%; height: 100%; }
.transition-veil { position: fixed; z-index: 20000; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; clip-path: circle(0 at var(--wave-x, 50vw) var(--wave-y, 50vh)); background: radial-gradient(ellipse at 50% 48%, #543c70 0, #302542 42%, #17182f 100%); }
.transition-veil[hidden] { display: none !important; }
.transition-veil.is-active { animation: veil-cover 7.3s cubic-bezier(.22, .72, .18, 1) both; }
.transition-veil.is-active::before, .transition-veil.is-active::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.transition-veil.is-active::before { z-index: 0; background: radial-gradient(circle at var(--wave-x, 50vw) var(--wave-y, 50vh), rgb(255 231 173 / 92%) 0 1.2%, rgb(246 204 139 / 52%) 3.5%, transparent 16%), radial-gradient(ellipse at 27% 38%, rgb(191 145 230 / 38%), transparent 43%), radial-gradient(ellipse at 76% 66%, rgb(105 143 228 / 36%), transparent 46%); mix-blend-mode: screen; animation: veil-atmosphere 7.3s ease-in-out both; }
.transition-veil.is-active::after { z-index: 1; background-image: radial-gradient(circle at 8% 14%, #fff1c3 0 1.5px, transparent 3px), radial-gradient(circle at 17% 67%, #f5e5ff 0 1.3px, transparent 3px), radial-gradient(circle at 24% 33%, #b8c9ff 0 1px, transparent 2.8px), radial-gradient(circle at 36% 82%, #fff1c3 0 1.4px, transparent 3px), radial-gradient(circle at 43% 19%, #f5e5ff 0 1.2px, transparent 2.8px), radial-gradient(circle at 56% 72%, #b8c9ff 0 1.1px, transparent 3px), radial-gradient(circle at 64% 43%, #fff1c3 0 1.5px, transparent 3px), radial-gradient(circle at 72% 11%, #f5e5ff 0 1.2px, transparent 3px), radial-gradient(circle at 81% 61%, #fff1c3 0 1.4px, transparent 3px), radial-gradient(circle at 92% 29%, #b8c9ff 0 1px, transparent 2.8px), radial-gradient(circle at 95% 84%, #f5e5ff 0 1.2px, transparent 3px); background-size: 100% 100%; mix-blend-mode: screen; animation: veil-stardust 7.3s ease-in-out both; }
.transition-veil__page { position: absolute; z-index: 4; top: 0; bottom: 0; width: 52%; opacity: 0; background: linear-gradient(100deg, rgb(239 220 255 / 0%), rgb(199 166 226 / 24%) 72%, rgb(255 224 158 / 34%)); filter: drop-shadow(0 0 18px rgb(210 171 244 / 44%)); }
.transition-veil__page--left { left: 0; transform-origin: right center; background: linear-gradient(90deg, rgb(30 27 54 / 10%), rgb(130 96 165 / 27%) 72%, rgb(255 225 160 / 44%)); }
.transition-veil__page--right { right: 0; transform-origin: left center; background: linear-gradient(270deg, rgb(30 27 54 / 10%), rgb(130 96 165 / 27%) 72%, rgb(255 225 160 / 44%)); }
.transition-veil.is-active .transition-veil__page--left { animation: veil-page-left 7.3s cubic-bezier(.2, .7, .18, 1) both; }
.transition-veil.is-active .transition-veil__page--right { animation: veil-page-right 7.3s cubic-bezier(.2, .7, .18, 1) both; }
.transition-veil__trail { position: absolute; z-index: 3; top: 50%; left: 50%; width: var(--trail-length, 34vw); height: 3px; border-radius: 50%; opacity: 0; transform-origin: left center; background: linear-gradient(90deg, transparent, rgb(212 190 255 / 82%), #fff1c2 58%, transparent); filter: drop-shadow(0 0 8px rgb(246 218 157 / 90%)); }
.transition-veil.is-active .transition-veil__trail { animation: veil-trail 7.3s cubic-bezier(.24, .72, .2, 1) both; }
.transition-veil__trail:nth-of-type(3) { --trail-delay: 0s; }
.transition-veil__trail:nth-of-type(4) { --trail-delay: .13s; }
.transition-veil__trail:nth-of-type(5) { --trail-delay: .27s; }
.transition-veil__spark { position: absolute; z-index: 5; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; opacity: 0; background: #ffe6a5; box-shadow: 0 0 7px 2px #f8d58d, 0 0 18px 5px rgb(198 164 239 / 82%); }
.transition-veil__spark::after { content: "✦"; position: absolute; inset: -6px; color: #fff0c7; font: 14px/18px Georgia, serif; text-align: center; text-shadow: 0 0 9px #f6d995; }
.transition-veil.is-active .transition-veil__spark { animation: veil-spark-path 7.3s cubic-bezier(.2, .68, .22, 1) both; }
.transition-veil.is-active .transition-veil__spark:nth-of-type(6n + 1) { animation-delay: .02s; }
.transition-veil.is-active .transition-veil__spark:nth-of-type(6n + 2) { animation-delay: .09s; background: #e8d3ff; }
.transition-veil.is-active .transition-veil__spark:nth-of-type(6n + 3) { animation-delay: .16s; }
.transition-veil.is-active .transition-veil__spark:nth-of-type(6n + 4) { animation-delay: .23s; background: #cbd8ff; }
.transition-veil.is-active .transition-veil__spark:nth-of-type(6n + 5) { animation-delay: .3s; }
.transition-veil.is-active .transition-veil__spark:nth-of-type(6n) { animation-delay: .37s; background: #e8d3ff; }

.cover {
  isolation: isolate; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  align-items: center; width: 100%; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: clamp(2.2rem, 6vh, 5rem) clamp(1.4rem, 8vw, 9rem) 4.5rem;
  background: radial-gradient(ellipse at 73% 46%, rgb(116 75 120 / 31%), transparent 36%), radial-gradient(ellipse at 18% 14%, rgb(64 68 122 / 46%), transparent 42%), radial-gradient(ellipse at 50% 110%, rgb(68 34 75 / 42%), transparent 44%), linear-gradient(145deg, #161a36 2%, #111326 54%, #21152e 100%);
}
.cover[hidden] { display: none !important; }
.cover::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .2; pointer-events: none; background-image: radial-gradient(#fff 0.6px, transparent .8px); background-size: 43px 43px; mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.cover::after { content: ""; position: absolute; z-index: -1; inset: 1rem; border: 1px solid rgb(216 184 117 / 20%); outline: 1px solid rgb(216 184 117 / 8%); outline-offset: 5px; pointer-events: none; }
.cover__content { position: relative; z-index: 2; width: min(100%, 660px); animation: appear 1.2s both; }
.eyebrow { margin: 0 0 1rem; color: var(--gold); font: 600 .72rem/1.5 var(--sans); letter-spacing: .19em; text-transform: uppercase; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 { max-width: 760px; margin: 0; font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: .88; letter-spacing: -.045em; text-wrap: balance; }
h1 span { display: block; color: var(--lavender); font-style: italic; }
.ornament { display: flex; align-items: center; gap: .8rem; width: 9rem; margin: 2rem 0 1rem; color: var(--gold); font-size: .9rem; }
.ornament span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament span:last-child { transform: rotate(180deg); }
.dedication { margin: 0; color: var(--cream); font: italic 400 clamp(1.2rem, 2vw, 1.55rem)/1.45 var(--serif); animation: appear 1s .22s both; }
.cover__note { max-width: 29rem; margin: .8rem 0 1.8rem; color: rgb(244 234 215 / 82%); font: 400 clamp(1rem, 1.5vw, 1.1rem)/1.55 var(--sans); }
.enter-button { display: inline-flex; align-items: center; gap: 1.4rem; min-height: 56px; padding: .75rem 1rem .75rem 1.55rem; border: 1px solid var(--gold); border-radius: 2px; background: linear-gradient(110deg, rgb(216 184 117 / 14%), rgb(216 184 117 / 4%)); color: var(--cream); text-decoration: none; font: 600 1rem var(--sans); letter-spacing: .015em; box-shadow: 0 8px 28px rgb(0 0 0 / 14%), inset 0 0 20px rgb(216 184 117 / 5%); transition: background .3s, transform .3s, box-shadow .3s; }
.enter-button:hover, .enter-button:focus-visible { transform: translateY(-3px); background: rgb(216 184 117 / 20%); box-shadow: 0 12px 34px rgb(0 0 0 / 25%), 0 0 22px rgb(216 184 117 / 15%); }
.enter-button:focus-visible, a:focus-visible { outline: 3px solid var(--lavender); outline-offset: 4px; }
.enter-button__arrow { color: var(--gold); font-size: 1.25rem; }
.hint { margin: .8rem 0 0 1.55rem; color: rgb(203 187 224 / 82%); font: italic .9rem/1.5 var(--serif); }
.book { position: relative; justify-self: center; width: clamp(200px, 23vw, 310px); aspect-ratio: .76; margin: 1rem 0; perspective: 900px; filter: drop-shadow(22px 24px 22px rgb(0 0 0 / 48%)); animation: float 7s ease-in-out infinite; }
.book { transition: filter .35s ease; }
.book.is-near-pointer { filter: drop-shadow(22px 24px 22px rgb(0 0 0 / 48%)) drop-shadow(0 0 18px rgb(216 184 117 / 38%)); }
.book__pages { position: absolute; z-index: 1; top: 2.5%; right: -5%; width: 94%; height: 95%; border-radius: 4px 10px 10px 4px; background: repeating-linear-gradient(0deg, #c7b58f 0 2px, #e5d8b8 2px 4px); transform: rotateY(-9deg) skewY(-1deg); }
.book__spread { position: absolute; z-index: 2; inset: 2.5% 7% 3% 1%; border: 1px solid rgb(166 130 77 / 68%); border-radius: 4px 8px 8px 4px; background: linear-gradient(100deg, #d7c59e 0%, #f2e5c6 18%, #f7edda 52%, #e4d3ae 100%); box-shadow: inset 7px 0 14px rgb(91 61 71 / 15%), inset -4px 0 9px rgb(91 61 71 / 14%); transform: rotateY(-9deg); opacity: 0; transition: opacity .42s ease .3s; }
.book__light { position: absolute; z-index: 2; inset: -24%; border-radius: 50%; pointer-events: none; opacity: 0; color: #f6dda0; background: radial-gradient(ellipse, rgb(255 232 177 / 66%), rgb(210 168 232 / 32%) 36%, transparent 72%); filter: blur(9px); transform: scale(.25); }
.book__light span { position: absolute; color: #ffe8af; text-shadow: 0 0 12px rgb(247 220 158 / 90%); font-size: clamp(.65rem, 1.6vw, 1.15rem); }
.book__light span:nth-child(1) { top: 24%; left: 28%; }.book__light span:nth-child(2) { top: 42%; right: 20%; font-size: .75em; }.book__light span:nth-child(3) { bottom: 18%; left: 53%; }.book__light span:nth-child(4) { top: 14%; right: 38%; font-size: .8em; }
.book__cover { position: absolute; z-index: 3; inset: 0 4% 0 0; display: grid; place-items: center; border: 1px solid #927447; border-radius: 7px 13px 13px 7px; background: radial-gradient(ellipse at 50% 48%, #593d5a, #34263f 64%, #211a30); transform: rotateY(-9deg); transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden; box-shadow: inset 10px 0 13px rgb(0 0 0 / 30%), inset 1px 0 1px rgb(255 242 200 / 35%); transition: transform 1.05s cubic-bezier(.2, .76, .25, 1); }
.book__frame { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; align-content: center; gap: .6rem; position: absolute; inset: 5%; border: 1px solid rgb(216 184 117 / 72%); outline: 1px solid rgb(216 184 117 / 30%); outline-offset: 5px; color: var(--gold); text-align: center; }
.book__star { font-size: 2.7rem; text-shadow: 0 0 24px rgb(216 184 117 / 40%); }
.book__title { color: var(--cream); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: .94; font-style: italic; }
.book__rule { width: 3.5rem; height: 1px; background: var(--gold); }
.book__small { font-size: .84rem; letter-spacing: .08em; }
.cover__glow { position: absolute; width: min(55vw, 42rem); aspect-ratio: 1; right: 5%; top: 12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgb(203 169 224 / 13%), rgb(113 83 139 / 5%) 43%, transparent 70%); filter: blur(30px); animation: glow 9s ease-in-out infinite alternate; }
.sky { position: absolute; inset: 0; pointer-events: none; color: var(--gold); }
.star { position: absolute; opacity: .5; animation: twinkle 5s ease-in-out infinite; }
.star--one { top: 17%; left: 12%; font-size: 1.2rem; }.star--two { top: 32%; left: 52%; animation-delay: -2s; }.star--three { top: 12%; right: 26%; font-size: 2rem; animation-delay: -1s; }.star--four { right: 12%; top: 72%; animation-delay: -3s; }.star--five { top: 78%; left: 32%; font-size: 1.3rem; animation-delay: -2.5s; }.star--six { right: 7%; top: 23%; font-size: 1.8rem; }
.constellation { position: absolute; width: 170px; right: 10%; top: 12%; overflow: visible; fill: var(--gold); opacity: .24; }
.constellation path { fill: none; stroke: var(--gold); stroke-width: .75; stroke-dasharray: 3 5; }
.cover__bottom { position: absolute; left: clamp(2rem, 8vw, 9rem); right: clamp(2rem, 8vw, 9rem); bottom: 1.4rem; display: flex; justify-content: space-between; color: rgb(244 234 215 / 62%); font: .68rem var(--sans); letter-spacing: .055em; }

.memories { position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 0; min-height: 100vh; min-height: 100svh; padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 3vw, 2.5rem); color: var(--ink); background: radial-gradient(ellipse at 50% 4%, rgb(145 113 175 / 40%), transparent 43%), radial-gradient(ellipse at 9% 70%, rgb(86 80 154 / 43%), transparent 40%), radial-gradient(ellipse at 97% 36%, rgb(104 58 116 / 48%), transparent 43%), linear-gradient(145deg, #11152f, #201633 56%, #17162f); }
.memories::before, .memories::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.memories::before { inset: 0; opacity: .43; background-image: radial-gradient(circle, rgb(244 234 215 / 82%) 0 1px, transparent 1.7px), radial-gradient(circle, rgb(216 184 117 / 90%) 0 1px, transparent 1.8px), radial-gradient(circle, rgb(208 184 239 / 75%) 0 1px, transparent 1.7px); background-size: 127px 119px, 191px 173px, 163px 181px; background-position: 21px 16px, 73px 57px, 103px 41px; mask-image: linear-gradient(90deg, #000, transparent 38%, transparent 65%, #000); animation: page-stars 22s ease-in-out infinite alternate; }
.memories::after { width: min(46vw, 540px); aspect-ratio: 1; top: 2%; left: 50%; border-radius: 50%; background: radial-gradient(circle, rgb(211 175 230 / 22%), rgb(171 132 195 / 12%) 38%, transparent 70%); filter: blur(22px); transform: translateX(-50%); }
.memories__paper { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 1160px); margin: auto; padding: clamp(1.6rem, 5vw, 4.2rem); border: 1px solid rgb(198 174 225 / 76%); background-color: #f3eff7; background-image: radial-gradient(ellipse at 8% 5%, rgb(255 255 255 / 96%), transparent 37%), radial-gradient(ellipse at 95% 94%, rgb(188 162 216 / 24%), transparent 40%), radial-gradient(ellipse at 52% 42%, rgb(255 253 241 / 80%), transparent 74%), linear-gradient(90deg, rgb(107 75 139 / 9%), transparent 5%, transparent 95%, rgb(107 75 139 / 9%)), repeating-linear-gradient(0deg, transparent 0 31px, rgb(115 91 128 / 6%) 32px); box-shadow: 0 30px 80px rgb(5 6 24 / 48%), 0 0 0 7px rgb(151 121 185 / 13%), 0 0 34px rgb(192 155 229 / 18%); }
.memories__paper::before { content: ""; position: absolute; z-index: 3; inset: 12px; border: 1px solid rgb(137 104 168 / 38%); box-shadow: inset 0 0 28px rgb(117 85 150 / 7%); pointer-events: none; }
.memories .eyebrow { color: #705188; }
.memories h2 { max-width: 760px; margin: 0; color: #34283a; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: .98; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 1px 0 rgb(255 250 228 / 70%); }
.memories h2 em { color: #76528f; }
.memories__intro { max-width: 670px; margin: 1.1rem 0 0; color: #51475a; font: 400 1.05rem/1.7 var(--sans); }
.memories__paper > .eyebrow { letter-spacing: .2em; }
.memory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1.5rem, 3.7vw, 2.8rem); margin: clamp(2rem, 4vw, 3rem) 0; }
.memory-category { min-width: 0; padding-top: 1.35rem; border-top: 1px solid rgb(131 99 161 / 29%); }
.memory-category__title { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.05rem; color: #493653; font: 500 clamp(1.35rem, 2.5vw, 1.8rem)/1.2 var(--serif); }
.memory-category__title::before { content: "✦"; color: #aa874d; font-size: .8em; }
.memory-album-tile { display: block; width: 100%; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: inherit; cursor: pointer; }
.memory-album-tile:focus-visible { outline: 2px solid #a7824d; outline-offset: 5px; border-radius: 4px; }
.memory-album-tile__stack { position: relative; isolation: isolate; display: block; width: min(100%, 430px); aspect-ratio: 1.55; margin-inline: auto; overflow: hidden; border-radius: 3px; background: radial-gradient(ellipse at 50% 47%, rgb(225 212 229 / 38%), transparent 65%); transition: filter .6s ease; }
.memory-album-tile__stack::before, .memory-album-tile__stack::after { position: absolute; top: 9%; left: 50%; width: 64%; height: 80%; border: 1px solid rgb(133 99 164 / 50%); background: linear-gradient(145deg, #f6f1fa, #e5d7ed 68%, #f6eddb); box-shadow: 0 10px 25px rgb(45 30 53 / 21%); content: ""; transition: transform .8s cubic-bezier(.2, .68, .18, 1); }
.memory-album-tile__stack::before { z-index: 0; transform: translate(-50%, 2px) rotate(-5deg); }
.memory-album-tile__stack::after { z-index: 1; transform: translate(-50%, 0) rotate(3.5deg); }
.memory-stack__photo { position: absolute; top: 7%; left: 50%; display: grid; width: 66%; height: 83%; place-items: center; margin: 0; padding: 7px 7px 16px; overflow: hidden; border: 1px solid rgb(131 96 160 / 48%); outline: 1px solid rgb(225 207 235 / 85%); outline-offset: -4px; background: linear-gradient(145deg, #fffdf7, #e8ddef 74%, #f7edd9); box-shadow: 0 12px 26px rgb(45 30 53 / 23%), 0 0 18px rgb(136 96 172 / 12%); transition: transform .85s cubic-bezier(.2, .68, .18, 1), filter .65s ease; }
.memory-stack__photo--main { z-index: 6; transform: translate(-50%, 0) rotate(-.6deg); }
.memory-stack__photo--secondary { z-index: var(--stack-layer, 2); transform: translate(-50%, 0) translate(var(--peek-x, 0px), var(--peek-y, 0px)) rotate(var(--peek-rotate, 0deg)) scale(.94); }
.memory-stack__photo--main img, .memory-stack__photo--secondary img { display: block; width: 100%; height: 100%; object-fit: contain; background: radial-gradient(ellipse at center, #f7eedf, #d8ccdc); }
.memory-demo-art { display: block; width: 100%; height: 100%; }
.memory-album-tile__sparkles { position: absolute; z-index: 7; inset: 0; color: #f1d892; opacity: 0; pointer-events: none; text-shadow: 0 0 7px rgb(176 130 212 / 90%), 0 0 15px rgb(240 211 144 / 62%); transition: opacity .45s ease; }
.memory-album-tile__sparkles::before, .memory-album-tile__sparkles::after { position: absolute; font: 1rem/1 var(--serif); content: "✧ ·"; }
.memory-album-tile__sparkles::before { top: 13%; left: 12%; }
.memory-album-tile__sparkles::after { right: 12%; bottom: 17%; content: "· ✦"; }
.memory-stack__photo.is-placeholder { position: relative; overflow: hidden; color: #715d7a; background: radial-gradient(ellipse at 50% 45%, rgb(255 247 228 / 85%), transparent 50%), linear-gradient(140deg, #d6c5df, #eee1c8 57%, #c8b6d1); }
.memory-stack__photo.is-placeholder::before, .memory-stack__photo.is-placeholder::after { position: absolute; color: rgb(167 130 77 / 65%); font-family: var(--serif); }
.memory-stack__photo.is-placeholder::before { content: "✧"; top: 13%; left: 16%; font-size: 1.6rem; }
.memory-stack__photo.is-placeholder::after { content: "✦"; right: 17%; bottom: 12%; font-size: 1.15rem; }
.memory-photo__label { position: relative; z-index: 1; max-width: 75%; color: #65516f; font: italic 1rem/1.5 var(--serif); text-align: center; }
.memory-album-tile__label { display: grid; justify-items: center; gap: .28rem; padding: .65rem .35rem 0; color: #514550; text-align: center; }
.memory-album-tile__count { color: #493653; font: 600 1.08rem/1.35 var(--serif); }
.memory-album-tile__sample { padding: .13rem .55rem; border: 1px solid rgb(134 101 161 / 32%); border-radius: 99px; color: #654c7c; background: rgb(233 222 241 / 72%); font: 600 .68rem/1.35 var(--sans); letter-spacing: .025em; }
.memory-album-tile__hint { color: #665278; font: 500 .77rem/1.5 var(--sans); }
.memory-album-tile__hint--touch { display: none; }
.memory-album-tile__stack::marker { color: transparent; }
.memory-category { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.memory-list--observed .memory-category:not(.is-visible) { opacity: 0; transform: translateY(9px); }
.memory-category:nth-child(2) { transition-delay: 80ms; }
.memory-category:nth-child(3) { transition-delay: 160ms; }
.memory-category:nth-child(4) { transition-delay: 240ms; }
.memory-album-tile:hover .memory-stack__photo--main, .memory-album-tile:focus-visible .memory-stack__photo--main { transform: translate(calc(-50% + 37px), 3px) rotate(5deg) scale(.9); filter: drop-shadow(0 0 8px rgb(216 184 117 / 45%)); }
.memory-album-tile:hover .memory-stack__photo--secondary, .memory-album-tile:focus-visible .memory-stack__photo--secondary { transform: translate(-50%, 0) translate(var(--fan-x, -24px), var(--fan-y, 0px)) rotate(var(--fan-rotate, -4deg)) scale(.96); transition-delay: var(--fan-delay, 100ms); }
.memory-album-tile:hover .memory-album-tile__stack::before, .memory-album-tile:focus-visible .memory-album-tile__stack::before { transform: translate(calc(-50% - 16px), -3px) rotate(-9deg); }
.memory-album-tile:hover .memory-album-tile__stack::after, .memory-album-tile:focus-visible .memory-album-tile__stack::after { transform: translate(calc(-50% + 12px), 1px) rotate(7deg); }
.memory-album-tile:hover .memory-album-tile__stack, .memory-album-tile:focus-visible .memory-album-tile__stack { filter: brightness(1.025) drop-shadow(0 0 12px rgb(166 124 200 / 34%)) drop-shadow(0 0 7px rgb(216 184 117 / 20%)); }
.memory-album-tile:hover .memory-album-tile__sparkles, .memory-album-tile:focus-visible .memory-album-tile__sparkles { opacity: 1; }
.memory-album-tile:hover .memory-album-tile__sparkles::before, .memory-album-tile:focus-visible .memory-album-tile__sparkles::before { animation: album-sparkle-drift 2.8s ease-in-out infinite; }
.memory-album-tile:hover .memory-album-tile__sparkles::after, .memory-album-tile:focus-visible .memory-album-tile__sparkles::after { animation: album-sparkle-drift 3.4s .7s ease-in-out infinite; }
.memory-album-tile__label::after { content: "✧"; height: .7rem; color: #a7824d; opacity: 0; transform: scale(.7); }
.memory-album-tile:hover .memory-album-tile__label::after, .memory-album-tile:focus-visible .memory-album-tile__label::after { animation: album-glimmer 1.8s ease-in-out 1; }
.memory-album-tile__stack::after { pointer-events: none; }
.album-dialog { width: min(760px, calc(100vw - 2rem)); max-width: none; max-height: min(92svh, 940px); margin: auto; padding: 0; overflow: auto; border: 0; color: var(--ink); background: transparent; overscroll-behavior: contain; }
.album-dialog[open] { animation: album-open .28s ease-out both; }
.album-dialog::backdrop { background: rgb(12 13 30 / 76%); backdrop-filter: blur(8px); }
.album-dialog__page { position: relative; min-height: 420px; padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid rgb(148 111 181 / 72%); background-color: #f3eff7; background-image: radial-gradient(ellipse at 15% 20%, rgb(255 255 255 / 76%), transparent 40%), radial-gradient(ellipse at 90% 82%, rgb(181 153 208 / 16%), transparent 45%), repeating-linear-gradient(0deg, transparent 0 31px, rgb(115 91 128 / 6%) 32px); box-shadow: 0 26px 70px rgb(0 0 0 / 40%), inset 0 0 25px rgb(132 94 161 / 8%); }
.album-dialog__close { position: absolute; top: .8rem; right: .8rem; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(118 85 45 / 40%); border-radius: 50%; color: #4b3651; background: rgb(255 249 233 / 85%); font: 1.6rem/1 var(--sans); cursor: pointer; }
.album-dialog h2 { max-width: calc(100% - 6.5rem); margin: .2rem 0 1rem; color: #34283a; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; }
.album-dialog__photo-wrap { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; justify-content: center; gap: clamp(.3rem, 1.8vw, 1rem); width: min(100%, 700px); justify-self: center; perspective: 1000px; }
.album-dialog__photo-toggle { width: 100%; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; cursor: zoom-in; }
.album-dialog__photo-toggle:disabled { cursor: default; }
.album-dialog__photo { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; margin: 0; padding: 10px; border: 1px solid rgb(131 96 160 / 60%); outline: 1px solid rgb(225 207 235 / 90%); outline-offset: -5px; background: linear-gradient(145deg, #fffdf7, #e8ddef 74%, #f7edd9); box-shadow: 0 14px 32px rgb(61 42 57 / 20%), 0 0 20px rgb(136 96 172 / 12%); animation: album-photo-enter .24s ease-out both; }
.album-dialog__photo--next { transform-origin: left center; }
.album-dialog__photo--previous { transform-origin: right center; animation-name: album-photo-enter-previous; }
.album-dialog__photo.is-changing::before, .album-dialog__photo.is-changing::after { position: absolute; z-index: 2; content: ""; pointer-events: none; }
.album-dialog__photo.is-changing::before { inset: -5px; border: 1px solid rgb(203 174 230 / 0%); border-radius: 4px; box-shadow: 0 0 0 rgb(164 125 204 / 0%), 0 0 0 rgb(226 193 125 / 0%); animation: album-memory-frame-light .78s ease-out both; }
.album-dialog__photo.is-changing::after { top: -10px; right: -7px; color: #d8bd78; font: .85rem/1 var(--serif); opacity: 0; text-shadow: 0 0 8px rgb(186 145 224 / 60%), 0 0 5px rgb(238 213 153 / 55%); animation: album-memory-star .72s ease-out both; }
.album-dialog__photo img { display: block; width: 100%; height: 100%; object-fit: contain; background: radial-gradient(ellipse at center, #f7eedf, #d8ccdc); }
.album-dialog__photo .memory-demo-art { display: block; width: 100%; max-height: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.album-dialog__photo.is-placeholder { color: #65516f; background: radial-gradient(ellipse at 50% 45%, rgb(255 247 228 / 85%), transparent 50%), linear-gradient(140deg, #d6c5df, #eee1c8 57%, #c8b6d1); }
.album-dialog__photo-wrap.is-zoomed .album-dialog__photo { aspect-ratio: auto; min-height: min(62svh, 620px); }
.album-dialog__photo-wrap.is-zoomed .album-dialog__photo img { max-height: 68svh; }
.album-dialog__photo-wrap.is-zoomed .album-dialog__photo-toggle { cursor: zoom-out; }
.album-dialog__note { max-width: 580px; margin: 1rem auto 0; color: #514550; font: italic 1rem/1.6 var(--serif); text-align: center; }
.album-dialog__date { display: block; margin-top: .55rem; color: #725632; font: 500 .8rem/1.4 var(--sans); text-align: center; }
.album-dialog__nav { display: grid; width: 48px; height: 48px; place-items: center; justify-self: center; padding: 0; border: 1px solid rgb(155 124 187 / 48%); border-radius: 50%; color: #8465a0; background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 88%), rgb(235 224 245 / 82%) 58%, rgb(222 206 237 / 76%)); box-shadow: 0 4px 13px rgb(70 48 89 / 13%), inset 0 1px 2px rgb(255 255 255 / 88%); cursor: pointer; transition: color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.album-dialog__nav[hidden] { display: none; }
.album-dialog__nav svg { width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s ease; }
.album-dialog__nav::after { content: "✧"; position: absolute; color: #c8a65c; font-size: .7rem; opacity: 0; transform: scale(.65) rotate(-12deg); transition: opacity .24s ease, transform .24s ease; pointer-events: none; }
.album-dialog__nav { position: relative; }
.album-dialog__nav:focus-visible { outline: 2px solid #b395d1; outline-offset: 3px; }
.album-dialog__nav:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.album-dialog__nav--previous:hover:not(:disabled) svg { transform: translateX(-2px); }
.album-dialog__nav--next:hover:not(:disabled) svg { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .album-dialog__nav:hover:not(:disabled), .album-dialog__nav:focus-visible:not(:disabled) { color: #765393; border-color: rgb(190 157 217 / 85%); background: radial-gradient(circle at 35% 28%, #fffaf0, #eadcf6 62%, #e4d0ef); box-shadow: 0 0 0 3px rgb(166 130 198 / 12%), 0 0 19px rgb(166 130 198 / 38%), 0 0 10px rgb(218 188 119 / 22%), inset 0 1px 3px white; }
  .album-dialog__nav:hover:not(:disabled)::after, .album-dialog__nav:focus-visible:not(:disabled)::after { opacity: .9; transform: scale(1) rotate(0); }
}
.album-dialog__count { display: block; width: fit-content; margin: 1rem auto 0; padding: .38rem .85rem; border: 1px solid rgb(134 101 161 / 36%); border-radius: 99px; color: #594369; background: rgb(232 221 241 / 64%); font: 600 .84rem var(--sans); white-space: nowrap; }
.album-dialog__sound { position: absolute; top: .8rem; right: 4.15rem; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgb(155 124 187 / 38%); border-radius: 50%; color: #765d89; background: rgb(235 224 245 / 70%); box-shadow: 0 3px 10px rgb(70 48 89 / 10%); cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.album-dialog__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.album-dialog__sound-waves { display: none; }
.album-dialog__sound[aria-pressed="true"] .album-dialog__sound-waves { display: block; }
.album-dialog__sound[aria-pressed="true"] .album-dialog__sound-muted { display: none; }
.album-dialog__sound:hover, .album-dialog__sound:focus-visible { color: #8b6aa7; border-color: rgb(193 164 218 / 82%); background: #f0e5f8; box-shadow: 0 0 14px rgb(166 130 198 / 30%), 0 0 8px rgb(218 188 119 / 18%); }
.album-dialog__sound:focus-visible { outline: 2px solid #b395d1; outline-offset: 3px; }
.album-dialog__hint { margin: .55rem 0 0; color: #725632; font: .75rem/1.4 var(--sans); text-align: center; }
.album-dialog__page > .eyebrow { padding-right: 6.5rem; }
.back-link { color: #5e4567; font: 500 .95rem var(--sans); }

@keyframes twinkle { 0%, 100% { opacity: .28; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.12); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glow { from { transform: translate3d(0, 0, 0) scale(.94); opacity: .68; } to { transform: translate3d(-2%, 2%, 0) scale(1.05); opacity: 1; } }
@keyframes sparkle-drift { from { opacity: .95; transform: translate(-50%, -50%) scale(.65) rotate(0deg); } to { opacity: 0; transform: translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y))) scale(0) rotate(65deg); } }
@keyframes book-lift { 0%, 100% { transform: translateY(0) scale(1); } 28% { transform: translateY(-9px) scale(1.025); } 62% { transform: translateY(-13px) scale(1.045); } }
@keyframes book-light { 0% { opacity: 0; transform: scale(.25); } 28% { opacity: .95; transform: scale(.85); } 68% { opacity: .76; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes book-spark { 0% { opacity: 0; transform: translateY(8px) scale(.45) rotate(-20deg); } 35%, 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px) scale(1.1) rotate(25deg); } }
@keyframes veil-cover {
  0% { opacity: 0; clip-path: circle(0 at var(--wave-x, 50vw) var(--wave-y, 50vh)); }
  4% { opacity: 1; clip-path: circle(17% at var(--wave-x, 50vw) var(--wave-y, 50vh)); }
  20% { opacity: 1; clip-path: circle(var(--wave-radius, 100vmax) at var(--wave-x, 50vw) var(--wave-y, 50vh)); }
  82% { opacity: 1; clip-path: circle(var(--wave-radius, 100vmax) at var(--wave-x, 50vw) var(--wave-y, 50vh)); }
  91% { opacity: .72; }
  100% { opacity: 0; clip-path: circle(var(--wave-radius, 100vmax) at var(--wave-x, 50vw) var(--wave-y, 50vh)); }
}
@keyframes veil-atmosphere {
  0%, 100% { opacity: 0; filter: brightness(1); }
  3% { opacity: 1; filter: brightness(2.1); }
  10% { opacity: .4; filter: brightness(1.18); }
  20% { opacity: .88; filter: brightness(1.3); }
  31% { opacity: .48; }
  44% { opacity: .8; filter: brightness(1.28); }
  54% { opacity: .62; }
  68% { opacity: .92; filter: brightness(1.34); }
  79% { opacity: .55; }
  85% { opacity: 1; filter: brightness(1.85); }
  92% { opacity: .7; }
}
@keyframes veil-stardust {
  0%, 100% { opacity: 0; }
  8% { opacity: .72; }
  23% { opacity: .94; }
  42% { opacity: .68; }
  58% { opacity: .9; }
  73% { opacity: .76; }
  86% { opacity: 1; }
}
@keyframes veil-page-left {
  0%, 31% { opacity: 0; transform: perspective(900px) rotateY(0) scaleX(.02); }
  41% { opacity: .9; transform: perspective(900px) rotateY(-8deg) scaleX(.58); }
  57% { opacity: .84; transform: perspective(900px) rotateY(-36deg) scaleX(1); }
  72% { opacity: .68; transform: perspective(900px) rotateY(-56deg) translateX(-3vw) scaleX(.94); }
  84% { opacity: .38; transform: perspective(900px) rotateY(-71deg) translateX(-9vw) scaleX(.84); }
  94%, 100% { opacity: 0; transform: perspective(900px) rotateY(-82deg) translateX(-15vw) scaleX(.72); }
}
@keyframes veil-page-right {
  0%, 31% { opacity: 0; transform: perspective(900px) rotateY(0) scaleX(.02); }
  41% { opacity: .9; transform: perspective(900px) rotateY(8deg) scaleX(.58); }
  57% { opacity: .84; transform: perspective(900px) rotateY(36deg) scaleX(1); }
  72% { opacity: .68; transform: perspective(900px) rotateY(56deg) translateX(3vw) scaleX(.94); }
  84% { opacity: .38; transform: perspective(900px) rotateY(71deg) translateX(9vw) scaleX(.84); }
  94%, 100% { opacity: 0; transform: perspective(900px) rotateY(82deg) translateX(15vw) scaleX(.72); }
}
@keyframes veil-trail {
  0%, 13% { opacity: 0; transform: translate(-50%, -50%) translate(var(--trail-x), var(--trail-y)) rotate(var(--trail-angle)) scaleX(.08); }
  20% { opacity: .9; transform: translate(-50%, -50%) translate(var(--trail-x), var(--trail-y)) rotate(var(--trail-angle)) scaleX(.72); }
  29% { opacity: .82; transform: translate(-50%, -50%) translate(var(--trail-bend-x), var(--trail-bend-y)) rotate(calc(var(--trail-angle) + 35deg)) scaleX(1); }
  39% { opacity: .34; transform: translate(-50%, -50%) translate(var(--trail-x), var(--trail-y)) rotate(calc(var(--trail-angle) - 27deg)) scaleX(.54); }
  49% { opacity: .72; transform: translate(-50%, -50%) translate(var(--trail-bend-x), var(--trail-bend-y)) rotate(calc(var(--trail-angle) + 68deg)) scaleX(.8); }
  59% { opacity: .22; transform: translate(-50%, -50%) translate(var(--trail-x), var(--trail-y)) rotate(calc(var(--trail-angle) - 45deg)) scaleX(.42); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(0) scaleX(.08); }
}
@keyframes veil-spark-path {
  0%, 4% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  9% { opacity: .95; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.2); }
  22% { opacity: .78; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.78); }
  38% { opacity: .92; transform: translate(calc(-50% + var(--cross-x)), calc(-50% + var(--cross-y))) scale(1.05); }
  48% { opacity: .55; transform: translate(calc(-50% + var(--turn-x)), calc(-50% + var(--turn-y))) scale(.7); }
  62% { opacity: .86; transform: translate(calc(-50% + var(--gather-x)), calc(-50% + var(--gather-y))) scale(1.12); }
  70% { opacity: .46; transform: translate(calc(-50% + var(--gather-x)), calc(-50% + var(--gather-y))) scale(.9); }
  84% { opacity: .98; transform: translate(var(--scatter-x), var(--scatter-y)) scale(1.25); }
  93%, 100% { opacity: 0; transform: translate(calc(-50% + var(--scatter-x)), calc(-50% + var(--scatter-y))) scale(.2); }
}
@keyframes album-glimmer { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .95; transform: scale(1.15); } }
@keyframes album-sparkle-drift { 0%, 100% { opacity: .2; transform: translateY(2px) scale(.82); } 45% { opacity: .92; transform: translateY(-3px) scale(1.08); } }
@keyframes page-stars { from { opacity: .19; background-position: 21px 16px, 73px 57px; } to { opacity: .36; background-position: 31px 7px, 64px 68px; } }
@keyframes album-photo-enter { from { opacity: 0; transform: translateX(8px) rotateY(-2deg) scale(.994); } to { opacity: 1; transform: translateX(0) rotateY(0) scale(1); } }
@keyframes album-photo-enter-previous { from { opacity: 0; transform: translateX(-8px) rotateY(2deg) scale(.994); } to { opacity: 1; transform: translateX(0) rotateY(0) scale(1); } }
@keyframes album-memory-frame-light { 0% { opacity: 0; border-color: rgb(203 174 230 / 0%); box-shadow: 0 0 0 rgb(164 125 204 / 0%), 0 0 0 rgb(226 193 125 / 0%); } 24% { opacity: 1; border-color: rgb(224 202 244 / 92%); box-shadow: 0 0 17px rgb(164 125 204 / 34%), 0 0 11px rgb(226 193 125 / 24%); } 100% { opacity: 0; border-color: rgb(203 174 230 / 0%); box-shadow: 0 0 0 rgb(164 125 204 / 0%), 0 0 0 rgb(226 193 125 / 0%); } }
@keyframes album-memory-star { 0% { opacity: 0; transform: translateY(4px) scale(.5); } 28% { opacity: .95; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-5px) scale(.8); } }
@keyframes album-open { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scene-dim { to { opacity: 0; transform: translateY(-5px); } }
.magic-spark { position: fixed; z-index: 50; left: var(--spark-x); top: var(--spark-y); color: #f0d48a; font-size: 11px; line-height: 1; pointer-events: none; user-select: none; text-shadow: 0 0 8px rgb(240 212 138 / 75%); animation: sparkle-drift 650ms ease-out forwards; }
.magic-spark--burst { font-size: 14px; }
.cover.is-opening { pointer-events: none; }
.cover.is-opening .cover__content, .cover.is-opening .sky, .cover.is-opening .cover__bottom, .cover.is-opening .cover__glow { animation: scene-dim .55s 1.48s ease-in both; }
.cover.is-opening .book { animation: book-lift 2.2s ease-in-out both; filter: drop-shadow(20px 25px 22px rgb(0 0 0 / 38%)) drop-shadow(0 0 28px rgb(219 184 249 / 34%)) drop-shadow(0 0 25px rgb(240 207 133 / 65%)); }
.cover.is-opening .book__cover { transform: rotateY(-152deg); transition-delay: .26s; }
.cover.is-opening .book__spread { opacity: 1; }
.cover.is-opening .book__light { animation: book-light 1.45s .55s ease-out both; }
.cover.is-opening .book__light span { animation: book-spark 1s .72s ease-out both; }
.cover.is-opening .book__light span:nth-child(2) { animation-delay: .87s; }
.cover.is-opening .book__light span:nth-child(3) { animation-delay: 1.02s; }
.cover.is-opening .book__light span:nth-child(4) { animation-delay: .8s; }

@media (max-width: 760px) {
  .cover { min-height: 100vh; min-height: 100svh; grid-template-columns: 1fr; align-content: center; gap: clamp(.8rem, 2.5vh, 1.4rem); padding: clamp(1.5rem, 4.5vh, 2.8rem) 1.5rem 3.5rem; }
  .cover__content { text-align: center; justify-self: center; }
  h1 { margin-inline: auto; font-size: clamp(2.75rem, 12vw, 4.5rem); line-height: .9; }
  .ornament { margin-inline: auto; margin-top: 1.15rem; margin-bottom: .65rem; }
  .dedication { font-size: clamp(1.12rem, 4.8vw, 1.45rem); }
  .cover__note { margin: .55rem auto 1.1rem; font-size: 1rem; }
  .enter-button { justify-content: center; }
  .hint { margin: .55rem 0 0; }
  .book { width: clamp(108px, 20svh, 150px); margin: 0 auto; }
  .book__frame { gap: .42rem; }
  .book__star { font-size: 1.55rem; }.book__title { font-size: 1.35rem; }.book__small { max-width: 100%; font-size: .46rem; line-height: 1.2; letter-spacing: 0; }
  .constellation { width: 110px; right: 8%; top: 10%; }
  .cover__bottom { left: 1.6rem; right: 1.6rem; bottom: 1.1rem; font-size: .58rem; letter-spacing: .025em; }
  .memories { padding: 1.3rem .8rem; }
  .memories__paper { padding: 1.65rem 1.15rem; }
  .memories__paper::before { inset: 8px; }
  .memories__intro { font-size: .98rem; }
  .memory-list { grid-template-columns: minmax(0, 1fr); }
  .memory-category { padding-top: 1rem; }
  .memory-album-tile__stack { width: min(100%, 390px); }
  .memory-album-tile__hint--desktop { display: none; }
  .memory-album-tile__hint--touch { display: inline; }
  .album-dialog { width: calc(100vw - 1rem); max-height: 94svh; }
  .album-dialog__page { min-height: 0; padding: 1.5rem 1rem; }
  .album-dialog__photo-wrap { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .25rem; }
  .album-dialog__photo { aspect-ratio: 1 / 1; }
  .album-dialog__nav { width: 44px; height: 44px; }
}
@media (hover: none), (pointer: coarse) {
  .memory-album-tile__hint--desktop { display: none; }
  .memory-album-tile__hint--touch { display: inline; }
  .memory-album-tile__stack::before { transform: translate(calc(-50% - 8px), -3px) rotate(-5deg); }
  .memory-album-tile__stack::after { transform: translate(calc(-50% + 7px), 0) rotate(4deg); }
  .memory-album-tile:active .memory-album-tile__stack { filter: brightness(.98); }
}
@media (max-width: 380px) { .cover { padding-inline: 1.2rem; } .cover__bottom { left: 1.25rem; right: 1.25rem; } }
@media (max-height: 700px) and (max-width: 760px) {
  .cover { gap: .55rem; padding-top: 1.2rem; padding-bottom: 3rem; }
  .eyebrow { margin-bottom: .55rem; }
  h1 { font-size: clamp(2.45rem, 10.7vw, 3.6rem); }
  .ornament { margin-top: .65rem; margin-bottom: .45rem; }
  .cover__note { margin: .35rem auto .75rem; font-size: .94rem; }
  .book { width: clamp(88px, 15svh, 112px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .album-dialog__photo.is-changing::before, .album-dialog__photo.is-changing::after { display: none; }
  .cover.is-opening { animation: none; }
  .memory-list--observed .memory-category { opacity: 1; transform: none; }
  .memories::before { animation: none; }
  .memory-album-tile__sparkles { display: none; }
  .memory-album-tile:hover .memory-stack__photo--main, .memory-album-tile:focus-visible .memory-stack__photo--main { transform: translate(-50%, 0) rotate(-.6deg); filter: none; }
  .memory-album-tile:hover .memory-stack__photo--secondary, .memory-album-tile:focus-visible .memory-stack__photo--secondary { transform: translate(-50%, 0) translate(var(--peek-x, 0), var(--peek-y, 0)) rotate(var(--peek-rotate, 0deg)) scale(.94); }
  .memory-album-tile:hover .memory-album-tile__stack::before, .memory-album-tile:focus-visible .memory-album-tile__stack::before { transform: translate(-50%, 2px) rotate(-5deg); }
  .memory-album-tile:hover .memory-album-tile__stack::after, .memory-album-tile:focus-visible .memory-album-tile__stack::after { transform: translate(-50%, 0) rotate(3.5deg); }
}

/* Navegación de capítulos: una pantalla visible a la vez. */
.memories[hidden], .time-machine[hidden], .future-chapter[hidden], .chapter-portal[hidden] { display: none !important; }
.chapter-ambience { position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .9; background-color: #111326; background-image: radial-gradient(ellipse at 18% 22%, rgb(94 87 160 / 34%), transparent 39%), radial-gradient(ellipse at 83% 75%, rgb(105 58 123 / 31%), transparent 43%), radial-gradient(circle, rgb(239 219 174 / 72%) 0 .7px, transparent 1.4px), radial-gradient(circle, rgb(208 190 237 / 66%) 0 .7px, transparent 1.5px); background-size: 100% 100%, 100% 100%, 97px 103px, 139px 151px; background-position: center, center, 12px 9px, 37px 61px; animation: chapter-nebula 34s ease-in-out infinite alternate; transition: background-image .45s ease, opacity .45s ease; }
.is-cover-active .chapter-ambience { opacity: 0; }
.cover, .memories, .time-machine, .future-chapter { position: relative; z-index: 1; }
.memories, .time-machine, .future-chapter { width: 100%; height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
.memories { display: grid; place-items: center; padding: clamp(.55rem, 1.8vh, 1.25rem) clamp(.65rem, 3vw, 2.5rem); background: transparent; }
.memories__paper { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: clamp(.28rem, .8vh, .62rem); width: min(100%, 1240px); height: 100%; min-height: 0; margin: 0 auto; padding: clamp(.85rem, 2.2vh, 1.6rem) clamp(1rem, 3.5vw, 2.5rem); }
.memories__paper > .eyebrow { margin: 0; text-align: center; }
.memories h2 { max-width: none; font-size: clamp(2rem, 4.3vw, 3.7rem); line-height: .98; text-align: center; }
.memories__intro { max-width: 800px; margin: 0 auto; font-size: clamp(.82rem, 1.35vw, 1rem); line-height: 1.45; text-align: center; }
.memories .memory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(.3rem, 1.1vw, .85rem) clamp(.6rem, 2vw, 1.5rem); min-height: 0; margin: 0; align-items: stretch; }
.memories .memory-category { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding-top: clamp(.25rem, .7vh, .55rem); }
.memories .memory-category__title { gap: .42rem; margin: 0 0 .16rem; font-size: clamp(.88rem, 1.55vw, 1.35rem); }
.memories .memory-album-tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; align-content: center; }
.memories .memory-album-tile__stack { width: min(100%, 360px); height: 100%; max-height: 190px; min-height: 72px; aspect-ratio: 2.15; }
.memories .memory-stack__photo { padding: 5px 5px 11px; }
.memories .memory-album-tile__label { gap: .08rem; padding: .18rem 0 0; }
.memories .memory-album-tile__count { font-size: clamp(.77rem, 1.1vw, .95rem); line-height: 1.2; }
.memories .memory-album-tile__sample { padding: .04rem .4rem; font-size: .6rem; }
.memories .memory-album-tile__hint { font-size: .64rem; line-height: 1.25; }
.chapter-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .55rem; width: min(100%, 650px); margin: 0 auto; }
.chapter-navigation__button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .82rem; border: 1px solid rgb(143 111 167 / 44%); border-radius: 99px; color: #69507b; background: rgb(249 244 250 / 88%); box-shadow: 0 3px 12px rgb(69 48 78 / 9%); font: 600 .82rem/1.25 var(--sans); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.chapter-navigation__button:first-child { justify-self: start; }
.chapter-navigation__button:last-child { justify-self: end; }
.chapter-navigation__button--index { color: #765e8c; background: rgb(238 229 243 / 90%); }
.chapter-navigation__button:hover:not(:disabled), .chapter-navigation__button:focus-visible { border-color: rgb(195 163 107 / 80%); color: #533b67; background: #fffaf0; box-shadow: 0 0 16px rgb(174 140 199 / 25%), 0 0 8px rgb(216 184 117 / 14%); transform: translateY(-1px); }
.chapter-navigation__button:focus-visible, .chapter-index__entry:focus-visible, .chapter-index__close:focus-visible { outline: 2px solid #a7824d; outline-offset: 3px; }
.chapter-navigation__button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.time-machine { display: grid; place-items: center; padding: clamp(.6rem, 1.8vh, 1.25rem) clamp(.65rem, 3vw, 2.5rem); background: transparent; }
.time-machine__paper { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: clamp(.25rem, .65vh, .5rem); width: min(100%, 1080px); height: 100%; min-height: 0; overflow: hidden; padding: clamp(.85rem, 2.2vh, 1.7rem) clamp(1rem, 4vw, 3.2rem); }
.time-machine__paper > .eyebrow { margin: 0; }
.time-machine__paper > h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.time-machine__intro { margin-top: 0; font-size: clamp(.82rem, 1.3vw, .98rem); line-height: 1.42; }
.time-machine__note { margin: 0; font-size: .78rem; }
.time-machine .time-line { grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(.25rem, .7vh, .55rem); width: min(100%, 730px); min-height: 0; margin: 0 auto; padding: 0 0 0 clamp(1.2rem, 3vw, 2rem); }
.time-machine .time-line::before { top: .4rem; bottom: .4rem; left: .4rem; }
.time-machine .time-line__item, .time-machine .time-line__item:nth-child(even), .time-machine .time-line__item:nth-child(odd) { display: flex; width: 100%; min-height: 0; justify-self: stretch; }
.time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .55rem; align-content: center; align-items: center; min-height: 0; height: 100%; padding: .35rem .8rem; border-radius: 4px 12px 12px 4px; }
.time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { top: 50%; left: calc(-1.2rem - 6px); right: auto; transform: translateY(-50%); }
.time-machine .time-line__sigil { top: 50%; right: .7rem; transform: translateY(-50%); }
.time-machine .time-line__eyebrow { grid-column: 1; font-size: .58rem; }
.time-machine .time-line__title { grid-column: 2; grid-row: 1 / span 2; padding-right: 1.3rem; font-size: clamp(.84rem, 1.35vw, 1.02rem); line-height: 1.25; }
.time-machine .time-line__action { grid-column: 1; grid-row: 2; font-size: .63rem; }
.future-chapter { display: grid; place-items: center; padding: clamp(.7rem, 2vh, 1.5rem) clamp(.7rem, 3vw, 2.5rem); background: transparent; }
.future-chapter__page { position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto auto auto auto auto; justify-items: center; align-content: center; gap: clamp(.5rem, 1.6vh, 1.1rem); width: min(100%, 1050px); height: 100%; max-height: 100%; overflow: hidden; padding: clamp(1.3rem, 4vh, 3rem) clamp(1.1rem, 6vw, 5rem); border: 1px solid rgb(204 182 223 / 54%); border-radius: 4px 4px 17px 4px; color: #f4ead7; background: radial-gradient(ellipse at 18% 12%, rgb(176 138 208 / 12%), transparent 42%), linear-gradient(145deg, rgb(22 23 51 / 90%), rgb(42 28 58 / 93%)); box-shadow: 0 24px 75px rgb(5 5 17 / 42%), 0 0 0 6px rgb(171 139 201 / 8%), inset 0 0 40px rgb(226 196 133 / 5%); text-align: center; }
.future-chapter__page::before { position: absolute; z-index: -1; inset: 12px; border: 1px solid rgb(216 184 117 / 22%); content: ""; pointer-events: none; }
.future-chapter__page > .eyebrow { margin: 0; }
.future-chapter__seal { display: grid; width: clamp(58px, 9vh, 86px); aspect-ratio: 1; place-items: center; border: 1px solid rgb(216 184 117 / 58%); border-radius: 50%; color: #e3c887; background: radial-gradient(circle, rgb(177 143 204 / 27%), rgb(43 32 64 / 76%)); box-shadow: 0 0 28px rgb(188 150 216 / 22%), inset 0 0 20px rgb(216 184 117 / 11%); font: 2rem/1 var(--serif); }
.future-chapter__page h2 { max-width: 780px; margin: 0; color: #f4ead7; font-size: clamp(2rem, 5.4vw, 4.3rem); line-height: 1.02; text-wrap: balance; text-shadow: 0 0 25px rgb(198 164 220 / 17%); }
.future-chapter__intro { max-width: 680px; margin: 0; color: rgb(246 238 225 / 88%); font: clamp(.92rem, 1.6vw, 1.12rem)/1.7 var(--sans); }
.future-chapter__prompt { max-width: 650px; margin: 0; color: #e0c987; font: italic clamp(.88rem, 1.6vw, 1.08rem)/1.5 var(--serif); }
.future-chapter__placeholder { margin: 0; padding: .55rem 1rem; border: 1px dashed rgb(204 182 223 / 37%); border-radius: 99px; color: rgb(224 212 233 / 74%); font: .75rem/1.4 var(--sans); }
.future-chapter__page .chapter-navigation { margin-top: clamp(.3rem, 1.5vh, 1rem); }
.future-chapter__page .chapter-navigation__button { border-color: rgb(212 191 233 / 38%); color: #e6d8ec; background: rgb(36 31 60 / 76%); }
.future-chapter__page .chapter-navigation__button--index { color: #f2dfad; }
.chapter-index { width: min(calc(100% - 1.2rem), 680px); max-width: none; max-height: min(90svh, 800px); margin: auto; padding: 0; overflow: auto; border: 1px solid rgb(193 161 216 / 72%); border-radius: 8px 8px 17px 8px; color: #34283a; background: transparent; box-shadow: 0 24px 80px rgb(4 5 16 / 55%), 0 0 34px rgb(167 130 198 / 22%); }
.chapter-index::backdrop { background: rgb(9 9 24 / 76%); backdrop-filter: blur(5px); }
.chapter-index__page { position: relative; padding: clamp(1.7rem, 5vw, 3rem); border: 8px solid #e8dded; outline: 1px solid rgb(177 142 199 / 50%); outline-offset: -13px; background: radial-gradient(ellipse at 8% 2%, rgb(215 198 233 / 52%), transparent 35%), linear-gradient(145deg, #fbf5e9, #f0e8f2 62%, #faf1df); }
.chapter-index__page > .eyebrow { color: #8767a0; }
.chapter-index__page h2 { margin: 0 2.8rem 1rem 0; color: #392844; font-size: clamp(1.9rem, 5vw, 2.8rem); }
.chapter-index__close { position: absolute; top: .8rem; right: .9rem; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(139 106 163 / 35%); border-radius: 50%; color: #624a72; background: rgb(255 255 255 / 62%); font: 1.5rem/1 var(--sans); cursor: pointer; }
.chapter-index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chapter-index__entry { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .65rem; align-items: center; width: 100%; min-height: 54px; padding: .55rem .7rem; border: 1px solid rgb(145 111 168 / 29%); border-radius: 4px 10px 10px 4px; color: #44334e; background: rgb(255 252 245 / 75%); font: 500 .86rem/1.35 var(--sans); text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.chapter-index__entry:hover, .chapter-index__entry:focus-visible { border-color: rgb(177 142 199 / 78%); background: #fffaf0; box-shadow: 0 0 14px rgb(166 130 198 / 22%); }
.chapter-index__number { color: #9a7a45; font: italic 1rem var(--serif); }
.chapter-portal { position: fixed; z-index: 25000; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 48%, #ead7a3 0, rgb(226 200 156 / 94%) 6%, rgb(197 158 211 / 90%) 23%, rgb(113 82 139 / 94%) 54%, #18162c 100%); clip-path: circle(0 at 50% 48%); }
.chapter-portal.is-active { animation: chapter-portal-open .76s cubic-bezier(.25, .7, .18, 1) both; }
.chapter-portal::before, .chapter-portal::after { position: absolute; inset: 0; content: ""; opacity: .48; background-image: radial-gradient(circle, #f3dfae 0 1px, transparent 1.8px), radial-gradient(circle, #e7d9f4 0 1px, transparent 1.7px); background-size: 61px 73px, 103px 97px; background-position: 10px 14px, 49px 31px; }
.chapter-portal::after { opacity: .38; transform: rotate(23deg) scale(1.2); background-size: 173px 157px, 127px 149px; }
.is-changing-chapter .chapter-navigation { pointer-events: none; }
body[data-active-chapter="letters"] .chapter-ambience { background-image: radial-gradient(ellipse at 50% 30%, rgb(115 84 151 / 34%), transparent 45%), radial-gradient(ellipse at 14% 86%, rgb(75 65 129 / 34%), transparent 42%), radial-gradient(circle, rgb(239 219 174 / 72%) 0 .7px, transparent 1.4px), radial-gradient(circle, rgb(208 190 237 / 66%) 0 .7px, transparent 1.5px); }
body[data-active-chapter="soundtrack"] .chapter-ambience { background-image: radial-gradient(ellipse at 75% 24%, rgb(118 91 162 / 34%), transparent 41%), radial-gradient(ellipse at 24% 84%, rgb(80 72 135 / 34%), transparent 44%), radial-gradient(circle, rgb(239 219 174 / 72%) 0 .7px, transparent 1.4px), radial-gradient(circle, rgb(208 190 237 / 66%) 0 .7px, transparent 1.5px); }
body[data-active-chapter="adventures"] .chapter-ambience { background-image: radial-gradient(ellipse at 16% 20%, rgb(70 105 148 / 32%), transparent 41%), radial-gradient(ellipse at 85% 80%, rgb(116 74 137 / 34%), transparent 42%), radial-gradient(circle, rgb(239 219 174 / 72%) 0 .7px, transparent 1.4px), radial-gradient(circle, rgb(208 190 237 / 66%) 0 .7px, transparent 1.5px); }
body[data-active-chapter="lost-memories"] .chapter-ambience { background-image: radial-gradient(ellipse at 50% 10%, rgb(116 83 155 / 31%), transparent 42%), radial-gradient(ellipse at 50% 100%, rgb(64 58 112 / 38%), transparent 42%), radial-gradient(circle, rgb(239 219 174 / 72%) 0 .7px, transparent 1.4px), radial-gradient(circle, rgb(208 190 237 / 66%) 0 .7px, transparent 1.5px); }
body[data-active-chapter="final-spell"] .chapter-ambience { background-image: radial-gradient(ellipse at 25% 28%, rgb(118 91 162 / 34%), transparent 42%), radial-gradient(ellipse at 78% 76%, rgb(145 102 141 / 30%), transparent 43%), radial-gradient(circle, rgb(239 219 174 / 72%) 0 .7px, transparent 1.4px), radial-gradient(circle, rgb(208 190 237 / 66%) 0 .7px, transparent 1.5px); }
@keyframes chapter-nebula { from { background-position: center, center, 12px 9px, 37px 61px; filter: brightness(.92); } to { background-position: 2% 3%, -2% -2%, 28px 24px, 23px 76px; filter: brightness(1.08); } }
@keyframes chapter-portal-open { 0% { opacity: 0; clip-path: circle(0 at 50% 48%); } 27% { opacity: 1; clip-path: circle(68vmax at 50% 48%); } 46%, 57% { opacity: 1; clip-path: circle(150vmax at 50% 48%); } 100% { opacity: 0; clip-path: circle(150vmax at 50% 48%); } }
@media (max-width: 760px) {
  .memories { padding: .45rem .5rem; }
  .memories__paper { gap: .25rem; padding: .7rem .75rem; }
  .memories h2 { font-size: clamp(1.65rem, 7vw, 2.25rem); line-height: 1; }
  .memories__intro { font-size: clamp(.72rem, 2.4vw, .86rem); line-height: 1.28; }
  .memories .memory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .2rem .45rem; }
  .memories .memory-category__title { margin-bottom: .08rem; font-size: clamp(.72rem, 3vw, .94rem); }
  .memories .memory-album-tile__stack { max-height: 125px; min-height: 52px; aspect-ratio: 2.35; }
  .memories .memory-album-tile__hint { display: none; }
  .memories .memory-album-tile__sample { font-size: .53rem; }
  .chapter-navigation { gap: .25rem; }
  .chapter-navigation__button { min-height: 38px; padding: .4rem .52rem; font-size: clamp(.62rem, 2.5vw, .76rem); }
  .time-machine { padding: .45rem .5rem; }
  .time-machine__paper { gap: .22rem; padding: .7rem .75rem; }
  .time-machine__paper > h2 { font-size: clamp(1.65rem, 7vw, 2.3rem); }
  .time-machine__intro { font-size: clamp(.72rem, 2.4vw, .86rem); line-height: 1.28; }
  .time-machine__note { font-size: .66rem; }
  .time-machine .time-line { gap: .22rem; padding-left: 1.1rem; }
  .time-machine .time-line::before { left: .34rem; }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .18rem .5rem; column-gap: .4rem; }
  .time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { left: calc(-1.1rem - 6px); }
  .time-machine .time-line__eyebrow { font-size: .51rem; }
  .time-machine .time-line__title { font-size: clamp(.73rem, 2.7vw, .89rem); line-height: 1.14; }
  .time-machine .time-line__action { font-size: .54rem; }
  .future-chapter { padding: .5rem; }
  .future-chapter__page { gap: clamp(.4rem, 1.2vh, .75rem); padding: 1rem .9rem; }
  .future-chapter__page h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .future-chapter__intro { font-size: .9rem; line-height: 1.5; }
  .future-chapter__prompt { font-size: .88rem; }
  .future-chapter__placeholder { font-size: .68rem; }
  .chapter-index__list { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .chapter-index__entry { min-height: 46px; }
}
@media (max-height: 680px) {
  .memories__paper, .time-machine__paper { padding-block: .5rem; gap: .15rem; }
  .memories .memory-album-tile__stack { max-height: 110px; }
  .future-chapter__page { gap: .35rem; padding-block: .8rem; }
  .future-chapter__seal { width: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-ambience { animation: none; }
  .chapter-portal { display: none !important; }
  .memories__paper { transition: none; }
  .chapter-navigation__button { transition: none; }
}

/* Capítulo segundo: la línea temporal vive en una página propia. */
.time-machine { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 5vw, 4rem); overflow: hidden; color: var(--cream); background: radial-gradient(ellipse at 12% 18%, rgb(105 79 145 / 24%), transparent 36%), radial-gradient(ellipse at 88% 80%, rgb(104 59 119 / 22%), transparent 38%), linear-gradient(145deg, #101326, #21172f 55%, #17162d); }
.time-machine::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; pointer-events: none; background-image: radial-gradient(#e8d7a7 .7px, transparent 1px), radial-gradient(#cbbbe0 .6px, transparent 1px); background-size: 71px 71px, 103px 103px; background-position: 8px 13px, 37px 49px; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.time-machine__paper { position: relative; width: min(100%, 1000px); margin-inline: auto; padding: clamp(2.2rem, 6vw, 5rem) clamp(1.25rem, 7vw, 6rem); border: 1px solid rgb(208 185 227 / 45%); border-radius: 3px 3px 14px 3px; color: #33283a; background: radial-gradient(ellipse at 8% 6%, rgb(214 195 231 / 43%), transparent 31%), radial-gradient(ellipse at 94% 100%, rgb(214 198 227 / 38%), transparent 35%), linear-gradient(140deg, #fbf5e9, #f1eaf3 52%, #faf1df); box-shadow: 0 30px 90px rgb(5 5 17 / 45%), 0 0 36px rgb(159 121 196 / 13%), inset 0 0 50px rgb(167 139 182 / 9%); opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.time-machine.is-visible .time-machine__paper { opacity: 1; transform: none; }
.time-machine__paper::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(137 104 160 / 19%); pointer-events: none; }
.time-machine__paper > .eyebrow, .time-machine__paper > h2, .time-machine__intro, .time-machine__note, .time-line, .time-machine__paper > nav { position: relative; }
.time-machine__paper > .eyebrow { color: #8767a0; text-align: center; }
.time-machine__paper > h2 { max-width: 760px; margin: 0 auto; color: #37243f; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.02; text-align: center; text-wrap: balance; }
.time-machine__intro { max-width: 650px; margin: 1.2rem auto 0; color: #514455; font: 1.05rem/1.75 var(--sans); text-align: center; }
.time-machine__note { margin: .9rem 0 0; color: #796889; font: italic .9rem/1.6 var(--serif); text-align: center; }
.time-line { display: grid; gap: 1.2rem; width: min(100%, 760px); margin: 3.2rem auto 2.5rem; padding: 0; list-style: none; counter-reset: timeline; }
.time-line::before { content: ""; position: absolute; top: 1.3rem; bottom: 1.3rem; left: 50%; width: 1px; background: linear-gradient(transparent, rgb(155 123 181 / 52%) 8%, rgb(198 166 112 / 78%) 50%, rgb(155 123 181 / 52%) 92%, transparent); }
.time-line__item { position: relative; width: calc(50% - 2.2rem); }
.time-line__item:nth-child(odd) { justify-self: start; }
.time-line__item:nth-child(even) { justify-self: end; }
.time-line__trigger { position: relative; display: grid; width: 100%; min-height: 128px; gap: .45rem; justify-items: start; padding: 1.1rem 1.2rem; border: 1px solid rgb(145 111 168 / 35%); border-radius: 3px 12px 12px 12px; color: #3f3048; background: linear-gradient(145deg, rgb(255 252 245 / 88%), rgb(237 228 244 / 82%)); box-shadow: 0 8px 22px rgb(68 48 79 / 10%), inset 0 0 0 3px rgb(255 255 255 / 45%); text-align: left; cursor: pointer; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.time-line__item:nth-child(even) .time-line__trigger { border-radius: 12px 3px 12px 12px; }
.time-line__trigger::before { content: ""; position: absolute; top: 1.25rem; width: 10px; height: 10px; border: 1px solid #e7d5a4; border-radius: 50%; background: #79609b; box-shadow: 0 0 0 5px rgb(197 172 216 / 20%), 0 0 15px rgb(193 158 99 / 30%); }
.time-line__item:nth-child(odd) .time-line__trigger::before { right: calc(-2.2rem - 6px); }
.time-line__item:nth-child(even) .time-line__trigger::before { left: calc(-2.2rem - 6px); }
.time-line__sigil { position: absolute; top: 1rem; right: 1rem; color: #a9874c; font-size: .9rem; text-shadow: 0 0 10px rgb(204 174 111 / 50%); }
.time-line__eyebrow { color: #806597; font: 700 .68rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.time-line__title { max-width: 29ch; color: #392844; font: 500 1.2rem/1.35 var(--serif); }
.time-line__action { color: #856d91; font: 500 .78rem/1.4 var(--sans); }
.time-line__trigger:hover, .time-line__trigger:focus-visible { z-index: 1; border-color: rgb(176 143 198 / 80%); box-shadow: 0 0 0 3px rgb(175 140 203 / 12%), 0 12px 30px rgb(71 51 88 / 18%), 0 0 20px rgb(210 183 126 / 18%); transform: translateY(-3px); }
.time-line__trigger:focus-visible, .time-memory-dialog__close:focus-visible { outline: 2px solid #9270ae; outline-offset: 3px; }
.time-machine__paper > nav { display: flex; justify-content: center; margin-top: 2.5rem; }
.chapter-navigation__link { display: inline-flex; gap: .55rem; align-items: center; padding: .75rem 1rem; border: 1px solid rgb(133 101 157 / 36%); border-radius: 99px; color: #5e4567; background: rgb(241 233 246 / 62%); font: 600 .9rem/1.4 var(--sans); text-decoration: none; transition: background .2s ease, box-shadow .2s ease; }
.chapter-navigation__link:hover, .chapter-navigation__link:focus-visible { background: #fffaf0; box-shadow: 0 0 15px rgb(166 130 198 / 25%); }
.time-memory-dialog { width: min(calc(100% - 2rem), 620px); max-height: min(88svh, 820px); padding: 0; overflow: auto; border: 1px solid rgb(197 167 221 / 70%); border-radius: 8px 8px 18px 8px; color: #34283a; background: transparent; box-shadow: 0 24px 80px rgb(4 5 16 / 55%), 0 0 34px rgb(167 130 198 / 22%); }
.time-memory-dialog::backdrop { background: rgb(9 9 24 / 74%); backdrop-filter: blur(5px); }
.time-memory-dialog__card { position: relative; padding: clamp(2rem, 6vw, 3.5rem); border: 8px solid #e8dded; outline: 1px solid rgb(177 142 199 / 50%); outline-offset: -13px; background: radial-gradient(ellipse at 8% 2%, rgb(215 198 233 / 52%), transparent 35%), linear-gradient(145deg, #fbf5e9, #f0e8f2 62%, #faf1df); }
.time-memory-dialog__close { position: absolute; top: .8rem; right: .9rem; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(139 106 163 / 35%); border-radius: 50%; color: #624a72; background: rgb(255 255 255 / 62%); font: 1.5rem/1 var(--sans); cursor: pointer; }
.time-memory-dialog__card > .eyebrow { padding-right: 2.8rem; color: #8767a0; }
.time-memory-dialog__card h2 { margin: 0; color: #392844; font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.12; }
.time-memory-dialog__date { margin: .7rem 0; color: #856b47; font: 600 .82rem var(--sans); }
.time-memory-dialog__anecdote { margin: 1rem 0; color: #514455; font: 1rem/1.7 var(--sans); }
.time-memory-dialog__photo { margin: 1.2rem 0 0; text-align: center; }
.time-memory-dialog__photo[hidden] { display: none; }
.time-memory-dialog__photo img { display: block; width: 100%; max-height: min(48svh, 440px); object-fit: contain; border: 8px solid #e7dcef; box-shadow: 0 10px 24px rgb(50 34 61 / 18%); }
.time-memory-dialog__photo figcaption { padding: 1.3rem; border: 1px dashed rgb(136 107 155 / 42%); border-radius: 5px; color: #76627e; font: italic .92rem var(--serif); }
.time-memory-dialog__photo figcaption[hidden] { display: none; }
@media (max-width: 640px) {
  .time-machine { padding: 1.2rem .7rem; }
  .time-machine__paper { padding: 2.3rem 1.1rem; }
  .time-machine__paper::before { inset: 7px; }
  .time-line { gap: 1rem; width: 100%; margin: 2.3rem auto; padding-left: 1.25rem; }
  .time-line::before { left: .42rem; }
  .time-line__item, .time-line__item:nth-child(even), .time-line__item:nth-child(odd) { width: 100%; justify-self: stretch; }
  .time-line__trigger, .time-line__item:nth-child(even) .time-line__trigger { min-height: 116px; padding: .95rem 1rem; border-radius: 3px 12px 12px 12px; }
  .time-line__trigger::before, .time-line__item:nth-child(even) .time-line__trigger::before { top: 1.35rem; left: -1.25rem; right: auto; }
  .time-line__title { font-size: 1.08rem; }
  .chapter-navigation__link { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine__paper { opacity: 1; transform: none; transition: none; }
  .time-line__trigger { transition: none; }
}

/* Ajuste final de la línea temporal para mantener sus cinco hitos dentro de la página. */
.time-machine { height: 100vh; height: 100svh; min-height: 0; padding: .75rem clamp(.75rem, 3vw, 2rem); }
.time-machine__paper { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: clamp(.2rem, .65vh, .5rem); width: min(100%, 1080px); height: 100%; min-height: 0; padding: clamp(.65rem, 1.8vh, 1.2rem) clamp(1rem, 4vw, 3rem); }
.time-machine__paper > h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.02; }
.time-machine__intro { margin-top: .25rem; font-size: clamp(.78rem, 1.15vw, .92rem); line-height: 1.35; }
.time-machine__note { margin-top: 0; font-size: .74rem; line-height: 1.3; }
.time-machine .time-line { display: grid; position: relative; grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: clamp(.22rem, .6vh, .45rem); width: min(100%, 760px); min-height: 0; margin: 0 auto; padding: 0 0 0 1.35rem; }
.time-machine .time-line::before { top: .35rem; bottom: .35rem; left: .4rem; }
.time-machine .time-line__item, .time-machine .time-line__item:nth-child(odd), .time-machine .time-line__item:nth-child(even) { display: flex; position: relative; width: 100%; min-height: 0; justify-self: stretch; }
.time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: .55rem; width: 100%; min-height: 0; height: 100%; padding: .28rem .75rem; }
.time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { top: 50%; left: -1.35rem; right: auto; transform: translateY(-50%); }
.time-machine .time-line__eyebrow { grid-column: 1; font-size: .55rem; }
.time-machine .time-line__title { grid-column: 2; grid-row: 1 / span 2; padding-right: 1.25rem; font-size: clamp(.78rem, 1.2vw, .98rem); line-height: 1.2; }
.time-machine .time-line__action { grid-column: 1; grid-row: 2; font-size: .6rem; }
.time-machine .time-line__sigil { top: 50%; right: .6rem; transform: translateY(-50%); }
.time-machine__paper > nav { margin-top: 0; }
@media (max-width: 760px) {
  .time-machine { padding: .4rem; }
  .time-machine__paper { gap: .18rem; padding: .6rem .7rem; }
  .time-machine__paper > h2 { font-size: clamp(1.5rem, 6.6vw, 2.2rem); }
  .time-machine__intro { font-size: clamp(.68rem, 2.35vw, .82rem); line-height: 1.23; }
  .time-machine__note { font-size: .62rem; }
  .time-machine .time-line { gap: .16rem; padding-left: 1.1rem; }
  .time-machine .time-line::before { left: .33rem; }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .14rem .45rem; column-gap: .35rem; }
  .time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { left: -1.1rem; }
  .time-machine .time-line__eyebrow { font-size: .47rem; }
  .time-machine .time-line__title { font-size: clamp(.66rem, 2.55vw, .82rem); line-height: 1.12; }
  .time-machine .time-line__action { font-size: .5rem; }
  .time-machine .chapter-navigation__button { min-height: 34px; padding: .3rem .42rem; font-size: .62rem; }
}
@media (max-height: 680px) {
  .time-machine__paper { gap: .12rem; padding-block: .4rem; }
  .time-machine__paper > h2 { font-size: clamp(1.45rem, 3.5vw, 2.5rem); }
  .time-machine__intro { font-size: .74rem; line-height: 1.2; }
  .time-machine__note { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine__paper { transition: none; }
  .time-machine .time-line__trigger { transition: none; }
}

/* Segunda ronda, fase 1: página lavanda suspendida y recorrido serpenteante. */
.memories { isolation: isolate; background: radial-gradient(ellipse at 50% 52%, rgb(130 96 170 / 18%), transparent 66%), transparent; }
.memories__paper { border-color: rgb(209 187 235 / 70%); color: #352542; background-color: rgb(179 158 199 / 92%); background-image: radial-gradient(ellipse at 8% 5%, rgb(255 245 255 / 37%), transparent 36%), radial-gradient(ellipse at 94% 94%, rgb(134 101 166 / 28%), transparent 42%), radial-gradient(circle, rgb(255 244 209 / 38%) 0 .65px, transparent 1.4px), radial-gradient(circle, rgb(92 70 118 / 14%) 0 .55px, transparent 1.35px), linear-gradient(135deg, rgb(235 222 244 / 96%), rgb(199 180 216 / 94%) 51%, rgb(226 213 238 / 96%)); background-size: auto, auto, 91px 103px, 137px 151px, auto; background-position: center, center, 16px 12px, 42px 63px, center; box-shadow: 0 32px 90px rgb(4 5 24 / 55%), 0 0 0 7px rgb(156 124 194 / 19%), 0 0 44px rgb(192 155 229 / 28%), inset 0 0 56px rgb(105 76 141 / 12%); -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08); }
.memories__paper::before { inset: 11px; border-color: rgb(113 81 148 / 43%); box-shadow: inset 0 0 32px rgb(109 78 145 / 11%), 0 0 16px rgb(248 224 168 / 11%); }
.memories__paper > h2 { color: #392446; text-shadow: 0 1px 0 rgb(255 247 232 / 58%); }
.memories__intro { color: #493b54; }
.memories .memory-album-tile__label { color: #45344f; }
.memories .memory-album-tile__count { color: #382844; }
.memories .memory-album-tile__hint { color: #51405e; }
.time-machine .time-line { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1.02fr .91fr 1.1fr .93fr 1.04fr; gap: clamp(.15rem, .45vh, .34rem) 0; width: min(100%, 920px); padding: 0; }
.time-machine .time-line::before { inset: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M46 9 C49 12 52 16 54 20 S49 27 46 30 C43 33 48 37 54 40 S50 47 46 50 C42 53 49 57 54 60 S50 67 46 70 C42 73 49 77 54 80 S50 87 46 91' fill='none' stroke='%23c9a557' stroke-width='0.6' stroke-linecap='round' stroke-dasharray='1.2 1.45'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: drop-shadow(0 0 2px rgb(224 190 110 / 56%)); opacity: .88; }
.time-machine .time-line__item, .time-machine .time-line__item:nth-child(odd), .time-machine .time-line__item:nth-child(even) { width: 93%; min-height: 0; align-items: center; }
.time-machine .time-line__item:nth-child(odd) { grid-column: 1; justify-self: start; transform: translateY(-2px); }
.time-machine .time-line__item:nth-child(even) { grid-column: 2; justify-self: end; transform: translateY(2px); }
.time-machine .time-line__item:nth-child(1) { grid-row: 1; }
.time-machine .time-line__item:nth-child(2) { grid-row: 2; }
.time-machine .time-line__item:nth-child(3) { grid-row: 3; }
.time-machine .time-line__item:nth-child(4) { grid-row: 4; }
.time-machine .time-line__item:nth-child(5) { grid-row: 5; }
.time-machine__paper { background: radial-gradient(ellipse at 8% 5%, rgb(223 205 238 / 50%), transparent 32%), radial-gradient(ellipse at 93% 94%, rgb(199 177 222 / 34%), transparent 37%), linear-gradient(140deg, #eee5f2, #dbd0e6 52%, #f0e2cc); }
.time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { position: relative; z-index: 1; border-color: rgb(170 139 191 / 48%); border-radius: 4px 14px 14px 4px; background: linear-gradient(132deg, rgb(255 250 240 / 96%), rgb(230 218 240 / 96%) 59%, rgb(246 237 220 / 95%)); box-shadow: 0 5px 16px rgb(45 31 56 / 13%), inset 0 0 0 3px rgb(255 255 255 / 36%), 0 0 14px rgb(204 173 114 / 8%); }
.time-machine .time-line__item:nth-child(even) .time-line__trigger { border-radius: 14px 4px 4px 14px; }
.time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { top: 50%; left: auto; right: -1.3rem; width: 13px; height: 13px; border: 1px solid #e8d49b; background: radial-gradient(circle at 35% 30%, #f6e6b7, #a88746 76%); box-shadow: 0 0 0 4px rgb(195 165 106 / 19%), 0 0 14px rgb(218 183 102 / 48%); transform: translateY(-50%); }
.time-machine .time-line__item:nth-child(even) .time-line__trigger::before { right: auto; left: -1.3rem; }
.time-machine .time-line__item:nth-child(3n + 1) .time-line__trigger::before { animation: timeline-seal-glow 4.2s ease-in-out infinite; }
.time-machine .time-line__item:nth-child(3n + 2) .time-line__trigger::before { animation: timeline-seal-glow 4.8s 1.1s ease-in-out infinite; }
.time-machine .time-line__item:nth-child(odd) .time-line__eyebrow { color: #866b98; }
.time-machine .time-line__item:nth-child(even) .time-line__eyebrow { color: #886b45; }
.time-machine .time-line__trigger:hover, .time-machine .time-line__trigger:focus-visible { border-color: rgb(199 164 91 / 76%); box-shadow: 0 0 0 3px rgb(175 140 203 / 12%), 0 9px 22px rgb(55 38 67 / 18%), 0 0 18px rgb(213 184 117 / 21%); }
@keyframes timeline-seal-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgb(218 183 102 / 23%)); } 50% { filter: drop-shadow(0 0 8px rgb(227 199 125 / 77%)); } }
@media (max-width: 760px) {
  .time-machine .time-line { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: .12rem; width: min(100%, 620px); padding-inline: 0; }
  .time-machine .time-line::before { inset: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M84 9 C73 12 31 16 16 20 S35 27 84 30 C94 33 50 37 16 40 S32 47 84 50 C95 53 49 57 16 60 S31 67 84 70 C94 73 50 77 16 80 S34 87 84 91' fill='none' stroke='%23c9a557' stroke-width='0.75' stroke-linecap='round' stroke-dasharray='1.6 1.7'/%3E%3C/svg%3E"); }
  .time-machine .time-line__item, .time-machine .time-line__item:nth-child(odd), .time-machine .time-line__item:nth-child(even) { width: 84%; }
  .time-machine .time-line__item:nth-child(odd) { grid-column: 1; justify-self: start; transform: translateY(-1px); }
  .time-machine .time-line__item:nth-child(even) { grid-column: 1; justify-self: end; transform: translateY(1px); }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .12rem .42rem; }
  .time-machine .time-line__title { font-size: clamp(.66rem, 2.6vw, .82rem); line-height: 1.13; }
  .time-machine .time-line__trigger::before { right: -1.15rem; width: 11px; height: 11px; }
  .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { left: -1.15rem; right: auto; }
  .memories__paper { background-size: auto, auto, 73px 83px, 119px 127px, auto; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine .time-line__item:nth-child(n) .time-line__trigger::before { animation: none; }
}

/* Fase 2: objetos originales del libro, dibujados con CSS. */
.memories__paper { position: relative; }
.memories__paper::after { position: absolute; z-index: 2; top: 1.4rem; right: 1.65rem; width: 58px; height: 29px; content: ""; background: radial-gradient(circle at 50% 50%, #fff2bf 0 2px, #d8b35f 2.7px 6px, transparent 6.8px), radial-gradient(ellipse at 20% 50%, transparent 0 27%, rgb(196 155 72 / 94%) 29% 32%, transparent 35%), radial-gradient(ellipse at 80% 50%, transparent 0 27%, rgb(196 155 72 / 94%) 29% 32%, transparent 35%), linear-gradient(35deg, transparent 46%, rgb(225 193 117 / 90%) 47.5% 49%, transparent 50.5%) left center / 50% 100% no-repeat, linear-gradient(-35deg, transparent 46%, rgb(225 193 117 / 90%) 47.5% 49%, transparent 50.5%) right center / 50% 100% no-repeat; filter: drop-shadow(0 0 7px rgb(221 188 108 / 42%)); opacity: .8; pointer-events: none; animation: memory-orb-float 11s ease-in-out infinite; }
.time-machine__paper { position: relative; isolation: isolate; }
.time-machine__paper::after { position: absolute; z-index: 0; right: 1.25rem; bottom: 1.15rem; width: 48px; aspect-ratio: 1; border: 1px solid rgb(185 146 71 / 72%); border-radius: 50%; content: ""; background: radial-gradient(circle at 50% 50%, #c8a356 0 2px, transparent 2.8px), radial-gradient(ellipse at 50% 50%, transparent 34%, rgb(190 152 78 / 84%) 35% 37%, transparent 39%), radial-gradient(ellipse at 50% 50%, transparent 57%, rgb(141 111 168 / 83%) 58% 60%, transparent 62%), conic-gradient(from 18deg, transparent 0 19%, rgb(203 166 87 / 70%) 20% 21%, transparent 22% 48%, rgb(203 166 87 / 70%) 49% 50%, transparent 51% 78%, rgb(203 166 87 / 70%) 79% 80%, transparent 81%); box-shadow: 0 0 15px rgb(205 169 99 / 20%), inset 0 0 12px rgb(157 122 180 / 24%); opacity: .65; pointer-events: none; animation: time-turner-orbit 34s linear infinite; }
.time-machine__paper > .eyebrow, .time-machine__paper > h2, .time-machine__intro, .time-machine__note, .time-machine__paper > .time-line, .time-machine__paper > nav { z-index: 1; }
.future-chapter__page::after { position: absolute; z-index: -1; top: 1.5rem; right: 1.8rem; color: rgb(229 199 133 / 28%); font: 3.8rem/1 var(--serif); text-shadow: 0 0 18px rgb(201 168 119 / 18%); content: ""; pointer-events: none; }
#letters .future-chapter__page::after { content: "✒"; transform: rotate(12deg); }
#adventures .future-chapter__page::after { content: "⌖"; font-size: 3.2rem; }
@keyframes memory-orb-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(0, -5px, 0) rotate(2deg); } }
@keyframes time-turner-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .memories__paper::after { top: .75rem; right: .8rem; width: 42px; height: 21px; }
  .time-machine__paper::after { right: .6rem; bottom: .55rem; width: 34px; }
  .future-chapter__page::after { top: .8rem; right: 1rem; font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .memories__paper::after, .time-machine__paper::after { animation: none; }
}

/* Ronda visual 3 · página de recuerdos en cristal nocturno. */
.memories {
  background: radial-gradient(ellipse at 50% 48%, rgb(114 79 157 / 27%), transparent 64%), transparent;
}
.memories__paper {
  border-color: rgb(209 187 235 / 42%);
  color: #f4eefa;
  background-color: rgb(34 27 53 / 93%);
  background-image:
    radial-gradient(ellipse at 8% 3%, rgb(174 139 205 / 26%), transparent 38%),
    radial-gradient(ellipse at 92% 94%, rgb(122 83 153 / 30%), transparent 42%),
    radial-gradient(circle, rgb(250 226 176 / 31%) 0 .55px, transparent 1.3px),
    linear-gradient(136deg, rgb(34 28 55 / 94%), rgb(50 36 68 / 94%) 55%, rgb(36 29 57 / 95%));
  background-size: auto, auto, 97px 113px, auto;
  box-shadow: 0 34px 90px rgb(4 4 20 / 64%), 0 0 0 7px rgb(157 122 193 / 13%), 0 0 48px rgb(190 146 221 / 23%), inset 0 0 60px rgb(10 9 23 / 25%);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
.memories__paper::before { border-color: rgb(201 176 227 / 31%); box-shadow: inset 0 0 32px rgb(198 164 226 / 5%), 0 0 20px rgb(237 213 160 / 8%); }
.memories .eyebrow { color: #d5b8ee; }
.memories h2, .memories__paper > h2 { color: #f2e9f7; text-shadow: 0 1px 16px rgb(193 153 225 / 18%); }
.memories h2 em { color: #d6bbed; }
.memories__intro { color: #ded4e8; }
.memory-category { border-top-color: rgb(218 190 235 / 24%); }
.memory-category__title { color: #eee4f3; text-shadow: 0 1px 10px rgb(200 165 220 / 17%); }
.memories .memory-album-tile__label { color: #efe7f2; }
.memories .memory-album-tile__count { color: #f2e9f7; }
.memories .memory-album-tile__hint { color: #d5c6e2; }
.memories .memory-album-tile__sample { border-color: rgb(204 178 228 / 34%); color: #eadcf3; background: rgb(116 84 140 / 38%); }
.memories .memory-album-tile__stack { background: radial-gradient(ellipse at 50% 47%, rgb(196 157 222 / 25%), transparent 67%); }
.memories .chapter-navigation__button { border-color: rgb(209 184 231 / 30%); color: #f0e5f5; background: rgb(55 42 74 / 74%); box-shadow: 0 4px 18px rgb(0 0 0 / 17%); }
.memories .chapter-navigation__button--index { color: #f1dca8; background: rgb(79 60 93 / 77%); }

/* Mapa temporal: encabezado propio y paradas escalonadas alrededor del sendero. */
.time-machine { padding: clamp(.55rem, 1.5vh, 1.1rem) clamp(.75rem, 3vw, 2rem); background: radial-gradient(ellipse at 50% 52%, rgb(125 86 169 / 28%), transparent 60%), transparent; }
.time-machine::before { opacity: .38; background-size: 67px 69px, 109px 113px; animation: chapter-sky-drift 48s linear infinite alternate; }
.time-machine__paper {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: clamp(.28rem, .65vh, .55rem);
  width: min(100%, 1120px);
  padding: clamp(.72rem, 1.6vh, 1.2rem) clamp(1rem, 4vw, 3.2rem);
  border-color: rgb(201 177 229 / 50%);
  border-radius: 4px 4px 16px 4px;
  background-color: rgb(224 210 237 / 95%);
  background-image: radial-gradient(ellipse at 12% 5%, rgb(255 249 255 / 76%), transparent 36%), radial-gradient(ellipse at 91% 93%, rgb(166 132 194 / 23%), transparent 42%), linear-gradient(135deg, rgb(236 226 244 / 97%), rgb(213 199 230 / 96%) 55%, rgb(239 225 205 / 97%));
  box-shadow: 0 32px 90px rgb(4 4 20 / 61%), 0 0 0 6px rgb(160 127 191 / 12%), 0 0 44px rgb(196 157 224 / 20%), inset 0 0 50px rgb(112 79 144 / 9%);
}
.time-machine__paper > .eyebrow { margin: 0; }
.time-machine__paper > h2 { max-width: 820px; font-size: clamp(1.65rem, 3.2vw, 2.65rem); line-height: 1.05; }
.time-machine__intro { max-width: 700px; margin: .12rem auto .18rem; font-size: clamp(.78rem, 1.05vw, .94rem); line-height: 1.42; }
.time-machine__note { display: block; margin: 0; color: #776687; font-size: .68rem; line-height: 1.3; }
.time-machine .time-line {
  grid-template-columns: minmax(0, 1fr) minmax(52px, .18fr) minmax(0, 1fr);
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(.3rem, .7vh, .6rem) 0;
  width: min(100%, 970px);
  min-height: 0;
  margin: .05rem auto .1rem;
  padding: 0;
}
.time-machine .time-line::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M49 0 C54 7 55 11 50 17 S45 24 50 30 S56 38 50 43 S44 51 50 57 S57 64 50 70 S44 78 50 83 S55 92 50 100' fill='none' stroke='%23c9a557' stroke-width='0.72' stroke-linecap='round' stroke-dasharray='1.1 1.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgb(224 190 110 / 70%));
  opacity: .9;
}
.time-machine .time-line__item,
.time-machine .time-line__item:nth-child(odd),
.time-machine .time-line__item:nth-child(even) { width: min(100%, 390px); min-height: 0; align-items: center; }
.time-machine .time-line__item:nth-child(odd) { grid-column: 1; justify-self: end; transform: translateY(-1px); }
.time-machine .time-line__item:nth-child(even) { grid-column: 3; justify-self: start; transform: translateY(1px); }
.time-machine .time-line__item:nth-child(1) { grid-row: 1; }
.time-machine .time-line__item:nth-child(2) { grid-row: 2; }
.time-machine .time-line__item:nth-child(3) { grid-row: 3; }
.time-machine .time-line__item:nth-child(4) { grid-row: 4; }
.time-machine .time-line__item:nth-child(5) { grid-row: 5; }
.time-machine .time-line__trigger,
.time-machine .time-line__item:nth-child(even) .time-line__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: .55rem;
  min-height: 0;
  height: 100%;
  padding: .35rem .75rem;
  border-color: rgb(160 127 186 / 49%);
  border-radius: 4px 13px 13px 4px;
  background: linear-gradient(135deg, rgb(252 247 255 / 94%), rgb(229 216 241 / 95%) 61%, rgb(246 234 215 / 95%));
  box-shadow: 0 7px 18px rgb(43 27 60 / 15%), inset 0 0 0 3px rgb(255 255 255 / 33%), 0 0 16px rgb(194 153 224 / 10%);
}
.time-machine .time-line__item:nth-child(even) .time-line__trigger { border-radius: 13px 4px 4px 13px; }
.time-machine .time-line__trigger::before,
.time-machine .time-line__item:nth-child(even) .time-line__trigger::before { top: 50%; left: auto; right: -.94rem; width: 13px; height: 13px; border: 1px solid #f4e1a8; background: radial-gradient(circle at 35% 30%, #fff1c7, #b28745 76%); box-shadow: 0 0 0 4px rgb(192 159 99 / 20%), 0 0 17px rgb(218 183 102 / 66%); transform: translateY(-50%); }
.time-machine .time-line__item:nth-child(even) .time-line__trigger::before { right: auto; left: -.94rem; }
.time-machine .time-line__eyebrow { grid-column: 1; font-size: .56rem; }
.time-machine .time-line__title { grid-column: 2; grid-row: 1 / span 2; padding-right: 1.2rem; font-size: clamp(.82rem, 1.1vw, 1rem); line-height: 1.2; }
.time-machine .time-line__action { grid-column: 1; grid-row: 2; font-size: .59rem; }
.time-machine .time-line__sigil { top: 50%; right: .6rem; transform: translateY(-50%); }
.time-machine .time-line__item:nth-child(3n + 1) .time-line__trigger::before { animation: timeline-seal-glow 5.4s ease-in-out infinite; }
.time-machine .time-line__item:nth-child(3n + 2) .time-line__trigger::before { animation: timeline-seal-glow 6s 1.7s ease-in-out infinite; }
.time-machine .chapter-navigation { margin: 0; }
.time-machine .chapter-navigation__button { width: 46px; min-height: 46px; padding: .35rem; }

@media (max-width: 760px) {
  .time-machine { padding: .4rem; }
  .time-machine__paper { gap: .22rem; padding: .6rem .75rem; }
  .time-machine__paper > h2 { font-size: clamp(1.45rem, 5.9vw, 2rem); }
  .time-machine__intro { font-size: clamp(.68rem, 2.25vw, .82rem); line-height: 1.28; }
  .time-machine .time-line { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, minmax(0, 1fr)); width: 100%; padding-left: 1.15rem; }
  .time-machine .time-line::before { inset: 0 auto 0 .38rem; width: 1px; height: auto; background: linear-gradient(transparent, rgb(155 123 181 / 68%) 8%, rgb(198 166 112 / 88%) 50%, rgb(155 123 181 / 68%) 92%, transparent); }
  .time-machine .time-line__item, .time-machine .time-line__item:nth-child(odd), .time-machine .time-line__item:nth-child(even) { display: flex; grid-column: 1; width: 100%; justify-self: stretch; transform: none; }
  .time-machine .time-line__item:nth-child(odd) .time-line__trigger { border-radius: 4px 13px 13px 4px; }
  .time-machine .time-line__item:nth-child(even) .time-line__trigger { border-radius: 13px 4px 4px 13px; }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .22rem .5rem; }
  .time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { top: 50%; left: -1.15rem; right: auto; width: 11px; height: 11px; }
  .time-machine .time-line__title { font-size: clamp(.72rem, 2.7vw, .9rem); line-height: 1.14; }
  .time-machine .time-line__eyebrow { font-size: .49rem; }
  .time-machine .time-line__action { font-size: .52rem; }
}
@media (min-width: 660px) and (max-width: 760px) and (min-height: 620px) {
  .time-machine .time-line { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); padding: 0; }
  .time-machine .time-line::before {
    inset: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M49 0 C54 7 55 11 50 17 S45 24 50 30 S56 38 50 43 S44 51 50 57 S57 64 50 70 S44 78 50 83 S55 92 50 100' fill='none' stroke='%23c9a557' stroke-width='1' stroke-linecap='round' stroke-dasharray='1.3 1.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .time-machine .time-line__item, .time-machine .time-line__item:nth-child(odd), .time-machine .time-line__item:nth-child(even) { display: flex; grid-column: auto; width: 100%; transform: none; }
  .time-machine .time-line__item:nth-child(odd) { grid-column: 1; justify-self: end; }
  .time-machine .time-line__item:nth-child(even) { grid-column: 3; justify-self: start; }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .2rem .38rem; }
  .time-machine .time-line__trigger::before { right: -.72rem; }
  .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { right: auto; left: -.72rem; }
  .time-machine .time-line__title { font-size: .75rem; }
  .time-machine .time-line__action { font-size: .48rem; }
}
@media (max-width: 390px) {
  .time-machine { padding: .25rem; }
  .time-machine__paper { gap: .12rem; padding: .38rem .48rem; }
  .time-machine__paper > h2 { font-size: 1.28rem; }
  .time-machine__intro { font-size: .7rem; line-height: 1.2; }
  .time-machine__note { font-size: .61rem; }
  .time-machine .time-line { gap: .12rem; padding-left: 1rem; }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .12rem .38rem; column-gap: .36rem; }
  .time-machine .time-line__title { font-size: .72rem; }
  .time-machine .time-line__trigger::before, .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { left: -1rem; }
  .time-machine .chapter-navigation__button { min-height: 31px; padding: .24rem .35rem; font-size: .58rem; }
}
@media (max-height: 600px) and (min-width: 480px) {
  .time-machine__paper { gap: .12rem; padding-block: .32rem; }
  .time-machine__paper > h2 { font-size: clamp(1.25rem, 3.7vw, 1.75rem); }
  .time-machine__intro { font-size: .68rem; line-height: 1.18; }
  .time-machine__note { font-size: .56rem; line-height: 1.15; }
  .time-machine .time-line { gap: .08rem 0; }
  .time-machine .time-line__trigger, .time-machine .time-line__item:nth-child(even) .time-line__trigger { padding: .1rem .35rem; column-gap: .35rem; }
  .time-machine .time-line__eyebrow { font-size: .44rem; }
  .time-machine .time-line__title { font-size: .68rem; line-height: 1.08; }
  .time-machine .time-line__action { font-size: .45rem; }
  .time-machine .chapter-navigation__button { width: 46px; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine::before { animation: none; }
  .time-machine .time-line__item:nth-child(n) .time-line__trigger::before { animation: none; }
}

/* Ambientación compartida y navegación de página. */
.memories, .time-machine, .future-chapter { position: relative; z-index: 1; }
.chapter-ambience::before, .chapter-ambience::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.chapter-ambience::before {
  opacity: .27;
  background-image:
    radial-gradient(circle, rgb(255 230 174 / 78%) 0 .8px, transparent 1.65px),
    radial-gradient(circle, rgb(220 197 243 / 82%) 0 .75px, transparent 1.65px),
    radial-gradient(circle, rgb(255 248 227 / 58%) 0 .65px, transparent 1.5px);
  background-size: 137px 151px, 191px 173px, 233px 211px;
  background-position: 7px 11px, 71px 43px, 129px 81px;
  animation: arcane-mote-drift 72s linear infinite alternate;
}
.chapter-ambience::after {
  inset: 12% 7% auto auto;
  width: min(27vw, 330px);
  height: min(25vh, 205px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'%3E%3Cg fill='none' stroke='%23d8bf8b' stroke-opacity='.38' stroke-width='1'%3E%3Cpath d='m17 112 38-67 47 40 45-53 53 51-48 44-62-19-35 10z' stroke-dasharray='2 5'/%3E%3C/g%3E%3Cg fill='%23f3dfae' fill-opacity='.62'%3E%3Ccircle cx='17' cy='112' r='2.5'/%3E%3Ccircle cx='55' cy='45' r='2.5'/%3E%3Ccircle cx='102' cy='85' r='2.5'/%3E%3Ccircle cx='147' cy='32' r='2.5'/%3E%3Ccircle cx='200' cy='83' r='2.5'/%3E%3Ccircle cx='152' cy='127' r='2.5'/%3E%3Ccircle cx='90' cy='108' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  animation: constellation-reveal 15s 2s ease-in-out infinite;
}
@keyframes arcane-mote-drift { from { background-position: 7px 11px, 71px 43px, 129px 81px; opacity: .16; } to { background-position: 34px 38px, 44px 69px, 158px 55px; opacity: .32; } }
@keyframes constellation-reveal { 0%, 12%, 82%, 100% { opacity: 0; transform: translateY(8px) scale(.96); } 25%, 68% { opacity: .3; transform: translateY(0) scale(1); } }
.chapter-portal { background: radial-gradient(ellipse at 50% 48%, rgb(250 231 181 / 95%) 0, rgb(228 203 159 / 94%) 5%, rgb(206 174 222 / 94%) 18%, rgb(129 92 157 / 96%) 46%, rgb(37 29 58 / 98%) 77%, #111326 100%); filter: drop-shadow(0 0 24px rgb(219 184 119 / 31%)); }
.chapter-portal::before { background-size: 47px 57px, 89px 83px; }
.chapter-portal.is-active::before { animation: portal-dust-drift .76s ease-out both; }
.chapter-portal::after { inset: 8%; border: 1px solid rgb(255 230 176 / 25%); border-radius: 50%; box-shadow: 0 0 42px rgb(220 185 235 / 22%), inset 0 0 38px rgb(236 205 143 / 13%); background: radial-gradient(ellipse, transparent 45%, rgb(232 209 160 / 13%) 45.5%, transparent 46.2%); }
@keyframes portal-dust-drift { from { background-position: 10px 14px, 49px 31px; opacity: 0; } 35% { opacity: .5; } to { background-position: 35px -7px, 18px 54px; opacity: .22; } }
.chapter-navigation__button { width: 46px; min-height: 46px; padding: .4rem; border-color: rgb(205 180 227 / 37%); color: #e8d9f1; background: rgb(49 39 68 / 76%); box-shadow: 0 4px 17px rgb(4 5 19 / 24%); }
.chapter-navigation__button--index { color: #f0dca9; background: rgb(67 53 77 / 86%); }
.chapter-navigation__button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s ease, filter .24s ease; }
.chapter-navigation__button:first-child:hover:not(:disabled) svg { transform: translateX(-2px); }
.chapter-navigation__button:last-child:hover:not(:disabled) svg { transform: translateX(2px); }
.chapter-navigation__button--index:hover:not(:disabled) svg { transform: scale(1.06); }
.chapter-navigation__button:hover:not(:disabled), .chapter-navigation__button:focus-visible { color: #fff2c9; background: rgb(90 68 111 / 94%); box-shadow: 0 0 16px rgb(187 151 220 / 37%), 0 0 10px rgb(218 184 117 / 24%); }
.chapter-navigation__button:disabled { color: rgb(224 213 234 / 45%); background: rgb(45 39 60 / 62%); }

.ambient-player { position: fixed; z-index: 1200; top: .8rem; right: clamp(.8rem, 2vw, 1.6rem); color: #efe5f4; font: 500 .76rem/1.4 var(--sans); }
.ambient-player[open] { z-index: 1201; }
.ambient-player > summary { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(211 187 230 / 47%); border-radius: 50%; color: #f1d99d; background: rgb(37 30 54 / 88%); box-shadow: 0 5px 20px rgb(4 5 18 / 32%), inset 0 0 12px rgb(181 140 207 / 13%); font: 1.25rem/1 var(--serif); list-style: none; cursor: pointer; transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ambient-player > summary::-webkit-details-marker { display: none; }
.ambient-player > summary::marker { content: ""; }
.ambient-player > summary:hover, .ambient-player > summary:focus-visible { border-color: #e5c87f; color: #fff0bf; box-shadow: 0 0 18px rgb(197 160 221 / 42%), 0 0 10px rgb(229 196 124 / 24%); transform: translateY(-1px); }
.ambient-player__panel { display: grid; gap: .65rem; width: min(290px, calc(100vw - 1.2rem)); margin-top: .5rem; padding: .9rem; border: 1px solid rgb(204 178 228 / 45%); border-radius: 8px 3px 10px 3px; color: #f0e8f5; background: linear-gradient(145deg, rgb(39 31 57 / 97%), rgb(59 42 73 / 96%)); box-shadow: 0 14px 40px rgb(0 0 0 / 38%), 0 0 24px rgb(180 140 208 / 15%); backdrop-filter: blur(10px); }
.ambient-player__title { margin: 0; color: #f1d99d; font: 600 .96rem/1.3 var(--serif); }
.ambient-player__file { display: block; padding: .45rem .55rem; border: 1px solid rgb(207 182 227 / 32%); border-radius: 4px; color: #eadcf3; background: rgb(255 255 255 / 5%); cursor: pointer; }
.ambient-player__file input { display: block; width: 100%; margin-top: .35rem; color: #ded1e8; font: .67rem/1.3 var(--sans); }
.ambient-player__play, .ambient-player__effects { min-height: 38px; padding: .42rem .58rem; border: 1px solid rgb(210 185 231 / 36%); border-radius: 4px; color: #f3eaf7; background: rgb(108 78 129 / 44%); font: 600 .75rem/1.3 var(--sans); cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.ambient-player__play:hover:not(:disabled), .ambient-player__effects:hover, .ambient-player__play:focus-visible, .ambient-player__effects:focus-visible { background: rgb(132 98 154 / 64%); box-shadow: 0 0 15px rgb(187 151 220 / 25%); }
.ambient-player__play:disabled { opacity: .48; cursor: not-allowed; }
.ambient-player__volume { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; align-items: center; color: #e7d9ef; }
.ambient-player__volume input { grid-column: 1 / -1; width: 100%; accent-color: #c4a36a; }
.ambient-player__volume span { color: #f1d99d; font-variant-numeric: tabular-nums; }
.ambient-player__status { min-height: 2.3em; margin: 0; color: #cbbada; font-size: .68rem; }
.ambient-player__volume input:disabled { opacity: .55; }
.ambient-player:focus-within > summary { outline: 2px solid #e8ce94; outline-offset: 3px; }
body.is-cover-active .ambient-player { display: none; }
@media (max-width: 760px) {
  .ambient-player { top: .45rem; right: .5rem; }
  .ambient-player__panel { width: min(270px, calc(100vw - 1rem)); }
  .chapter-navigation { gap: .28rem; }
  .chapter-navigation__button { width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-ambience::before, .chapter-ambience::after, .chapter-portal::before, .chapter-portal::after { animation: none; }
  .chapter-portal { filter: none; }
  .chapter-navigation__button, .chapter-navigation__button svg, .ambient-player > summary { transition: none; }
}

/* Refinamiento del mapa celeste y alineación común de la navegación de capítulos. */
.time-machine__paper > .eyebrow { margin-top: clamp(.45rem, 1.2vh, .9rem); }
.time-machine__paper > h2 { margin-block: .2rem .25rem; }
.time-machine__intro { margin-block: .15rem .3rem; }
.time-machine__note { color: #756483; }
.time-machine .time-line {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(.35rem, 1vh, .8rem) 0;
  width: min(100%, 900px);
  margin-block: .25rem .45rem;
}
.time-machine .time-line__item,
.time-machine .time-line__item:nth-child(odd),
.time-machine .time-line__item:nth-child(even) {
  width: min(100%, 355px);
  align-self: center;
}
.time-machine .time-line__item:nth-child(odd) { justify-self: start; }
.time-machine .time-line__item:nth-child(even) { justify-self: end; }
.time-machine .time-line__trigger,
.time-machine .time-line__item:nth-child(even) .time-line__trigger {
  min-height: 76px;
  height: auto;
  padding: .68rem .82rem;
  border-color: rgb(184 158 208 / 45%);
  border-radius: 5px 18px 18px 5px;
  color: #f4edf8;
  background: linear-gradient(125deg, rgb(41 31 62 / 45%), rgb(70 51 91 / 31%));
  box-shadow: inset 0 0 0 1px rgb(255 248 232 / 5%), 0 7px 22px rgb(8 6 22 / 12%);
  backdrop-filter: blur(3px);
  text-align: left;
  transition: border-color .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease;
}
.time-machine .time-line__item:nth-child(even) .time-line__trigger { border-radius: 18px 5px 5px 18px; }
.time-machine .time-line__trigger::before,
.time-machine .time-line__item:nth-child(even) .time-line__trigger::before {
  width: 14px;
  height: 14px;
  border-color: #f2dda6;
  box-shadow: 0 0 0 5px rgb(185 151 207 / 15%), 0 0 18px rgb(231 198 116 / 56%);
}
.time-machine .time-line__item:nth-child(odd) .time-line__trigger::before { right: -1.3rem; }
.time-machine .time-line__item:nth-child(even) .time-line__trigger::before { left: -1.3rem; }
.time-machine .time-line__eyebrow { color: #d3b9e8; font-size: .62rem; }
.time-machine .time-line__item:nth-child(even) .time-line__eyebrow { color: #f0d79a; }
.time-machine .time-line__title { color: #fff7e9; font-size: clamp(.92rem, 1.3vw, 1.08rem); line-height: 1.3; }
.time-machine .time-line__action { color: #d7c4e7; font-size: .7rem; }
.time-machine .time-line__sigil { color: #f1d798; }
.time-machine .time-line__trigger:hover,
.time-machine .time-line__trigger:focus-visible {
  border-color: rgb(229 201 137 / 78%);
  background: linear-gradient(125deg, rgb(62 44 83 / 72%), rgb(91 66 111 / 55%));
  box-shadow: 0 0 0 3px rgb(185 151 207 / 12%), 0 10px 26px rgb(7 5 22 / 23%), 0 0 23px rgb(225 190 117 / 19%);
  transform: translateY(-2px);
}
.time-machine__paper > .chapter-navigation {
  justify-self: center;
  width: min(100%, 650px);
  margin: 0 auto;
}
.time-machine .chapter-navigation__button { width: 46px; min-height: 46px; padding: .4rem; }
@media (max-width: 760px) {
  .time-machine__paper { gap: clamp(.22rem, .7vh, .45rem); padding: .75rem clamp(.75rem, 3vw, 1.1rem); }
  .time-machine__paper > .eyebrow { margin-top: .15rem; }
  .time-machine__intro { font-size: clamp(.82rem, 2.8vw, .96rem); line-height: 1.38; }
  .time-machine__note { font-size: .68rem; }
  .time-machine .time-line {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: clamp(.25rem, .65vh, .45rem);
    width: min(100%, 540px);
    padding-left: 1.25rem;
  }
  .time-machine .time-line::before {
    inset: .25rem auto .25rem .42rem;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, rgb(174 140 201 / 78%) 10%, rgb(224 190 110 / 90%) 50%, rgb(174 140 201 / 78%) 90%, transparent);
  }
  .time-machine .time-line__item,
  .time-machine .time-line__item:nth-child(odd),
  .time-machine .time-line__item:nth-child(even) {
    display: flex;
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
    transform: none;
  }
  .time-machine .time-line__trigger,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger {
    min-height: 58px;
    padding: .38rem .68rem;
    border-radius: 4px 14px 14px 4px;
  }
  .time-machine .time-line__trigger::before,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger::before {
    top: 50%;
    left: -1.25rem;
    right: auto;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
  }
  .time-machine .time-line__title { font-size: clamp(.88rem, 3.3vw, 1rem); line-height: 1.25; }
  .time-machine .time-line__eyebrow { font-size: .62rem; }
  .time-machine .time-line__action { font-size: .66rem; }
  .time-machine .chapter-navigation__button { width: 44px; min-height: 44px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .time-machine__paper { gap: .2rem; padding-block: .35rem; }
  .time-machine__paper > .eyebrow { margin-top: 0; }
  .time-machine__paper > h2 { font-size: clamp(1.55rem, 3.3vw, 2.2rem); }
  .time-machine__intro { font-size: .78rem; line-height: 1.25; }
  .time-machine__note { font-size: .62rem; }
  .time-machine .time-line__trigger { min-height: 60px; padding-block: .38rem; }
  .time-machine .chapter-navigation__button { width: 46px; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine .time-line__trigger,
  .time-machine .time-line__item:nth-child(n) .time-line__trigger::before { animation: none; transition: none; }
}


.time-machine .time-line__trigger,
.time-machine .time-line__item:nth-child(even) .time-line__trigger {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: .18rem;
  align-content: center;
}
.time-machine .time-line__eyebrow { grid-column: 1; grid-row: 1; }
.time-machine .time-line__title { grid-column: 1; grid-row: 2; padding-right: 1.4rem; }
.time-machine .time-line__action { grid-column: 1; grid-row: 3; }
@media (max-width: 760px) {
  .time-machine .time-line__trigger,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger { row-gap: .12rem; }
}

/* Giratiempo astronómico: estaciones alrededor de un astrolabio original en CSS. */
.time-machine__paper {
  padding-top: clamp(1.15rem, 3vh, 2rem);
  border-color: rgb(193 165 220 / 48%);
  color: #f5edf7;
  background-color: rgb(22 20 43 / 72%);
  background-image:
    radial-gradient(ellipse at 50% 49%, rgb(132 94 168 / 28%), transparent 44%),
    radial-gradient(ellipse at 8% 5%, rgb(114 89 157 / 19%), transparent 38%),
    radial-gradient(ellipse at 96% 96%, rgb(111 70 133 / 24%), transparent 40%),
    linear-gradient(145deg, rgb(22 20 43 / 84%), rgb(44 30 61 / 79%) 55%, rgb(27 23 49 / 85%));
  box-shadow: 0 32px 90px rgb(4 4 20 / 61%), 0 0 0 6px rgb(160 127 191 / 11%), 0 0 48px rgb(172 131 207 / 23%), inset 0 0 50px rgb(10 9 26 / 22%);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.time-machine__paper::before {
  z-index: 0;
  inset: auto;
  top: 52%;
  left: 50%;
  width: min(36vw, 42vh, 390px);
  aspect-ratio: 1;
  border: 1px solid rgb(204 179 226 / 46%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(222 188 123 / 10%) 0 3%, transparent 4% 33%, rgb(199 163 222 / 16%) 33.5% 34%, transparent 34.5% 49%, rgb(223 192 132 / 44%) 49.3% 49.8%, transparent 50.2% 66%, rgb(198 165 222 / 38%) 66.2% 66.8%, transparent 67.2% 83%, rgb(222 192 137 / 30%) 83.3% 83.7%, transparent 84%);
  box-shadow: 0 0 48px rgb(176 133 213 / 19%), inset 0 0 34px rgb(221 190 134 / 9%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.time-machine__paper::after {
  z-index: 0;
  top: 52%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(36vw, 42vh, 390px);
  aspect-ratio: 1;
  border: 1px solid rgb(228 201 145 / 38%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #f2d99d 0 2px, transparent 3px),
    radial-gradient(circle, transparent 0 17%, rgb(222 191 135 / 27%) 17.3% 17.7%, transparent 18%),
    radial-gradient(circle, transparent 0 49%, rgb(239 213 158 / 37%) 49.3% 49.7%, transparent 50%),
    repeating-conic-gradient(from 0deg, rgb(223 194 139 / 45%) 0 .35deg, transparent .5deg 15deg);
  box-shadow: 0 0 28px rgb(214 181 123 / 15%), inset 0 0 24px rgb(176 138 208 / 13%);
  opacity: .69;
  transform: translate(-50%, -50%);
  animation: astrolabe-turn 96s linear infinite;
  pointer-events: none;
}
.time-machine__paper > .eyebrow,
.time-machine__paper > h2,
.time-machine__intro,
.time-machine__note,
.time-machine__paper > .time-line,
.time-machine__paper > .chapter-navigation { z-index: 1; }
.time-machine__paper > .eyebrow { color: #d5bee8; margin-top: .35rem; }
.time-machine__paper > h2 { color: #f6edf8; margin-block: .3rem .45rem; text-shadow: 0 0 23px rgb(190 153 222 / 23%); }
.time-machine__intro { color: #e5daee; max-width: 740px; margin-block: .25rem .55rem; }
.time-machine__note { color: #d3bfdc; }
.time-machine .time-line {
  display: block;
  position: relative;
  width: min(100%, 1000px);
  height: 100%;
  min-height: 0;
  margin: .15rem auto .25rem;
  padding: 0;
  list-style: none;
}
.time-machine .time-line::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 5 C72 5 91 18 86 34 C83 45 74 49 74 61 C74 80 62 94 50 94 C38 94 25 81 26 65 C27 51 17 46 14 35 C9 18 28 5 50 5Z' fill='none' stroke='%23d4b56f' stroke-width='0.36' stroke-linecap='round' stroke-dasharray='0.8 1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgb(224 190 110 / 58%));
  opacity: .74;
}
.time-machine .time-line__item,
.time-machine .time-line__item:nth-child(odd),
.time-machine .time-line__item:nth-child(even) {
  position: absolute;
  display: block;
  width: min(22%, 190px);
  min-height: 0;
  transform: none;
}
.time-machine .time-line__item:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.time-machine .time-line__item:nth-child(2) { top: 20%; right: 1.5%; }
.time-machine .time-line__item:nth-child(3) { right: 8%; bottom: 0; }
.time-machine .time-line__item:nth-child(4) { bottom: 0; left: 8%; }
.time-machine .time-line__item:nth-child(5) { top: 20%; left: 1.5%; }
.time-machine .time-line__trigger,
.time-machine .time-line__item:nth-child(even) .time-line__trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px auto auto auto;
  justify-items: center;
  align-content: center;
  align-items: center;
  row-gap: .28rem;
  width: 100%;
  min-height: 0;
  height: auto;
  padding: .4rem .45rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #f5edf7;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
  cursor: pointer;
  transition: transform .35s ease, filter .35s ease;
}
.time-machine .time-line__trigger::before,
.time-machine .time-line__item:nth-child(even) .time-line__trigger::before {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  grid-column: 1;
  grid-row: 1;
  width: 43px;
  height: 43px;
  border: 1px solid rgb(239 216 161 / 76%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgb(255 249 221 / 88%), rgb(208 175 115 / 71%) 32%, rgb(92 69 117 / 78%) 65%, rgb(43 34 65 / 80%));
  box-shadow: 0 0 0 4px rgb(185 151 207 / 12%), 0 0 19px rgb(228 193 118 / 34%), inset 0 0 12px rgb(255 237 190 / 24%);
  transform: none;
  transition: box-shadow .35s ease, background .35s ease;
  content: "";
}
.time-machine .time-line__sigil {
  position: absolute;
  top: .83rem;
  right: auto;
  left: 50%;
  z-index: 2;
  color: #fff0bf;
  font-size: 1.15rem;
  text-shadow: 0 0 12px rgb(249 219 144 / 78%);
  transform: translateX(-50%);
}
.time-machine .time-line__eyebrow { grid-column: 1; grid-row: 2; color: #d4bee7; font-size: .58rem; line-height: 1.25; letter-spacing: .07em; }
.time-machine .time-line__title { grid-column: 1; grid-row: 3; max-width: 22ch; padding: 0; color: #fff8e8; font-size: clamp(.9rem, 1.15vw, 1.04rem); line-height: 1.25; text-shadow: 0 1px 12px rgb(15 11 28 / 42%); }
.time-machine .time-line__action { grid-column: 1; grid-row: 4; color: #e9d8aa; font-size: .66rem; line-height: 1.2; opacity: .76; transition: opacity .25s ease, transform .25s ease; }
.time-machine .time-line__trigger:hover,
.time-machine .time-line__trigger:focus-visible { z-index: 3; filter: drop-shadow(0 0 14px rgb(208 173 232 / 37%)); transform: translateY(-2px) scale(1.035); }
.time-machine .time-line__trigger:hover::before,
.time-machine .time-line__trigger:focus-visible::before { box-shadow: 0 0 0 6px rgb(190 154 215 / 20%), 0 0 27px rgb(242 210 137 / 67%), inset 0 0 15px rgb(255 244 207 / 35%); }
.time-machine .time-line__trigger:hover .time-line__action,
.time-machine .time-line__trigger:focus-visible .time-line__action { opacity: 1; transform: translateY(-1px); }
.time-machine__paper > .chapter-navigation { justify-self: center; width: min(100%, 650px); margin: 0 auto; }

@keyframes astrolabe-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 760px) {
  .time-machine__paper { padding: .8rem clamp(.75rem, 3vw, 1.1rem); }
  .time-machine__paper::before,
  .time-machine__paper::after { top: 55%; width: min(66vw, 34vh, 270px); }
  .time-machine__paper::before { opacity: .34; }
  .time-machine__paper::after { opacity: .3; }
  .time-machine .time-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: clamp(.2rem, .55vh, .4rem);
    width: min(100%, 530px);
    height: 100%;
    padding: 0 0 0 1.1rem;
  }
  .time-machine .time-line::before {
    inset: .35rem auto .35rem .37rem;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, rgb(186 150 212 / 78%) 10%, rgb(225 192 120 / 87%) 50%, rgb(186 150 212 / 78%) 90%, transparent);
    filter: drop-shadow(0 0 4px rgb(219 181 119 / 48%));
  }
  .time-machine .time-line__item,
  .time-machine .time-line__item:nth-child(odd),
  .time-machine .time-line__item:nth-child(even) {
    position: relative;
    inset: auto;
    display: flex;
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
    transform: none;
  }
  .time-machine .time-line__trigger,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: start;
    align-items: center;
    column-gap: .55rem;
    row-gap: .08rem;
    min-height: 58px;
    padding: .28rem .45rem;
    text-align: left;
    transform: none;
    filter: none;
  }
  .time-machine .time-line__trigger::before,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger::before {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 32px;
    height: 32px;
  }
  .time-machine .time-line__sigil { top: 50%; left: 1.46rem; font-size: .92rem; transform: translate(-50%, -50%); }
  .time-machine .time-line__eyebrow { grid-column: 2; grid-row: 1; font-size: .61rem; }
  .time-machine .time-line__title { grid-column: 2; grid-row: 2; justify-self: start; max-width: 42ch; font-size: clamp(.9rem, 3.4vw, 1rem); line-height: 1.24; }
  .time-machine .time-line__action { grid-column: 2; grid-row: 3; font-size: .65rem; opacity: .9; }
  .time-machine .chapter-navigation__button { width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine__paper::after { animation: none; }
  .time-machine .time-line__item:nth-child(n) .time-line__trigger::before { animation: none; }
  .time-machine .time-line__trigger,
  .time-machine .time-line__action,
  .time-machine .time-line__trigger::before { transition: none; }
}

/* Oficina de cartas: estilos exclusivos del capítulo tercero. */
#letters { isolation: isolate; background: radial-gradient(ellipse at 50% 55%, rgb(100 67 133 / 17%), transparent 58%); }
#letters .future-chapter__page {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(.2rem, .65vh, .55rem);
  width: min(100%, 1120px);
  padding: clamp(.7rem, 2.3vh, 1.35rem) clamp(.8rem, 4vw, 3rem);
  border-color: rgb(190 158 219 / 52%);
  border-radius: 10px 10px 24px 7px;
  background:
    radial-gradient(ellipse at 50% 70%, rgb(142 105 173 / 19%), transparent 54%),
    radial-gradient(ellipse at 8% 8%, rgb(219 187 126 / 10%), transparent 38%),
    linear-gradient(145deg, rgb(20 21 47 / 86%), rgb(43 29 59 / 88%) 58%, rgb(30 25 53 / 90%));
  box-shadow: 0 26px 80px rgb(5 5 17 / 42%), 0 0 45px rgb(171 139 201 / 12%), inset 0 0 50px rgb(226 196 133 / 5%);
}
#letters .future-chapter__page::before { inset: 10px; border-color: rgb(216 184 117 / 26%); border-radius: 8px 8px 19px 6px; }
#letters .future-chapter__page::after { color: rgb(229 201 139 / 25%); }
#letters .future-chapter__page > .eyebrow { color: #d9c4eb; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
#letters .future-chapter__seal { width: clamp(30px, 4vh, 42px); font-size: 1.2rem; }
#letters .future-chapter__page h2 { font-size: clamp(1.65rem, 4.2vh, 2.65rem); line-height: 1.05; }
#letters .future-chapter__intro { max-width: 66ch; font-size: clamp(.82rem, 1.6vh, 1rem); line-height: 1.45; }
#letters .letters-office__note { margin: 0; color: #e5d4a8; font: italic clamp(.73rem, 1.35vh, .88rem)/1.25 var(--serif); }
#letters .letters-office__envelopes {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(.25rem, 1.1vw, .8rem);
  width: min(100%, 920px);
  min-height: 0;
  margin: 0 auto;
  padding: .15rem .4rem;
}
#letters .letters-office__envelopes::before {
  position: absolute; z-index: -1; inset: 8% 3%; border-radius: 50%;
  background: radial-gradient(ellipse, rgb(191 157 221 / 13%), transparent 68%);
  filter: blur(8px); content: ""; pointer-events: none;
}
#letters .letters-office__envelope {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(.12rem, .4vh, .3rem);
  width: min(100%, 230px);
  min-height: 0;
  height: 100%;
  padding: .25rem .35rem;
  border: 0;
  color: #f8f0e2;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: transform .32s ease, filter .32s ease;
}
#letters .letters-office__envelope:nth-child(3n + 1) { transform: rotate(-1.2deg); }
#letters .letters-office__envelope:nth-child(3n) { transform: rotate(1.1deg); }
#letters .letters-office__envelope:hover:not(:disabled),
#letters .letters-office__envelope:focus-visible { z-index: 2; filter: drop-shadow(0 0 15px rgb(220 184 117 / 28%)); transform: translateY(-4px) rotate(0) scale(1.025); }
#letters .letters-office__envelope:focus-visible { outline: 2px solid #e2c987; outline-offset: 2px; border-radius: 12px; }
#letters .letters-office__envelope:disabled { cursor: wait; }
#letters .letters-office__envelope-art {
  position: relative;
  display: block;
  width: clamp(88px, 13vw, 150px);
  height: clamp(56px, 8.3vw, 92px);
  overflow: hidden;
  border: 1px solid rgb(244 221 174 / 85%);
  border-radius: 4px 4px 9px 4px;
  background:
    linear-gradient(32deg, transparent 49.2%, rgb(132 96 133 / 31%) 49.7% 50.5%, transparent 51%),
    linear-gradient(148deg, transparent 49.2%, rgb(132 96 133 / 26%) 49.7% 50.5%, transparent 51%),
    radial-gradient(circle at 74% 22%, rgb(255 255 255 / 45%), transparent 25%),
    linear-gradient(145deg, #f6ead1, #e6d4e9 58%, #ddc6df);
  box-shadow: 0 11px 22px rgb(2 3 14 / 32%), inset 0 0 0 3px rgb(255 248 226 / 38%), inset 0 0 20px rgb(146 98 149 / 16%);
  transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
#letters .letters-office__insert {
  position: absolute;
  z-index: 0;
  top: 26%;
  left: 17%;
  width: 66%;
  height: 70%;
  border: 1px solid rgb(177 148 174 / 58%);
  border-radius: 2px;
  background: linear-gradient(145deg, #fff9e9, #efe4f1 68%, #e7d7e8);
  box-shadow: 0 2px 8px rgb(38 22 44 / 26%), inset 0 0 0 2px rgb(255 255 255 / 45%);
  opacity: 0;
  transform: translateY(24%) scale(.94);
  transition: transform .48s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  pointer-events: none;
}
#letters .letters-office__flap {
  position: absolute; z-index: 2; top: -1px; left: -1px; width: calc(100% + 2px); height: 61%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border: 1px solid rgb(141 107 148 / 45%);
  background: linear-gradient(145deg, #f8efd9, #d9c3df);
  transform-origin: 50% 0;
  transition: transform .42s ease;
}
#letters .letters-office__wax {
  position: absolute; z-index: 3; top: 37%; left: 50%; display: grid; width: clamp(20px, 3vh, 28px); aspect-ratio: 1; place-items: center;
  border: 1px solid #edcf88; border-radius: 50%; color: #f5dfaa;
  background: radial-gradient(circle at 34% 28%, #9f7ab0, #593958 72%);
  box-shadow: 0 2px 6px rgb(45 20 46 / 45%), 0 0 12px rgb(213 176 114 / 25%);
  font: .72rem/1 var(--serif); transform: translateX(-50%);
}
#letters .letters-office__label { max-width: 25ch; color: #fff7e8; font: 600 clamp(.78rem, 1.55vh, .95rem)/1.2 var(--serif); text-shadow: 0 1px 8px rgb(8 7 20 / 55%); text-wrap: balance; }
#letters .letters-office__hint { color: #d7c5e6; font: .66rem/1.15 var(--sans); letter-spacing: .03em; }
#letters .letters-office__envelope.is-opening { z-index: 3; }
#letters .letters-office__envelope.is-opening .letters-office__envelope-art { overflow: visible; }
#letters .letters-office__envelope.is-seal-awake .letters-office__envelope-art { box-shadow: 0 0 22px rgb(231 192 118 / 48%), 0 0 38px rgb(177 138 206 / 27%); }
#letters .letters-office__envelope.is-seal-awake .letters-office__wax { animation: letter-seal-awaken .43s ease-out both; }
#letters .letters-office__envelope.is-seal-breaking .letters-office__wax { animation: letter-seal-disintegrate .58s ease-in both; }
#letters .letters-office__envelope.is-envelope-opening .letters-office__flap { transform: perspective(500px) rotateX(180deg); }
#letters .letters-office__envelope.is-envelope-opening .letters-office__insert { opacity: 1; transform: translateY(-42%) scale(1); }
#letters .letters-office__envelope.is-envelope-opening .letters-office__envelope-art { transform: scale(1.045); box-shadow: 0 0 27px rgb(231 192 118 / 45%), 0 0 42px rgb(177 138 206 / 28%); }
#letters .letters-office__particle {
  position: absolute;
  z-index: 5;
  top: 37%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe8a8;
  box-shadow: 0 0 5px 2px rgb(243 205 122 / 72%), 0 0 12px rgb(187 145 224 / 55%);
  animation: letter-particle-flight .72s var(--particle-delay, 0ms) cubic-bezier(.15,.65,.3,1) both;
  pointer-events: none;
}
#letters .letters-office__particle:nth-child(3n + 1) { width: 5px; height: 5px; background: #fff0c4; }
#letters .letters-office__particle:nth-child(3n + 1)::after { position: absolute; top: -4px; left: -2px; color: #fff1c8; content: "✦"; font: 9px/1 var(--serif); text-shadow: 0 0 7px #e6bf75; }
#letters .future-chapter__page > .chapter-navigation { align-self: end; width: min(100%, 650px); margin: 0 auto; }

.letter-dialog {
  width: min(620px, calc(100vw - 1.5rem));
  max-width: none;
  max-height: min(82svh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgb(233 204 139 / 78%);
  border-radius: 9px 9px 18px 8px;
  color: #392b3e;
  background: transparent;
  box-shadow: 0 26px 90px rgb(4 4 16 / 68%), 0 0 38px rgb(194 155 219 / 27%);
}
.letter-dialog::backdrop { background: rgb(9 8 25 / 78%); backdrop-filter: blur(5px); }
.letter-dialog[open] { animation: letter-reveal .38s cubic-bezier(.2,.7,.2,1) both; }
.letter-dialog[open] .letter-dialog__paper { animation: letter-paper-glow .42s ease-out both; }
.letter-dialog__paper {
  position: relative;
  min-height: 320px;
  padding: clamp(2.2rem, 7vw, 3.7rem) clamp(1.3rem, 7vw, 3.8rem);
  border: 9px solid #e8dbea;
  outline: 1px solid rgb(146 109 158 / 34%);
  outline-offset: -15px;
  background:
    radial-gradient(circle at 14% 13%, rgb(255 255 255 / 65%) 0 1px, transparent 2px),
    radial-gradient(ellipse at 100% 0, rgb(192 163 210 / 28%), transparent 36%),
    radial-gradient(ellipse at 0 100%, rgb(224 199 153 / 25%), transparent 39%),
    repeating-linear-gradient(0deg, rgb(111 84 108 / 2%) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #fbf4e5, #f0e7ee 56%, #f8eedc);
  box-shadow: inset 0 0 50px rgb(154 112 134 / 11%);
  text-align: center;
}
.letter-dialog__close {
  position: absolute; top: .7rem; right: .8rem; display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid rgb(120 87 133 / 36%); border-radius: 50%; color: #563e63;
  background: rgb(255 251 239 / 76%); font: 1.65rem/1 var(--sans); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.letter-dialog__close:hover, .letter-dialog__close:focus-visible { color: #87632d; box-shadow: 0 0 18px rgb(191 152 209 / 34%); transform: rotate(5deg); }
.letter-dialog__eyebrow { margin: 0 2rem .7rem; color: #786187; font: 600 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.letter-dialog__ornament { display: inline-grid; width: 40px; aspect-ratio: 1; place-items: center; margin-bottom: .7rem; border: 1px solid #b7955d; border-radius: 50%; color: #977343; font: 1.25rem/1 var(--serif); }
.letter-dialog h3 { max-width: 22ch; margin: 0 auto 1.5rem; color: #403047; font: 600 clamp(1.35rem, 4vw, 2rem)/1.2 var(--serif); text-wrap: balance; animation: letter-message-arrive .3s .05s ease-out both; }
.letter-dialog__body { max-width: 52ch; margin: auto; color: #46394b; font: clamp(1rem, 2.2vw, 1.12rem)/1.8 var(--serif); animation: letter-message-arrive .32s .1s ease-out both; }
.letter-dialog__body p { margin: 0; }
.letter-dialog[open] .letter-dialog__glyph { animation: letter-glyph-write .2s ease-out var(--glyph-delay, 0ms) both; }
.letter-dialog__placeholder { max-width: 52ch; margin: 2rem auto 0; padding-top: .8rem; border-top: 1px solid rgb(130 95 143 / 24%); color: #75667a; font: .7rem/1.5 var(--sans); }
.letter-dialog__placeholder code { color: #644a70; }
@keyframes letter-reveal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes letter-seal-awaken {
  0% { filter: brightness(1); box-shadow: 0 2px 6px rgb(45 20 46 / 45%), 0 0 12px rgb(213 176 114 / 25%); transform: translateX(-50%) scale(1); }
  70% { filter: brightness(1.75); box-shadow: 0 0 10px 4px rgb(239 207 132 / 74%), 0 0 21px 8px rgb(171 131 206 / 55%); transform: translateX(-50%) scale(1.16); }
  100% { filter: brightness(1.4); box-shadow: 0 0 8px 3px rgb(239 207 132 / 58%), 0 0 17px 6px rgb(171 131 206 / 38%); transform: translateX(-50%) scale(1.08); }
}
@keyframes letter-seal-disintegrate {
  0% { filter: brightness(1.5); opacity: 1; transform: translateX(-50%) scale(1.08) rotate(0); }
  34% { filter: brightness(2) blur(.4px); opacity: .88; transform: translateX(-50%) scale(.88) rotate(-8deg); }
  100% { filter: brightness(1.8) blur(3px); opacity: 0; transform: translateX(-50%) scale(.12) rotate(26deg); }
}
@keyframes letter-particle-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(0); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(18deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(.2) rotate(var(--particle-turn)); }
}
@keyframes letter-paper-glow { 0% { box-shadow: inset 0 0 50px rgb(154 112 134 / 11%), 0 0 0 rgb(222 189 121 / 0%); } 35% { box-shadow: inset 0 0 50px rgb(154 112 134 / 11%), 0 0 28px rgb(222 189 121 / 28%); } 100% { box-shadow: inset 0 0 50px rgb(154 112 134 / 11%), 0 0 9px rgb(177 142 205 / 13%); } }
@keyframes letter-message-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes letter-glyph-write {
  0% { opacity: 0; filter: blur(1px); text-shadow: 0 0 8px rgb(202 161 77 / 55%); }
  55% { opacity: 1; filter: blur(0); text-shadow: 0 0 5px rgb(202 161 77 / 30%); }
  100% { opacity: 1; text-shadow: none; }
}

@media (max-width: 760px) {
  #letters.future-chapter { padding: .4rem; }
  #letters .future-chapter__page { gap: clamp(.2rem, .7vh, .45rem); padding: .65rem .65rem .55rem; }
  #letters .future-chapter__page::before { inset: 7px; }
  #letters .future-chapter__page h2 { font-size: clamp(1.45rem, 5.4vw, 2rem); }
  #letters .future-chapter__intro { max-width: 52ch; font-size: clamp(.78rem, 2.3vw, .92rem); line-height: 1.35; }
  #letters .letters-office__envelopes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .1rem; width: min(100%, 570px); padding: 0 .1rem; }
  #letters .letters-office__envelope { width: 100%; padding: .1rem; }
  #letters .letters-office__envelope-art { width: clamp(78px, 22vw, 112px); height: clamp(50px, 14vw, 70px); }
  #letters .letters-office__label { max-width: 22ch; font-size: clamp(.72rem, 3.15vw, .88rem); }
  #letters .letters-office__hint { font-size: .61rem; }
  #letters .future-chapter__page > .chapter-navigation { margin-top: .1rem; }
  .letter-dialog { max-height: min(86svh, 760px); }
  .letter-dialog__paper { min-height: 260px; padding: 3.3rem 1.4rem 1.7rem; }
}
@media (max-height: 650px) and (min-width: 761px) {
  #letters .future-chapter__page { gap: .12rem; padding-block: .35rem; }
  #letters .future-chapter__page h2 { font-size: clamp(1.45rem, 4.6vh, 2rem); }
  #letters .future-chapter__intro { font-size: .8rem; line-height: 1.25; }
  #letters .letters-office__note { font-size: .72rem; }
  #letters .letters-office__envelope-art { width: clamp(75px, 11vw, 120px); height: clamp(48px, 7vw, 74px); }
  #letters .letters-office__envelopes { gap: .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  #letters .letters-office__envelope, #letters .letters-office__flap, #letters .letters-office__envelope-art, #letters .letters-office__insert, .letter-dialog__close { transition: none; }
  #letters .letters-office__envelope.is-seal-awake .letters-office__wax,
  #letters .letters-office__envelope.is-seal-breaking .letters-office__wax,
  .letter-dialog[open], .letter-dialog[open] .letter-dialog__paper,
  .letter-dialog[open] h3, .letter-dialog[open] .letter-dialog__body,
  .letter-dialog__glyph { animation: none; }
}

/* Refinamiento de apertura, ritual y lectura de la Oficina de Cartas Mágicas. */
#letters .letters-office__envelope { transition-duration: .62s; }
#letters .letters-office__envelope:hover:not(:disabled),
#letters .letters-office__envelope:focus-visible { filter: drop-shadow(0 0 19px rgb(226 192 125 / 38%)); }
#letters .letters-office__label { max-width: 27ch; overflow-wrap: anywhere; }
.letter-dialog { overflow: hidden; }
.letter-dialog__paper { position: relative; isolation: isolate; max-height: min(82svh, 760px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgb(127 96 146 / 52%) transparent; }
.letter-dialog__paper::before,
.letter-dialog__paper::after { position: absolute; z-index: 0; inset: 0; border-radius: inherit; content: ""; pointer-events: none; }
.letter-dialog__paper::before {
  opacity: .32;
  background-image: radial-gradient(circle, rgb(194 152 83 / 70%) 0 1px, transparent 1.8px), radial-gradient(circle, rgb(143 107 174 / 63%) 0 1px, transparent 1.9px);
  background-position: 9% 13%, 78% 28%; background-size: 118px 106px, 153px 139px;
  animation: letter-paper-stars 18s ease-in-out infinite alternate;
}
.letter-dialog__paper::after { inset: 9px; border: 1px solid rgb(174 139 193 / 20%); box-shadow: 0 0 22px rgb(192 157 217 / 9%); animation: letter-edge-glimmer 7s ease-in-out infinite; }
.letter-dialog__paper > :not(.letter-dialog__close) { position: relative; z-index: 1; }
.letter-dialog__close { position: sticky; z-index: 3; top: .5rem; float: right; margin: .45rem .35rem -42px 0; }
.letter-dialog[open] { animation: letter-reveal .82s cubic-bezier(.18,.72,.2,1) both; }
.letter-dialog[open] .letter-dialog__paper { animation: letter-paper-glow .9s ease-out both, letter-paper-breathe 7s 1s ease-in-out infinite; }
.letter-dialog[open]::backdrop { animation: letter-backdrop-in .72s ease-out both; }
.letter-dialog.is-opening .letter-dialog__ornament { animation: letter-ornament-arrive .72s .08s ease-out both; }
.letter-dialog.is-opening h3 { animation: letter-message-arrive .62s .12s ease-out both; }
.letter-dialog.is-opening .letter-dialog__body,
.letter-dialog.is-opening .letter-magic__invitation { animation: letter-message-arrive .68s .34s ease-out both; }
.letter-dialog.is-closing { animation: letter-dialog-close .56s cubic-bezier(.45,0,.8,.35) both; }
.letter-dialog.is-closing .letter-dialog__paper { animation: letter-paper-close .56s ease-in both; }
.letter-dialog.is-closing::backdrop { animation: letter-backdrop-out .56s ease-in both; }
.letter-dialog.is-open:not(.is-closing) .letter-dialog__paper::before { opacity: .58; }
.letter-dialog.is-open:not(.is-closing) .letter-dialog__paper::after { animation: letter-edge-glimmer 7s ease-in-out infinite; }
.letter-dialog.is-closing .letter-dialog__paper::before,
.letter-dialog.is-closing .letter-dialog__paper::after { animation: letter-particles-gather .56s ease-in both; }
.letter-dialog__body { text-align: left; }
.letter-dialog__body p { margin: 0 0 .88em; }
.letter-dialog__glyph { display: inline; }
.letter-dialog__placeholder { display: none; }
.letter-magic__invitation { max-width: 40ch; margin: .5rem auto 0; color: #514455; font: 1rem/1.7 var(--sans); }
.letter-magic__invitation p { margin: 0 0 .8rem; }
.letter-magic__button,
.letter-magic__skip { min-height: 46px; padding: .65rem 1.15rem; border: 1px solid #ad8b54; border-radius: 999px; color: #493750; background: linear-gradient(135deg, #fff5dd, #eadcf0); box-shadow: 0 5px 18px rgb(86 63 99 / 14%), inset 0 0 12px rgb(225 194 130 / 15%); font: 600 .92rem/1.25 var(--sans); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.letter-magic__button:hover, .letter-magic__button:focus-visible,
.letter-magic__skip:hover, .letter-magic__skip:focus-visible { transform: translateY(-2px); box-shadow: 0 0 20px rgb(199 159 93 / 30%), 0 6px 20px rgb(97 69 113 / 18%); }
.letter-magic__skip { position: relative; z-index: 2; margin: .8rem auto; }
.letter-magic__ritual { position: relative; display: grid; width: min(100%, 310px); aspect-ratio: 1; place-items: center; margin: .3rem auto; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgb(99 70 133 / 27%), rgb(24 25 51 / 0%) 69%); }
.letter-magic__ritual[hidden], .letter-magic__invitation[hidden], .letter-magic__skip[hidden], .letter-magic__finale[hidden], .letter-magic__wishes[hidden] { display: none; }
.letter-magic__circle, .letter-magic__orbit { position: absolute; width: 68%; aspect-ratio: 1; border: 1px solid rgb(183 145 221 / 0%); border-radius: 50%; opacity: 0; transform: scale(.48) rotate(-24deg); }
.letter-magic__circle { border-color: rgb(218 187 131 / 0%); background: repeating-conic-gradient(from 8deg, transparent 0 14deg, rgb(218 187 131 / 54%) 14.3deg 14.7deg, transparent 15deg 30deg); box-shadow: 0 0 20px rgb(218 187 131 / 25%), inset 0 0 24px rgb(162 131 204 / 15%); }
.letter-magic__circle::before, .letter-magic__circle::after { position: absolute; inset: 14%; border: 1px dashed rgb(164 130 194 / 72%); border-radius: 50%; content: ""; }
.letter-magic__circle::after { inset: 28%; border-style: solid; border-color: rgb(216 184 117 / 70%); transform: rotate(45deg); }
.letter-magic__orbit { width: 82%; border-color: rgb(201 171 222 / 62%); border-style: dashed; box-shadow: 0 0 17px rgb(191 149 222 / 24%), inset 0 0 18px rgb(202 167 225 / 12%); }
.letter-magic__aurora { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(ellipse, rgb(129 109 197 / 0%), transparent 65%); filter: blur(17px); }
.letter-magic__ritual-stars { position: absolute; color: #e5cc8a; font: clamp(1rem, 4vw, 1.55rem)/1 var(--serif); letter-spacing: .18em; opacity: 0; transform: scale(.7); text-shadow: 0 0 10px #dcb66d; }
.letter-magic__ritual.is-active { background: radial-gradient(circle, rgb(50 39 79 / 48%), rgb(25 23 50 / 10%) 70%); }
.letter-dialog.is-special-ritual .letter-dialog__paper { filter: brightness(.86); transition: filter .48s ease; }
.letter-magic__ritual.is-drawing .letter-magic__circle { animation: letter-circle-draw .95s cubic-bezier(.2,.7,.25,1) both; }
.letter-magic__ritual.is-orbiting .letter-magic__orbit { animation: letter-orbit-appear 1.1s ease-out both, letter-orbit-turn 8s linear infinite; }
.letter-magic__ritual.is-orbiting .letter-magic__aurora { animation: letter-aurora-bloom 2.8s ease-in-out infinite alternate; }
.letter-magic__ritual.is-stars-lit .letter-magic__ritual-stars { animation: letter-stars-appear .72s ease-out both, letter-stars-twinkle 2.2s .72s ease-in-out infinite; }
.letter-magic__ritual.is-release { animation: letter-ritual-release .55s ease-out both; }
.letter-magic__finale { max-width: 48ch; margin: 1.1rem auto .6rem; padding: .75rem 1rem; border-top: 1px solid rgb(177 143 92 / 35%); border-bottom: 1px solid rgb(177 143 92 / 35%); color: #70552f; font: italic 1rem/1.55 var(--serif); text-align: center; text-shadow: 0 0 14px rgb(207 172 98 / 22%); animation: letter-message-arrive .6s ease-out both; }
.letter-magic__wishes { max-width: 45ch; margin: 1rem auto 0; padding: .8rem 1rem; border-radius: 15px; background: linear-gradient(135deg, rgb(234 223 242 / 55%), rgb(255 246 223 / 56%)); }
.letter-magic__wish-prompt { margin: 0 0 .65rem; color: #725c7e; font: italic .9rem/1.4 var(--serif); }
.letter-magic__wish-buttons { display: flex; justify-content: center; gap: clamp(.45rem, 3vw, 1rem); }
.letter-magic__wish-star { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(179 143 78 / 48%); border-radius: 50%; color: #896a39; background: rgb(255 250 235 / 74%); font: 1.25rem/1 var(--serif); cursor: pointer; transition: color .24s ease, box-shadow .24s ease, transform .24s ease; }
.letter-magic__wish-star:hover, .letter-magic__wish-star:focus-visible, .letter-magic__wish-star.is-lit { color: #fff0bc; background: #70527f; box-shadow: 0 0 18px rgb(218 182 112 / 55%); transform: translateY(-3px) scale(1.04); }
.letter-magic__wish-text { min-height: 1.6em; margin: .7rem 0 0; color: #55425f; font: italic .95rem/1.5 var(--serif); }
.letter-dialog :is(button, .letter-magic__wish-star):focus-visible { outline: 2px solid #9270ae; outline-offset: 3px; }
@keyframes letter-dialog-close { to { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(3px); } }
@keyframes letter-paper-close { to { opacity: .35; transform: scale(.97); box-shadow: inset 0 0 45px rgb(130 99 158 / 22%), 0 0 0 rgb(195 155 220 / 0%); } }
@keyframes letter-backdrop-in { from { background: rgb(9 8 25 / 0%); backdrop-filter: blur(0); } to { background: rgb(9 8 25 / 78%); backdrop-filter: blur(5px); } }
@keyframes letter-backdrop-out { to { background: rgb(9 8 25 / 0%); backdrop-filter: blur(0); } }
@keyframes letter-paper-stars { from { background-position: 9% 13%, 78% 28%; opacity: .2; } to { background-position: 17% 23%, 70% 36%; opacity: .5; } }
@keyframes letter-edge-glimmer { 0%, 100% { box-shadow: 0 0 13px rgb(192 157 217 / 8%); } 50% { box-shadow: 0 0 26px rgb(213 184 130 / 19%); } }
@keyframes letter-paper-breathe { 0%, 100% { box-shadow: inset 0 0 50px rgb(154 112 134 / 11%), 0 0 9px rgb(177 142 205 / 13%); } 50% { box-shadow: inset 0 0 55px rgb(154 112 134 / 13%), 0 0 18px rgb(196 162 224 / 20%); } }
@keyframes letter-particles-gather { to { opacity: 0; background-position: 50% 50%, 50% 50%; } }
@keyframes letter-circle-draw { 0% { opacity: 0; transform: scale(.42) rotate(-24deg); filter: brightness(.8); } 75% { opacity: 1; transform: scale(1.03) rotate(4deg); filter: brightness(1.35); } 100% { opacity: .86; transform: scale(1) rotate(0); filter: brightness(1); } }
@keyframes letter-orbit-appear { from { opacity: 0; transform: scale(.62); } to { opacity: .9; transform: scale(1); } }
@keyframes letter-orbit-turn { to { rotate: 360deg; } }
@keyframes letter-aurora-bloom { from { background: radial-gradient(ellipse, rgb(117 102 190 / 24%), transparent 68%); transform: scale(.78); } to { background: radial-gradient(ellipse, rgb(91 154 178 / 36%), transparent 70%); transform: scale(1.12); } }
@keyframes letter-stars-appear { from { opacity: 0; transform: scale(.65); filter: blur(3px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes letter-stars-twinkle { 50% { filter: brightness(1.32); text-shadow: 0 0 18px #e8c373; } }
@keyframes letter-ritual-release { 50% { filter: brightness(1.3); box-shadow: 0 0 45px rgb(213 179 118 / 35%); } }
@keyframes letter-ornament-arrive { from { opacity: 0; transform: scale(.7) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (max-width: 760px) {
  .letter-dialog { width: min(calc(100vw - 1rem), 620px); max-height: 88svh; }
  .letter-dialog__paper { max-height: 88svh; padding: 3.1rem 1.1rem 1.2rem; border-width: 7px; }
  .letter-dialog__body { font-size: 1rem; line-height: 1.65; }
  .letter-magic__ritual { width: min(74vw, 280px); }
  .letter-magic__wish-buttons { gap: .45rem; }
  .letter-magic__wish-star { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-dialog[open], .letter-dialog[open] .letter-dialog__paper, .letter-dialog[open]::backdrop,
  .letter-dialog.is-opening h3, .letter-dialog.is-opening .letter-dialog__ornament,
  .letter-dialog.is-opening .letter-dialog__body, .letter-dialog.is-opening .letter-magic__invitation,
  .letter-dialog.is-closing, .letter-dialog.is-closing .letter-dialog__paper,
  .letter-dialog.is-closing::backdrop, .letter-dialog__paper::before, .letter-dialog__paper::after,
  .letter-magic__ritual *, .letter-magic__finale { animation: none !important; }
  .letter-dialog__glyph { animation: none !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; }
  .letter-dialog__paper::before { opacity: .2; }
  .letter-magic__wish-star, .letter-magic__button, .letter-magic__skip { transition: none; }
}

/* Sala musical encantada: presentación y reproductor exclusivos del capítulo 4. */
#soundtrack { isolation: isolate; background: radial-gradient(ellipse at 48% 55%, rgb(111 78 151 / 18%), transparent 59%); }
#soundtrack .future-chapter__page {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(.3rem, 1vh, .8rem);
  width: min(100%, 1100px);
  padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 5vw, 3.6rem);
  border-color: rgb(194 165 221 / 55%);
  border-radius: 10px 10px 24px 7px;
  background:
    radial-gradient(ellipse at 50% 62%, rgb(156 114 186 / 17%), transparent 55%),
    radial-gradient(ellipse at 7% 4%, rgb(229 194 128 / 9%), transparent 36%),
    linear-gradient(145deg, rgb(18 20 46 / 82%), rgb(45 29 61 / 86%) 56%, rgb(24 25 53 / 85%));
  box-shadow: 0 25px 82px rgb(3 4 16 / 44%), 0 0 42px rgb(177 142 205 / 15%), inset 0 0 50px rgb(231 199 137 / 5%);
}
#soundtrack .future-chapter__page::before { inset: 10px; border-color: rgb(215 185 126 / 25%); border-radius: 8px 8px 19px 6px; }
#soundtrack .future-chapter__page::after { color: rgb(224 194 131 / 20%); }
#soundtrack .future-chapter__page > .eyebrow { margin: 0; color: #d9c7ed; font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; }
#soundtrack .future-chapter__seal { width: clamp(34px, 5vh, 48px); font-size: 1.35rem; color: #f0d79c; }
#soundtrack .future-chapter__page h2 { max-width: 22ch; font-size: clamp(1.8rem, 5vh, 3.2rem); line-height: 1.04; }
#soundtrack .future-chapter__intro { max-width: 68ch; margin: 0; color: rgb(246 239 230 / 91%); font-size: clamp(.9rem, 1.7vh, 1.08rem); line-height: 1.55; }
#soundtrack .sound-room {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 0;
  align-items: center;
  justify-items: center;
  width: min(100%, 960px);
  margin: 0 auto;
  padding: clamp(.3rem, 1.5vh, 1.2rem);
  border: 1px solid rgb(191 161 218 / 25%);
  border-radius: 42% 42% 15px 15px / 10% 10% 15px 15px;
  background: radial-gradient(ellipse at 50% 50%, rgb(134 103 166 / 15%), rgb(34 29 59 / 18%) 52%, transparent 76%);
  box-shadow: inset 0 0 50px rgb(203 176 224 / 6%), 0 0 33px rgb(166 128 196 / 8%);
}
#soundtrack .sound-room__quiet {
  max-width: 55ch;
  margin: 0;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border: 1px solid rgb(201 172 221 / 35%);
  border-radius: 48% 52% 12px 12px / 16% 16% 12px 12px;
  color: #f2e8f5;
  background: linear-gradient(145deg, rgb(57 43 79 / 62%), rgb(37 34 65 / 51%));
  box-shadow: 0 12px 35px rgb(5 4 19 / 18%), inset 0 0 22px rgb(223 194 131 / 5%);
  font: italic clamp(.95rem, 2vw, 1.13rem)/1.6 var(--serif);
  text-align: center;
}
#soundtrack .sound-room__quiet span { display: inline-block; margin-top: .45rem; color: #cfc1df; font: .76rem/1.5 var(--sans); }
#soundtrack .sound-room__quiet code { color: #f0d99e; font-size: .72rem; }
#soundtrack .sound-room__objects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 190px));
  align-content: center;
  justify-content: center;
  justify-items: center;
  column-gap: clamp(.7rem, 2vw, 1.4rem);
  row-gap: .22rem;
  width: 100%;
  max-height: 100%;
}
#soundtrack .sound-room__object {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .13rem;
  width: min(100%, 190px);
  min-height: clamp(132px, 19vh, 180px);
  padding: .25rem .45rem;
  border: 0;
  color: #f8f0e6;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: transform .35s ease, filter .35s ease;
}
#soundtrack .sound-room__object:nth-child(odd) { transform: translateY(-4px) rotate(-1deg); }
#soundtrack .sound-room__object:nth-child(even) { transform: translateY(4px) rotate(1deg); }
#soundtrack .sound-room__object::after {
  position: absolute; z-index: -1; inset: 7% 5%; border-radius: 50%;
  background: radial-gradient(ellipse, rgb(195 160 224 / 17%), transparent 69%);
  opacity: .45; content: ""; transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
#soundtrack .sound-room__object:hover, #soundtrack .sound-room__object:focus-visible { filter: drop-shadow(0 0 15px rgb(219 185 126 / 38%)); transform: translateY(-5px) rotate(0) scale(1.035); }
#soundtrack .sound-room__object:hover::after, #soundtrack .sound-room__object:focus-visible::after { opacity: 1; transform: scale(1.12); }
#soundtrack .sound-room__object:focus-visible { outline: 2px solid #e1c77f; outline-offset: 1px; border-radius: 24px; }
#soundtrack .sound-room__artifact {
  position: relative;
  display: grid;
  width: clamp(64px, 9vh, 84px);
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: .38rem;
  border: 1px solid rgb(231 204 148 / 68%);
  border-radius: 44% 56% 51% 49% / 53% 45% 55% 47%;
  color: #f2dba0;
  background: radial-gradient(circle at 34% 27%, rgb(169 140 198 / 57%), rgb(70 51 91 / 85%) 60%, rgb(31 29 56 / 94%));
  box-shadow: 0 14px 24px rgb(5 4 18 / 34%), inset 0 0 19px rgb(232 199 128 / 10%), 0 0 22px rgb(194 157 221 / 14%);
  transition: border-radius .45s ease, box-shadow .35s ease, transform .35s ease;
}
#soundtrack .sound-room__artifact::before { position: absolute; inset: 7px; border: 1px solid rgb(237 214 165 / 27%); border-radius: inherit; content: ""; }
#soundtrack .sound-room__sigil { position: relative; font: clamp(1.7rem, 4vh, 2.5rem)/1 var(--serif); text-shadow: 0 0 13px rgb(249 225 164 / 63%); }
#soundtrack .sound-room__object[data-object="music-box"] .sound-room__artifact { border-radius: 20px 20px 31px 31px; background: linear-gradient(145deg, #725b82, #352941 58%, #25223d); }
#soundtrack .sound-room__object[data-object="music-box"] .sound-room__artifact::after { position: absolute; top: 12%; left: 24%; width: 52%; height: 1px; background: rgb(239 212 153 / 67%); box-shadow: 0 5px rgb(239 212 153 / 28%); content: ""; }
#soundtrack .sound-room__object[data-object="crystal"] .sound-room__artifact { border-radius: 47% 53% 58% 42% / 19% 24% 76% 81%; transform: rotate(45deg) scale(.82); background: linear-gradient(135deg, rgb(235 223 255 / 58%), rgb(135 106 176 / 48%) 45%, rgb(50 42 81 / 89%)); }
#soundtrack .sound-room__object[data-object="crystal"] .sound-room__sigil { transform: rotate(-45deg); }
#soundtrack .sound-room__object[data-object="vial"] .sound-room__artifact { width: clamp(66px, 8.5vh, 92px); border-radius: 25px 25px 36px 36px; background: linear-gradient(160deg, rgb(211 184 239 / 55%), rgb(91 63 129 / 69%) 53%, rgb(43 37 74 / 88%)); }
#soundtrack .sound-room__object[data-object="vial"] .sound-room__artifact::after { position: absolute; top: -5px; width: 35%; height: 12px; border: 1px solid #d5b66f; border-radius: 4px 4px 1px 1px; background: #6a4c76; content: ""; }
#soundtrack .sound-room__object[data-object="envelope"] .sound-room__artifact { border-radius: 9px 9px 15px 9px; background: linear-gradient(145deg, #eee0c8, #937aa5 48%, #4b3b60); }
#soundtrack .sound-room__object[data-object="chime"] .sound-room__artifact { border-radius: 50%; background: radial-gradient(circle at 50% 20%, #a88bb9, #514267 65%, #30283f); }
#soundtrack .sound-room__name { color: #ead7a8; font: 600 .76rem/1.3 var(--sans); letter-spacing: .06em; }
#soundtrack .sound-room__title { max-width: 24ch; color: #fff8e9; font: 600 .94rem/1.2 var(--serif); text-wrap: balance; }
#soundtrack .sound-room__cue { margin-top: .12rem; color: #cbb9df; font: .7rem/1.2 var(--sans); }
.voice-dialog__preview { max-width: 42ch; margin: .25rem auto .65rem; padding: .45rem .75rem; border: 1px solid rgb(222 194 142 / 34%); border-radius: 999px; color: #ead9f4; background: rgb(113 83 132 / 22%); font: .72rem/1.45 var(--sans); }
.voice-demo-player { display: grid; grid-template-columns: 36px minmax(80px, 220px) auto; align-items: center; gap: .65rem; width: min(330px, 100%); padding: .5rem .65rem; border: 1px solid rgb(220 194 145 / 40%); border-radius: 999px; color: #ebdcb7; background: rgb(24 23 47 / 68%); opacity: .8; }
.voice-demo-player__play { display: grid; width: 34px; aspect-ratio: 1; place-items: center; border: 1px solid rgb(224 198 144 / 50%); border-radius: 50%; color: #ead6a0; font-size: .75rem; }
.voice-demo-player__track { height: 3px; overflow: hidden; border-radius: 9px; background: rgb(208 189 225 / 28%); }
.voice-demo-player__track i { display: block; width: 23%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8a1d7, #e0c27b); }
.voice-demo-player__time { color: #d1c3dc; font: .68rem/1 var(--sans); }
.voice-dialog__navigation { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; color: #e9d7a9; font: .74rem/1.3 var(--sans); }
.voice-dialog__navigation button { min-height: 40px; padding: .35rem .65rem; border: 1px solid rgb(220 193 140 / 36%); border-radius: 999px; color: #e7d9f0; background: rgb(70 53 89 / 50%); font: inherit; cursor: pointer; }
.voice-dialog__navigation button:hover:not(:disabled), .voice-dialog__navigation button:focus-visible { border-color: rgb(234 207 145 / 75%); box-shadow: 0 0 13px rgb(198 164 224 / 27%); }
.voice-dialog__navigation button:disabled { opacity: .45; cursor: not-allowed; }

.voice-dialog {
  width: min(610px, calc(100vw - 1.25rem)); max-width: none; max-height: min(88svh, 760px); margin: auto; padding: 0; overflow: auto;
  border: 1px solid rgb(221 190 130 / 76%); border-radius: 12px 12px 25px 8px; color: #f5ecdf; background: transparent;
  box-shadow: 0 28px 90px rgb(3 4 16 / 68%), 0 0 40px rgb(187 150 214 / 25%);
}
.voice-dialog::backdrop { background: rgb(8 8 24 / 80%); backdrop-filter: blur(6px); }
.voice-dialog [hidden], #soundtrack [hidden] { display: none !important; }
.voice-dialog[open] { animation: voice-room-arrive .38s cubic-bezier(.2,.7,.2,1) both; }
.voice-dialog__room {
  position: relative; display: grid; justify-items: center; align-content: center; min-height: 380px;
  padding: clamp(2.4rem, 7vw, 3.5rem) clamp(1.3rem, 6vw, 3rem) 2rem;
  border: 9px solid rgb(209 191 221 / 91%); outline: 1px solid rgb(224 192 126 / 68%); outline-offset: -15px;
  background: radial-gradient(ellipse at 50% 20%, rgb(179 144 205 / 20%), transparent 48%), linear-gradient(145deg, rgb(31 29 57 / 97%), rgb(57 37 69 / 97%) 55%, rgb(32 31 58 / 98%));
  box-shadow: inset 0 0 50px rgb(227 196 131 / 7%); text-align: center;
}
.voice-dialog__close { position: absolute; top: .65rem; right: .7rem; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(226 200 150 / 55%); border-radius: 50%; color: #f4e2b8; background: rgb(74 57 89 / 83%); font: 1.6rem/1 var(--sans); cursor: pointer; }
.voice-dialog__close:hover, .voice-dialog__close:focus-visible { box-shadow: 0 0 16px rgb(231 197 136 / 38%); }
.voice-dialog__eyebrow { margin: 0 2rem .65rem; color: #d8c5e7; font: 600 .69rem/1.35 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.voice-dialog__photo { width: clamp(70px, 16vw, 112px); aspect-ratio: 1; margin: 0 auto .5rem; border: 2px solid rgb(225 197 136 / 73%); border-radius: 50%; object-fit: cover; box-shadow: 0 0 24px rgb(194 158 218 / 28%); }
.voice-dialog__sigil { display: grid; width: 48px; aspect-ratio: 1; place-items: center; margin: 0 auto .55rem; border: 1px solid rgb(228 199 135 / 68%); border-radius: 50%; color: #f1d99f; background: rgb(113 83 132 / 65%); font: 1.35rem/1 var(--serif); }
.voice-dialog__person { margin: 0 0 .35rem; color: #e6d3a4; font: 600 .78rem/1.3 var(--sans); letter-spacing: .06em; }
.voice-dialog h3 { max-width: 24ch; margin: 0 auto .45rem; color: #fff4e2; font: 600 clamp(1.4rem, 4vw, 2rem)/1.2 var(--serif); text-wrap: balance; }
.voice-dialog__description { max-width: 48ch; margin: 0 auto .9rem; color: #e0d4e7; font: .9rem/1.55 var(--sans); }
.voice-dialog__wave { display: flex; align-items: center; justify-content: center; gap: 4px; width: min(250px, 80%); height: 42px; margin: .2rem auto .65rem; color: #dfc17c; }
.voice-dialog__wave i { display: block; width: 3px; height: 9px; border-radius: 99px; background: currentColor; opacity: .64; box-shadow: 0 0 7px rgb(222 190 123 / 41%); }
.voice-dialog__wave i:nth-child(3n) { height: 17px; }
.voice-dialog__wave i:nth-child(4n) { height: 24px; }
.voice-dialog__room.is-playing .voice-dialog__wave i { animation: voice-wave 850ms ease-in-out infinite alternate; }
.voice-dialog__room.is-playing .voice-dialog__wave i:nth-child(2n) { animation-delay: -320ms; }
.voice-dialog__room.is-playing .voice-dialog__wave i:nth-child(3n) { animation-delay: -540ms; }
.voice-player { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: .8rem; width: min(390px, 100%); }
.voice-player__toggle { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgb(228 199 135 / 75%); border-radius: 50%; color: #ffedc3; background: radial-gradient(circle at 34% 28%, #79618d, #352b4c); box-shadow: 0 0 18px rgb(196 160 221 / 22%); font: 1rem/1 var(--sans); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.voice-player__toggle:hover, .voice-player__toggle:focus-visible { box-shadow: 0 0 22px rgb(225 192 128 / 44%); transform: scale(1.05); }
.voice-player__timeline { min-width: 0; }
.voice-player__timeline .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.voice-player__timeline input[type="range"] { display: block; width: 100%; margin: .25rem 0; accent-color: #d8b875; cursor: pointer; }
.voice-player__timeline input:disabled { cursor: not-allowed; opacity: .5; }
.voice-player__times { display: flex; justify-content: space-between; color: #d2c5dc; font: .68rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.voice-dialog__status { min-height: 1.3em; margin: .9rem 0 0; color: #d6c9e0; font: .75rem/1.4 var(--sans); }
.voice-dialog__farewell { max-width: 44ch; margin: .55rem 0 0; color: #f0d99e; font: italic .94rem/1.5 var(--serif); animation: voice-farewell .5s ease both; }
@keyframes voice-room-arrive { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes voice-wave { from { height: 5px; opacity: .55; } to { height: 28px; opacity: 1; } }
@keyframes voice-farewell { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  #soundtrack.future-chapter { padding: .4rem; }
  #soundtrack .future-chapter__page { gap: clamp(.25rem, .75vh, .5rem); padding: .75rem .7rem .6rem; }
  #soundtrack .future-chapter__page::before { inset: 7px; }
  #soundtrack .future-chapter__page h2 { font-size: clamp(1.55rem, 5.8vw, 2.15rem); }
  #soundtrack .future-chapter__intro { max-width: 52ch; font-size: clamp(.82rem, 2.6vw, .95rem); line-height: 1.42; }
  #soundtrack .sound-room { border-radius: 30% 30% 12px 12px / 6% 6% 12px 12px; padding: .25rem; }
  #soundtrack .sound-room__objects { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .3rem; width: min(100%, 440px); }
  #soundtrack .sound-room__object { min-height: clamp(115px, 16vh, 145px); padding: .25rem; }
  #soundtrack .sound-room__artifact { width: clamp(65px, 9vh, 82px); }
  #soundtrack .sound-room__title { font-size: .88rem; }
  #soundtrack .sound-room__quiet { padding: .85rem .8rem; font-size: .9rem; }
  #soundtrack .sound-room__quiet span { font-size: .69rem; }
  .voice-dialog { max-height: min(88svh, 720px); }
  .voice-dialog__room { min-height: 340px; padding: 3rem 1.2rem 1.4rem; }
}
@media (max-height: 650px) and (min-width: 761px) {
  #soundtrack .future-chapter__page { gap: .18rem; padding-block: .35rem; }
  #soundtrack .future-chapter__page h2 { font-size: clamp(1.6rem, 4vh, 2.35rem); }
  #soundtrack .future-chapter__intro { font-size: .84rem; line-height: 1.35; }
  #soundtrack .sound-room__object { min-height: 125px; }
  #soundtrack .sound-room__artifact { width: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  #soundtrack .sound-room__object, #soundtrack .sound-room__object::after, #soundtrack .sound-room__artifact, .voice-player__toggle, .voice-dialog__navigation button { transition: none; }
  .voice-dialog[open] { animation: none; }
  .voice-dialog__room.is-playing .voice-dialog__wave i, .voice-dialog__farewell { animation: none; }
}

/* Escena del observatorio: ilustraciones originales en capas locales; los recuerdos siguen siendo interactivos. */
.time-machine { isolation: isolate; }
.time-machine__paper {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background-image:
    radial-gradient(ellipse at 50% 55%, rgb(153 108 205 / 23%), transparent 45%),
    radial-gradient(ellipse at 8% 5%, rgb(114 89 157 / 19%), transparent 38%),
    radial-gradient(ellipse at 96% 96%, rgb(111 70 133 / 24%), transparent 40%),
    linear-gradient(145deg, rgb(22 20 43 / 82%), rgb(44 30 61 / 77%) 55%, rgb(27 23 49 / 83%));
}
.time-machine__paper::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid rgb(216 194 231 / 20%);
  border-radius: 8px 8px 18px 6px;
  background: none;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.time-machine__paper::after { content: none; animation: none; }
.time-machine__astrolabe-art {
  position: absolute;
  z-index: 0;
  top: 56%;
  left: 50%;
  width: min(34vw, 34vh, 360px);
  aspect-ratio: 1;
  object-fit: contain;
  opacity: .86;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 28px rgb(188 137 229 / 29%)) drop-shadow(0 0 12px rgb(238 194 111 / 25%));
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.time-machine__crystal-art {
  position: absolute;
  z-index: 0;
  width: clamp(126px, 15vw, 220px);
  height: auto;
  object-fit: contain;
  opacity: .68;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 22px rgb(158 111 207 / 22%));
  pointer-events: none;
  user-select: none;
}
.time-machine__crystal-art--west {
  left: max(.45rem, calc((100% - 1080px) / 2 - 102px));
  bottom: 7%;
  transform: rotate(-9deg);
}
.time-machine__crystal-art--east {
  top: 20%;
  right: max(.45rem, calc((100% - 1080px) / 2 - 102px));
  width: clamp(112px, 13vw, 190px);
  opacity: .48;
  transform: rotate(8deg) scale(.9);
}
.time-machine__paper > .eyebrow,
.time-machine__paper > h2,
.time-machine__paper > .time-machine__intro,
.time-machine__paper > .time-machine__note,
.time-machine__paper > .time-line,
.time-machine__paper > .chapter-navigation { position: relative; z-index: 1; }
@media (min-width: 761px) and (max-width: 1024px) {
  .time-machine__crystal-art--west { left: .2rem; bottom: 12%; width: min(17vw, 168px); opacity: .42; }
  .time-machine__crystal-art--east { right: .2rem; top: 21%; width: min(15vw, 150px); opacity: .34; }
  .time-machine__astrolabe-art { width: min(36vw, 42vh, 330px); }
}
@media (max-width: 760px) {
  .time-machine__paper::before { inset: 7px; }
  .time-machine__astrolabe-art { top: 54%; width: min(42vw, 22vh, 190px); opacity: .16; filter: drop-shadow(0 0 18px rgb(188 137 229 / 25%)); }
  .time-machine__crystal-art--west { left: .1rem; bottom: 5%; width: min(28vw, 19vh, 130px); opacity: .22; }
  .time-machine__crystal-art--east { top: 20%; right: .1rem; width: min(24vw, 17vh, 112px); opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine__paper::after { animation: none; }
}

/* Máquina del tiempo: el grabado central se acompaña de anillos mecánicos animados.
   En pantallas estrechas, el observatorio pasa a una composición vertical con scroll natural. */
.time-machine { overflow: hidden; }
.time-machine::after {
  position: absolute;
  z-index: 0;
  inset: 4% 7%;
  content: "";
  pointer-events: none;
  opacity: .34;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260' fill='none'%3E%3Cg stroke='%23d6c3e8' stroke-opacity='.48' stroke-width='.8'%3E%3Cpath d='M22 42 83 83 132 35 181 97 234 53 296 102 372 49M38 203 96 156 147 211 204 160 268 218 336 163 393 205'/%3E%3C/g%3E%3Cg fill='%23f0d69b'%3E%3Ccircle cx='22' cy='42' r='1.8'/%3E%3Ccircle cx='83' cy='83' r='1.3'/%3E%3Ccircle cx='132' cy='35' r='2'/%3E%3Ccircle cx='181' cy='97' r='1.3'/%3E%3Ccircle cx='234' cy='53' r='1.7'/%3E%3Ccircle cx='296' cy='102' r='1.3'/%3E%3Ccircle cx='372' cy='49' r='1.8'/%3E%3Ccircle cx='38' cy='203' r='1.5'/%3E%3Ccircle cx='96' cy='156' r='1.8'/%3E%3Ccircle cx='147' cy='211' r='1.3'/%3E%3Ccircle cx='204' cy='160' r='1.8'/%3E%3Ccircle cx='268' cy='218' r='1.3'/%3E%3Ccircle cx='336' cy='163' r='1.8'/%3E%3Ccircle cx='393' cy='205' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center / min(78vw, 1080px) auto no-repeat;
  filter: drop-shadow(0 0 5px rgb(199 168 228 / 26%));
}
.time-machine__paper { z-index: 1; }
.time-machine__astrolabe {
  position: absolute;
  z-index: 0;
  top: 68%;
  left: 50%;
  width: min(39vw, 47vh, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 22px rgb(172 128 213 / 20%));
}
.time-machine__astrolabe-art {
  position: absolute;
  z-index: 0;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  opacity: .91;
  mix-blend-mode: screen;
  transform: none;
  filter: drop-shadow(0 0 13px rgb(233 196 119 / 20%));
}
.time-machine__astrolabe-ring {
  position: absolute;
  display: block;
  border: 1px solid rgb(233 203 139 / 48%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgb(216 182 122 / 16%), inset 0 0 7px rgb(198 164 226 / 11%);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.time-machine__astrolabe-ring--outer {
  inset: 0;
  border-style: dotted;
  border-color: rgb(229 204 153 / 64%);
  animation-name: astrolabe-ring-clockwise;
  animation-duration: 84s;
}
.time-machine__astrolabe-ring--middle {
  inset: 8%;
  border-color: rgb(213 185 231 / 67%);
  border-style: dashed;
  animation-name: astrolabe-ring-counterclockwise;
  animation-duration: 61s;
}
.time-machine__astrolabe-ring--inner {
  inset: 18%;
  border-color: rgb(242 215 159 / 57%);
  animation-name: astrolabe-ring-clockwise;
  animation-duration: 47s;
}
.time-machine__astrolabe-ring--outer::after,
.time-machine__astrolabe-ring--inner::after {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  content: "";
  background: repeating-conic-gradient(from 0deg, rgb(241 214 158 / 53%) 0deg 1deg, transparent 1deg 15deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.3px));
}
.time-machine__paper > .eyebrow,
.time-machine__paper > h2,
.time-machine__paper > .time-machine__intro,
.time-machine__paper > .time-machine__note,
.time-machine__paper > .time-line,
.time-machine__paper > .chapter-navigation { position: relative; z-index: 1; }
@keyframes astrolabe-ring-clockwise { to { transform: rotate(360deg); } }
@keyframes astrolabe-ring-counterclockwise { to { transform: rotate(-360deg); } }
@media (min-width: 901px) {
  .time-machine__crystal-art--west { left: max(.25rem, calc((100% - 1120px) / 2 - 94px)); bottom: 5%; }
  .time-machine__crystal-art--east { right: max(.25rem, calc((100% - 1120px) / 2 - 94px)); top: 17%; }
}
@media (max-width: 900px) {
  .time-machine {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: start;
    padding: max(.5rem, env(safe-area-inset-top)) .55rem max(.7rem, env(safe-area-inset-bottom));
  }
  .time-machine::after { inset: 1% 0; opacity: .2; background-size: min(100vw, 700px) auto; }
  .time-machine__paper {
    grid-template-rows: auto auto auto auto auto auto auto;
    gap: clamp(.42rem, 1.2vh, .7rem);
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding: clamp(.8rem, 2.5vh, 1.3rem) clamp(.75rem, 3.5vw, 1.5rem);
  }
  .time-machine__paper::before { inset: 7px; }
  .time-machine__paper > .eyebrow { margin-top: .2rem; }
  .time-machine__paper > h2 { max-width: 30ch; font-size: clamp(1.55rem, 4.8vw, 2.35rem); line-height: 1.08; }
  .time-machine__intro { max-width: 58ch; margin: 0 auto; font-size: clamp(.9rem, 2.1vw, 1rem); line-height: 1.45; }
  .time-machine__note { font-size: .74rem; }
  .time-machine__astrolabe {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 5;
    justify-self: center;
    width: clamp(158px, 27vw, 224px);
    margin: .12rem auto .18rem;
    transform: none;
  }
  .time-machine__astrolabe-art { opacity: .9; }
  .time-machine .time-line {
    display: grid;
    position: relative;
    grid-row: 6;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: minmax(66px, auto);
    gap: .46rem;
    width: min(100%, 620px);
    min-height: 0;
    margin: .12rem auto .3rem;
    padding: 0 0 0 1.35rem;
  }
  .time-machine .time-line::before { inset: .28rem auto .28rem .42rem; width: 1px; height: auto; background: linear-gradient(transparent, rgb(183 150 213 / 72%) 10%, rgb(226 195 125 / 86%) 50%, rgb(183 150 213 / 72%) 90%, transparent); }
  .time-machine .time-line__item,
  .time-machine .time-line__item:nth-child(odd),
  .time-machine .time-line__item:nth-child(even) {
    position: relative;
    display: flex;
    inset: auto;
    grid-column: 1;
    justify-self: stretch;
    grid-row: auto;
    width: 100%;
    min-height: 0;
    justify-self: stretch;
    transform: none;
  }
  .time-machine .time-line__trigger,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: .15rem;
    width: 100%;
    min-height: 64px;
    height: auto;
    padding: .56rem .75rem;
  }
  .time-machine .time-line__trigger::before,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger::before {
    top: 50%;
    left: -1.35rem;
    right: auto;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
  }
  .time-machine .time-line__eyebrow { grid-column: 1; grid-row: 1; font-size: .61rem; }
  .time-machine .time-line__title { grid-column: 1; grid-row: 2; padding-right: 1.4rem; font-size: clamp(.92rem, 2.7vw, 1.04rem); line-height: 1.25; }
  .time-machine .time-line__action { grid-column: 1; grid-row: 3; font-size: .66rem; }
  .time-machine .time-line__sigil { top: 50%; right: .68rem; }
  .time-machine__paper > .chapter-navigation { grid-row: 7; margin-top: .1rem; padding-bottom: max(.25rem, env(safe-area-inset-bottom)); }
  .time-machine .chapter-navigation__button { width: 46px; min-height: 46px; }
  .time-machine__crystal-art--west { left: -.5rem; bottom: 1.8rem; width: clamp(82px, 14vw, 122px); opacity: .29; }
  .time-machine__crystal-art--east { top: 12rem; right: -.35rem; width: clamp(74px, 13vw, 108px); opacity: .24; }
}
@media (max-width: 430px) {
  .time-machine { padding-inline: .35rem; }
  .time-machine__paper { gap: .42rem; padding-inline: .72rem; }
  .time-machine__paper > h2 { font-size: clamp(1.5rem, 7vw, 1.85rem); }
  .time-machine__intro { font-size: .9rem; }
  .time-machine__note { max-width: 34ch; margin-inline: auto; font-size: .7rem; }
  .time-machine__astrolabe { width: clamp(150px, 42vw, 182px); }
  .time-machine .time-line { gap: .42rem; padding-left: 1.22rem; }
  .time-machine .time-line::before { left: .36rem; }
  .time-machine .time-line__trigger,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger { min-height: 68px; padding: .58rem .68rem; }
  .time-machine .time-line__trigger::before,
  .time-machine .time-line__item:nth-child(even) .time-line__trigger::before { left: -1.22rem; }
  .time-machine .time-line__title { font-size: .96rem; }
  .time-machine .chapter-navigation { gap: .3rem; }
  .time-machine__crystal-art--west { opacity: .19; }
  .time-machine__crystal-art--east { opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine::before,
  .time-machine__astrolabe-ring,
  .time-machine__paper::after { animation: none !important; }
  .time-machine__astrolabe-ring { will-change: auto; }
}

/* Capítulo 5 · mapa celeste de aventuras pendientes. */
#adventures {
  background:
    radial-gradient(ellipse at 18% 16%, rgb(83 108 161 / 19%), transparent 36%),
    radial-gradient(ellipse at 84% 83%, rgb(123 72 142 / 21%), transparent 40%),
    transparent;
}
#adventures .adventures__page {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: clamp(.22rem, 1vh, .7rem);
  width: min(100%, 1280px);
  padding: clamp(.7rem, 2vh, 1.45rem) clamp(.85rem, 3.5vw, 3rem);
  border-color: rgb(199 177 227 / 48%);
  background:
    radial-gradient(ellipse at 50% 53%, rgb(82 67 120 / 52%), transparent 57%),
    radial-gradient(ellipse at 8% 5%, rgb(102 139 180 / 18%), transparent 39%),
    linear-gradient(145deg, rgb(17 24 49 / 90%), rgb(40 29 62 / 93%) 56%, rgb(25 28 57 / 92%));
  box-shadow: 0 28px 90px rgb(3 5 18 / 52%), 0 0 48px rgb(159 126 199 / 14%), inset 0 0 50px rgb(226 196 133 / 5%);
}
#adventures .adventures__page::before { border-color: rgb(218 190 129 / 24%); }
#adventures .adventures__page::after { content: none; }
#adventures .future-chapter__seal { display: none; }
#adventures .adventures__page > .eyebrow { color: #dfcba0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
#adventures #adventures-title {
  max-width: 28ch;
  margin: 0 auto;
  color: #f5eadb;
  font: 600 clamp(1.8rem, 4.6vh, 3.15rem)/1.04 var(--serif);
  text-shadow: 0 0 23px rgb(201 171 222 / 20%);
  text-wrap: balance;
}
#adventures .future-chapter__intro { max-width: 62ch; margin: 0 auto; color: rgb(241 232 246 / 88%); font: .94rem/1.45 var(--sans); }
.adventure-map {
  position: relative;
  isolation: isolate;
  width: min(100%, 1100px, 110svh);
  aspect-ratio: 1100 / 520;
  min-height: 0;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgb(209 184 231 / 34%);
  border-radius: 24px 5px 24px 5px;
  background:
    radial-gradient(ellipse at 52% 48%, rgb(97 77 134 / 27%), transparent 57%),
    radial-gradient(circle, rgb(242 220 169 / 54%) 0 .7px, transparent 1.45px) 12px 17px / 83px 89px,
    radial-gradient(circle, rgb(213 196 238 / 42%) 0 .6px, transparent 1.35px) 37px 29px / 121px 117px,
    linear-gradient(140deg, rgb(16 25 50 / 82%), rgb(43 31 64 / 79%) 56%, rgb(25 28 55 / 82%));
  box-shadow: inset 0 0 40px rgb(13 13 35 / 35%), 0 10px 38px rgb(4 5 18 / 22%), 0 0 28px rgb(175 137 208 / 10%);
}
.adventure-map::before, .adventure-map::after { position: absolute; z-index: 0; inset: 9px; border: 1px solid rgb(225 197 134 / 17%); border-radius: 17px 3px 17px 3px; content: ""; pointer-events: none; }
.adventure-map::after { inset: 15px; border-color: rgb(195 169 224 / 11%); border-style: dotted; }
.adventure-map__art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.adventure-map__route { fill: none; stroke: url(#adventure-route-gradient); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .56; filter: url(#adventure-route-glow); }
.adventure-map__route-glint { fill: none; stroke: #f6dda0; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 30; opacity: .7; filter: url(#adventure-route-glow); animation: adventure-route-drift 24s linear infinite; }
.adventure-map__route--mobile, .adventure-map__route-glint--mobile { display: none; }
.adventure-map__landmarks { fill: none; stroke: rgb(227 196 131 / 46%); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(206 174 224 / 23%)); }
.adventure-map__landmarks .adventure-map__tiny-star { fill: #e9cd8e; stroke: none; opacity: .78; animation: adventure-star-breathe 4.8s ease-in-out infinite alternate; }
.adventure-map__points { position: absolute; z-index: 2; inset: 0; }
.adventure-map__point {
  position: absolute;
  left: var(--point-x);
  top: var(--point-y);
  display: grid;
  justify-items: center;
  gap: .3rem;
  width: 50px;
  padding: 0;
  border: 0;
  color: #f4e8d4;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}
#adventures .adventure-map__point { left: var(--point-x); top: var(--point-y); }
.adventure-map__marker {
  position: relative;
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(237 211 151 / 77%);
  border-radius: 50%;
  color: #ffe5a3;
  background: radial-gradient(circle, rgb(147 113 174 / 77%), rgb(36 34 66 / 94%) 69%);
  box-shadow: 0 0 0 4px rgb(183 149 218 / 10%), 0 0 18px rgb(208 170 116 / 22%), inset 0 0 13px rgb(230 196 139 / 19%);
  font: 1.25rem/1 var(--serif);
  transition: transform .28s ease, box-shadow .28s ease, color .28s ease, background .28s ease;
}
.adventure-map__marker::before { position: absolute; inset: -5px; border: 1px solid rgb(202 174 226 / 28%); border-radius: inherit; content: ""; transform: rotate(45deg) scale(.84); transition: transform .3s ease, border-color .3s ease; }
.adventure-map__label { max-width: 134px; color: rgb(244 234 218 / 91%); font: 600 .68rem/1.25 var(--sans); text-align: center; text-shadow: 0 1px 8px #17152f, 0 0 12px #17152f; text-wrap: balance; }
.adventure-map__point:hover .adventure-map__marker, .adventure-map__point:focus-visible .adventure-map__marker, .adventure-map__point.is-awakened .adventure-map__marker { color: #fff2c9; background: radial-gradient(circle, rgb(185 143 203 / 94%), rgb(48 38 73 / 96%) 72%); box-shadow: 0 0 0 5px rgb(203 174 233 / 15%), 0 0 26px rgb(231 195 117 / 49%), 0 0 42px rgb(163 126 199 / 28%), inset 0 0 15px rgb(248 220 155 / 30%); transform: scale(1.09); }
.adventure-map__point:hover .adventure-map__marker::before, .adventure-map__point:focus-visible .adventure-map__marker::before { border-color: rgb(240 211 147 / 68%); transform: rotate(72deg) scale(1); }
.adventure-map__point:focus-visible { outline: none; }
.adventure-map__point:focus-visible .adventure-map__marker { outline: 2px solid #f1d38d; outline-offset: 7px; }
.adventure-map__hint { position: absolute; z-index: 1; right: .8rem; bottom: .55rem; left: .8rem; margin: 0; color: rgb(221 207 236 / 72%); font: .66rem/1.3 var(--sans); letter-spacing: .04em; text-align: center; pointer-events: none; }
#adventures .adventures__closing { max-width: 60ch; margin: .28rem auto .2rem; color: #efdcad; font: italic .88rem/1.35 var(--serif); text-align: center; text-shadow: 0 0 17px rgb(209 175 120 / 20%); }
.adventure-detail {
  width: min(92vw, 640px);
  max-width: calc(100vw - 24px);
  max-height: min(86svh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgb(224 199 146 / 83%);
  border-radius: 5px 5px 18px 5px;
  color: #3d3047;
  background: transparent;
  box-shadow: 0 28px 90px rgb(2 3 14 / 66%), 0 0 36px rgb(197 162 221 / 24%);
}
.adventure-detail::backdrop { background: rgb(9 8 25 / 78%); backdrop-filter: blur(6px); }
.adventure-detail[open] { animation: adventure-detail-enter .36s cubic-bezier(.2,.7,.2,1) both; }
.adventure-detail.is-closing { animation: adventure-detail-exit .19s ease-in both; }
.adventure-detail__paper { position: relative; isolation: isolate; display: grid; justify-items: center; gap: .8rem; min-height: 290px; padding: clamp(2.6rem, 7vw, 3.6rem) clamp(1.25rem, 6vw, 3.4rem) 1.7rem; overflow: hidden; border: 9px solid #e5d9ec; outline: 1px solid rgb(150 116 164 / 36%); outline-offset: -15px; background: radial-gradient(ellipse at 9% 4%, rgb(214 190 229 / 43%), transparent 37%), radial-gradient(ellipse at 94% 100%, rgb(226 205 158 / 28%), transparent 38%), repeating-linear-gradient(0deg, rgb(111 84 108 / 2%) 0 1px, transparent 1px 5px), linear-gradient(138deg, #fbf5e7, #f0e8f4 57%, #fbf0df); text-align: center; }
.adventure-detail__close { position: absolute; z-index: 2; top: .65rem; right: .7rem; display: grid; width: 44px; min-height: 44px; place-items: center; border: 1px solid rgb(126 92 142 / 42%); border-radius: 50%; color: #5b4567; background: rgb(255 250 239 / 78%); font: 1.55rem/1 var(--sans); cursor: pointer; transition: color .2s ease, box-shadow .2s ease, transform .2s ease; }
.adventure-detail__close:hover, .adventure-detail__close:focus-visible { color: #916a2d; box-shadow: 0 0 17px rgb(191 152 209 / 35%); transform: rotate(5deg); }
.adventure-detail__close:focus-visible, .adventure-detail__return:focus-visible { outline: 2px solid #a7824d; outline-offset: 3px; }
.adventure-detail__sigil { display: grid; width: 48px; aspect-ratio: 1; place-items: center; border: 1px solid #bb9a61; border-radius: 50%; color: #98733d; font: 1.45rem/1 var(--serif); box-shadow: 0 0 18px rgb(199 162 101 / 22%); }
.adventure-detail__eyebrow { margin: 0; color: #796087; font: 600 .67rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.adventure-detail h3 { max-width: 26ch; margin: 0; color: #403047; font: 600 clamp(1.35rem, 4vw, 2rem)/1.16 var(--serif); text-wrap: balance; }
.adventure-detail__description { max-width: 52ch; margin: 0; color: #524657; font: 1rem/1.65 var(--sans); }
.adventure-detail__figure { width: min(100%, 440px); max-height: 35svh; margin: .2rem 0; padding: .4rem; border: 1px solid rgb(161 127 184 / 55%); border-radius: 5px; background: rgb(96 69 120 / 9%); box-shadow: 0 8px 24px rgb(54 39 64 / 15%); }
.adventure-detail__figure[hidden] { display: none; }
.adventure-detail__image { display: block; width: 100%; max-height: calc(35svh - .8rem); object-fit: contain; border-radius: 2px; }
.adventure-detail__return { min-height: 44px; padding: .68rem 1.1rem; border: 1px solid rgb(126 92 142 / 42%); border-radius: 999px; color: #f4e9dc; background: linear-gradient(135deg, #49375e, #322846); box-shadow: 0 5px 14px rgb(53 39 64 / 16%); font: 600 .82rem/1.2 var(--sans); cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.adventure-detail__return:hover { box-shadow: 0 0 17px rgb(175 135 206 / 30%); transform: translateY(-1px); }
@keyframes adventure-route-drift { to { stroke-dashoffset: -192; } }
@keyframes adventure-star-breathe { from { opacity: .38; filter: drop-shadow(0 0 1px rgb(234 207 146 / 10%)); } to { opacity: .9; filter: drop-shadow(0 0 5px rgb(234 207 146 / 45%)); } }
@keyframes adventure-detail-enter { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes adventure-detail-exit { to { opacity: 0; transform: translateY(5px) scale(.99); } }
@media (max-width: 760px) {
  #adventures { padding: .45rem .55rem; }
  #adventures .adventures__page { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: clamp(.16rem, .7vh, .4rem); padding: .55rem .68rem .45rem; }
  #adventures .adventures__page::before { inset: 7px; }
  #adventures .adventures__page > .eyebrow { font-size: .58rem; }
  #adventures #adventures-title { max-width: 26ch; font-size: clamp(1.35rem, 5.7vw, 1.9rem); line-height: 1.04; }
  #adventures .future-chapter__intro { max-width: 50ch; font-size: clamp(.72rem, 2.45vw, .86rem); line-height: 1.3; }
  .adventure-map { width: min(100%, calc(54svh * 360 / 620)); aspect-ratio: 360 / 620; border-radius: 19px 4px 19px 4px; }
  .adventure-map::before { inset: 7px; border-radius: 13px 3px 13px 3px; }
  .adventure-map::after { inset: 11px; }
  .adventure-map__route--desktop, .adventure-map__route-glint--desktop { display: none; }
  .adventure-map__route--mobile, .adventure-map__route-glint--mobile { display: inline; }
  .adventure-map__route { stroke-width: 2.4; }
  .adventure-map__route-glint { stroke-width: 1.8; stroke-dasharray: 2 24; }
  .adventure-map__landmarks { display: none; }
  .adventure-map__point { width: 44px; }
  .adventure-map__marker { width: 42px; font-size: 1.12rem; }
  .adventure-map__label { position: absolute; top: 50%; width: min(108px, 32vw); max-width: none; font-size: clamp(.6rem, 2.55vw, .72rem); line-height: 1.2; text-align: left; transform: translateY(-50%); }
  .adventure-map__point:nth-child(odd) .adventure-map__label { left: calc(100% + 5px); }
  .adventure-map__point:nth-child(even) .adventure-map__label { right: calc(100% + 5px); text-align: right; }
  .adventure-map__point:nth-child(1) { left: 18%; top: 8%; }
  .adventure-map__point:nth-child(2) { left: 77%; top: 28%; }
  .adventure-map__point:nth-child(3) { left: 24%; top: 49%; }
  .adventure-map__point:nth-child(4) { left: 75%; top: 70%; }
  .adventure-map__point:nth-child(5) { left: 28%; top: 91%; }
  .adventure-map__hint { display: none; }
  #adventures .adventures__closing { max-width: 46ch; font-size: clamp(.7rem, 2.5vw, .82rem); }
  #adventures .adventures__page > .chapter-navigation { width: min(100%, 420px); margin-top: 0; }
  #adventures .chapter-navigation__button { width: 44px; min-height: 44px; }
  .adventure-detail { width: calc(100vw - 20px); max-width: 500px; max-height: 88svh; }
  .adventure-detail__paper { min-height: 240px; gap: .65rem; padding: 3.15rem 1.1rem 1.25rem; border-width: 7px; }
  .adventure-detail__description { font-size: .92rem; line-height: 1.5; }
  .adventure-detail__figure { max-height: 30svh; }
  .adventure-detail__image { max-height: calc(30svh - .8rem); }
}
@media (max-width: 360px) {
  #adventures { padding: .32rem .38rem; }
  #adventures .adventures__page { gap: .12rem; padding: .44rem .52rem .38rem; }
  #adventures #adventures-title { font-size: clamp(1.32rem, 5.8vw, 1.55rem); }
  #adventures .future-chapter__intro { font-size: .72rem; line-height: 1.26; }
  .adventure-map { width: min(100%, calc(52svh * 360 / 620)); }
  .adventure-map__marker { width: 40px; }
  .adventure-map__label { width: min(100px, 31vw); font-size: .6rem; }
  .adventure-map__point:nth-child(1) { left: 19%; }
  .adventure-map__point:nth-child(2) { left: 76%; }
  .adventure-map__point:nth-child(3) { left: 24%; }
  .adventure-map__point:nth-child(4) { left: 75%; }
  .adventure-map__point:nth-child(5) { left: 28%; }
  #adventures .adventures__closing { font-size: .69rem; }
}
@media (max-height: 620px) and (min-width: 761px) {
  #adventures .adventures__page { gap: .12rem; padding-block: .32rem; }
  #adventures .adventures__page > .eyebrow { font-size: .57rem; }
  #adventures #adventures-title { font-size: clamp(1.4rem, 4vh, 2rem); }
  #adventures .future-chapter__intro { font-size: .78rem; line-height: 1.25; }
  .adventure-map { width: min(100%, 102svh, 1100px); }
  #adventures .adventures__closing { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .adventure-map__route-glint, .adventure-map__landmarks .adventure-map__tiny-star { animation: none !important; }
  .adventure-map__marker, .adventure-map__marker::before, .adventure-detail__close, .adventure-detail__return { transition: none; }
  .adventure-detail[open], .adventure-detail.is-closing { animation: none !important; }
}

/* Personalización del atlas: contenido de bienvenida, estados y cierre del capítulo 5. */
#adventures .adventures__intro {
  max-width: 66ch;
  max-height: min(16svh, 9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-line;
  scrollbar-width: thin;
  scrollbar-color: rgb(208 179 132 / 45%) transparent;
}
.adventures__closing-group { display: grid; justify-items: center; gap: .2rem; }
.adventures__closing-group .adventures__closing { margin-block: .18rem; }
.adventures__epilogue-button {
  min-height: 40px;
  padding: .42rem .9rem;
  border: 1px solid rgb(216 184 117 / 52%);
  border-radius: 999px;
  color: #f2e5cf;
  background: linear-gradient(120deg, rgb(55 43 77 / 82%), rgb(79 55 88 / 78%));
  box-shadow: 0 0 16px rgb(198 163 216 / 12%);
  font: 600 .74rem/1.2 var(--sans);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.adventures__epilogue-button:hover, .adventures__epilogue-button:focus-visible {
  border-color: #e6ca8b;
  box-shadow: 0 0 18px rgb(221 187 124 / 27%);
  transform: translateY(-1px);
}
.adventures__epilogue-button:focus-visible { outline: 2px solid #e6ca8b; outline-offset: 3px; }
.adventure-map__point[data-status-type="confirmed"] .adventure-map__marker {
  border-color: #f1d48d;
  box-shadow: 0 0 0 4px rgb(216 184 117 / 14%), 0 0 23px rgb(232 194 111 / 38%), inset 0 0 13px rgb(230 196 139 / 22%);
}
.adventure-map__point[data-status-type="proposal"] .adventure-map__marker { border-style: dashed; border-color: rgb(203 187 224 / 76%); }
.adventure-map__point[data-status-type="secret"] .adventure-map__marker { border-color: rgb(220 195 237 / 88%); box-shadow: 0 0 0 4px rgb(186 150 216 / 13%), 0 0 21px rgb(193 154 221 / 32%), inset 0 0 14px rgb(230 196 139 / 20%); }
.adventure-detail__content, .adventure-epilogue { display: grid; justify-items: center; gap: .8rem; width: 100%; }
.adventure-detail__content[hidden], .adventure-epilogue[hidden], .adventure-detail__subtitle[hidden], .adventure-detail__warning[hidden], .adventure-detail__closing-line[hidden] { display: none !important; }
.adventure-detail__subtitle { max-width: 48ch; margin: -.35rem 0 0; color: #74617b; font: italic .98rem/1.45 var(--serif); }
.adventure-detail__description { overflow-wrap: anywhere; hyphens: auto; }
.adventure-detail__warning {
  width: min(100%, 52ch);
  margin: 0;
  padding: .72rem .9rem;
  border: 1px solid rgb(160 130 178 / 34%);
  border-radius: 4px 10px 4px 10px;
  color: #58485e;
  background: linear-gradient(120deg, rgb(226 216 235 / 62%), rgb(246 236 218 / 72%));
  font: .9rem/1.5 var(--sans);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.adventure-detail__closing-line {
  max-width: 48ch;
  margin: 0;
  color: #70577b;
  font: italic 1.02rem/1.45 var(--serif);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.adventure-detail[data-status-type="confirmed"] .adventure-detail__eyebrow { color: #8a682d; }
.adventure-detail[data-status-type="proposal"] .adventure-detail__eyebrow { color: #765e88; }
.adventure-detail[data-status-type="secret"] .adventure-detail__eyebrow { color: #87629a; }
.adventure-detail.is-secret .adventure-detail__sigil { animation: adventure-secret-reveal 1.25s cubic-bezier(.2,.7,.2,1) both; }
.adventure-epilogue { gap: 1rem; padding-block: .8rem; }
.adventure-epilogue__sigil { color: #a47db0; background: radial-gradient(circle, rgb(222 201 236 / 38%), transparent 72%); }
.adventure-epilogue__message { max-width: 58ch; margin: 0; color: #51445a; font: 1rem/1.65 var(--sans); white-space: pre-line; overflow-wrap: anywhere; hyphens: auto; }
.adventure-epilogue__emphasis { max-width: 54ch; margin: .2rem 0; color: #654d78; font-weight: 700; line-height: 1.55; }
.adventure-epilogue__final { max-width: 48ch; margin: .2rem 0; color: #654d78; font: italic 1.13rem/1.5 var(--serif); }
.adventure-detail.is-epilogue .adventure-epilogue { animation: adventure-detail-enter .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes adventure-secret-reveal { 0% { opacity: .45; transform: scale(.78); box-shadow: 0 0 0 rgb(198 157 219 / 0%); } 55% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 30px rgb(198 157 219 / 58%); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 18px rgb(198 157 219 / 30%); } }
@media (max-width: 760px) {
  #adventures .adventures__intro { max-height: min(16svh, 8rem); font-size: clamp(.68rem, 2.3vw, .82rem); line-height: 1.24; }
  .adventure-detail__content, .adventure-epilogue { gap: .6rem; }
  .adventure-detail__warning { padding: .62rem .72rem; font-size: .86rem; }
  .adventure-epilogue__message { font-size: .93rem; line-height: 1.52; }
  .adventure-epilogue__final { font-size: 1.02rem; }
  .adventures__epilogue-button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .adventures__epilogue-button { transition: none; }
  .adventure-detail.is-secret .adventure-detail__sigil,
  .adventure-detail.is-epilogue .adventure-epilogue { animation: none !important; }
}

/* Rediseño visual del capítulo 5: paisaje integrado y puntos anclados a lugares reales. */
#adventures .adventure-map {
  width: min(100%, 1100px, 108svh);
  aspect-ratio: 1100 / 540;
  border: 1px solid rgb(224 199 149 / 48%);
  border-radius: 23px 5px 23px 5px;
  background: #222441;
  box-shadow: inset 0 0 34px rgb(16 18 39 / 32%), 0 12px 42px rgb(3 5 18 / 32%), 0 0 28px rgb(175 137 208 / 13%);
}
#adventures .adventure-map::before { inset: 8px; border-color: rgb(231 204 150 / 35%); border-radius: 16px 3px 16px 3px; }
#adventures .adventure-map::after { inset: 14px; border-color: rgb(218 198 230 / 22%); }
.adventure-map__picture { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
.adventure-map__art { display: block; width: 100%; height: 100%; object-fit: cover; }
.adventure-map__landscape { width: 100%; height: 100%; }
.adventure-map__landscape--desktop { display: inline; }
.adventure-map__landscape--mobile { display: none; }
.adventure-map__points { z-index: 4; pointer-events: none; }
.adventure-map__point {
  z-index: 1;
  pointer-events: auto;
  left: var(--point-x);
  top: var(--point-y);
  width: 48px;
  gap: .18rem;
  transform: translate(-50%, -50%);
}
.adventure-map__marker {
  width: 44px;
  border-color: rgb(255 229 171 / 88%);
  background: radial-gradient(circle at 38% 32%, rgb(198 159 205 / 94%), rgb(55 45 79 / 96%) 68%);
  box-shadow: 0 0 0 4px rgb(188 157 212 / 17%), 0 4px 16px rgb(10 13 30 / 55%), 0 0 17px rgb(220 183 120 / 26%), inset 0 0 12px rgb(247 218 155 / 22%);
}
.adventure-map__marker::before { border-color: rgb(241 216 167 / 45%); }
.adventure-map__label {
  position: absolute;
  left: 50%;
  display: grid;
  width: fit-content;
  min-width: 7.5em;
  max-width: min(148px, 15vw);
  min-height: 2.75em;
  place-items: center;
  padding: .28rem .43rem;
  border: 1px solid rgb(221 194 142 / 26%);
  border-radius: 3px 9px 3px 9px;
  color: #fff4df;
  background: linear-gradient(120deg, rgb(28 29 55 / 82%), rgb(54 42 71 / 74%));
  box-shadow: 0 3px 12px rgb(10 11 28 / 35%);
  font-size: .72rem;
  line-height: 1.24;
  transform: translateX(-50%);
  backdrop-filter: blur(4px);
  overflow-wrap: anywhere;
}
.adventure-map__point[data-label-side="top"] .adventure-map__label { bottom: calc(100% + .4rem); }
.adventure-map__point[data-label-side="bottom"] .adventure-map__label { top: calc(100% + .4rem); }
.adventure-map__point[data-label-side="left"] .adventure-map__label { top: 50%; right: calc(100% + .5rem); left: auto; width: min(146px, 14vw); transform: translateY(-50%); text-align: right; }
.adventure-map__point[data-label-side="right"] .adventure-map__label { top: 50%; left: calc(100% + .5rem); width: min(146px, 14vw); transform: translateY(-50%); text-align: left; }
.adventure-map__point:hover .adventure-map__label,
.adventure-map__point:focus-visible .adventure-map__label,
.adventure-map__point.is-awakened .adventure-map__label { border-color: rgb(239 214 159 / 62%); background: linear-gradient(120deg, rgb(47 40 73 / 95%), rgb(78 57 87 / 92%)); }
.adventure-map__hint { z-index: 2; bottom: .72rem; color: rgb(255 242 220 / 82%); text-shadow: 0 1px 6px #19162e; }
.adventure-detail__complement { max-width: 48ch; margin: -.3rem 0 0; color: #74617b; font: italic .93rem/1.45 var(--serif); }
.adventure-detail__complement[hidden], .adventure-detail__vignette[hidden] { display: none; }
.adventure-detail__vignette {
  width: min(100%, 440px);
  overflow: hidden;
  border: 1px solid rgb(157 125 177 / 62%);
  border-radius: 6px 6px 16px 6px;
  background: #292743;
  box-shadow: 0 9px 24px rgb(54 39 64 / 21%), 0 0 17px rgb(178 146 204 / 12%);
}
.adventure-detail__vignette svg { display: block; width: 100%; height: auto; }
.adventure-detail__vignette .scene { display: none; }
.adventure-detail__vignette[data-scene="lugar-desconocido"] .scene--destination,
.adventure-detail__vignette[data-scene="aventura-improvisada"] .scene--improvised,
.adventure-detail__vignette[data-scene="noche-estrellas"] .scene--stars,
.adventure-detail__vignette[data-scene="sueno-cumplir"] .scene--dream,
.adventure-detail__vignette[data-scene="lo-que-espera"] .scene--future { display: inline; }
.adventure-detail__figure { width: min(100%, 440px); max-height: 35svh; padding: .5rem; border-color: rgb(157 125 177 / 66%); background: linear-gradient(135deg, rgb(222 204 234 / 46%), rgb(247 231 202 / 45%)); }
.adventure-detail__image { max-height: calc(35svh - 1rem); }
.adventure-orientation-hint { display: none; }
.adventure-orientation-hint[hidden] { display: none !important; }
@media (max-width: 760px) and (orientation: portrait) {
  .adventure-orientation-hint:not([hidden]) {
    position: absolute;
    z-index: 5;
    top: .5rem;
    right: 2.1rem;
    left: 2.1rem;
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 0;
    padding: .32rem .55rem;
    border: 1px solid rgb(216 188 131 / 28%);
    border-radius: 999px;
    color: #eadff2;
    background: rgb(39 34 67 / 55%);
    font: .67rem/1.3 var(--sans);
    text-align: center;
  }
  .adventure-orientation-hint button { flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #f2d99e; background: transparent; font: 1.2rem/1 var(--sans); cursor: pointer; }
}
@media (max-width: 760px) {
  #adventures .adventure-map {
    width: min(100%, 420px, calc(60svh * 420 / 620));
    aspect-ratio: 420 / 620;
    border-radius: 18px 4px 18px 4px;
  }
  #adventures .adventure-map::before { inset: 6px; border-radius: 12px 3px 12px 3px; }
  #adventures .adventure-map::after { inset: 11px; }
  .adventure-map__landscape--desktop { display: none; }
  .adventure-map__landscape--mobile { display: inline; }
  #adventures .adventure-map__point { left: var(--point-mobile-x); top: var(--point-mobile-y); width: 42px; }
  .adventure-map__marker { width: 38px; font-size: 1.05rem; }
  .adventure-map__label {
    width: min(124px, 31vw);
    min-width: 0;
    max-width: min(124px, 31vw);
    min-height: 2.55em;
    padding: .32rem .45rem;
    border-radius: 4px 9px 4px 9px;
    font-size: clamp(.7rem, 3vw, .78rem);
    line-height: 1.28;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .adventure-map__point[data-mobile-label-side="left"] .adventure-map__label { top: 50%; right: calc(100% + .32rem); left: auto; transform: translateY(-50%); text-align: center; }
  .adventure-map__point[data-mobile-label-side="right"] .adventure-map__label { top: 50%; right: auto; left: calc(100% + .32rem); transform: translateY(-50%); text-align: center; }
  .adventure-map__hint { display: none; }
}
@media (max-width: 360px) {
  #adventures .adventure-map { width: min(100%, 420px, calc(58svh * 420 / 620)); }
  .adventure-map__point { width: 40px; }
  .adventure-map__marker { width: 36px; }
  #adventures .adventure-map__label { width: min(104px, 32vw); max-width: min(104px, 32vw); font-size: clamp(.68rem, 3.3vw, .74rem); }
  #adventures .adventure-detail { width: calc(100vw - 16px); max-height: 92svh; }
  #adventures .adventure-detail__paper { min-height: 0; gap: .5rem; padding: 2.85rem .75rem .9rem; }
  #adventures .adventure-detail__vignette, #adventures .adventure-detail__vignette svg { max-height: 24svh; }
  #adventures .adventure-detail__figure { max-height: 24svh; }
  #adventures .adventure-detail__image { max-height: calc(24svh - .8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .adventure-map__point, .adventure-map__marker, .adventure-map__label { transition: none !important; }
}

/* Keep adventure text readable when a personalized title or description is longer. */
#adventure-detail-dialog {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#adventure-detail-dialog .adventure-detail__paper { min-width: 0; overflow: visible; }
#adventure-detail-title,
#adventure-detail-description,
#adventure-detail-complement {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
#adventure-detail-title { width: min(100%, 26ch); }
#adventure-detail-description { width: min(100%, 52ch); }
#adventure-detail-complement { width: min(100%, 48ch); }

/* Chapter 6: interactive spellbook, scoped so the other chapters keep their layout. */
#lost-memories:not([hidden]) .future-chapter__page { animation: lost-memory-scene-entry .78s cubic-bezier(.2,.72,.2,1) both; }
#lost-memories .future-chapter__page {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: clamp(.24rem, .9vh, .68rem);
  padding: clamp(.65rem, 2.1vh, 1.4rem) clamp(.8rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse at 50% 48%, rgb(160 123 190 / 13%), transparent 49%),
    radial-gradient(ellipse at 50% 2%, rgb(204 172 116 / 8%), transparent 34%),
    linear-gradient(145deg, rgb(20 22 48 / 92%), rgb(43 28 58 / 94%));
}
#lost-memories .future-chapter__page > .eyebrow { color: #dac8eb; font-size: .68rem; letter-spacing: .18em; }
#lost-memories .future-chapter__seal { width: clamp(30px, 4.2vh, 42px); font-size: 1.15rem; }
#lost-memories .future-chapter__page h2 { max-width: 24ch; font-size: clamp(1.65rem, 4.1vw, 3rem); line-height: 1.04; }
#lost-memories .future-chapter__intro { max-width: 64ch; font-size: clamp(.82rem, 1.35vw, .98rem); line-height: 1.35; }
.lost-memories__experience { position: relative; isolation: isolate; width: min(100%, 920px); height: 100%; min-height: 0; margin: 0 auto; border: 1px solid rgb(199 169 218 / 35%); border-radius: 5px 16px 5px 16px; background: radial-gradient(ellipse at 50% 48%, rgb(198 158 222 / 7%), transparent 54%), linear-gradient(130deg, rgb(39 32 66 / 55%), rgb(62 42 75 / 47%) 55%, rgb(38 34 69 / 58%)); box-shadow: inset 0 0 36px rgb(194 163 221 / 7%), 0 0 30px rgb(139 105 173 / 12%); }
.lost-memories__experience::before { position: absolute; z-index: -1; inset: 8px; border: 1px solid rgb(220 187 130 / 19%); border-radius: 3px 12px 3px 12px; content: ""; pointer-events: none; }
.lost-memories__experience::after { position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at center, rgb(238 211 151 / 24%), rgb(165 126 203 / 13%) 30%, transparent 70%); content: ""; opacity: 0; pointer-events: none; }
.lost-memories__experience.is-page-turning::after { animation: lost-memory-page-glow .82s cubic-bezier(.2,.72,.2,1) both; }
.lost-memories__experience.is-sparkling::after { animation: lost-memory-answer-glow .8s ease both; }
.lost-memories__experience.is-final-reveal.is-page-turning::after { background: radial-gradient(ellipse at center, rgb(255 224 163 / 37%), rgb(184 143 220 / 23%) 31%, transparent 72%); animation: lost-memory-final-convergence .82s cubic-bezier(.2,.72,.2,1) both; }
.lost-memories__magic-particles { position: absolute; z-index: 4; inset: 0; overflow: hidden; border-radius: inherit; contain: layout paint; pointer-events: none; }
.lost-memories__particle { position: absolute; display: block; width: var(--particle-size); aspect-ratio: 1; border-radius: 50%; background: #f3d990; box-shadow: 0 0 7px 2px rgb(238 207 134 / 66%); opacity: 0; animation: lost-memory-particle-rise var(--particle-duration) var(--particle-delay) cubic-bezier(.16,.68,.25,1) both; }
.lost-memories__particle:nth-child(3n) { background: #d9b8ef; box-shadow: 0 0 8px 2px rgb(199 159 224 / 66%); }
.lost-memories__particle.is-converging { animation-name: lost-memory-particle-converge; }
.lost-memories__view { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(194 162 214 / 55%) transparent; padding: clamp(.7rem, 2.2vh, 1.35rem) clamp(.8rem, 3vw, 2rem); }
.lost-memories__view[hidden] { display: none !important; }
.lost-memories__view:not([hidden]) { animation: lost-memory-view-arrive .48s cubic-bezier(.2,.72,.2,1) both; }
.lost-memories__intro-view { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(0, 1.3fr); align-items: center; gap: clamp(1rem, 4vw, 3.5rem); }
.lost-memories__book { position: relative; display: grid; width: min(100%, 230px); height: clamp(118px, 19vh, 190px); place-items: center; justify-self: center; perspective: 700px; color: #f0d89e; filter: drop-shadow(0 15px 18px rgb(0 0 0 / 35%)); transition: transform .82s cubic-bezier(.2,.72,.2,1); }
.lost-memories__book.is-awakening { animation: lost-memory-book-awaken .92s ease both; }
.lost-memories__book.is-opening { transform: translateX(56px); }
.lost-memories__book::before, .lost-memories__book::after { position: absolute; inset: 8px 10px; border: 2px solid #c6a461; border-radius: 7px 13px 13px 7px; background: linear-gradient(90deg, #392a4b 0 7%, #795a47 8%, #d6c397 11%, #eee2c4 16%, #d5c397 19%, #382744 20%); box-shadow: inset 0 0 0 5px rgb(16 17 37 / 68%), inset 0 0 0 7px rgb(203 166 100 / 58%), 0 0 25px rgb(197 153 215 / 17%); content: ""; transform: rotate(-4deg); }
.lost-memories__book.is-opening::before { animation: lost-memory-book-edge-glow .82s ease both; }
.lost-memories__book::after { z-index: 1; border-radius: 5px 12px 12px 5px; background: radial-gradient(circle at 50% 42%, rgb(227 193 120 / 18%), transparent 36%), linear-gradient(135deg, #69506f, #302442 68%, #50384f); transform: rotateY(0) rotate(-4deg); transform-origin: left center; transition: transform .82s cubic-bezier(.2,.72,.2,1), box-shadow .5s ease; }
.lost-memories__book.is-opening::after { box-shadow: inset 0 0 0 5px rgb(16 17 37 / 68%), inset 0 0 0 7px rgb(203 166 100 / 58%), 20px 0 42px rgb(233 198 122 / 42%); transform: rotateY(-155deg) rotate(-4deg); }
.lost-memories__book span, .lost-memories__book i { position: relative; z-index: 2; text-shadow: 0 0 16px rgb(242 213 147 / 55%); }
.lost-memories__book span { font: 2.6rem/1 var(--serif); }
.lost-memories__book i { position: absolute; z-index: 3; bottom: 1.2rem; color: rgb(233 210 161 / 83%); font: italic .6rem/1 var(--serif); letter-spacing: .3em; }
.lost-memories__intro-copy { display: grid; justify-items: start; gap: clamp(.35rem, 1vh, .65rem); text-align: left; }
.lost-memories__opening { max-width: 52ch; min-width: 0; margin: 0; color: #f2e8db; font: clamp(.86rem, 1.5vw, 1.06rem)/1.5 var(--sans); overflow-wrap: anywhere; }
.lost-memories__invitation { min-width: 0; margin: 0; color: #e5cc8f; font: italic clamp(.95rem, 1.5vw, 1.12rem)/1.35 var(--serif); overflow-wrap: anywhere; }
.lost-memories__demo-note { max-width: 55ch; min-width: 0; margin: 0; color: rgb(223 210 233 / 72%); font: .69rem/1.35 var(--sans); overflow-wrap: anywhere; }
.lost-memories__primary, .lost-memories__continue { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: .65rem 1.15rem; border: 1px solid rgb(230 199 133 / 66%); border-radius: 999px 999px 7px 999px; color: #fff3d4; background: linear-gradient(135deg, #70518a, #382947 75%); box-shadow: 0 5px 20px rgb(3 4 17 / 25%), 0 0 20px rgb(196 157 218 / 17%), inset 0 0 12px rgb(232 201 140 / 10%); font: 600 .82rem/1.2 var(--sans); cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.lost-memories__primary:hover:not(:disabled), .lost-memories__continue:hover:not(:disabled), .lost-memories__primary:focus-visible, .lost-memories__continue:focus-visible { background: linear-gradient(135deg, #88679e, #493454 75%); box-shadow: 0 0 20px rgb(197 159 220 / 30%), 0 0 15px rgb(231 194 122 / 21%); transform: translateY(-2px); }
.lost-memories__primary:focus-visible, .lost-memories__continue:focus-visible, .lost-memories__hint-toggle:focus-visible, .lost-memories__answer:focus-visible { outline: 2px solid #f0d597; outline-offset: 3px; }
.lost-memories__progress-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.lost-memories__trial-view { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.35rem, 1.2vh, .8rem); }
.lost-memories__progress { margin: 0; color: #e3ce9b; font: 600 .72rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.lost-memories__letters { display: flex; gap: .38rem; margin: 0; padding: 0; list-style: none; }
.lost-memories__letters li { display: grid; width: 29px; height: 32px; place-items: center; border: 1px solid rgb(209 179 129 / 44%); border-radius: 50% 50% 5px 50%; color: rgb(226 210 235 / 58%); background: rgb(27 25 49 / 54%); font: 600 .9rem/1 var(--serif); transition: color .35s ease, box-shadow .35s ease, transform .35s ease; }
.lost-memories__letters li.is-revealed { border-color: #e4c785; color: #fff0bb; box-shadow: 0 0 17px rgb(225 189 116 / 45%); text-shadow: 0 0 10px rgb(247 221 157 / 65%); transform: translateY(-2px); }
.lost-memories__letters li.is-newly-revealed { animation: lost-memory-letter-discovery .72s cubic-bezier(.18,.75,.2,1) both; }
.lost-memories__question-area { display: grid; align-content: center; gap: clamp(.28rem, .8vh, .55rem); min-height: 0; }
.lost-memories__trial-title { margin: 0; color: #d5b9e5; font: italic .8rem/1.3 var(--serif); }
.lost-memories__question-area h3 { max-width: 42ch; min-width: 0; margin: 0; color: #fbf2df; font: 600 clamp(1.05rem, 2.3vw, 1.45rem)/1.24 var(--serif); text-wrap: balance; overflow-wrap: anywhere; }
.lost-memories__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.35rem, 1vw, .65rem); margin-top: clamp(.2rem, .8vh, .5rem); }
.lost-memories__answer { position: relative; display: flex; min-width: 0; min-height: 46px; align-items: center; gap: .55rem; padding: .55rem .8rem; border: 1px solid rgb(199 170 221 / 40%); border-radius: 4px 14px 5px 14px; color: #f0e8f5; background: linear-gradient(120deg, rgb(69 52 86 / 82%), rgb(39 35 66 / 82%)); box-shadow: inset 0 0 15px rgb(197 160 221 / 5%); font: 500 .81rem/1.3 var(--sans); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; overflow-wrap: anywhere; }
.lost-memories__answer::before { flex: 0 0 auto; color: #e4c889; content: "✧"; font: .9rem/1 var(--serif); }
.lost-memories__answer:hover:not(:disabled), .lost-memories__answer:focus-visible { border-color: rgb(230 199 134 / 82%); background: linear-gradient(120deg, rgb(93 68 108 / 90%), rgb(49 42 78 / 92%)); box-shadow: 0 0 17px rgb(192 151 219 / 19%); transform: translateY(-1px); }
.lost-memories__answer:disabled { cursor: default; }
.lost-memories__answer.is-correct { border-color: #e4c785; color: #fff2c7; box-shadow: 0 0 18px rgb(225 189 116 / 32%); }
.lost-memories__answer.is-correct::before { animation: lost-memory-sigil-awaken .58s ease both; }
.lost-memories__answer.is-miss { animation: lost-memory-answer-miss .42s ease both; border-color: rgb(218 173 215 / 78%); }
.lost-memories__feedback-area { display: flex; min-height: 44px; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .75rem; }
.lost-memories__feedback { flex: 1 1 100%; margin: 0; color: #e9d7b1; font: .78rem/1.35 var(--sans); }
.lost-memories__feedback.is-incorrect { color: #efc9db; }
.lost-memories__feedback.is-correct { color: #f2dda3; }
.lost-memories__hint-toggle { min-height: 38px; padding: .4rem .72rem; border: 1px solid rgb(201 175 220 / 43%); border-radius: 999px; color: #e3d2ed; background: rgb(43 35 64 / 74%); font: 500 .72rem/1.2 var(--sans); cursor: pointer; }
.lost-memories__hint { flex: 1 1 100%; margin: 0; color: #ded0eb; font: italic .77rem/1.35 var(--serif); }
.lost-memories__hint:not([hidden]) { animation: lost-memory-hint-reveal .32s ease both; }
.lost-memories__continue { min-height: 40px; padding: .55rem .95rem; font-size: .76rem; }
.lost-memories__continue[hidden], .lost-memories__hint[hidden] { display: none !important; }
.lost-memories__final-view { display: grid; align-content: center; justify-items: center; gap: clamp(.35rem, 1vh, .7rem); text-align: center; }
.lost-memories__final-eyebrow { margin: 0; color: #e5cd92; font: 600 .68rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.lost-memories__secret-word { display: flex; gap: clamp(.45rem, 2vw, 1rem); margin: 0; color: #fff0bb; font: 600 clamp(2.7rem, 8vh, 5.6rem)/1 var(--serif); letter-spacing: .1em; text-shadow: 0 0 15px rgb(255 220 145 / 64%), 0 0 38px rgb(176 137 209 / 46%); }
.lost-memories__secret-word span { display: inline-block; }
#lost-memories .lost-memories__experience.is-word-revealed .lost-memories__secret-word span { animation: lost-memory-letter-rise .65s cubic-bezier(.18,.75,.2,1) both; }
.lost-memories__secret-word span:nth-child(2) { animation-delay: .08s; }
.lost-memories__secret-word span:nth-child(3) { animation-delay: .16s; }
.lost-memories__secret-word span:nth-child(4) { animation-delay: .24s; }
.lost-memories__final-view h3 { max-width: 36ch; min-width: 0; margin: 0; color: #f7ebd4; font: 600 clamp(1.05rem, 2vw, 1.4rem)/1.25 var(--serif); overflow-wrap: anywhere; }
.lost-memories__final-message { max-width: 66ch; min-width: 0; margin: 0; color: rgb(245 237 225 / 90%); font: clamp(.8rem, 1.2vw, .94rem)/1.48 var(--sans); overflow-wrap: anywhere; }
.lost-memories__replay { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .55rem 1rem; border: 1px solid rgb(224 194 135 / 70%); border-radius: 999px; color: #fff0c6; background: linear-gradient(135deg, rgb(79 58 98 / 92%), rgb(47 39 67 / 94%)); box-shadow: 0 0 14px rgb(199 159 219 / 16%); font: 600 .8rem/1.2 var(--sans); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.lost-memories__replay[hidden] { display: none !important; }
.lost-memories__replay:hover, .lost-memories__replay:focus-visible { border-color: #e4c785; color: #fff1c8; box-shadow: 0 0 14px rgb(199 159 219 / 22%); }
.lost-memories__replay:focus-visible { outline: 2px solid #f0d597; outline-offset: 3px; }
@keyframes lost-memory-page-glow { 0% { opacity: 0; transform: scaleX(.42); } 28% { opacity: .78; } 58% { opacity: .92; transform: scaleX(1.02); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes lost-memory-answer-glow { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes lost-memory-letter-rise { from { opacity: 0; transform: translateY(13px) scale(.82); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lost-memory-view-arrive { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lost-memory-answer-miss { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 65% { transform: translateX(3px); } }
@keyframes lost-memory-scene-entry { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes lost-memory-book-awaken { 0%, 100% { filter: drop-shadow(0 15px 18px rgb(0 0 0 / 35%)); } 46% { filter: drop-shadow(0 0 22px rgb(235 201 131 / 58%)) drop-shadow(0 0 38px rgb(179 137 211 / 36%)); } }
@keyframes lost-memory-book-edge-glow { 0%, 100% { box-shadow: inset 0 0 0 5px rgb(16 17 37 / 68%), inset 0 0 0 7px rgb(203 166 100 / 58%), 0 0 25px rgb(197 153 215 / 17%); } 44% { box-shadow: inset 0 0 0 5px rgb(16 17 37 / 68%), inset 0 0 0 7px rgb(238 207 143 / 82%), 0 0 30px rgb(236 201 130 / 61%); } }
@keyframes lost-memory-particle-rise { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.28); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(-50% + var(--particle-dx)), calc(-50% + var(--particle-dy))) scale(.1); } }
@keyframes lost-memory-particle-converge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 18% { opacity: .9; } 76% { opacity: .78; } 100% { opacity: 0; transform: translate(calc(-50% + var(--particle-dx)), calc(-50% + var(--particle-dy))) scale(.08); } }
@keyframes lost-memory-final-convergence { 0% { opacity: 0; transform: scale(.45); } 35% { opacity: .96; } 68% { opacity: .72; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1); } }
@keyframes lost-memory-sigil-awaken { 0%, 100% { transform: scale(1); text-shadow: none; } 45% { transform: scale(1.42); text-shadow: 0 0 12px rgb(244 212 143 / 95%); } }
@keyframes lost-memory-letter-discovery { 0% { transform: translateY(0) scale(.72); filter: brightness(.8); } 52% { transform: translateY(-5px) scale(1.22); filter: brightness(1.35); } 100% { transform: translateY(-2px) scale(1); filter: none; } }
@keyframes lost-memory-hint-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  #lost-memories.future-chapter { padding: .4rem .5rem; }
  #lost-memories .future-chapter__page { gap: clamp(.16rem, .55vh, .4rem); padding: .5rem .62rem .42rem; }
  #lost-memories .future-chapter__page::before { inset: 7px; }
  #lost-memories .future-chapter__page > .eyebrow { font-size: .58rem; }
  #lost-memories .future-chapter__seal { width: clamp(24px, 3.4vh, 32px); font-size: .95rem; }
  #lost-memories .future-chapter__page h2 { max-width: 25ch; font-size: clamp(1.35rem, 5.8vw, 2rem); line-height: 1.02; }
  #lost-memories .future-chapter__intro { max-width: 48ch; font-size: clamp(.7rem, 2.55vw, .86rem); line-height: 1.28; }
  .lost-memories__view { padding: .55rem .65rem; }
  .lost-memories__intro-view { grid-template-columns: minmax(75px, .48fr) minmax(0, 1.5fr); gap: .55rem; }
  .lost-memories__book { width: min(100%, 140px); height: clamp(84px, 14vh, 116px); }
  .lost-memories__book.is-opening { transform: translateX(10px); }
  .lost-memories__book::before, .lost-memories__book::after { inset: 5px 3px; }
  .lost-memories__book span { font-size: 1.9rem; }
  .lost-memories__book i { bottom: .75rem; font-size: .47rem; }
  .lost-memories__intro-copy { gap: .26rem; }
  .lost-memories__opening { font-size: clamp(.72rem, 2.5vw, .84rem); line-height: 1.32; }
  .lost-memories__invitation { font-size: .84rem; }
  .lost-memories__demo-note { font-size: .58rem; line-height: 1.22; }
  .lost-memories__primary { min-height: 42px; padding: .52rem .82rem; font-size: .75rem; }
  .lost-memories__progress { font-size: .61rem; }
  .lost-memories__letters { gap: .22rem; }
  .lost-memories__letters li { width: 24px; height: 26px; font-size: .78rem; }
  .lost-memories__question-area { gap: .2rem; }
  .lost-memories__trial-title { font-size: .68rem; }
  .lost-memories__question-area h3 { font-size: clamp(.9rem, 3.5vw, 1.12rem); line-height: 1.18; }
  .lost-memories__answers { gap: .28rem; margin-top: .12rem; }
  .lost-memories__answer { min-height: 42px; gap: .35rem; padding: .4rem .52rem; font-size: .7rem; line-height: 1.22; }
  .lost-memories__feedback-area { min-height: 36px; gap: .25rem .5rem; }
  .lost-memories__feedback { font-size: .68rem; }
  .lost-memories__hint-toggle { min-height: 34px; padding: .35rem .6rem; font-size: .66rem; }
  .lost-memories__hint { font-size: .69rem; }
  .lost-memories__continue { min-height: 38px; font-size: .7rem; }
  .lost-memories__secret-word { font-size: clamp(2.3rem, 7vh, 4rem); }
  .lost-memories__final-view h3 { font-size: 1rem; }
  .lost-memories__final-message { font-size: clamp(.7rem, 2.4vw, .82rem); line-height: 1.38; }
}
@media (max-width: 360px) {
  #lost-memories .future-chapter__page { padding: .38rem .48rem .34rem; gap: .12rem; }
  #lost-memories .future-chapter__page h2 { font-size: clamp(1.28rem, 5.7vw, 1.65rem); }
  #lost-memories .future-chapter__intro { font-size: .68rem; line-height: 1.2; }
  .lost-memories__view { padding: .4rem .48rem; }
  .lost-memories__intro-view { grid-template-columns: 68px minmax(0, 1fr); gap: .4rem; }
  .lost-memories__opening { font-size: .69rem; line-height: 1.25; }
  .lost-memories__demo-note { font-size: .55rem; }
  .lost-memories__answer { min-height: 40px; padding: .34rem .4rem; font-size: .66rem; }
  .lost-memories__feedback { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  #lost-memories:not([hidden]) .future-chapter__page { animation: none !important; }
  .lost-memories__magic-particles { display: none !important; }
  .lost-memories__book.is-awakening, .lost-memories__book.is-opening::before { animation: none !important; }
  .lost-memories__experience { animation: none !important; }
  .lost-memories__view:not([hidden]), .lost-memories__answer.is-miss { animation: none !important; }
  .lost-memories__hint:not([hidden]), .lost-memories__answer.is-correct::before,
  .lost-memories__letters li.is-newly-revealed { animation: none !important; }
  .lost-memories__book, .lost-memories__book::after, .lost-memories__primary, .lost-memories__continue,
  .lost-memories__answer, .lost-memories__letters li, .lost-memories__replay { transition: none !important; }
  .lost-memories__book.is-opening { transform: none; }
  .lost-memories__secret-word span { animation: none !important; }
  .lost-memories__experience.is-page-turning::after,
  .lost-memories__experience.is-sparkling::after,
  .lost-memories__experience.is-final-reveal.is-page-turning::after { animation: none !important; }
}

/* Correcciones de composición móvil para cartas y capítulo 6. */
@media (max-width: 760px) {
  #lost-memories.future-chapter {
    overflow-x: hidden;
    overflow-y: auto;
    place-items: start center;
  }
  #lost-memories .future-chapter__page {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible;
    align-content: center;
    grid-template-rows: auto auto auto auto auto auto;
    gap: clamp(.3rem, .85vh, .6rem);
  }
  #lost-memories .lost-memories__experience {
    height: clamp(340px, 52svh, 450px);
    max-height: none;
  }
  #letters.future-chapter {
    overflow-x: hidden;
    overflow-y: auto;
    place-items: start center;
  }
  #letters .future-chapter__page {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: visible;
    align-content: center;
    grid-template-rows: auto auto auto auto auto auto auto;
    gap: clamp(.28rem, 1vh, .55rem);
    padding-block: .75rem .65rem;
  }
  #letters .letters-office__envelopes {
    height: auto;
    min-height: 0;
    grid-template-rows: repeat(3, minmax(104px, auto));
    align-self: center;
    gap: .22rem .38rem;
    padding: .1rem .15rem;
  }
  #letters .letters-office__envelope {
    height: auto;
    min-height: 104px;
    gap: .24rem;
    padding: .18rem .12rem;
  }
  #letters .letters-office__envelope-art {
    width: clamp(104px, 29vw, 132px);
    height: clamp(66px, 18.5vw, 82px);
  }
  #letters .letters-office__label {
    max-width: 19ch;
    font-size: clamp(.78rem, 3.35vw, .94rem);
    line-height: 1.18;
  }
  #letters .letters-office__hint { font-size: .63rem; }

  #lost-memories .lost-memories__intro-view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: .75rem;
    padding: .8rem .75rem;
  }
  #lost-memories .lost-memories__book {
    width: clamp(160px, 48vw, 205px);
    height: clamp(122px, 19vh, 158px);
  }
  #lost-memories .lost-memories__book.is-opening { transform: translateY(5px); }
  #lost-memories .lost-memories__book::before,
  #lost-memories .lost-memories__book::after { inset: 7px 9px; }
  #lost-memories .lost-memories__book span { font-size: 2.35rem; }
  #lost-memories .lost-memories__book i { bottom: 1rem; font-size: .56rem; }
  #lost-memories .lost-memories__intro-copy {
    width: min(100%, 40rem);
    justify-items: center;
    gap: .42rem;
    text-align: center;
  }
  #lost-memories .lost-memories__opening { font-size: clamp(.83rem, 3.25vw, .98rem); line-height: 1.4; }
  #lost-memories .lost-memories__invitation { font-size: clamp(.9rem, 3.5vw, 1.04rem); }
  #lost-memories .lost-memories__demo-note { font-size: .64rem; line-height: 1.3; }
  #lost-memories .lost-memories__primary { min-height: 44px; font-size: .8rem; }
}
@media (max-width: 360px) {
  #letters .letters-office__envelopes { grid-template-rows: repeat(3, minmax(96px, auto)); }
  #letters .letters-office__envelope { min-height: 96px; }
  #letters .letters-office__envelope-art { width: clamp(96px, 30vw, 108px); height: clamp(62px, 19vw, 70px); }
  #letters .letters-office__label { font-size: clamp(.76rem, 3.6vw, .83rem); }
  #lost-memories .lost-memories__intro-view { gap: .5rem; padding: .5rem .42rem; }
  #lost-memories .lost-memories__book { width: clamp(150px, 50vw, 178px); height: clamp(112px, 17vh, 136px); }
}
@media (max-height: 620px) and (max-width: 760px) {
  #letters .future-chapter__page { align-content: start; }
  #lost-memories .lost-memories__intro-view { gap: .35rem; }
  #lost-memories .lost-memories__book { height: 108px; }
  #lost-memories .lost-memories__intro-copy { gap: .28rem; }
}

/* Chapter 6: reveal the completed, personal story in clear, scrollable pages. */
#lost-memories [hidden] { display: none !important; }
#lost-memories .lost-memories__opening,
#lost-memories .lost-memories__final-message { white-space: pre-line; }
#lost-memories .lost-memories__question-area { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#lost-memories .lost-memories__transition-view { display: grid; align-content: center; justify-items: center; gap: clamp(.8rem, 2.5vh, 1.5rem); padding: clamp(1rem, 4vw, 3rem); text-align: center; }
#lost-memories .lost-memories__transition-sigil { color: #f2d795; font: clamp(1.4rem, 4vw, 2.2rem)/1 var(--serif); letter-spacing: .25em; text-shadow: 0 0 16px rgb(238 207 134 / 68%), 0 0 28px rgb(199 159 224 / 45%); animation: lost-memory-sigil-awaken 1.25s ease-in-out infinite; }
#lost-memories .lost-memories__transition-message { max-width: 36ch; margin: 0; color: #fff1cf; font: italic clamp(1.05rem, 2.7vw, 1.55rem)/1.5 var(--serif); text-wrap: balance; text-shadow: 0 0 17px rgb(230 199 133 / 24%); }
#lost-memories .lost-memories__final-view { display: block; padding: clamp(.55rem, 1.4vh, 1rem); text-align: center; }
#lost-memories .lost-memories__revelation { display: grid; min-height: 100%; align-content: center; justify-items: center; gap: clamp(.4rem, 1.1vh, .8rem); padding: clamp(.5rem, 1.8vw, 1.2rem); }
#lost-memories .lost-memories__celebration-title { color: #f2d795; font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: .04em; text-shadow: 0 0 15px rgb(230 194 120 / 40%); }
#lost-memories .lost-memories__celebration-message { max-width: 58ch; margin: 0; color: #f4eada; font: clamp(.83rem, 1.4vw, 1rem)/1.55 var(--sans); white-space: pre-line; }
#lost-memories .lost-memories__letter-page { display: grid; width: min(100%, 790px); min-height: 100%; align-content: start; gap: clamp(.55rem, 1.3vh, 1rem); margin: 0 auto; padding: clamp(1.1rem, 3vw, 2.2rem) clamp(1rem, 5vw, 3.5rem); border: 1px solid rgb(207 184 220 / 88%); outline: 1px solid rgb(212 179 112 / 55%); outline-offset: -7px; border-radius: 5px 15px 5px 15px; color: #3b3045; background: radial-gradient(ellipse at 12% 3%, rgb(221 211 237 / 76%), transparent 39%), radial-gradient(ellipse at 92% 88%, rgb(224 203 237 / 48%), transparent 38%), repeating-linear-gradient(0deg, rgb(116 89 128 / 3%) 0 1px, transparent 1px 5px), linear-gradient(145deg, #fbf5e9, #f1e9f2 58%, #f8f1e4); box-shadow: 0 12px 32px rgb(3 5 18 / 28%), inset 0 0 25px rgb(125 88 145 / 8%); text-align: left; }
#lost-memories .lost-memories__letter-ornament { margin: 0; color: #9777a2; font: 1rem/1.2 var(--serif); letter-spacing: .2em; text-align: center; }
#lost-memories .lost-memories__letter-title { max-width: 34ch; margin: 0 auto; color: #50385e; font: 600 clamp(1.2rem, 2.6vw, 1.7rem)/1.2 var(--serif); text-align: center; text-wrap: balance; }
#lost-memories .lost-memories__final-message { max-width: 66ch; margin: 0 auto; color: #3f3447; font: clamp(.88rem, 1.4vw, 1.02rem)/1.72 var(--sans); overflow-wrap: anywhere; }
#lost-memories .lost-memories__letter-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem; margin-top: .35rem; }
#lost-memories .lost-memories__letter-page.is-opening { animation: lost-memory-paper-reveal .58s cubic-bezier(.2,.72,.2,1) both; }
@keyframes lost-memory-paper-reveal { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 760px) {
  #lost-memories .lost-memories__opening { font-size: clamp(.82rem, 3.1vw, .96rem); line-height: 1.42; }
  #lost-memories .lost-memories__trial-view { grid-template-rows: auto minmax(0, 1fr) auto; }
  #lost-memories .lost-memories__question-area { padding: .1rem .08rem; }
  #lost-memories .lost-memories__transition-view { padding: 1rem .8rem; }
  #lost-memories .lost-memories__letter-page { padding: 1rem .9rem 1.2rem; }
  #lost-memories .lost-memories__final-message { font-size: clamp(.86rem, 3.35vw, .98rem); line-height: 1.62; }
  #lost-memories .lost-memories__letter-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  #lost-memories .lost-memories__transition-sigil { animation: none !important; }
  #lost-memories .lost-memories__letter-page.is-opening { animation: none !important; }
}

/* Capítulo 6: lectura alineada y opciones uniformes dentro de cada prueba. */
#lost-memories .lost-memories__trial-view {
  align-items: stretch;
  gap: clamp(.45rem, 1.2vh, .8rem);
}
#lost-memories .lost-memories__question-area {
  width: min(100%, 760px);
  justify-self: center;
  align-content: start;
  justify-items: stretch;
  gap: clamp(.4rem, .9vh, .65rem);
  margin-inline: auto;
  padding: clamp(.25rem, .8vw, .65rem) clamp(.35rem, 1vw, .85rem);
}
#lost-memories #lost-memories-trial-title {
  color: #e4cf9a;
  font: italic clamp(1rem, 1.7vw, 1.2rem)/1.3 var(--serif);
  text-align: left;
}
#lost-memories #lost-memories-narration {
  max-width: 70ch;
  color: rgb(235 224 242 / 86%);
  font: .88rem/1.5 var(--sans);
  text-align: left;
}
#lost-memories #lost-memories-question-title {
  max-width: 66ch;
  margin-block: .1rem .15rem;
  text-align: left;
}
#lost-memories .lost-memories__answers {
  width: min(100%, 680px);
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  margin-top: .12rem;
}
#lost-memories .lost-memories__answer {
  min-height: 48px;
  padding: .68rem .9rem;
  line-height: 1.4;
}
#lost-memories .lost-memories__feedback-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "message message" "hint hint" "hint-toggle continue";
  align-content: start;
  align-items: center;
  justify-content: stretch;
  gap: .4rem .65rem;
  min-height: 0;
}
#lost-memories #lost-memories-feedback {
  grid-area: message;
  min-height: 2.7em;
  max-width: 76ch;
  text-align: left;
}
#lost-memories #lost-memories-hint {
  grid-area: hint;
  width: 100%;
  text-align: left;
}
#lost-memories #lost-memories-hint-toggle {
  grid-area: hint-toggle;
  justify-self: start;
}
#lost-memories #lost-memories-continue {
  grid-area: continue;
  justify-self: end;
}
@media (max-width: 760px) {
  #lost-memories .lost-memories__question-area { gap: .38rem; }
  #lost-memories #lost-memories-narration { font-size: .82rem; line-height: 1.42; }
  #lost-memories #lost-memories-question-title { font-size: clamp(1rem, 4.2vw, 1.2rem); }
  #lost-memories .lost-memories__answers { gap: .42rem; }
  #lost-memories .lost-memories__answer { min-height: 46px; padding: .62rem .72rem; font-size: clamp(.78rem, 2.9vw, .88rem); }
  #lost-memories .lost-memories__feedback { font-size: .78rem; line-height: 1.4; }
  #lost-memories #lost-memories-feedback { min-height: 2.8em; }
}

/* Chapter 7: final letter, scoped so the completed chapters keep their layout. */
#final-spell .final-spell__page {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: clamp(.18rem, .65vh, .48rem);
  padding: clamp(.55rem, 1.5vh, 1rem) clamp(.8rem, 4vw, 3rem);
  background: radial-gradient(ellipse at 50% 48%, rgb(172 132 200 / 16%), transparent 48%), radial-gradient(ellipse at 16% 4%, rgb(220 190 132 / 9%), transparent 31%), linear-gradient(145deg, rgb(18 21 48 / 91%), rgb(47 28 58 / 94%));
}
#final-spell .final-spell__page > .eyebrow { color: #dac8eb; font-size: .66rem; letter-spacing: .18em; }
#final-spell .future-chapter__seal { width: clamp(30px, 3.7vh, 38px); font-size: 1rem; }
#final-spell .final-spell__page h2 { font-size: clamp(1.65rem, 4.2vh, 2.65rem); }
#final-spell .chapter-navigation { margin-top: 0; }
.final-spell__experience { position: relative; isolation: isolate; width: min(100%, 920px); height: 100%; min-height: 0; margin: 0 auto; overflow: hidden; border: 1px solid rgb(202 172 220 / 43%); border-radius: 6px 18px 6px 18px; background: linear-gradient(135deg, rgb(42 35 73 / 64%), rgb(53 35 70 / 58%) 54%, rgb(34 34 68 / 66%)); box-shadow: inset 0 0 44px rgb(200 171 223 / 8%), 0 0 30px rgb(184 145 207 / 12%); }
.final-spell__experience::before { position: absolute; z-index: 3; inset: 8px; border: 1px solid rgb(226 194 132 / 21%); border-radius: 3px 13px 3px 13px; content: ""; pointer-events: none; }
.final-spell__experience::after { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at 50% 47%, rgb(241 213 155 / 23%), rgb(185 146 215 / 12%) 35%, transparent 72%); content: ""; opacity: 0; pointer-events: none; }
#final-spell.is-final-spell-opening .final-spell__experience::after { animation: final-spell-glow .7s ease both; }
.final-spell__view { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 0; }
.final-spell__view[hidden], .final-spell__closing[hidden], .final-spell__reveal[hidden] { display: none !important; }
.final-spell__opening { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(1rem, 4vw, 3.5rem); padding: clamp(.8rem, 3vh, 2rem) clamp(.8rem, 4vw, 3rem); }
.final-spell__opening-copy { display: grid; justify-items: start; gap: clamp(.55rem, 1.8vh, 1rem); max-width: 590px; text-align: left; }
.final-spell__opening-copy .future-chapter__intro { color: #f1e7d7; font-size: clamp(.92rem, 1.55vw, 1.08rem); line-height: 1.65; }
.final-spell__opening-title { margin: 0; color: #ecd9a8; font: italic clamp(1.05rem, 2vw, 1.35rem)/1.3 var(--serif); }
.final-spell__book { position: relative; display: grid; width: min(100%, 280px); height: clamp(135px, 24vh, 205px); place-items: center; justify-self: center; perspective: 750px; color: #ead29a; filter: drop-shadow(0 17px 20px rgb(4 5 20 / 44%)); transition: transform .7s cubic-bezier(.2,.72,.2,1), filter .6s ease; }
.final-spell__book::before, .final-spell__book::after { position: absolute; inset: 9px 12px; border: 2px solid #c7a765; border-radius: 8px 16px 16px 8px; background: linear-gradient(90deg, #30223f 0 8%, #856847 9%, #d6c49b 12%, #f1e7cf 19%, #d6c49b 22%, #3a2949 23%); box-shadow: inset 0 0 0 5px rgb(18 17 39 / 72%), inset 0 0 0 7px rgb(205 171 103 / 63%), 0 0 24px rgb(193 152 217 / 18%); content: ""; transform: rotate(-3deg); }
.final-spell__book::after { z-index: 1; border-radius: 6px 14px 14px 6px; background: radial-gradient(circle at 52% 45%, rgb(227 193 120 / 19%), transparent 40%), linear-gradient(135deg, #715672, #322440 72%, #52374e); transform: rotateY(0) rotate(-3deg); transform-origin: left center; transition: transform .72s cubic-bezier(.2,.72,.2,1), box-shadow .55s ease; }
.final-spell__book span, .final-spell__book i { position: relative; z-index: 2; }
.final-spell__book span { font: 2.4rem/1 var(--serif); text-shadow: 0 0 20px rgb(238 205 129 / 65%); }
.final-spell__book i { position: absolute; bottom: 25%; font: italic .64rem/1 var(--serif); letter-spacing: .25em; }
.final-spell__book.is-opening { transform: translateX(28px) scale(1.04); filter: drop-shadow(0 18px 32px rgb(237 198 121 / 38%)); }
.final-spell__book.is-opening::after { box-shadow: inset 0 0 0 5px rgb(18 17 39 / 72%), inset 0 0 0 7px rgb(205 171 103 / 63%), 22px 0 45px rgb(237 199 128 / 46%); transform: rotateY(-150deg) rotate(-3deg); }
.final-spell__button, .final-spell__reveal { min-height: 44px; padding: .7rem 1.15rem; border: 1px solid rgb(222 194 131 / 69%); border-radius: 4px 13px 4px 13px; color: #f5e8cb; background: linear-gradient(135deg, rgb(97 70 112 / 91%), rgb(55 43 79 / 94%)); box-shadow: 0 0 20px rgb(190 150 210 / 17%), inset 0 0 15px rgb(233 202 143 / 7%); font: 600 .86rem/1.2 var(--sans); cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; }
.final-spell__button:hover, .final-spell__button:focus-visible, .final-spell__reveal:hover, .final-spell__reveal:focus-visible { transform: translateY(-2px); border-color: #f0d797; box-shadow: 0 0 23px rgb(214 177 115 / 29%), inset 0 0 17px rgb(233 202 143 / 11%); }
.final-spell__button:disabled { opacity: .7; cursor: wait; }
.final-spell__reading { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(159 124 182 / 62%) transparent; padding: clamp(.7rem, 2vh, 1.3rem) clamp(.65rem, 3vw, 2rem); }
.final-spell__paper { position: relative; width: min(100%, 790px); min-height: 100%; margin: 0 auto; padding: clamp(1.15rem, 3vw, 2.2rem) clamp(1rem, 5vw, 3.5rem); border: 1px solid rgb(210 185 219 / 83%); outline: 1px solid rgb(212 179 112 / 44%); outline-offset: -7px; border-radius: 5px 15px 5px 15px; color: #382e45; background: radial-gradient(ellipse at 15% 2%, rgb(222 211 236 / 74%), transparent 40%), radial-gradient(ellipse at 90% 90%, rgb(220 200 233 / 45%), transparent 37%), repeating-linear-gradient(0deg, rgb(116 89 128 / 3%) 0 1px, transparent 1px 5px), linear-gradient(145deg, #fbf5e9, #f2ebf1 58%, #f8f1e4); box-shadow: 0 12px 35px rgb(3 5 18 / 26%), inset 0 0 28px rgb(125 88 145 / 9%); text-align: left; }
.final-spell__paper-ornament { margin: 0 0 .5rem; color: #96739f; font: 1rem/1.3 var(--serif); letter-spacing: .22em; text-align: center; }
.final-spell__paper > h3, .final-spell__wishes h3 { margin: 0 auto .8rem; color: #50385e; font: 600 clamp(1.25rem, 2.5vw, 1.7rem)/1.2 var(--serif); text-align: center; }
.final-spell__letter { min-height: 5rem; margin: 0; color: #3f3447; font: clamp(.92rem, 1.45vw, 1.04rem)/1.75 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.final-spell__letter.is-writing { text-shadow: 0 0 9px rgb(178 135 65 / 21%); }
.final-spell__reveal { display: block; min-height: 38px; margin: .8rem 0 0 auto; padding: .52rem .85rem; color: #5c456d; background: rgb(255 250 241 / 76%); font-size: .75rem; }
.final-spell__photo { display: grid; width: min(100%, 410px); min-height: 115px; margin: 1.25rem auto; padding: .55rem; place-items: center; border: 1px solid rgb(164 127 177 / 63%); outline: 1px solid rgb(209 176 110 / 60%); outline-offset: -5px; color: #695878; background: linear-gradient(145deg, rgb(255 255 255 / 59%), rgb(225 215 232 / 67%)); box-shadow: 0 8px 20px rgb(62 45 71 / 13%), inset 0 0 18px rgb(255 255 255 / 62%); text-align: center; }
.final-spell__photo img { display: block; width: 100%; max-height: 310px; object-fit: contain; }
.final-spell__photo img[hidden], .final-spell__photo figcaption[hidden] { display: none; }
.final-spell__photo figcaption { padding: .6rem; color: #766582; font: italic .88rem/1.5 var(--serif); }
.final-spell__photo figcaption span { color: #af8d53; font-size: 1.4rem; }
.final-spell__wishes { margin-top: 1rem; padding: 1rem 0 .65rem; border-top: 1px solid rgb(147 111 163 / 30%); text-align: center; }
.final-spell__wishes .final-spell__paper-ornament { margin-bottom: .55rem; color: #b18b54; }
.final-spell__wishes h3 { margin-bottom: .55rem; font-size: clamp(1.15rem, 2.3vw, 1.5rem); }
.final-spell__wishes > p:last-child { max-width: 58ch; margin: 0 auto; color: #55445e; font: .94rem/1.65 var(--sans); }
.final-spell__closing { padding: 1rem 0 .4rem; border-top: 1px solid rgb(147 111 163 / 30%); text-align: center; }
.final-spell__closing.is-revealed { animation: final-spell-closing-in .7s ease both; }
.final-spell__closing-stars { margin: 0 0 .55rem; color: #ad8850; font: 1.2rem/1.2 var(--serif); letter-spacing: .3em; }
.final-spell__candle { position: relative; display: block; width: 18px; height: 36px; margin: 0 auto .4rem; border: 1px solid rgb(198 165 107 / 76%); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #d9c8a3, #fff3d5 45%, #d6c296); box-shadow: inset 2px 0 4px rgb(117 82 125 / 17%), 0 3px 8px rgb(61 43 62 / 15%); }
.final-spell__candle::before { position: absolute; top: -3px; left: 50%; width: 4px; height: 5px; border-radius: 50%; background: #594253; content: ""; transform: translateX(-50%); }
.final-spell__candle-flame { position: absolute; top: -16px; left: 50%; width: 10px; height: 15px; border-radius: 55% 45% 55% 45%; background: radial-gradient(ellipse at 50% 68%, #fff5d3 0 14%, #f3cf78 37%, #bf8f50 70%, transparent 73%); filter: drop-shadow(0 0 4px rgb(245 202 113 / 70%)); opacity: 0; transform: translateX(-50%) scale(.25); transform-origin: 50% 100%; }
.final-spell__closing.is-revealed .final-spell__candle-flame { animation: final-spell-candle-light .75s ease-out forwards, final-spell-flame-dance 2.8s ease-in-out .75s infinite alternate; }
.final-spell__closing > p:not(.final-spell__closing-stars) { max-width: 48ch; margin: 0 auto 1rem; color: #594368; font: italic clamp(1.05rem, 2.1vw, 1.4rem)/1.5 var(--serif); }
@keyframes final-spell-glow { 0% { opacity: 0; } 36% { opacity: 1; } 100% { opacity: 0; } }
@keyframes final-spell-closing-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes final-spell-candle-light { 0% { opacity: 0; transform: translateX(-50%) scale(.2); filter: drop-shadow(0 0 0 transparent); } 55% { opacity: 1; transform: translateX(-50%) scale(1.12); filter: drop-shadow(0 0 12px rgb(245 202 113 / 78%)); } 100% { opacity: 1; transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 6px rgb(245 202 113 / 58%)); } }
@keyframes final-spell-flame-dance { from { transform: translateX(-50%) rotate(-3deg) scale(.98); } to { transform: translateX(-50%) rotate(3deg) scale(1.04); } }
@media (max-width: 700px) {
  #final-spell .final-spell__page { gap: .25rem; padding: .52rem .62rem .45rem; }
  #final-spell .final-spell__page > .eyebrow { font-size: .57rem; }
  #final-spell .future-chapter__seal { width: 27px; font-size: .85rem; }
  #final-spell .final-spell__page h2 { font-size: clamp(1.38rem, 6.1vw, 2rem); }
  .final-spell__opening { grid-template-columns: minmax(74px, .42fr) minmax(0, 1fr); gap: .65rem; padding: .6rem .65rem; }
  .final-spell__book { width: 100%; height: clamp(100px, 20vh, 155px); }
  .final-spell__book::before, .final-spell__book::after { inset: 7px 2px; }
  .final-spell__book span { font-size: 1.8rem; }
  .final-spell__book i { font-size: .48rem; }
  .final-spell__opening-copy { gap: .48rem; }
  .final-spell__opening-title { font-size: 1rem; }
  .final-spell__opening-copy .future-chapter__intro { font-size: clamp(.75rem, 3.15vw, .91rem); line-height: 1.4; }
  .final-spell__button { min-height: 42px; padding: .6rem .75rem; font-size: .74rem; }
  .final-spell__reading { padding: .45rem .42rem; }
  .final-spell__paper { padding: 1.05rem .95rem; }
  .final-spell__paper > h3 { margin-bottom: .55rem; font-size: 1.2rem; }
  .final-spell__letter { font-size: .86rem; line-height: 1.6; }
  .final-spell__photo { min-height: 100px; margin: 1rem auto; }
  .final-spell__wishes > p:last-child { font-size: .84rem; line-height: 1.55; }
}
@media (max-width: 360px) {
  #final-spell .final-spell__page { padding: .4rem .48rem .36rem; }
  #final-spell .final-spell__page h2 { font-size: 1.34rem; }
  .final-spell__opening { grid-template-columns: 68px minmax(0, 1fr); gap: .45rem; padding-inline: .45rem; }
  .final-spell__opening-copy .future-chapter__intro { font-size: .72rem; line-height: 1.35; }
  .final-spell__opening-title { font-size: .9rem; }
  .final-spell__button { min-height: 40px; font-size: .7rem; }
  .final-spell__paper { padding: .95rem .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  #final-spell .final-spell__book, #final-spell .final-spell__book::after,
  .final-spell__button, .final-spell__reveal { transition: none !important; }
  #final-spell.is-final-spell-opening .final-spell__experience::after,
  .final-spell__closing.is-revealed { animation: none !important; }
  .final-spell__closing.is-revealed .final-spell__candle-flame { animation: none !important; opacity: 1; transform: translateX(-50%); }
}

/* Orientation toast: only the chapter 5 map benefits from a wider phone layout. */
.adventure-orientation-hint { top: .55rem; right: 2.2rem; left: 2.2rem; display: none; align-items: center; justify-content: center; gap: .4rem; min-height: 34px; padding: .25rem .5rem; border: 1px solid rgb(217 189 136 / 34%); border-radius: 999px 999px 4px 999px; color: #eee4f2; background: rgb(20 23 49 / 82%); box-shadow: 0 4px 18px rgb(3 5 20 / 26%), 0 0 12px rgb(180 144 212 / 12%); font: .66rem/1.25 var(--sans); text-align: center; opacity: 0; transform: translateY(-5px); transition: opacity .28s ease, transform .28s ease; pointer-events: none; backdrop-filter: blur(5px); }
.adventure-orientation-hint.is-visible { opacity: 1; transform: translateY(0); }
.adventure-orientation-hint__icon { display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; border: 1px solid rgb(220 192 136 / 65%); border-radius: 50%; color: #f0d99e; font: 1rem/1 var(--serif); }
.adventure-orientation-hint button { pointer-events: auto; }
.adventure-orientation-hint[hidden] { display: none !important; }
@media (max-width: 760px) and (orientation: portrait) {
  /* The portrait map is laid out for phones; the old rotate prompt obscured its first landmarks. */
  .adventure-orientation-hint:not([hidden]) { display: none; }
}
@media (max-width: 760px) and (orientation: landscape) {
  #adventures .adventures__page { gap: .14rem; padding: .3rem .55rem .25rem; }
  #adventures .adventures__page > .eyebrow { font-size: .54rem; }
  #adventures #adventures-title { max-width: 38ch; font-size: clamp(1.12rem, 3.8vw, 1.6rem); line-height: 1; }
  #adventures .future-chapter__intro { max-width: 70ch; font-size: clamp(.62rem, 1.8vw, .77rem); line-height: 1.15; }
  #adventures .adventure-map { width: min(100%, 1100px, 105svh); aspect-ratio: 1100 / 540; }
  #adventures .adventure-map__landscape--desktop { display: inline; }
  #adventures .adventure-map__landscape--mobile { display: none; }
  #adventures .adventure-map__point { left: var(--point-x); top: var(--point-y); width: 42px; }
  #adventures .adventure-map__marker { width: 36px; font-size: .95rem; }
  #adventures .adventure-map__label { width: min(112px, 25vw); min-width: 84px; max-width: min(112px, 25vw); min-height: 2.4em; padding: .18rem .26rem; font-size: clamp(.53rem, 1.65vw, .66rem); line-height: 1.1; }
  #adventures .adventure-map__point[data-label-side="left"] .adventure-map__label { width: min(110px, 24vw); }
  #adventures .adventure-map__point[data-label-side="right"] .adventure-map__label { width: min(110px, 24vw); }
  #adventures .adventure-map__point:nth-child(1) .adventure-map__label { left: 0; right: auto; transform: none; text-align: left; }
  #adventures .adventure-map__point:nth-child(5) .adventure-map__label { right: 0; left: auto; transform: none; text-align: right; }
  #adventures .adventures__closing { font-size: .62rem; line-height: 1.15; }
  #adventures .adventures__page > .chapter-navigation { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .adventure-orientation-hint { transition: none !important; }
}

/* Keep adventure-map labels fully contained without changing their placement. */
#adventures .adventure-map__label { height: auto; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
@media (max-width: 760px) and (orientation: portrait) {
  #adventures .adventure-map__label { display: grid; width: 104px; max-width: 104px; min-height: 3.1rem; height: auto; padding: .38rem .36rem; place-items: center; line-height: 1.28; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  #adventures .adventure-map__point:nth-child(1) .adventure-map__label { width: 112px; max-width: 112px; }
  #adventures .adventure-map__point:nth-child(2) .adventure-map__label { width: 94px; max-width: 94px; }
  #adventures .adventure-map__point:nth-child(3) .adventure-map__label { width: 104px; max-width: 104px; }
  #adventures .adventure-map__point:nth-child(4) .adventure-map__label { width: 100px; max-width: 100px; }
  #adventures .adventure-map__point:nth-child(5) .adventure-map__label { width: 104px; max-width: 104px; }
}

/* Capítulo 5: atlas ilustrado y animaciones locales, sin alterar posiciones ni navegación. */
#adventures .adventure-map__atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
#adventures .adventure-map__stardust,
#adventures .adventure-map__glow { position: absolute; inset: 0; }
#adventures .adventure-map__stardust {
  opacity: .48;
  background-image:
    radial-gradient(circle, rgb(255 231 178 / 92%) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgb(224 202 246 / 82%) 0 .8px, transparent 1.7px),
    radial-gradient(circle, rgb(255 242 213 / 67%) 0 .65px, transparent 1.6px);
  background-size: 173px 151px, 227px 193px, 281px 239px;
  background-position: 17px 26px, 83px 57px, 131px 104px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 83%);
  animation: adventures-stardust-drift 36s linear infinite;
}
#adventures .adventure-map__glow {
  opacity: .42;
  background: radial-gradient(ellipse at 50% 48%, transparent 29%, rgb(193 159 225 / 13%) 69%, transparent 100%), radial-gradient(ellipse at 22% 25%, rgb(235 198 132 / 10%), transparent 36%);
  animation: adventures-map-breathe 9s ease-in-out infinite alternate;
}
#adventures.adventures--entering #adventures-title { animation: adventures-heading-arrive .62s .04s both; }
#adventures.adventures--entering .adventures__intro { animation: adventures-heading-arrive .68s .16s both; }
#adventures.adventures--entering .adventure-map { animation: adventures-map-arrive .9s cubic-bezier(.18,.75,.22,1) both; }
#adventures.adventures--entering .adventure-map__stardust { animation: adventures-star-reveal .9s ease-out both, adventures-stardust-drift 36s .9s linear infinite; }
#adventures.adventures--entering .adventure-map__point .adventure-map__marker { animation: adventures-portal-arrive .66s cubic-bezier(.18,.75,.22,1) both; }
#adventures.adventures--entering .adventure-map__point:nth-child(2) .adventure-map__marker { animation-delay: .08s; }
#adventures.adventures--entering .adventure-map__point:nth-child(3) .adventure-map__marker { animation-delay: .15s; }
#adventures.adventures--entering .adventure-map__point:nth-child(4) .adventure-map__marker { animation-delay: .22s; }
#adventures.adventures--entering .adventure-map__point:nth-child(5) .adventure-map__marker { animation-delay: .29s; }
#adventures .adventure-map__point .adventure-map__marker { position: relative; }
#adventures .adventure-map__point .adventure-map__marker::after {
  position: absolute;
  inset: -7px;
  border: 1px solid rgb(246 219 157 / 0%);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}
#adventures .adventure-map__point.is-awakened .adventure-map__marker::after { animation: adventures-portal-ring .78s ease-out both; }
#adventures .adventure-map__point[data-status-type="confirmed"] .adventure-map__marker { box-shadow: 0 0 0 4px rgb(231 194 119 / 19%), 0 0 24px rgb(238 198 116 / 38%), inset 0 0 14px rgb(255 229 171 / 25%); }
#adventures .adventure-map__point[data-status-type="proposal"] .adventure-map__marker { border-style: dashed; }
#adventures .adventure-map__point[data-status-type="secret"] .adventure-map__marker { box-shadow: 0 0 0 4px rgb(203 168 227 / 19%), 0 0 25px rgb(202 163 226 / 42%), inset 0 0 16px rgb(243 218 167 / 25%); }
#adventure-detail-dialog[open] { animation: adventures-dialog-in .78s cubic-bezier(.18,.76,.2,1) both; }
#adventure-detail-dialog[open]::backdrop { animation: adventures-backdrop-in .62s ease-out both; }
#adventure-detail-dialog[open] .adventure-detail__paper { transform-origin: 50% 0%; animation: adventures-scroll-unfurl .78s cubic-bezier(.18,.76,.2,1) both; }
#adventure-detail-dialog[open] .adventure-detail__sigil { animation: adventures-sigil-arrive .58s .04s ease-out both; }
#adventure-detail-dialog[open] .adventure-detail__eyebrow { animation: adventures-copy-arrive .42s .12s both; }
#adventure-detail-dialog[open] #adventure-detail-title { animation: adventures-copy-arrive .48s .18s both; }
#adventure-detail-dialog[open] #adventure-detail-complement { animation: adventures-copy-arrive .44s .25s both; }
#adventure-detail-dialog[open] #adventure-detail-description { animation: adventures-copy-arrive .48s .3s both; }
#adventure-detail-dialog[open] #adventure-detail-warning { animation: adventures-copy-arrive .46s .36s both; }
#adventure-detail-dialog[open] #adventure-detail-closing { animation: adventures-copy-arrive .46s .42s both; }
#adventure-detail-dialog[open] .adventure-detail__vignette,
#adventure-detail-dialog[open] .adventure-detail__figure { animation: adventures-illustration-arrive .62s .22s cubic-bezier(.18,.76,.2,1) both; }
#adventure-detail-dialog.is-secret[open] .adventure-detail__figure { animation-delay: .52s; }
#adventure-detail-dialog[open] .adventure-detail__return { animation: adventures-copy-arrive .4s .47s both; }
#adventure-detail-dialog.is-closing { animation: adventures-dialog-out .52s cubic-bezier(.45,0,.8,.35) both; }
#adventure-detail-dialog.is-closing::backdrop { animation: adventures-backdrop-out .48s ease-in both; }
#adventure-detail-dialog.is-closing .adventure-detail__paper { animation: adventures-scroll-roll-up .5s cubic-bezier(.45,0,.8,.35) both; }
#adventure-detail-dialog.is-secret[open] .adventure-detail__figure { box-shadow: 0 0 0 1px rgb(218 184 235 / 75%), 0 0 32px rgb(186 143 221 / 38%), 0 10px 30px rgb(54 39 64 / 18%); }
#adventure-detail-dialog.is-epilogue[open] .adventure-detail__paper { background: radial-gradient(ellipse at 50% 10%, rgb(221 202 240 / 62%), transparent 39%), radial-gradient(ellipse at 95% 90%, rgb(229 197 133 / 28%), transparent 42%), linear-gradient(145deg, #fbf5e8, #eee5f2 60%, #faf0df); }
#adventure-detail-dialog.is-epilogue[open] #adventure-epilogue-title { animation: adventures-copy-arrive .5s .13s both; }
#adventure-detail-dialog.is-epilogue[open] .adventure-epilogue__message { animation: adventures-copy-arrive .55s .23s both; }
#adventure-detail-dialog.is-epilogue[open] .adventure-epilogue__emphasis { animation: adventures-copy-arrive .5s .36s both; }
#adventure-detail-dialog.is-epilogue[open] .adventure-epilogue__final { animation: adventures-copy-arrive .52s .46s both, adventures-final-glow 3.8s 1s ease-in-out infinite alternate; }
@keyframes adventures-stardust-drift { to { background-position: 191px 178px, -38px 250px, 348px -135px; } }
@keyframes adventures-map-breathe { from { opacity: .23; } to { opacity: .52; } }
@keyframes adventures-heading-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes adventures-map-arrive { from { opacity: .18; transform: scale(.965); filter: brightness(.78) saturate(.8); } to { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); } }
@keyframes adventures-star-reveal { from { opacity: 0; } to { opacity: .48; } }
@keyframes adventures-portal-arrive { from { filter: brightness(.65); box-shadow: 0 0 0 0 rgb(238 198 116 / 0%); } 64% { filter: brightness(1.45); } to { filter: brightness(1); } }
@keyframes adventures-portal-ring { 0% { opacity: .78; transform: scale(.58); border-color: rgb(246 219 157 / 88%); box-shadow: 0 0 12px rgb(246 219 157 / 45%); } 100% { opacity: 0; transform: scale(1.75); border-color: rgb(246 219 157 / 0%); box-shadow: 0 0 26px rgb(195 159 226 / 0%); } }
@keyframes adventures-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes adventures-backdrop-in { from { background: rgb(9 8 25 / 0%); backdrop-filter: blur(0); } to { background: rgb(9 8 25 / 78%); backdrop-filter: blur(6px); } }
@keyframes adventures-scroll-unfurl { from { opacity: .28; clip-path: inset(0 0 82% 0 round 12px); transform: translateY(-9px) scaleY(.84); } 62% { clip-path: inset(0 0 0 0 round 8px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 5px 5px 18px 5px); transform: translateY(0) scaleY(1); } }
@keyframes adventures-copy-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes adventures-illustration-arrive { from { opacity: 0; transform: translateY(8px) scale(.965); filter: saturate(.7) brightness(.76); } to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1) brightness(1); } }
@keyframes adventures-dialog-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes adventures-backdrop-out { to { background: rgb(9 8 25 / 0%); backdrop-filter: blur(0); } }
@keyframes adventures-scroll-roll-up { from { opacity: 1; clip-path: inset(0 0 0 0 round 5px); transform: scaleY(1); } to { opacity: 0; clip-path: inset(0 0 76% 0 round 14px); transform: translateY(-5px) scaleY(.86); } }
@keyframes adventures-final-glow { from { text-shadow: 0 0 5px rgb(202 164 111 / 10%); } to { text-shadow: 0 0 15px rgb(202 164 111 / 34%), 0 0 24px rgb(177 143 205 / 24%); } }
@media (max-width: 760px) {
  #adventures .adventure-map__stardust { opacity: .38; }
  #adventures .adventure-map__glow { opacity: .32; }
  #adventure-detail-dialog[open] .adventure-detail__paper { transform-origin: 50% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  #adventures .adventure-map__stardust,
  #adventures .adventure-map__glow,
  #adventures.adventures--entering #adventures-title,
  #adventures.adventures--entering .adventures__intro,
  #adventures.adventures--entering .adventure-map,
  #adventures.adventures--entering .adventure-map__stardust,
  #adventures.adventures--entering .adventure-map__point .adventure-map__marker,
  #adventures .adventure-map__point.is-awakened .adventure-map__marker::after,
  #adventure-detail-dialog[open],
  #adventure-detail-dialog[open]::backdrop,
  #adventure-detail-dialog[open] .adventure-detail__paper,
  #adventure-detail-dialog[open] .adventure-detail__sigil,
  #adventure-detail-dialog[open] .adventure-detail__eyebrow,
  #adventure-detail-dialog[open] #adventure-detail-title,
  #adventure-detail-dialog[open] #adventure-detail-complement,
  #adventure-detail-dialog[open] #adventure-detail-description,
  #adventure-detail-dialog[open] #adventure-detail-warning,
  #adventure-detail-dialog[open] #adventure-detail-closing,
  #adventure-detail-dialog[open] .adventure-detail__vignette,
  #adventure-detail-dialog[open] .adventure-detail__figure,
  #adventure-detail-dialog[open] .adventure-detail__return,
  #adventure-detail-dialog.is-closing,
  #adventure-detail-dialog.is-closing::backdrop,
  #adventure-detail-dialog.is-closing .adventure-detail__paper,
  #adventure-detail-dialog.is-epilogue[open] #adventure-epilogue-title,
  #adventure-detail-dialog.is-epilogue[open] .adventure-epilogue__message,
  #adventure-detail-dialog.is-epilogue[open] .adventure-epilogue__emphasis,
  #adventure-detail-dialog.is-epilogue[open] .adventure-epilogue__final { animation: none !important; }
}

/* Chapter 7 wish ritual: the candle sits beside the existing enchanted book. */
.final-spell__ritual-art { position: relative; display: grid; width: min(100%, 310px); min-width: 0; justify-self: center; align-items: center; isolation: isolate; }
.final-spell__ritual-art .final-spell__book { width: min(100%, 280px); }
.final-spell__ritual-art .final-spell__candle { position: absolute; z-index: 3; width: 36px; height: 72px; right: clamp(3px, 4%, 22px); bottom: 11%; margin: 0; transform: scale(1.08); transform-origin: bottom center; }
.final-spell__ritual-art .final-spell__candle-flame { top: -27px; width: 16px; height: 25px; border-radius: 56% 44% 54% 46%; background: radial-gradient(ellipse at 50% 69%, #fff9df 0 12%, #ffe7a0 25%, #efbd60 48%, #b77e42 70%, transparent 74%); filter: drop-shadow(0 0 8px rgb(255 204 103 / 88%)) drop-shadow(0 0 17px rgb(244 177 82 / 48%)); }
.final-spell__ritual-art .final-spell__candle-flame::after { inset: -8px; background: rgb(255 194 91 / 32%); filter: blur(8px); }
.final-spell__ritual-art .final-spell__candle::before { width: 5px; height: 7px; }
.final-spell__candle--lit .final-spell__candle-flame { opacity: 1; animation: final-spell-flame-dance 1.8s ease-in-out infinite alternate; }
.final-spell__candle-flame::after { position: absolute; inset: -5px; border-radius: 50%; background: rgb(238 190 103 / 24%); content: ""; filter: blur(5px); }
.final-spell__candle-smoke { position: absolute; top: -35px; left: 50%; width: 15px; height: 28px; border-radius: 50%; background: radial-gradient(ellipse at 50% 80%, rgb(224 211 232 / 57%), rgb(194 178 211 / 28%) 48%, transparent 75%); filter: blur(1px); opacity: 0; transform: translateX(-50%) scale(.3); }
.final-spell__candle-spark { position: absolute; z-index: 4; right: 7%; bottom: 34%; color: #f0d99e; font: .84rem/1 var(--serif); opacity: 0; }
.final-spell__ritual-art.is-extinguishing .final-spell__candle-flame { animation: final-spell-flame-out .72s ease-out forwards; }
.final-spell__ritual-art.is-extinguishing .final-spell__candle-smoke { animation: final-spell-smoke-rise .9s ease-out .08s both; }
.final-spell__ritual-art.is-extinguishing .final-spell__candle-spark--one { animation: final-spell-spark-one .65s ease-out both; }
.final-spell__ritual-art.is-extinguishing .final-spell__candle-spark--two { animation: final-spell-spark-two .72s ease-out .06s both; }
.final-spell__ritual-art.is-extinguishing .final-spell__book { filter: drop-shadow(0 15px 25px rgb(238 195 119 / 35%)); }
.final-spell__wish-prompt { max-width: 38ch; margin: 0; color: #f4e8d4; font: italic clamp(.9rem, 1.4vw, 1.04rem)/1.42 var(--serif); }
.final-spell__ritual-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.final-spell__open { touch-action: none; user-select: none; -webkit-user-select: none; }
.final-spell__open.is-holding { border-color: #f4dda0; box-shadow: 0 0 27px rgb(239 199 112 / 43%), 0 0 15px rgb(184 147 215 / 30%); }
.final-spell__mic { min-height: 42px; padding: .55rem .8rem; border: 1px solid rgb(202 177 220 / 50%); border-radius: 4px 12px 4px 12px; color: #e9ddf0; background: rgb(45 39 70 / 75%); font: 500 .74rem/1.25 var(--sans); cursor: pointer; }
.final-spell__mic:hover:not(:disabled), .final-spell__mic:focus-visible { border-color: #e5c982; color: #fff0c5; box-shadow: 0 0 16px rgb(194 156 218 / 23%); }
.final-spell__mic:focus-visible { outline: 2px solid #f0d597; outline-offset: 3px; }
.final-spell__mic:disabled { opacity: .58; cursor: wait; }
.final-spell__ritual-status { max-width: 46ch; min-height: 1.25em; margin: 0; color: rgb(227 215 237 / 82%); font: .7rem/1.35 var(--sans); }
@keyframes final-spell-flame-out { 0% { opacity: 1; transform: translateX(-50%) rotate(0) scale(1); filter: drop-shadow(0 0 10px rgb(255 204 103 / 90%)); } 22% { opacity: 1; transform: translateX(-50%) rotate(-10deg) scale(1.12, .88); } 38% { opacity: .94; transform: translateX(-50%) rotate(8deg) scale(.9, 1.18); } 54% { opacity: .82; transform: translateX(-50%) rotate(-14deg) scale(1.08, .9); } 72% { opacity: .58; transform: translateX(-50%) rotate(13deg) scale(.76, 1.08); } 100% { opacity: 0; transform: translateX(-50%) rotate(27deg) scale(.08, .52); filter: drop-shadow(0 0 0 transparent); } }
@keyframes final-spell-smoke-rise { 0% { opacity: 0; transform: translate(-50%, 5px) scale(.35); } 22% { opacity: .72; } 58% { opacity: .48; transform: translate(-43%, -13px) scale(.9, 1.08); } 100% { opacity: 0; transform: translate(-32%, -34px) scale(1.24, 1.4); } }
@keyframes final-spell-spark-one { 0% { opacity: 0; transform: translate(0, 0) scale(.35); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(15px, -23px) scale(.1); } }
@keyframes final-spell-spark-two { 0% { opacity: 0; transform: translate(0, 0) scale(.35); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-16px, -18px) scale(.1); } }
@media (max-width: 700px) {
  .final-spell__ritual-art { width: 100%; }
  .final-spell__ritual-art .final-spell__book { width: 100%; }
  .final-spell__ritual-art .final-spell__candle { width: 36px; height: 72px; right: 0; bottom: 9%; transform: scale(1); }
  .final-spell__opening-copy { min-width: 0; }
  .final-spell__ritual-actions { display: grid; width: 100%; justify-items: stretch; gap: .34rem; }
  .final-spell__mic { min-height: 40px; font-size: .68rem; }
  .final-spell__ritual-status { font-size: .62rem; }
  .final-spell__wish-prompt { font-size: clamp(.76rem, 3vw, .9rem); line-height: 1.32; }
}
@media (prefers-reduced-motion: reduce) {
  .final-spell__candle--lit .final-spell__candle-flame { animation: none !important; }
  .final-spell__ritual-art.is-extinguishing .final-spell__candle-flame { animation: none !important; opacity: 0; }
  .final-spell__ritual-art.is-extinguishing .final-spell__candle-smoke,
  .final-spell__ritual-art.is-extinguishing .final-spell__candle-spark { animation: none !important; opacity: 0; }
  .final-spell__mic, .final-spell__open { transition: none !important; }
}

/* Chapter 5 cinematic finishing: real destination photos, a visible secret-star ritual,
   and temporary dust that returns to the marker that opened the scroll. */
#adventures .adventure-map__atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
#adventures .adventure-map__points { z-index: 1; }
#adventures .adventure-map__hint,
#adventures .adventure-orientation-hint { z-index: 2; }
#adventures .adventure-detail__figure {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100%, 500px);
  height: clamp(168px, 31svh, 300px);
  max-height: none;
  overflow: hidden;
  padding: .42rem;
  border: 1px solid rgb(190 158 214 / 76%);
  background: linear-gradient(135deg, rgb(233 220 244 / 78%), rgb(249 232 194 / 66%));
  box-shadow: 0 12px 30px rgb(54 39 64 / 20%), 0 0 23px rgb(181 143 216 / 22%), inset 0 0 0 1px rgb(255 245 220 / 82%);
}
#adventures .adventure-detail__image {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  border: 1px solid rgb(210 183 133 / 62%);
  box-shadow: 0 0 16px rgb(187 147 219 / 17%);
}
#adventures .adventure-detail__credit {
  flex: 0 0 auto;
  padding: .3rem .15rem 0;
  color: #63556a;
  font: .66rem/1.25 var(--sans);
  text-align: right;
}
#adventures .adventure-detail__credit[hidden] { display: none; }
#adventures .adventure-detail__credit a { color: #644d79; text-decoration-color: rgb(151 119 173 / 65%); text-underline-offset: .15em; }
#adventures .adventure-detail__credit a:focus-visible { outline: 2px solid #9a7740; outline-offset: 2px; }
#adventure-detail-dialog.is-closing { overflow: visible; }
#adventure-detail-dialog .adventure-spell-particles {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
#adventure-detail-dialog .adventure-spell-particles__spark {
  position: absolute;
  width: var(--spark-size, 4px);
  height: var(--spark-size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d3 0 12%, #efd18d 32%, #c6a0e6 70%, transparent 74%);
  box-shadow: 0 0 7px rgb(255 224 151 / 94%), 0 0 16px rgb(177 139 218 / 75%);
  animation: adventures-dust-return .78s cubic-bezier(.18,.68,.2,1) var(--spark-delay, 0ms) both;
}
#adventure-detail-dialog .adventure-spell-particles__spark--1 { filter: hue-rotate(24deg); }
#adventure-detail-dialog .adventure-spell-particles__spark--2 { filter: hue-rotate(-18deg) brightness(1.15); }
#adventures .adventure-map__point.is-returning .adventure-map__marker {
  animation: adventures-return-arrives .42s .42s ease-out both;
}
#adventures .adventure-map__flash {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff2c4;
  box-shadow: 0 0 7px #f5d788, 0 0 13px rgb(190 155 227 / 88%);
  pointer-events: none;
  animation: adventures-point-flash .68s cubic-bezier(.16,.7,.22,1) both;
}
.adventure-secret-stage[hidden] { display: none !important; }
.adventure-secret-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(280px, 50svh, 430px);
  align-content: center;
  justify-items: center;
  gap: .9rem;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgb(151 122 185 / 54%);
  border-radius: 3px 18px 4px 18px;
  background: radial-gradient(ellipse at 50% 48%, rgb(183 147 224 / 24%), transparent 32%), radial-gradient(ellipse at 50% 100%, rgb(222 185 112 / 12%), transparent 48%), linear-gradient(150deg, #17172f, #29203f 58%, #17182f);
  box-shadow: inset 0 0 50px rgb(6 7 22 / 42%);
  text-align: center;
}
.adventure-secret-stage::before,
.adventure-secret-stage::after { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; }
.adventure-secret-stage::before {
  background-image: radial-gradient(circle, rgb(250 229 180 / 84%) 0 1px, transparent 1.8px), radial-gradient(circle, rgb(207 178 235 / 76%) 0 .8px, transparent 1.7px);
  background-size: 71px 83px, 109px 97px;
  background-position: 7px 18px, 38px 49px;
  opacity: .52;
  animation: adventures-secret-sky 18s linear infinite;
}
.adventure-secret-stage::after { background: radial-gradient(ellipse at 50% 55%, transparent 13%, rgb(8 9 26 / 28%) 76%); }
.adventure-secret-stage__dust {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(172 143 226 / 27%), rgb(223 187 120 / 8%) 44%, transparent 72%);
  filter: blur(14px);
  animation: adventures-secret-aura 5s ease-in-out infinite alternate;
}
.adventure-secret-stage__star {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(84px, 15vw, 112px);
  min-height: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(245 218 157 / 82%);
  border-radius: 50%;
  color: #fff0bd;
  background: radial-gradient(circle, rgb(255 240 190 / 33%), rgb(130 97 166 / 23%) 40%, rgb(33 28 55 / 72%) 72%);
  box-shadow: 0 0 0 8px rgb(215 190 241 / 8%), 0 0 25px rgb(246 211 137 / 61%), 0 0 58px rgb(172 137 218 / 40%), inset 0 0 22px rgb(250 224 157 / 32%);
  font: clamp(2.3rem, 6vw, 3.3rem)/1 var(--serif);
  cursor: pointer;
  touch-action: manipulation;
  animation: adventures-star-wait 2.8s ease-in-out infinite;
}
.adventure-secret-stage__star:hover,
.adventure-secret-stage__star:focus-visible { outline: 2px solid #f3dda3; outline-offset: 7px; box-shadow: 0 0 0 10px rgb(215 190 241 / 12%), 0 0 36px rgb(255 225 147 / 82%), 0 0 70px rgb(172 137 218 / 55%); }
.adventure-secret-stage__star:disabled { cursor: default; }
.adventure-secret-stage__star > span { filter: drop-shadow(0 0 12px #f4d98e); }
.adventure-secret-stage__star::after { position: absolute; inset: -15px; border: 1px dotted rgb(246 224 169 / 58%); border-radius: 50%; content: ""; opacity: 0; pointer-events: none; }
.adventure-secret-stage.is-liberating .adventure-secret-stage__star::after { opacity: 1; animation: adventures-star-orbit 1.42s linear both; }
.adventure-secret-stage__hint,
.adventure-secret-stage__instruction { position: relative; z-index: 1; max-width: 34ch; margin: 0; padding-inline: 1rem; color: #f3e8d5; }
.adventure-secret-stage__hint { font: italic clamp(1.05rem, 3vw, 1.35rem)/1.4 var(--serif); text-shadow: 0 0 18px rgb(218 189 239 / 38%); }
.adventure-secret-stage__instruction { color: rgb(231 218 243 / 78%); font: .82rem/1.4 var(--sans); }
.adventure-secret-stage.is-liberating .adventure-secret-stage__star { animation: adventures-star-release 1.42s cubic-bezier(.16,.76,.2,1) both; }
.adventure-secret-stage.is-liberating .adventure-secret-stage__dust { animation: adventures-secret-burst 1.4s ease-out both; }
#adventure-detail-dialog.is-secret-revealing .adventure-detail__paper { animation: adventures-secret-paper 1.05s cubic-bezier(.16,.76,.2,1) both; }
#adventure-detail-dialog.is-secret-revealing .adventure-detail__figure { animation-delay: .2s; }
#adventure-detail-dialog.is-epilogue[open] .adventure-epilogue { position: relative; isolation: isolate; }
#adventure-detail-dialog.is-epilogue[open] .adventure-epilogue::before { position: absolute; z-index: -1; inset: -2rem; border-radius: 50%; background: radial-gradient(ellipse, rgb(176 141 214 / 15%), rgb(224 186 113 / 7%) 48%, transparent 72%); content: ""; animation: adventures-epilogue-aura 5s ease-in-out infinite alternate; }
@keyframes adventures-dust-return { 0% { opacity: 0; transform: translate(0, 0) scale(.25); } 16% { opacity: 1; transform: translate(calc(var(--dx) * -.06), calc(var(--dy) * -.06)) scale(1.3); } 78% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.12); } }
@keyframes adventures-return-arrives { 0% { filter: brightness(1); } 40% { filter: brightness(1.8) drop-shadow(0 0 12px #f1d792); } 100% { filter: brightness(1); } }
@keyframes adventures-point-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.1); } }
@keyframes adventures-secret-sky { to { background-position: 78px 101px, -71px 120px; } }
@keyframes adventures-secret-aura { from { opacity: .52; transform: scale(.8); } to { opacity: 1; transform: scale(1.12); } }
@keyframes adventures-star-wait { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.045); } }
@keyframes adventures-star-release { 0% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 25px rgb(246 211 137 / 61%), 0 0 58px rgb(172 137 218 / 40%); } 32% { transform: scale(1.12) rotate(8deg); filter: brightness(1.45); } 70% { transform: scale(1.65) rotate(-7deg); opacity: .9; } 100% { transform: scale(2.5); opacity: 0; filter: brightness(1.9); } }
@keyframes adventures-star-orbit { from { opacity: .85; transform: rotate(0) scale(.72); } to { opacity: 0; transform: rotate(260deg) scale(1.65); } }
@keyframes adventures-secret-burst { 0% { opacity: .4; transform: scale(.45); } 65% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes adventures-secret-paper { 0% { opacity: .25; clip-path: inset(0 0 75% 0 round 15px); transform: translateY(12px) scale(.93); filter: brightness(.72); } 65% { opacity: 1; clip-path: inset(0 0 0 0 round 8px); filter: brightness(1.12); } 100% { opacity: 1; clip-path: inset(0 0 0 0 round 5px 5px 18px 5px); transform: translateY(0) scale(1); filter: brightness(1); } }
@keyframes adventures-epilogue-aura { from { opacity: .45; transform: scale(.92); } to { opacity: .95; transform: scale(1.05); } }
@media (max-width: 760px) {
  #adventures .adventure-detail__figure { height: clamp(138px, 25svh, 220px); }
  #adventures .adventure-detail__credit { font-size: .6rem; }
  .adventure-secret-stage { min-height: clamp(250px, 44svh, 360px); }
  .adventure-secret-stage__star { width: clamp(78px, 23vw, 100px); }
}
@media (prefers-reduced-motion: reduce) {
  #adventures .adventure-map__point.is-returning .adventure-map__marker,
  #adventures .adventure-map__flash,
  .adventure-secret-stage.is-liberating .adventure-secret-stage__star::after,
  #adventure-detail-dialog .adventure-spell-particles__spark,
  .adventure-secret-stage::before,
  .adventure-secret-stage__dust,
  .adventure-secret-stage__star,
  .adventure-secret-stage.is-liberating .adventure-secret-stage__star,
  .adventure-secret-stage.is-liberating .adventure-secret-stage__dust,
  #adventure-detail-dialog.is-secret-revealing .adventure-detail__paper,
  #adventure-detail-dialog.is-epilogue[open] .adventure-epilogue::before { animation: none !important; }
}

/* Chapter 2: framed memory photos and a photo-free future page. */
.time-machine .time-line__item--future .time-line__sigil {
  color: #e6c97f;
  text-shadow: 0 0 14px rgb(245 216 145 / 82%);
}
.time-memory-dialog__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
  max-height: min(54svh, 540px);
  overflow: auto;
  padding: .45rem;
}
.time-memory-dialog__gallery img {
  display: block;
  width: 100%;
  height: clamp(170px, 43svh, 440px);
  object-fit: contain;
  border: 7px solid #e7dcef;
  outline: 1px solid rgb(201 170 113 / 76%);
  outline-offset: -12px;
  background: #21192c;
  box-shadow: 0 10px 24px rgb(50 34 61 / 20%), 0 0 18px rgb(160 127 190 / 17%);
}
.time-memory-dialog__photo-placeholder {
  padding: 1.3rem;
  border: 1px dashed rgb(136 107 155 / 42%);
  border-radius: 5px;
  color: #76627e;
  font: italic .92rem var(--serif);
}
.time-memory-dialog__future-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(190px, 30svh, 300px);
  padding: 1rem;
  border: 1px solid rgb(172 142 199 / 65%);
  border-radius: 9px;
  background: radial-gradient(ellipse at 51% 38%, rgb(112 183 157 / 17%), transparent 40%), linear-gradient(157deg, transparent 16%, rgb(115 182 156 / 15%) 34%, rgb(151 133 194 / 20%) 47%, rgb(111 182 159 / 17%) 59%, transparent 78%), radial-gradient(ellipse at 80% 15%, rgb(175 133 210 / 17%), transparent 35%), linear-gradient(155deg, #0d1931, #221b3d 58%, #10172c);
  box-shadow: inset 0 0 32px rgb(187 149 219 / 16%), 0 10px 26px rgb(50 34 61 / 18%);
}
.time-memory-dialog__future-art::before,
.time-memory-dialog__future-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.time-memory-dialog__future-art::before {
  background: radial-gradient(ellipse at 16% 78%, rgb(197 212 192 / 10%), transparent 29%), radial-gradient(ellipse at 74% 71%, rgb(166 208 190 / 9%), transparent 34%);
}
.time-memory-dialog__future-stars {
  position: absolute;
  inset: 0;
  opacity: .72;
  background-image: radial-gradient(1px 1px at 12% 24%, #f3dfad 98%, transparent), radial-gradient(1px 1px at 27% 67%, #e9d8ff 98%, transparent), radial-gradient(1.4px 1.4px at 42% 18%, #ffe8b3 98%, transparent), radial-gradient(1px 1px at 63% 45%, #e8ddf6 98%, transparent), radial-gradient(1.4px 1.4px at 78% 23%, #f5daa0 98%, transparent), radial-gradient(1px 1px at 91% 57%, #e8ddf6 98%, transparent), radial-gradient(1px 1px at 54% 76%, #f5daa0 98%, transparent);
  background-size: 100% 100%;
}
.time-memory-dialog__future-aurora {
  position: absolute;
  top: 2%;
  left: -12%;
  width: 124%;
  height: 75%;
  border-radius: 50%;
  opacity: .82;
  filter: blur(14px);
  background: linear-gradient(166deg, transparent 20%, rgb(126 196 176 / 20%) 36%, rgb(168 157 214 / 32%) 46%, rgb(121 193 180 / 25%) 55%, transparent 73%), linear-gradient(18deg, transparent 32%, rgb(153 207 176 / 12%) 47%, transparent 65%);
  transform: rotate(-7deg);
  animation: time-memory-aurora-drift 12s ease-in-out infinite alternate;
}
.time-memory-dialog__future-sparkle {
  position: absolute;
  color: #f0d696;
  font-size: clamp(.65rem, 2.4vw, 1rem);
  text-shadow: 0 0 9px rgb(240 214 150 / 76%);
  animation: time-memory-star-glimmer 4s ease-in-out infinite;
}
.time-memory-dialog__future-art p {
  position: absolute;
  right: .7rem;
  bottom: .55rem;
  left: .7rem;
  margin: 0;
  color: #f3e6c5;
  font: italic 1rem/1.4 var(--serif);
  text-align: center;
  text-shadow: 0 1px 12px #111326;
}
@keyframes time-memory-aurora-drift {
  from { transform: translateX(-2%) rotate(-7deg) scaleY(.92); opacity: .45; }
  to { transform: translateX(2%) rotate(-3deg) scaleY(1.08); opacity: .7; }
}
@keyframes time-memory-star-glimmer {
  0%, 100% { opacity: .52; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (max-width: 640px) {
  .time-memory-dialog { width: min(calc(100% - 1rem), 620px); max-height: 90svh; }
  .time-memory-dialog__card { padding: 2.8rem 1rem 1.2rem; }
  .time-memory-dialog__gallery { grid-template-columns: minmax(0, 1fr); max-height: 48svh; gap: .7rem; padding: .25rem; }
  .time-memory-dialog__gallery img { height: clamp(145px, 36svh, 320px); border-width: 5px; }
  .time-memory-dialog__future-art { min-height: clamp(170px, 28svh, 250px); }
}
@media (prefers-reduced-motion: reduce) {
  .time-memory-dialog__future-aurora,
  .time-memory-dialog__future-sparkle { animation: none !important; }
}

/* Chapter 2 memory opening: brief spell-like cues, layered over the existing dialog. */
.time-machine .time-line__trigger.is-awakening {
  z-index: 2;
  border-color: rgb(231 201 133 / 90%);
  box-shadow: 0 0 0 3px rgb(212 178 113 / 16%), 0 0 28px rgb(220 185 111 / 40%), 0 12px 30px rgb(71 51 88 / 18%);
  animation: time-memory-trigger-awaken 1.05s cubic-bezier(.18,.72,.2,1) both;
}
.time-machine .time-line__trigger.is-awakening .time-line__sigil {
  position: absolute;
  animation: time-memory-sigil-awaken 1.05s cubic-bezier(.18,.72,.2,1) both;
}
.time-machine .time-line__trigger.is-awakening .time-line__sigil::after {
  position: absolute;
  inset: -.65rem;
  border: 1px solid rgb(236 207 145 / 75%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: time-memory-sigil-wave 1.05s cubic-bezier(.18,.72,.2,1) both;
}
.time-memory-dialog__card { isolation: isolate; }
.time-memory-dialog__card::before,
.time-memory-dialog__card::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
}
.time-memory-dialog__card::before {
  opacity: 0;
  background-image:
    radial-gradient(circle, rgb(230 201 137 / 70%) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgb(185 157 215 / 68%) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgb(237 220 177 / 52%) 0 .8px, transparent 1.6px);
  background-size: 97px 111px, 137px 149px, 181px 163px;
  background-position: 8px 14px, 41px 23px, 72px 59px;
  mask-image: radial-gradient(ellipse at center, transparent 18%, rgb(0 0 0 / 72%) 100%);
}
.time-memory-dialog__card::after {
  opacity: 0;
  background: radial-gradient(ellipse at 8% 5%, rgb(200 169 224 / 20%), transparent 38%), radial-gradient(ellipse at 95% 92%, rgb(225 191 119 / 15%), transparent 34%);
}
.time-memory-dialog.is-open .time-memory-dialog__card::before {
  animation: time-memory-particles-drift 21s linear infinite;
}
.time-memory-dialog.is-open .time-memory-dialog__card::after {
  animation: time-memory-page-glow 8s ease-in-out infinite alternate;
}
.time-memory-dialog.is-closing .time-memory-dialog__card::before {
  animation: time-memory-particles-gather .62s ease-in both;
}
.time-memory-dialog.is-closing .time-memory-dialog__card::after {
  animation: time-memory-page-glow-out .62s ease-in both;
}
.time-memory-dialog__card > :not(.time-memory-dialog__close) { position: relative; z-index: 1; }
.time-memory-dialog__close { z-index: 2; }
.time-memory-dialog__photo { position: relative; isolation: isolate; }
.time-memory-dialog.is-open .time-memory-dialog__gallery img {
  animation: time-memory-photo-frame-glow 5.8s ease-in-out infinite alternate;
}
.time-memory-dialog.is-closing .time-memory-dialog__gallery img { animation: none; }
.time-memory-dialog__photo::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgb(219 190 128 / 32%);
  box-shadow: inset 0 0 18px rgb(178 144 205 / 13%);
  content: "";
  pointer-events: none;
  opacity: 0;
}
.time-memory-dialog.is-open .time-memory-dialog__photo:not(.time-memory-dialog__photo--future)::after {
  animation: time-memory-photo-edge-glow 6.4s ease-in-out infinite alternate;
}
.time-memory-dialog.is-closing .time-memory-dialog__photo::after { animation: time-memory-page-glow-out .62s ease-in both; }
.time-memory-dialog.is-opening .time-memory-dialog__card {
  transform-origin: 50% 8%;
  animation: time-memory-page-open .98s cubic-bezier(.18,.78,.2,1) both;
}
.time-memory-dialog.is-closing .time-memory-dialog__card {
  animation: time-memory-page-close .62s cubic-bezier(.45,0,.8,.35) both;
}
.time-memory-dialog.is-opening::backdrop {
  animation: time-memory-backdrop-in .88s ease-out both;
}
.time-memory-dialog.is-closing::backdrop {
  animation: time-memory-backdrop-out .62s ease-in both;
}
.time-memory-dialog.is-opening .time-memory-dialog__card h2 {
  animation: time-memory-content-reveal .52s .18s cubic-bezier(.2,.75,.25,1) both;
}
.time-memory-dialog.is-opening .time-memory-dialog__card > .eyebrow,
.time-memory-dialog.is-opening .time-memory-dialog__date,
.time-memory-dialog.is-opening .time-memory-dialog__anecdote {
  animation: time-memory-content-reveal .48s .39s cubic-bezier(.2,.75,.25,1) both;
}
.time-memory-dialog.is-opening .time-memory-dialog__photo {
  animation: time-memory-photo-reveal .55s .53s cubic-bezier(.2,.75,.25,1) both;
}
.time-memory-dialog.is-future.is-opening .time-memory-dialog__card {
  animation-name: time-memory-portal-open;
}
.time-memory-dialog.is-future.is-opening .time-memory-dialog__future-art {
  animation: time-memory-future-arrive .72s .22s ease-out both;
}
.time-memory-dialog.is-future.is-closing .time-memory-dialog__card {
  animation-name: time-memory-portal-close;
}
.time-memory-dialog.is-future.is-closing .time-memory-dialog__future-art {
  animation: time-memory-future-close .62s ease-in both;
}
@keyframes time-memory-trigger-awaken {
  0%, 100% { filter: none; }
  28% { filter: brightness(1.18); }
}
@keyframes time-memory-sigil-awaken {
  0%, 100% { color: #a9874c; text-shadow: 0 0 10px rgb(204 174 111 / 50%); }
  35% { color: #ffe5a1; text-shadow: 0 0 9px #fff0c1, 0 0 24px rgb(224 177 88 / 95%); }
}
@keyframes time-memory-sigil-wave {
  from { opacity: .85; transform: scale(.48); }
  to { opacity: 0; transform: scale(1.75); }
}
@keyframes time-memory-page-open {
  0% { opacity: 0; transform: translateY(34px) scale(.91) rotateX(-4deg); }
  62% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
@keyframes time-memory-page-close {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(12px) scale(.92); filter: blur(1.5px); }
}
@keyframes time-memory-backdrop-in {
  from { background-color: rgb(9 9 24 / 0%); backdrop-filter: blur(0); }
  to { background-color: rgb(9 9 24 / 74%); backdrop-filter: blur(5px); }
}
@keyframes time-memory-backdrop-out {
  to { background-color: rgb(9 9 24 / 0%); backdrop-filter: blur(0); }
}
@keyframes time-memory-content-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes time-memory-photo-reveal {
  from { opacity: 0; transform: scale(.965); filter: saturate(.72) brightness(.92); }
  to { opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); }
}
@keyframes time-memory-portal-open {
  0% { opacity: 0; transform: translateY(24px) scale(.82); box-shadow: 0 0 0 rgb(122 195 174 / 0%); }
  62% { opacity: 1; transform: translateY(0) scale(1.015); box-shadow: 0 0 64px rgb(147 190 183 / 29%), 0 0 40px rgb(194 157 222 / 26%); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes time-memory-future-arrive {
  0% { opacity: .25; transform: scale(.88); filter: brightness(.68); }
  58% { opacity: 1; filter: brightness(1.24); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes time-memory-portal-close {
  from { opacity: 1; transform: scale(1); box-shadow: 0 0 42px rgb(147 190 183 / 24%), 0 0 30px rgb(194 157 222 / 22%); }
  to { opacity: 0; transform: translateY(7px) scale(.76); box-shadow: 0 0 0 rgb(147 190 183 / 0%), 0 0 0 rgb(194 157 222 / 0%); filter: blur(2px); }
}
@keyframes time-memory-future-close {
  from { opacity: 1; transform: scale(1); filter: brightness(1); }
  42% { opacity: .88; filter: brightness(1.3); }
  to { opacity: 0; transform: scale(.82); filter: brightness(.75); }
}
@keyframes time-memory-particles-drift {
  0% { opacity: .3; background-position: 8px 14px, 41px 23px, 72px 59px; }
  50% { opacity: .52; }
  100% { opacity: .3; background-position: 105px 128px, -96px 172px, 253px -104px; }
}
@keyframes time-memory-page-glow {
  from { opacity: .22; }
  to { opacity: .52; }
}
@keyframes time-memory-page-glow-out {
  from { opacity: .52; transform: scale(1); }
  to { opacity: 0; transform: scale(.58); }
}
@keyframes time-memory-particles-gather {
  from { opacity: .42; background-position: 8px 14px, 41px 23px, 72px 59px; transform: scale(1); }
  to { opacity: 0; background-position: 50% 50%, 50% 50%, 50% 50%; transform: scale(.72); }
}
@keyframes time-memory-photo-frame-glow {
  from { box-shadow: 0 10px 24px rgb(50 34 61 / 19%), 0 0 11px rgb(173 141 199 / 20%); }
  to { box-shadow: 0 10px 26px rgb(50 34 61 / 22%), 0 0 25px rgb(211 176 111 / 35%); }
}
@keyframes time-memory-photo-edge-glow {
  from { opacity: .18; box-shadow: inset 0 0 12px rgb(178 144 205 / 10%); }
  to { opacity: .48; box-shadow: inset 0 0 24px rgb(206 175 113 / 20%); }
}
@media (prefers-reduced-motion: reduce) {
  .time-machine .time-line__trigger.is-awakening,
  .time-machine .time-line__trigger.is-awakening .time-line__sigil,
  .time-machine .time-line__trigger.is-awakening .time-line__sigil::after,
  .time-memory-dialog.is-opening .time-memory-dialog__card,
  .time-memory-dialog.is-closing .time-memory-dialog__card,
  .time-memory-dialog.is-opening::backdrop,
  .time-memory-dialog.is-closing::backdrop,
  .time-memory-dialog.is-opening .time-memory-dialog__card h2,
  .time-memory-dialog.is-opening .time-memory-dialog__card > .eyebrow,
  .time-memory-dialog.is-opening .time-memory-dialog__date,
  .time-memory-dialog.is-opening .time-memory-dialog__anecdote,
  .time-memory-dialog.is-opening .time-memory-dialog__photo,
  .time-memory-dialog.is-opening .time-memory-dialog__future-art,
  .time-memory-dialog.is-open .time-memory-dialog__card::before,
  .time-memory-dialog.is-open .time-memory-dialog__card::after,
  .time-memory-dialog.is-open .time-memory-dialog__gallery img,
  .time-memory-dialog.is-open .time-memory-dialog__photo::after,
  .time-memory-dialog.is-closing .time-memory-dialog__card::before,
  .time-memory-dialog.is-closing .time-memory-dialog__card::after,
  .time-memory-dialog.is-closing .time-memory-dialog__photo::after,
  .time-memory-dialog.is-future.is-closing .time-memory-dialog__future-art,
  .transition-veil.is-active::before,
  .transition-veil.is-active::after,
  .transition-veil.is-active .transition-veil__page,
  .transition-veil.is-active .transition-veil__trail,
  .transition-veil.is-active .transition-veil__spark {
    animation: none !important;
  }
  .transition-veil.is-active::before { opacity: .2; }
  .transition-veil.is-active::after { opacity: .12; }
}

/* Ajuste integral de lectura móvil: flujo vertical natural y contenido con presencia. */
@media (max-width: 760px) {
  .cover {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(.55rem, 1.7vh, .9rem);
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(3.25rem, env(safe-area-inset-bottom));
  }
  .cover__content { max-width: 39rem; }
  .book { width: clamp(150px, 21svh, 180px); }
  .cover__bottom { bottom: max(.75rem, env(safe-area-inset-bottom)); }

  .memories,
  .future-chapter {
    display: grid;
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    place-items: start center;
    padding: max(.55rem, env(safe-area-inset-top)) .55rem max(.8rem, env(safe-area-inset-bottom));
    scrollbar-width: thin;
    overscroll-behavior-y: contain;
  }
  .memories__paper,
  .future-chapter__page {
    width: min(100%, 1050px);
    height: auto;
    min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: none;
    overflow: visible;
    align-content: start;
  }
  .future-chapter__page { gap: clamp(.55rem, 1.25vh, .85rem); }
  .chapter-navigation { padding-bottom: .1rem; }
  .chapter-navigation__button { min-width: 44px; min-height: 44px; }

  /* Capítulo 1: cada álbum queda agrupado en vez de estirar su espacio interno. */
  .memories__paper {
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    gap: .62rem;
    padding: 1rem .9rem .8rem;
  }
  .memories h2 { font-size: clamp(1.8rem, 7.2vw, 2.35rem); }
  .memories__intro { font-size: clamp(.88rem, 3.6vw, 1rem); line-height: 1.4; }
  .memories .memory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    align-content: start;
    min-height: 0;
    gap: .72rem .48rem;
    margin: .15rem 0 .25rem;
  }
  .memories .memory-category {
    grid-template-rows: auto auto;
    align-content: start;
    gap: .18rem;
    padding-top: .45rem;
  }
  .memories .memory-category__title {
    min-height: 2.35em;
    align-items: flex-start;
    margin: 0;
    font-size: clamp(.8rem, 3.35vw, .96rem);
    line-height: 1.18;
  }
  .memories .memory-album-tile {
    grid-template-rows: auto auto;
    align-content: start;
    gap: .18rem;
  }
  .memories .memory-album-tile__stack {
    width: min(100%, 190px);
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1.3;
  }
  .memories .memory-album-tile__label { padding-top: .1rem; }
  .memories .memory-album-tile__count { font-size: .82rem; }
  .memories .memory-album-tile__hint--touch { font-size: .68rem; }
  .album-dialog { width: min(calc(100vw - 1rem), 680px); max-height: 92svh; }
  .album-dialog__photo-wrap { grid-template-columns: 44px minmax(0, 1fr) 44px; }

  /* Capítulo 2: reducir el elemento central para dar protagonismo a los cinco recuerdos. */
  .time-machine { padding: max(.55rem, env(safe-area-inset-top)) .55rem max(.8rem, env(safe-area-inset-bottom)); }
  .time-machine__paper { min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); gap: .62rem; }
  .time-machine__astrolabe { width: clamp(112px, 32vw, 140px); margin: 0 auto; }
  .time-machine__astrolabe-art { opacity: .62; }
  .time-machine .time-line { grid-auto-rows: minmax(70px, auto); gap: .48rem; }
  .time-machine .time-line__trigger { min-height: 68px; padding: .45rem .68rem; }
  .time-machine .time-line__title { font-size: clamp(.9rem, 3.7vw, 1rem); line-height: 1.25; }
  .time-machine .time-line__eyebrow { font-size: .7rem; }
  .time-machine .time-line__action { font-size: .7rem; }

  /* Capítulos 3 y 4: centrar objetos y aprovechar el ancho disponible. */
  #letters .future-chapter__page { min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #letters .letters-office__envelopes { grid-auto-rows: minmax(112px, auto); }
  #letters .letters-office__envelope { min-height: 112px; }
  #letters .letters-office__hint { font-size: .7rem; }
  #soundtrack .future-chapter__page { min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #soundtrack .sound-room { min-height: 0; padding: .4rem; }
  #soundtrack .sound-room__objects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: .32rem .25rem;
    max-height: none;
  }
  #soundtrack .sound-room__object { width: 100%; min-height: 142px; }
  #soundtrack .sound-room__object-title { font-size: clamp(.92rem, 3.7vw, 1.02rem); line-height: 1.2; }
  #soundtrack .sound-room__object:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: min(100%, 190px); }

  /* Capítulo 5: el mapa conserva su recorrido y la introducción puede leerse sin recorte. */
  #adventures .adventures__page {
    min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    gap: .58rem;
    padding: .95rem .75rem .75rem;
  }
  #adventures .adventures__intro { height: auto; max-height: none; overflow: visible; font-size: clamp(.86rem, 3.4vw, .98rem); line-height: 1.48; }
  #adventures .adventure-map {
    width: min(100%, 360px);
    aspect-ratio: 360 / 620;
    align-self: start;
    margin: .1rem auto .2rem;
  }
  #adventures .adventures__closing { max-width: 42ch; margin: .2rem auto .3rem; font-size: .84rem; line-height: 1.4; }

  /* Capítulo 6: hacer más amplio el libro de pruebas y dejar que la página crezca. */
  #lost-memories .future-chapter__page { min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #lost-memories .lost-memories__experience { height: auto; min-height: 0; overflow: visible; }
  #lost-memories .lost-memories__view:not([hidden]) { height: auto; min-height: 0; overflow: visible; padding: .9rem .8rem; }
  #lost-memories .lost-memories__trial-view { grid-template-rows: auto auto auto; align-content: start; }
  #lost-memories .lost-memories__question-area { overflow: visible; }
  #lost-memories .lost-memories__view { padding: .8rem .75rem; }
  #lost-memories .lost-memories__opening { font-size: clamp(.9rem, 3.8vw, 1.02rem); line-height: 1.5; }
  #lost-memories .lost-memories__answer { min-height: 48px; font-size: clamp(.88rem, 3.5vw, .96rem); }

  /* Capítulo 7: la escena ritual ocupa un espacio real, sin grandes zonas vacías. */
  #final-spell .final-spell__page {
    min-height: calc(100svh - 1.35rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    gap: .55rem;
    padding: .8rem .7rem .65rem;
  }
  #final-spell .final-spell__experience { height: auto; min-height: 0; overflow: visible; }
  #final-spell .final-spell__view { height: auto; min-height: 0; }
  #final-spell .final-spell__opening {
    min-height: 0;
    grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr);
    align-content: center;
    gap: .65rem;
    padding: 1rem .7rem;
  }
  #final-spell .final-spell__ritual-art { width: min(100%, 150px); }
  #final-spell .final-spell__ritual-art .final-spell__book { height: clamp(142px, 20vh, 178px); }
  #final-spell .final-spell__opening-copy { gap: .58rem; }
  #final-spell .final-spell__opening-title { font-size: clamp(1rem, 4.2vw, 1.18rem); }
  #final-spell .final-spell__opening-copy .future-chapter__intro { font-size: clamp(.88rem, 3.5vw, .98rem); line-height: 1.48; }
  #final-spell .final-spell__ritual-actions { gap: .45rem; }
  #final-spell .final-spell__button, #final-spell .final-spell__mic { min-height: 44px; font-size: .84rem; }
  #final-spell .final-spell__ritual-status { font-size: .72rem; line-height: 1.4; }
}

@media (max-width: 380px) {
  .memories .memory-category__title { font-size: .78rem; }
  .memories .memory-album-tile__stack { aspect-ratio: 1.3; }
  #adventures .adventure-map { width: min(calc(100% + .65rem), 360px); }
  #final-spell .final-spell__opening { grid-template-columns: minmax(100px, .68fr) minmax(0, 1.32fr); gap: .45rem; }
  #final-spell .final-spell__ritual-art { width: min(100%, 130px); }
}

@media (max-width: 760px) and (min-height: 760px) {
  #recuerdos.memories { align-content: center; }
  #recuerdos .memories__paper { min-height: 0; }
}

@media (max-width: 760px) and (min-height: 760px) {
  /* On taller phones, center the content-sized page on the background, not inside a stretched panel. */
  #final-spell.future-chapter { align-content: center; }
  #final-spell .final-spell__page {
    min-height: 0;
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
  }
  #final-spell .final-spell__experience { height: auto; }
  #final-spell .final-spell__opening { height: auto; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .cover { min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(130px, .65fr); align-content: center; }
  .book { width: clamp(100px, 28svh, 145px); }
  .memories__paper, .future-chapter__page, .time-machine__paper { min-height: 100svh; }
  #adventures .adventure-map { width: min(100%, 94svh, 720px); aspect-ratio: 1100 / 540; }
}

/* Keep mobile chapter content compact instead of stretching each grid row to fill the viewport. */
@media (max-width: 760px) {
  .future-chapter__page,
  #adventures .adventures__page,
  #lost-memories .future-chapter__page,
  #final-spell .final-spell__page {
    align-content: start;
    grid-template-rows: auto auto auto auto auto auto;
  }

  #time-machine .time-machine__paper {
    align-content: start;
    grid-template-rows: auto auto auto auto auto auto;
  }
  #time-machine .time-line {
    align-content: start;
    grid-template-rows: repeat(5, minmax(70px, auto));
  }

  #letters .future-chapter__page { grid-template-rows: auto auto auto auto auto auto; }
  #letters .letters-office__envelopes {
    align-content: start;
    grid-template-rows: repeat(3, minmax(112px, auto));
    height: auto;
  }

  #soundtrack .future-chapter__page { grid-template-rows: auto auto auto auto auto auto; }
  #soundtrack .sound-room { align-content: start; }
  #soundtrack .sound-room__objects {
    align-content: start;
    grid-template-rows: repeat(3, minmax(142px, auto));
  }

  #lost-memories .future-chapter__page { grid-template-rows: auto auto auto auto auto auto; }
  #final-spell .final-spell__page { grid-template-rows: auto auto auto auto auto; }
}

/* Portrait tablet / Chrome responsive previews: preserve the phone-like vertical flow up to 900px. */
@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) {
  .memories,
  .time-machine,
  .future-chapter {
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: center;
    padding: max(.7rem, env(safe-area-inset-top)) .8rem max(.9rem, env(safe-area-inset-bottom));
  }

  .memories__paper,
  .time-machine__paper,
  .future-chapter__page {
    width: min(100%, 1050px);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-content: start;
  }

  .memories__paper { grid-template-rows: min-content min-content min-content min-content min-content; grid-auto-rows: min-content; align-content: center; gap: .8rem; }
  .memories .memory-list {
    grid-template-rows: min-content min-content;
    grid-auto-rows: min-content;
    align-content: start;
    align-self: start;
    height: max-content;
    gap: .8rem .8rem;
  }
  .memories .memory-category { grid-template-rows: min-content min-content; grid-auto-rows: min-content; align-content: start; align-self: start; height: auto; gap: .25rem; }
  .memories .memory-album-tile { display: grid; grid-template-rows: min-content min-content; align-content: start; height: auto; gap: .25rem; }
  .memories .memory-album-tile__stack { width: min(100%, 300px); height: auto; min-height: 0; max-height: none; aspect-ratio: 1.3; }

  #time-machine .time-machine__paper { grid-template-rows: auto auto auto auto auto auto; gap: .65rem; }
  #time-machine .time-machine__astrolabe { width: clamp(118px, 22vw, 170px); }
  #time-machine .time-line { grid-template-rows: repeat(5, minmax(72px, auto)); align-content: start; }

  #letters .future-chapter__page { grid-template-rows: auto auto auto auto auto auto; }
  #letters .letters-office__envelopes { grid-template-rows: repeat(2, minmax(150px, auto)); align-content: start; height: auto; }
  #letters .letters-office__envelope { height: auto; min-height: 150px; }

  #soundtrack .future-chapter__page { grid-template-rows: auto auto auto auto auto auto; }
  #soundtrack .sound-room { align-content: start; }
  #soundtrack .sound-room__objects { grid-template-rows: auto auto; align-content: start; max-height: none; }

  #adventures .adventures__page {
    height: auto;
    grid-template-rows: auto auto auto auto auto auto;
    align-content: start;
  }
  #adventures .adventures__intro { height: auto; max-height: none !important; overflow: visible !important; }
  #adventures .adventure-map { width: min(calc(100% + 1rem), 390px); aspect-ratio: 420 / 720; margin: .25rem auto; }

  #lost-memories .future-chapter__page { grid-template-rows: auto auto auto auto auto auto; }
  #lost-memories .lost-memories__experience { height: auto; min-height: 0; overflow: visible; }
  #lost-memories .lost-memories__view:not([hidden]) { height: auto; min-height: 0; overflow: visible; }

  #final-spell .final-spell__page { grid-template-rows: auto auto auto auto auto; }
  #final-spell .final-spell__experience { height: auto; min-height: 0; overflow: visible; }
  #final-spell .final-spell__view { height: auto; min-height: 0; }
}