:root { color-scheme: light; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; color: #615c57; background: #f4eee5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
.masthead { max-width: 1500px; margin: auto; padding: 25px 5vw 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .4em; }
h1 { margin: 0; font-size: clamp(23px, 2.3vw, 34px); font-weight: 400; letter-spacing: .025em; }
.subtitle { margin: 5px 0 0; font-size: 13px; color: #81776e; }
.edition { font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.picture-space { display: grid; place-items: center; position: relative; min-height: 100px; }
.stage { width: min(92vw, calc(62svh * 16 / 9), 1500px); aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #efe7df; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 700ms ease; pointer-events: none; }
.scene-image.is-active { opacity: 1; }
#load-status { position: absolute; padding: 12px 20px; background: #f4eee5ed; font-size: 14px; text-align: center; }
#load-status[hidden] { display: none; }
.scene-caption { text-align: center; padding: 18px 16px 10px; }
#scene-number { font: 11px/1.5 Georgia, serif; letter-spacing: .15em; color: #8b7b76; }
h2 { font-size: 20px; font-weight: 400; letter-spacing: .23em; margin: 7px 0; }
#scene-description { font-size: 12px; margin: 0; color: #82766c; }
.scene-controls { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 40px); padding: 8px 12px; }
button { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; cursor: pointer; padding: 9px 12px; border-radius: 2px; touch-action: manipulation; }
button:hover { background: #e9dfd6; }
button:focus-visible { outline: 2px solid #89766e; outline-offset: 3px; }
button:disabled { opacity: .3; cursor: default; background: transparent; }
.scene-tabs { display: flex; gap: 3px; }
.scene-tabs button { font: 12px Georgia, serif; padding: 9px 10px; }
.scene-tabs button[aria-current="step"] { border-bottom-color: #a77e7c; color: #805c61; }
footer { text-align: center; font-size: 11px; line-height: 1.8; padding: 12px 20px 20px; color: #8b8178; }
@media (max-width: 600px) { .masthead { padding: 24px 5vw; align-items: flex-start; } .edition { font-size: 10px; } .scene-controls { gap: 5px; } .scene-controls > button { padding: 9px 5px; font-size: 12px; } .scene-tabs button { padding: 9px 7px; } .scene-caption { padding-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .scene-image { transition: none; } }
.animation-controls { max-width: 850px; margin: 0 auto; padding: 10px 16px; text-align: center; font-size: 12px; }
.preview-switch { display: flex; justify-content: center; gap: 12px; margin-bottom: 9px; }
.animation-controls button[aria-pressed="true"] { background: #e9ddd7; border-color: #b69b94; }
.motion-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.motion-settings { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 12px; }
.motion-settings label { display: flex; align-items: center; gap: 8px; }
input { accent-color: #9e7a7c; }
#butterfly-status { color: #84776e; margin: 12px 0 0; line-height: 1.8; }
.butterfly { position: absolute; width: 17%; aspect-ratio: 1; z-index: 2; pointer-events: none; transform-origin: 50% 46%; }
.butterfly[hidden] { display: none; }
.butterfly-rig { position: absolute; inset: 0; transform-origin: 50% 46%; }
.butterfly-surface, .butterfly-antennae { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 46%; }
.butterfly-body-edge { display:none; }
.interaction-panel { max-width: 1000px; margin: 0 auto; padding: 0 5vw 18px; text-align: center; font-size: 13px; }
.interaction-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.interaction-actions button { border-color: #baa79a; background: #f7f1e9; }
#input-status { line-height: 1.8; margin: 10px 0 4px; }
.privacy-note { font-size: 11px; color: #8b8178; line-height: 1.7; }
#camera-details { font-size: 12px; margin-top: 12px; }
#hand-video { display: block; margin: 10px auto; width: min(260px,80vw); aspect-ratio: 4/3; object-fit: contain; transform: scaleX(-1); background: #e6ded6; }
.story-active #camera-details[open] { position: fixed; right: 12px; bottom: 12px; z-index: 10; width: 180px; padding: 10px; background: #f4eee5ed; border: 1px solid #d6c8bc; box-shadow: 0 2px 15px #6b5e6012; }
.story-active #camera-details[open] #hand-video { width: 100%; }
.story-active #camera-details[open] #check-hand-model, .story-active #camera-details[open] #model-status { display: none; }
.story-active .scene-controls, .story-active .animation-controls { display: none; }
.story-overlay { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.story-overlay[hidden], [hidden] { display: none !important; }
.dream-hand { position: absolute; width: 60%; left: 54%; top: 52%; transform: translate(-14%, -17%); transform-origin: 14% 17%; opacity: 0; transition: opacity 140ms ease; }
.dream-wash { position: absolute; left: 54%; top: 52%; width: 45%; aspect-ratio: 1; border-radius: 47% 53% 40% 60%; background: radial-gradient(ellipse, #e9a7b799, #efd0d899 40%, #f1c5d433 65%, transparent 72%); filter: blur(9px); opacity: 0; }
.finger-cursor { position: absolute; width: 14px; height: 14px; border: 1px solid #9c727c; background: #f5d0db55; border-radius: 50%; transform: translate(-50%,-50%); }
.touch-target { position: absolute; left:54%; top:52%; transform:translate(-50%,-50%); width:14%; aspect-ratio:1; border-radius:50%; pointer-events:auto; }
.touch-target:hover { background: transparent; }
.touch-target.is-near { border-color: #ca8b9c88; background: #eec4d333; }
.story-guide { position:absolute; left: 10%; right:10%; bottom:3%; text-align:center; color:#6b5e60; text-shadow: 0 1px 6px #fff9; }
.guide-zh { font-size: clamp(12px,1.4vw,21px); letter-spacing:.13em; margin:0 0 6px; }
.guide-en { font-size:clamp(10px,1vw,14px); margin:0; }
.story-guide progress { display:block; margin:10px auto 0; width:100px; height:3px; accent-color:#b68b94; border:0; }
.first-person-wings { position:absolute; inset:0; opacity:0; }
.first-wing { position:absolute; width:85%; top:-10%; aspect-ratio:1; object-fit:contain; opacity:.65; transform-origin:50% 46%; }
.first-left { left:-12%; }
.first-right { right:-12%; }
.review-start { display:block; margin:0 0 12px; font-size:12px; }
select { font:inherit; color:inherit; background:#f7f1e9; border:1px solid #c9bbae; padding:6px; }
.manual-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:12px; font-size:12px; }
.manual-controls label { display:flex; align-items:center; gap:8px; }
.sound-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; font-size:12px; }
#sound-status { font-size:12px; line-height:1.8; }
.fog-layer, .lake-reflection, .lake-ripples { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.lake-reflection { opacity:0; transition:opacity 180ms ease, filter 180ms ease; }
.flight-scroll { position:absolute; inset:0; overflow:hidden; }
.flight-strip { position:relative; display:flex; width:200%; height:100%; }
.flight-strip img { display:block; width:50%; height:100%; flex:0 0 50%; object-fit:contain; }
.sheet-seam { position:absolute; top:0; bottom:0; left:48%; width:4%; background:linear-gradient(90deg,transparent,#f4eee5b3,transparent); }
.story-guide { z-index:5; }
.dream-hand { z-index:2; }
.dream-wash { z-index:3; }
.first-person-wings { z-index:2; }
.touch-target { z-index:4; }
.story-active .masthead { padding-top:12px; padding-bottom:8px; }
.story-active .masthead h1 { font-size:22px; }
.story-active .subtitle, .story-active .review-start { display:none; }
.story-active .interaction-panel { padding-bottom:8px; }
.story-active .interaction-panel .privacy-note { margin:4px 0; font-size:10px; }
.story-active #input-status, .story-active #sound-status { margin:5px 0; }
.story-active .stage { width:min(94vw,calc(52svh * 16 / 9),1500px); }
.story-active .scene-caption { padding:8px 12px; }
.story-active .scene-caption h2 { font-size:16px; margin:3px; }
.scene-toolbar { position:absolute; top:2%; right:2%; z-index:10; display:flex; align-items:flex-start; gap:6px; font-size:11px; }
.scene-toolbar > button, .scene-toolbar summary { background:#f4eee5bb; padding:6px 9px; cursor:pointer; }
.scene-toolbar #camera-details { margin:0; }
.scene-toolbar #camera-details[open] { position:absolute; top:34px; right:0; bottom:auto; width:200px; padding:12px; background:#f4eee5ed; }
.scene-toolbar #hand-video { width:100%; }
.scene-entry { display:none; }
.scene-only { overflow:hidden; }
.scene-only .masthead, .scene-only .interaction-panel, .scene-only .scene-caption, .scene-only .scene-controls, .scene-only .animation-controls, .scene-only footer { display:none; }
.scene-only .picture-space { height:100svh; }
.scene-only .stage, .scene-only.story-active .stage { width:min(100vw,calc(100svh * 16 / 9)); max-width:none; }
.scene-only:not(.story-active) .scene-entry { display:block; position:absolute; z-index:6; top:50%; left:50%; transform:translate(-50%,-50%); width:84%; text-align:center; padding:5% 3%; background:radial-gradient(ellipse,#f4eee5eb, #f4eee5a3 55%,transparent 73%); }
.entry-zh { font-size:clamp(18px,2.8vw,40px); letter-spacing:.4em; margin:0 0 12px; }
.scene-entry h1 { font-size:clamp(18px,2.5vw,36px); }
.scene-entry > p[lang] { font-size:clamp(10px,1.2vw,18px); }
.scene-entry button { margin:16px 4px 0; border-bottom-color:#b69b94; font-size:clamp(10px,1vw,15px); }
.entry-note { font-size:clamp(8px,.8vw,12px); line-height:1.8; opacity:.75; margin-top:22px; }
.story-guide { top:12%; bottom:auto; left:15%; right:15%; padding:12px 15px; background:radial-gradient(ellipse,#f4eee5df, #f4eee599 55%,transparent 75%); }
.story-guide.guide-empty { display:none; }
.guide-zh { font-size:clamp(12px,1.35vw,21px); }
.guide-en { font-size:clamp(10px,1.05vw,16px); }
.guide-action-zh { margin:14px 0 5px; font-size:clamp(10px,1vw,15px); }
.guide-action-en { margin:0; font-size:clamp(10px,1vw,15px); line-height:1.5; }
.guide-feedback { font:clamp(9px,.85vw,13px)/1.6 Georgia,SimSun,serif; margin:10px 0 0; color:#806e70; min-height:1.6em; }
.scene-actions { position:absolute; z-index:6; bottom:4%; left:8%; right:8%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; pointer-events:auto; font-size:clamp(10px,1vw,14px); }
.scene-actions button { background:#f4eee5d9; border-bottom-color:#c4aaa3; }
.scene-actions .manual-controls { background:#f4eee5cc; padding:8px; margin:0; }
.scene-actions .sound-controls { font-size:inherit; }
.scene-actions #sound-status { flex-basis:100%; margin:0; text-align:center; font-size:clamp(9px,.8vw,12px); }
.story-overlay:not([data-state="fog"]):not([data-state="lake"]) #sound-status { display:none; }
@media(max-height:500px) { .story-guide { top:8%; padding:4px; } .guide-action-zh { margin-top:6px; } .guide-feedback { margin-top:4px; } .scene-actions { bottom:2%; } .scene-toolbar { font-size:9px; } }
.dream-landscape, .dream-landscape img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.landscape-water { opacity:0; }
.story-guide { top:9%; left:18%; right:18%; padding:12px 8px; background:radial-gradient(ellipse,#f4eee5b0,transparent 75%); }
.guide-feedback:empty { display:none; }
.scene-toolbar { opacity:.55; transition:opacity .2s; }
.scene-toolbar:hover, .scene-toolbar:focus-within { opacity:1; }
.scene-only #toggle-preview, .scene-only:not(.story-active) #input-mode { display:none; }
.scene-only #camera-details:not([open]) { font-size:10px; }
.scene-only:not(.story-active) #camera-details { display:none; }
.story-overlay .lake-reflection { inset:auto; left:28%; top:43%; width:44%; height:44%; object-fit:contain; mask-image:linear-gradient(transparent,black 12%,black 83%,transparent); }
.water-target { position:absolute; left:50%; top:66%; width:14%; aspect-ratio:2.5; transform:translate(-50%,-50%); pointer-events:auto; border-radius:50%; border:1px solid #9f8d8055; background:radial-gradient(ellipse,#f4eee533,transparent); }
.water-target:hover, .water-target:focus-visible { background:#f4eee533; border-color:#9f8d80aa; }
.water-target span { position:absolute; inset:20%; border:1px solid #9f8d8033; border-radius:50%; }
.dream-again { position:absolute; bottom:16%; left:50%; transform:translateX(-50%); pointer-events:auto; border-bottom:1px solid #b69b94; background:#f4eee588; font-size:clamp(11px,1.2vw,17px); }
.stage, .story-overlay { overflow:clip; }
.story-overlay[data-state="ending"] .story-guide { top:34%; }