html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.study{height:100svh;min-height:480px}
.header,.intro,.scene-coordinate,.story-controls{opacity:var(--story-ui,1)}
.is-within-petal .header,.is-within-petal .intro,.is-within-petal .scene-coordinate,.is-within-petal .story-controls{pointer-events:none}
.is-within-petal canvas{cursor:ns-resize}
.is-in-world canvas{cursor:grab}
.is-in-world canvas.dragging{cursor:grabbing}
.world-arrival{position:absolute;z-index:2;left:50%;top:27%;width:min(82%,740px);transform:translate(-50%,-50%);pointer-events:none;text-align:center;opacity:0;text-shadow:0 2px 32px #041511,0 1px 7px #04151199}
.world-arrival h2{margin:0;color:#e5eee5;font-family:"Songti SC","Noto Serif SC","SimSun",serif;font-size:clamp(30px,4.2vw,62px);font-weight:400;line-height:1.65;letter-spacing:.12em;text-wrap:balance}
.world-arrival h2 span{display:block}
@media(max-aspect-ratio:17/20){.world-arrival{top:27%;width:84%}.world-arrival h2{font-size:clamp(28px,7.7vw,42px);letter-spacing:.09em}}
.culture-reading{position:absolute;z-index:2;left:8%;top:50%;width:min(34%,440px);transform:translateY(-50%);display:grid;pointer-events:none;opacity:0;text-shadow:0 2px 26px #04120fcc}
.culture-thought{grid-area:1/1;visibility:hidden;align-self:start}
.culture-thought.is-active{visibility:visible}
.culture-meta{font:12px/1.6 Arial,sans-serif;letter-spacing:.16em;color:#91b5a4;margin:0 0 27px}
.culture-thought h2{font-family:"Songti SC","Noto Serif SC","SimSun",serif;font-size:clamp(27px,2.8vw,40px);font-weight:400;line-height:1.6;letter-spacing:.045em;color:#e4eee7;margin:0 0 24px;text-wrap:balance}
.culture-description{font-size:16px;line-height:1.95;letter-spacing:.015em;color:#aac1b4;margin:0;max-width:27em;text-wrap:pretty}
.culture-connector{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;overflow:visible}
.culture-connector path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--leader-draw,1);vector-effect:non-scaling-stroke}
.culture-leader-back{stroke:#051b13bf;stroke-width:3.3}
.culture-leader{stroke:#d2ecde;stroke-width:1.25;stroke-opacity:.90}
.culture-pin{fill:#e0f4e9;stroke:#153c2e;stroke-width:1.3;vector-effect:non-scaling-stroke}
@media(max-aspect-ratio:17/20){
  .culture-reading{left:8%;top:auto;bottom:max(9%,calc(env(safe-area-inset-bottom) + 34px));width:84%;transform:none}
  .culture-meta{font-size:12px;margin-bottom:16px;letter-spacing:.12em}
  .culture-thought h2{font-size:clamp(25px,6.2vw,34px);margin-bottom:15px;line-height:1.6}
  .culture-description{font-size:14px;line-height:1.9;max-width:28em}
}
.intro{top:32%;left:8vw;width:min(34vw,500px);display:grid}
.intro-chapter{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .38s,transform .38s,visibility .38s}
.intro-chapter.is-active{opacity:1;visibility:visible;transform:none}
.intro .chapter-title{font-family:"Songti SC","Noto Serif SC","SimSun",serif;font-size:clamp(32px,3.3vw,48px);font-weight:400;margin:0;line-height:1.6;letter-spacing:.08em;overflow-wrap:anywhere}
.intro .chapter-title span{display:block}.intro .chapter-title span:last-child{color:#c5d6c8}
.intro .description{margin-top:18px;color:#8fa99a;white-space:pre-line;line-height:1.9}
.scene-coordinate{position:absolute;z-index:2;right:3.3%;top:46%;display:flex;gap:16px;align-items:center;writing-mode:vertical-rl;font:8px Arial,sans-serif;letter-spacing:.2em;color:#b1c9bb99;pointer-events:none}
.scene-coordinate i{height:60px;width:1px;background:linear-gradient(#a8c8b377,transparent)}
.story-controls{position:absolute;left:4.5%;right:4.5%;bottom:max(38px,calc(env(safe-area-inset-bottom) + 16px));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:30px;z-index:3}
.scroll-cue{display:flex;justify-self:start;align-items:center;gap:14px;font-size:10px;letter-spacing:.08em;color:#aac1b6;min-width:210px;pointer-events:none}
.scroll-line{height:33px;width:1px;background:#9fc1b342;position:relative;overflow:hidden}
.scroll-line:after{content:"";display:block;width:1px;height:15px;background:#b9dcca;animation:scroll-hint 2.6s ease-in-out infinite}
@keyframes scroll-hint{0%{transform:translateY(-15px)}70%,100%{transform:translateY(33px)}}
.chapter-position{display:flex;justify-self:center;justify-content:center;align-items:center;gap:10px;color:#c3dace;font-size:10px;letter-spacing:.12em;margin:0;pointer-events:none}
.chapter-divider{color:#8da598}
#chapter-counter{color:#a6bcaf;font:9px Arial,sans-serif;letter-spacing:.12em;font-variant-numeric:tabular-nums}
#replay{display:flex;justify-self:end;align-items:center;gap:9px;font-size:10px;letter-spacing:.1em;min-height:44px;padding:0;border:0;background:none;color:#becfbf}
#play-icon{font-size:20px}#replay:hover{color:#f7fcf2}
.progress-scrubber{position:absolute;bottom:0;left:0;right:0;z-index:4;height:24px;display:flex;align-items:flex-end}
/* Keep the input inside the stage so keyboard focus cannot scroll the clipped scene. */
.progress-scrubber input{--amount:0%;appearance:none;-webkit-appearance:none;margin:0;width:100%;height:24px;cursor:ew-resize;background:linear-gradient(90deg,#bcdaca var(--amount),#67857538 var(--amount)) left bottom / 100% 1px no-repeat;border:0;border-radius:0;touch-action:none}
.progress-scrubber input::-webkit-slider-runnable-track{height:1px;background:transparent}
.progress-scrubber:hover input,.progress-scrubber:focus-within input{background:none}
.progress-scrubber:hover input::-webkit-slider-runnable-track,.progress-scrubber:focus-within input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#bcdaca var(--amount),#67857538 var(--amount))}
.progress-scrubber input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-8.5px;border-radius:50%;background:#c7e9d5;opacity:0;box-shadow:0 0 16px #98c4ac;transition:opacity .18s}
.progress-scrubber:hover input::-webkit-slider-thumb,.progress-scrubber:focus-within input::-webkit-slider-thumb{opacity:1}
.progress-scrubber input::-moz-range-track{height:1px;background:transparent}
.progress-scrubber:hover input::-moz-range-track,.progress-scrubber:focus-within input::-moz-range-track{background:linear-gradient(90deg,#bcdaca var(--amount),#67857538 var(--amount))}
.progress-scrubber input::-moz-range-thumb{width:12px;height:12px;border:0;background:#c7e9d5;border-radius:50%;opacity:0}
.progress-scrubber:hover input::-moz-range-thumb,.progress-scrubber:focus-within input::-moz-range-thumb{opacity:1}
.progress-scrubber input:focus-visible{outline:1px solid #94b7a0;outline-offset:-1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){
  .header{inset:max(23px,env(safe-area-inset-top)) 24px auto}
  .intro{top:110px;left:28px;width:calc(100% - 56px)}.intro .eyebrow{margin-bottom:12px;font-size:8px}
  .intro .chapter-title{font-size:28px;line-height:1.48}.intro .description{font-size:10px;margin-top:10px}
  .scene-coordinate{right:5%;top:52%;font-size:7px;color:#a6c2b17a;gap:12px}.scene-coordinate i{height:35px}
  .story-controls{left:7%;right:7%;bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px));display:grid;grid-template-columns:1fr auto;row-gap:12px}
  .chapter-position{grid-column:1/-1;grid-row:1;font-size:9px;margin-bottom:6px}#chapter-counter{font-size:8px}
  .scroll-cue{font-size:8px;min-width:0;gap:10px}.scroll-line{height:20px}
  #replay{font-size:9px;min-height:32px}
}
@media(max-height:620px) and (max-width:700px){
  .intro{top:86px}.intro .chapter-title{font-size:24px}.intro .description{display:none}.intro .eyebrow{margin-bottom:5px}
  .story-controls{bottom:20px;row-gap:6px}
}
@media(prefers-reduced-motion:reduce){.intro-chapter{transition:none;transform:none}.scroll-line:after{animation:none}}