:root{color-scheme:dark;--ink:#faedf5;--accent:#f277bf;--plum:#251323;font-family:'Segoe UI','Microsoft YaHei',sans-serif;background:var(--plum);color:var(--ink)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit;cursor:pointer;border:1px solid #f277bf66;background:#251323b8;color:var(--ink);padding:12px 18px;border-radius:3px;min-height:44px}button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #f277bf;outline-offset:5px}.primary{background:#f277bf;color:#251323;border-color:#f277bf}h1,h2{font-family:'Belleza','Georgia','Times New Roman',serif;font-weight:400;line-height:1.06;letter-spacing:-.035em;white-space:pre-line}h1{font-size:clamp(40px,5vw,76px);margin:14px 0 20px}h2{font-size:clamp(38px,4.6vw,68px);margin:12px 0 25px}p{line-height:1.7}.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#f2b9d9}.poster,#world,.scrim{position:fixed;inset:0;width:100%;height:100%;border:0;pointer-events:none}.poster{object-fit:cover}#world{opacity:0;transition:opacity .6s}.world-ready #world{opacity:1}.scrim{background:linear-gradient(90deg,#20111ddd,transparent 80%),linear-gradient(0deg,#20111d77,transparent 55%);z-index:1}header{position:fixed;inset:25px 4vw auto;z-index:6;display:flex;justify-content:space-between;align-items:start;gap:20px}header a{text-decoration:none}header>div{display:flex;align-items:center;gap:8px;font-size:11px}header button{font-size:11px;background:#251323c9}header>div>a{padding:12px;background:#251323c9}.wordmark{font:26px Georgia,serif;letter-spacing:.21em}.wordmark span{display:block;font:8px 'Segoe UI',sans-serif;letter-spacing:.13em;margin-top:8px}#world-status{position:fixed;bottom:8px;left:4vw;z-index:8;font-size:11px;background:#251323bd;padding:5px 10px}main{position:relative;z-index:2}.welcome{min-height:100svh;padding:150px 7vw 60px;max-width:1250px}.welcome>p:not(.eyebrow){max-width:620px}.cast{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0 22px;max-width:860px}.cast button{padding:0;text-align:left;overflow:hidden;background:#281825bb;border-color:#f8d6e938}.cast button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.cast img{display:block;width:100%;height:145px;object-fit:cover;object-position:50% 6%}.cast span{display:block;padding:10px 12px;font-size:13px}.disclosure{font-size:11px;color:#d4b7c9}.chapter{min-height:100svh;padding:20vh 7vw 14vh;display:flex;align-items:center}.chapter>div{max-width:560px;width:49%;text-shadow:0 2px 22px #1b101e}.chapter p:not(.eyebrow){font-size:17px;max-width:420px}.chapter small{display:block;font-size:11px;line-height:1.65;max-width:360px;color:#dac0d0}.chapter button{margin:12px 5px 0 0;font-size:13px}.chapter[hidden],[hidden]{display:none!important}#portrait{position:fixed;z-index:3;right:0;bottom:0;width:47vw;height:77vh;pointer-events:none;overflow:hidden;mask-image:linear-gradient(0deg,transparent,#000 12%)}#portrait img{position:absolute;inset:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:50% 0%;opacity:0;transform:translateY(28px);transition:opacity .55s,transform .75s}#portrait img.active{opacity:1;transform:translateY(0)}footer{position:relative;z-index:4;min-height:65vh;background:#251323ed;padding:85px 7vw}footer p{font-size:12px;color:#d4b7c9}footer h2{max-width:750px}dialog{max-width:min(520px,92vw);color:var(--ink);background:#2b1927;border:1px solid #a46a8d;padding:32px;border-radius:5px}dialog::backdrop{background:#160d18bf}dialog h2{font-size:36px}dialog label{display:flex;gap:12px;align-items:center;margin:25px 0}dialog input{width:20px;height:20px;accent-color:#f277bf}dialog small{display:block;line-height:1.7;margin-top:22px;color:#d4b7c9}dialog button{margin:6px 6px 6px 0}body:has(dialog[open]){overflow:hidden}@media(max-width:800px){header{inset:18px 5vw auto}header>div>a{display:none}.wordmark{font-size:21px}header button{padding:9px}.welcome{padding:130px 6vw 55px}.cast{gap:7px}.cast img{height:110px}.cast span{padding:9px 6px;font-size:11px}.chapter{padding-left:6vw;padding-right:6vw}.chapter>div{width:55%}#portrait{width:49vw;height:65vh}}@media(max-width:520px){h1{font-size:41px}.wordmark span{font-size:6px}header>div{gap:5px}button{font-size:10px;padding:8px}.cast{grid-template-columns:repeat(3,1fr);max-width:370px}.cast img{height:100px}.welcome{min-height:110svh}.chapter{align-items:flex-start;padding-top:19vh;padding-bottom:38vh;min-height:110svh}.chapter>div{width:100%;max-width:100%}.chapter h2{font-size:38px;max-width:340px}.chapter p:not(.eyebrow){font-size:15px;max-width:340px}.chapter small{max-width:260px}#portrait{width:64vw;height:39vh;right:-4vw;z-index:1}.chapter button{position:relative;z-index:5}footer h2{font-size:39px}.scrim{background:linear-gradient(180deg,#20111dd9,transparent 85%)}#lounge{min-height:125svh}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important,transition:none!important}}
/* Discrete hero controls: the page advances as a sequence of saved views. */
.welcome{min-height:100svh;max-width:none;padding:clamp(110px,15vh,170px) 7vw 8vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}.welcome>p:not(.eyebrow){max-width:550px}.welcome #begin{margin-top:20px}.cast{position:fixed;right:2.5vw;bottom:7vh;z-index:7;display:flex;flex-direction:column;align-items:stretch;gap:7px;margin:0;width:92px;max-width:92px}.cast::before{content:'SWITCH GUIDE';display:block;margin:0 0 1px;color:#f2b9d9;font-size:8px;line-height:1;letter-spacing:.16em;text-align:center}.cast button{display:flex;flex-direction:column;width:92px;padding:0;text-align:left;overflow:hidden;background:#281825e8;border-color:#f8d6e95c;box-shadow:0 8px 24px #140b15aa}.cast button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px #140b15aa}.cast img{display:block;width:100%;height:58px;object-fit:cover;object-position:50% 6%}.cast span{display:block;padding:5px 7px;font-size:10px;line-height:1;white-space:nowrap}.chapter>div{width:49%}.chapter p:not(.eyebrow){max-width:430px}.story-active .cast{opacity:.9}.story-active .cast button{background:#281825f2}body.journey-started.story-active #portrait{right:6vw;width:44vw}body.journey-started.story-active .chapter h2{max-width:540px}body.journey-started.story-active .chapter p:not(.eyebrow){max-width:400px}@media(max-width:800px){.welcome{padding:130px 6vw 7vh}.cast{right:3vw;bottom:6vh;width:76px;max-width:76px;gap:5px}.cast button{width:76px}.cast img{height:50px}.cast span{padding:5px 6px;font-size:9px}body.journey-started.story-active #portrait{right:7vw;width:47vw}.chapter>div{width:56%}}@media(max-width:520px){.welcome{min-height:110svh;padding:120px 6vw 7vh}.welcome>p:not(.eyebrow){max-width:54vw;font-size:14px}.welcome h1{max-width:58vw}.cast{right:2.5vw;bottom:5vh;width:64px;max-width:64px;gap:4px}.cast::before{font-size:7px;letter-spacing:.1em}.cast button{width:64px}.cast img{height:43px}.cast span{padding:4px;font-size:8px}body.journey-started.story-active #portrait{right:-2vw;width:60vw;height:42vh}.chapter>div{width:55vw}.chapter h2{font-size:34px}.chapter p:not(.eyebrow){font-size:14px}}
/* Guide chooser: keep the compact rail visible, with a real accessible popup for the full cast. */
.welcome>h1,.welcome>p:not(.eyebrow),.welcome>#begin,.welcome>.disclosure{width:min(66.6667vw,1100px);max-width:66.6667vw}.guide-switcher{position:fixed;right:2.5vw;bottom:7vh;z-index:7;width:92px;display:flex;flex-direction:column;align-items:stretch;gap:7px}.guide-toggle{width:100%;min-height:30px;padding:7px 3px;border-color:#f8d6e95c;background:#281825e8;color:#f2b9d9;font-size:8px;line-height:1;letter-spacing:.16em;white-space:nowrap;box-shadow:0 8px 24px #140b15aa}.cast{position:static;right:auto;bottom:auto;z-index:auto;display:flex;flex-direction:column;align-items:stretch;gap:7px;margin:0;width:92px;max-width:92px}.cast::before{content:none;display:none}.cast button{width:92px}.guide-dialog{width:min(760px,calc(100vw - 32px));max-width:none;margin:auto;padding:clamp(22px,3vw,34px);background:#281825f5;border:1px solid #f277bf70;box-shadow:0 28px 90px #120814cc}.guide-dialog::backdrop{background:#100710b8;backdrop-filter:blur(7px)}.guide-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}.guide-dialog-head h2{margin:10px 0 12px;max-width:500px;font-size:clamp(34px,4.2vw,58px)}.guide-dialog-head p:not(.eyebrow){max-width:40ch;margin:0;color:#d9c6d7;font-size:14px;line-height:1.65}.guide-dialog-head #guide-close{min-height:36px;padding:8px 12px;font-size:11px}.guide-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:28px}.guide-option{min-width:0;padding:0;overflow:hidden;text-align:left;background:#1c111c;border-color:#f8d6e940;box-shadow:0 10px 22px #140b1550}.guide-option:hover,.guide-option:focus-visible{border-color:#f277bf}.guide-option[aria-pressed=true]{border-color:#f277bf;box-shadow:0 0 0 1px #f277bf,0 10px 22px #140b1550}.guide-option img{display:block;width:100%;height:170px;object-fit:cover;object-position:50% 6%}.guide-option span,.guide-option small{display:block}.guide-option span{padding:10px 10px 2px;font-size:13px}.guide-option small{padding:0 10px 11px;color:#d3abc2;font-size:10px;line-height:1.25}@media(max-width:800px){.guide-switcher{right:3vw;bottom:6vh;width:76px}.cast{width:76px;max-width:76px;gap:5px}.guide-toggle{font-size:7px}.cast button{width:76px}.guide-options{grid-template-columns:repeat(3,minmax(0,1fr))}.guide-option img{height:150px}}@media(max-width:520px){.welcome>h1,.welcome>p:not(.eyebrow),.welcome>#begin,.welcome>.disclosure{width:58vw;max-width:66.6667vw}.guide-switcher{right:2.5vw;bottom:5vh;width:64px}.cast{width:64px;max-width:64px;gap:4px}.guide-toggle{min-height:28px;font-size:6px;letter-spacing:.08em}.cast button{width:64px}.guide-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}.guide-option img{height:125px}.guide-option span{padding:8px 8px 2px;font-size:12px}.guide-option small{padding:0 8px 9px;font-size:9px}.guide-dialog-head{gap:12px}.guide-dialog-head h2{font-size:34px}}
.welcome>h1,.welcome>p:not(.eyebrow),.welcome>.disclosure{width:min(66.5vw,1100px);max-width:66.5vw}.welcome>#begin{width:max-content;max-width:66.5vw}@media(max-width:520px){.welcome>h1,.welcome>p:not(.eyebrow),.welcome>.disclosure{width:58vw;max-width:66.5vw}.welcome>#begin{width:max-content;max-width:66.5vw}}

/* Optimization pass: preserve the cinematic composition while keeping mobile controls legible. */
.eyebrow{font-size:11px}
@media(max-width:520px){
  .welcome>h1,.welcome>p:not(.eyebrow),.welcome>.disclosure{width:57vw;max-width:57vw}
  .welcome>h1{font-size:38px}
  .welcome>p:not(.eyebrow){font-size:13px;line-height:1.55}
  .guide-switcher{right:2.5vw;bottom:4.5vh;width:72px}
  .cast{width:72px;max-width:72px;gap:5px}
  .cast button{width:72px}
  .cast img{height:48px}
  .cast span{padding:5px 6px;font-size:10px}
  .guide-toggle{min-height:30px;font-size:8px;letter-spacing:.06em}
  #portrait,body.journey-started.story-active #portrait{right:-12vw;width:44vw;height:34vh}
}

/* Avoid presenting empty guide cards while their local portraits decode. */
body:not(.guides-ready) #guide-switcher,
body:not(.guides-ready) #portrait{opacity:0!important;visibility:hidden!important}
#guide-switcher{transition:opacity .35s ease,visibility 0s linear .35s}
body.guides-ready #guide-switcher{transition-delay:0s}
#portrait[data-chapter="6"]{width:42vw;height:86vh}
#portrait[data-chapter="6"] img{inset:auto 0 0 auto;width:auto;height:100%;min-height:0;object-fit:contain;object-position:100% 100%}
@media(max-width:800px){#portrait[data-chapter="6"]{right:3vw;width:42vw;height:74vh}}
@media(max-width:520px){#portrait[data-chapter="6"]{right:-4vw;width:70vw;height:46vh}}

/* Keep the legacy editor capture usable only as a clean loading fallback. */
.poster{object-position:50% 47%;transform:scale(1.3);transform-origin:50% 50%;filter:saturate(.86) brightness(.72);transition:opacity .6s ease}
.world-ready .poster{opacity:0}
@media(max-width:520px){.poster{object-position:50% 50%;transform:scale(1.16)}}
@media(max-width:520px){.welcome{min-height:100svh;padding-bottom:max(28px,4vh)}#world-status{top:86px;bottom:auto;left:6vw}}

/* One legible text layer and one sharp portrait at each camera stop. */
h1,h2{text-wrap:balance}
body #story .garden-step>div,body #lounge>div{filter:none!important;transition:none!important;visibility:hidden}
body #story .garden-step.is-active>div,body #lounge.is-active>div{visibility:visible;animation:chapter-arrive .4s ease both}
@keyframes chapter-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.private-active #story .chapter>div{visibility:hidden!important}
body #portrait,body.journey-started.story-active #portrait,body #portrait[data-chapter="6"]{right:6vw;top:auto;bottom:0;width:40vw;height:80vh;mask-image:none;overflow:visible}
body #portrait img,body #portrait[data-chapter="6"] img{inset:auto 0 0 auto;width:auto;height:80vh;min-height:0;max-width:none;object-fit:contain;object-position:right bottom;filter:none;transition:opacity .5s cubic-bezier(.22,.75,.2,1);transform:none}
body #portrait img.active{transform:none}
/* Outgoing look fades out quickly; the incoming one dissolves in on top of an empty stage. */
body #portrait img.leaving{transition:opacity .16s ease-in}
.welcome>h1,.welcome>p:not(.eyebrow),.welcome>.disclosure{max-width:min(49vw,700px)}
.welcome #begin{width:auto;max-width:none}
body #private{min-height:100svh;padding:0}
body #private>div{position:fixed;left:7vw;bottom:8vh;width:min(49vw,560px);visibility:hidden}
body.private-active:not(.product-active) #private>div{visibility:visible;animation:chapter-arrive .4s ease both}
@media(max-width:600px){
 .guide-switcher{right:12px;bottom:28px;width:48px;gap:6px}
 .cast,.cast button{width:48px;max-width:48px}
 .cast img{height:38px}.cast span{font-size:8px;padding:4px 3px}
 .guide-toggle{font-size:7px;white-space:normal;line-height:1.4;min-height:34px;padding:4px}
 body #portrait,body.journey-started.story-active #portrait,body #portrait[data-chapter="6"]{right:50px;width:32vw}
 .welcome{padding:100px 22px 28px;min-height:100svh}
 .welcome>h1,.welcome>p:not(.eyebrow),.welcome>.disclosure{width:43vw;max-width:43vw}
 .welcome h1{font-size:clamp(30px,8.5vw,42px);margin:8px 0 12px}
 .welcome>p:not(.eyebrow){font-size:13px;line-height:1.5;margin:7px 0}
 .welcome #begin{margin-top:12px}
 .welcome .eyebrow{margin-bottom:0}
 body.journey-started.story-active #story .garden-step>div,body.journey-started.story-active #lounge>div,body #private>div{left:22px;bottom:28px;width:43vw;max-width:260px}
 .chapter h2{font-size:clamp(26px,7vw,34px);line-height:1.08;margin:8px 0 14px}
 .chapter p:not(.eyebrow){font-size:13px;line-height:1.5;margin:10px 0}
 .chapter .eyebrow{font-size:9px}.chapter button{font-size:11px;padding:9px;min-height:40px;margin-top:8px}
 .scrim{background:linear-gradient(0deg,#20111df2,transparent 75%)}
}
@media(prefers-reduced-motion:reduce){body #portrait img,body #story .chapter>div,body #private>div{animation:none!important;transition:none!important}}

/* Keep the companion clear of the guide switcher: she sat underneath it at right:6vw. */
@media(min-width:801px){
 #portrait,body.journey-started.story-active #portrait,body #portrait[data-chapter="6"]{
  right:25vw!important;width:36vw!important}
}
@media(min-width:801px) and (max-width:1200px){
 #portrait,body.journey-started.story-active #portrait{right:23vw;width:38vw}
}

/* Explicit way back from the product part (the embedded page swallows the wheel at its edges). */
#back-to-garden{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;
 padding:11px 18px;border-radius:999px;border:1px solid rgba(246,177,208,.55);
 background:rgba(28,18,36,.85);color:#f8ecf4;font:600 13px/1 -apple-system,'Segoe UI',Roboto,sans-serif;
 cursor:pointer;display:none;backdrop-filter:blur(6px)}
body.product-active #back-to-garden{display:block}