:root { color-scheme: light; background: #040f14; color: #13202c; --story-width:min(100vw,calc(100svh * 16 / 9)); --story-height:min(100svh,calc(100vw * 9 / 16)); --story-top:calc((100svh - var(--story-height)) / 2); --story-left:calc((100vw - var(--story-width)) / 2); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: system-ui, "PingFang SC", sans-serif; }
.opening { min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
/* Preserve the complete approved composition at every aspect ratio; never crop type. */
.opening-stage { width:var(--story-width);height:var(--story-height);display:grid;place-items:center;background:#faf9f6;overflow:hidden; }
.hero { width: var(--story-width); max-width:100%; aspect-ratio: 1672 / 941; position: relative; isolation: isolate; }
.artwork { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gaze { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.motion-control { position: fixed; right: 16px; bottom: 12px; z-index: 3; border: 1px solid #13202c22; border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 11px; background: #faf9f6ed; color: #13202caa; cursor: pointer; opacity: 0; transition: opacity .2s; }
.motion-control:hover, .motion-control:focus-visible, .motion-control[aria-pressed="false"] { opacity: 1; }
.motion-control:focus-visible { outline: 2px solid #7b2026; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lily-cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 100; visibility: hidden; }
.lily-cursor img { display: block; position: absolute; width: 32px; height: 36px; left: -16px; top: -18px; object-fit: contain; filter: drop-shadow(0 1px 1px #1433448c) drop-shadow(0 2px 4px #14334430); transition: scale 100ms ease; }
.lily-cursor.is-pressed img { scale: .86; }
@media (hover: hover) and (pointer: fine) {
  .has-lily-cursor, .has-lily-cursor * { cursor: none !important; }
  .lily-cursor.is-visible { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .lily-cursor img { transition: none; } }
@media (prefers-reduced-motion: reduce), (hover: none) { .gaze { display: none; } .motion-control { display: none; } }

/* Full-screen click starts the pupil camera; no visual hotspot or hover frame. */
.scene-trigger:focus-visible { position: fixed; left: 16px; bottom: 12px; width: auto; height: auto; margin: 0; padding: 8px 13px; overflow: visible; clip-path: none; border: 1px solid #13202c44; background: #faf9f6; color: #13202c; font: inherit; font-size: 12px; outline: 1px solid #71242a; outline-offset: 3px; z-index: 3; }
.opening { position: fixed; inset: 0; z-index: 2; background: #040f14; }
.destination { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #040f14; visibility: hidden; }
.lily-atmosphere { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 54%, #16353f55, transparent 45%); }
.destination-lily { position: absolute; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 0 9px #e6faff28); }
.replay { position: absolute; bottom: calc(var(--story-top) + 32px); left: calc(var(--story-left) + 32px); border: 0; border-bottom: 1px solid #d9eeee44; background: none; padding: 10px 0; color: #d9eeee9c; font: inherit; font-size: 12px; letter-spacing: .12em; opacity: 0; pointer-events: none; transition: opacity .4s; }
.replay span { margin-left: 14px; }
.replay:hover { color: #fff; }
.replay:focus-visible { outline: 1px solid #d9eeee; outline-offset: 6px; }
body[data-scene="lily"] .opening { visibility: hidden; }
body[data-scene="travel"] .opening { pointer-events: none; will-change: opacity; }
body[data-scene="travel"] .hero, body[data-scene="travel"] .destination-lily { will-change: transform, filter; }
/* Use the approved original eyes as the stable camera target, not a moving iris. */
body[data-scene="travel"] .gaze { visibility: hidden; }
body[data-scene="travel"] .motion-control, body[data-scene="travel"] .scene-trigger { visibility: hidden; }
body[data-scene="travel"] .destination, body[data-scene="lily"] .destination { visibility: visible; }
body[data-scene="travel"] .lily-cursor { visibility: hidden !important; }
body[data-scene="lily"] .replay { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .replay { transition: none; } }

/* The live next page is clipped into the pupil, above the advancing portrait. */
body[data-scene="travel"] .destination { z-index: 3; pointer-events: none; will-change: clip-path; }
.lily-portal-view { position: absolute; inset: 0; }
body[data-scene="travel"] .lily-story { visibility: hidden; }
body[data-scene="travel"] .lily-vignette, body[data-scene="travel"] .lily-grain { visibility: hidden; }
.continue-book { position: absolute; right: calc(var(--story-left) + 32px); bottom: calc(var(--story-top) + 32px); background: transparent; border: 0; border-bottom: 1px solid #d9eeee66; color: #e0eeee; padding: 10px 0; font: inherit; font-size: 13px; letter-spacing: .12em; cursor: pointer; }
.continue-book span { margin-left: 12px; }
.continue-book:focus-visible, .chapter-back:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
.chapter-host { position: fixed; inset: 0; z-index: 5; background: #040f14; }
.chapter-host iframe { border: 0; display: block; width: 100%; height: 100%; background: #040f14; }
.chapter-host iframe { opacity: 0; transition: opacity .6s ease; }
.chapter-host[data-loaded] iframe { opacity: 1; }
.chapter-host[data-chapter="game"] { background: #fffdf6; }
.chapter-host[data-chapter="game"] .chapter-loading { color: #746d60; background: #fffdf6; }
@media (prefers-reduced-motion: reduce) { .chapter-host iframe { transition: none; } }
.chapter-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #d7dfd5; background: #040f14; letter-spacing: .15em; }
.chapter-back { position: absolute; top: 14px; right: 18px; z-index: 8; border: 1px solid #ffffff30; border-radius: 30px; color: #e9e2d8; background: #0a171980; padding: 7px 12px; font: inherit; font-size: 11px; cursor: pointer; }
.journey { position: absolute; inset: 0; background: #201c18; display: grid; place-items: center; }
.journey video { width: 100%; height: 100%; object-fit: contain; }
.journey button { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid #ffffff88; border-radius: 30px; padding: 14px 24px; color: white; background: #281e1888; font: inherit; cursor: pointer; }
body[data-scene="chapter"] .opening, body[data-scene="chapter"] .destination { visibility: hidden; }
body[data-scene="chapter"] .lily-cursor { visibility: hidden !important; }
.chapter-host[data-phase="book-arrival"] { pointer-events: none; }
.chapter-host[data-phase="book-arrival"] iframe { transition: none; }
/* Keep #destination and #lily-scroll stationary for native wheel/touch input.
   Only their visible content follows the shared downward camera movement. */
.lily-stage, .destination > .replay, .destination > .continue-book { transform: translateY(var(--chapter-offset,0px)); }
.chapter-host[data-chapter="journey"], .chapter-host[data-chapter="ending"] { background: #040f14; }
.chapter-host[data-chapter="journey"] iframe { opacity: 0; transition: none; }
.chapter-host[data-chapter="ending"] iframe { opacity: 1; transition: none; }
.chapter-host[data-phase="game-cinematic"] .chapter-back { opacity: 0; pointer-events: none; }
.journey { z-index: 7; background: #040f14; opacity: 1; }
.journey video { display: block; }
.journey[data-arriving] { opacity: 0; transition: opacity .24s linear; pointer-events: none; }
.journey[data-playing] { opacity: 1; }
@media (max-aspect-ratio:3 / 4) { :root { --story-width:min(100vw,calc(100svh * 3 / 4)); --story-height:min(100svh,calc(100vw * 4 / 3)); } }
@media (max-width: 600px) { .replay { left: calc(var(--story-left) + 16px); bottom: calc(var(--story-top) + 20px); font-size: 10px; } .continue-book { right: calc(var(--story-left) + 16px); bottom: calc(var(--story-top) + 20px); font-size: 11px; } }
.sound-dock { position:fixed;z-index:12;top:calc(var(--story-top) + 14px);right:calc(var(--story-left) + 16px);display:flex;align-items:center;gap:7px;color:#eef3ee; }
.sound-toggle { width:32px;height:32px;border:1px solid #ffffff45;border-radius:50%;background:#ffffff15;color:inherit;padding:7px;backdrop-filter:blur(12px);cursor:pointer; }
.sound-toggle svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round; }
.sound-toggle[aria-pressed="true"] .sound-off { display:none; }
.sound-toggle:focus-visible, .music-credit summary:focus-visible { outline:1px solid currentColor;outline-offset:3px; }
.music-credit summary { list-style:none;cursor:pointer;font-size:13px;opacity:.65; }
.music-credit summary::-webkit-details-marker { display:none; }
.music-credit div { position:absolute;right:0;top:42px;width:min(290px,calc(100vw - 32px));padding:14px 18px;border:1px solid #ffffff30;background:#15201ded;backdrop-filter:blur(16px);border-radius:12px;font-size:11px;line-height:1.8; }
.music-credit p { margin:0 0 10px; }.music-credit p:last-child { margin:0; }.music-credit a { color:inherit;text-underline-offset:3px; }
body[data-scene="opening"] .sound-dock { color:#572d39; }.sound-toggle[data-error] { border-color:#dca996; }
body[data-scene="travel"] .sound-dock { visibility:hidden; }