.habitat-scene{--look:0}.telling-scene{--telling:0}
/* These two scenes keep the site's shared type, themes and inline controls. */
.habitat-scene,.telling-scene{position:relative;height:100%;min-height:0;isolation:isolate;overflow:hidden;background:var(--theme-bg);color:var(--theme-fg)}
.habitat-view{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab}
.habitat-photo{position:absolute;inset:-3%;background:url('/images/monachopsis.webp') 61% 50%/cover;transform:translateX(calc(var(--look)*10px)) scale(1.03);filter:saturate(.65);transition:transform 1s ease,filter 1.6s}
.habitat-edge{position:absolute;inset:0;border:solid color-mix(in srgb,var(--theme-bg) 80%,transparent);border-width:0 16vw 0 6vw;box-shadow:inset 0 0 70px #16171466;transform:translateX(calc(var(--look)*-16px));transition:border-width 1.5s,transform 1.2s,opacity 1.5s;pointer-events:none}
.habitat-view:after{content:'';position:absolute;inset:25% 0 0;background:linear-gradient(transparent,var(--theme-bg) 96%);pointer-events:none}
.habitat-distance{position:absolute;top:12%;left:63%;width:17%;height:36%;border:0;background:transparent;cursor:pointer;touch-action:none;z-index:2}
.distance-mark{display:block;width:18px;height:18px;margin:auto;border:1px solid #f4eed5b0;transform:rotate(45deg);background:#f4eed514;box-shadow:0 0 20px #f4eed52b}
.habitat-distance:hover .distance-mark,.habitat-distance:focus-visible .distance-mark{background:#f4eed550}
.habitat-state{position:absolute;right:6vw;top:5%;font-size:11px;letter-spacing:.15em;background:color-mix(in srgb,var(--theme-bg) 70%,transparent);padding:6px 12px}
.habitat-scene[data-imagining=true] .habitat-edge{border-width:0;opacity:0}
.habitat-scene[data-imagining=true] .habitat-photo{transform:translateX(calc(var(--look)*10px)) scale(1);filter:saturate(.85)}
.habitat-scene .title,.telling-scene .title{position:absolute;bottom:4%;left:5vw;right:5vw;z-index:3;max-width:700px;pointer-events:none}
.habitat-scene .title .hint,.telling-scene .title .hint{margin-top:12px}
.telling-space{position:absolute;inset:3% 5vw 45%;min-height:120px}
.telling-lived,.telling-heard{position:absolute;top:4%;bottom:23%;width:43%;overflow:hidden;background:var(--theme-surface)}
.telling-lived{left:0}.telling-heard{right:0}
.telling-memory,.telling-context,.telling-shared{position:absolute;inset:0;background-position:center;background-size:cover}
.telling-memory,.telling-shared{background-image:url('/images/exulansis.webp')}
.telling-context{background-image:url('/images/monachopsis.webp');filter:saturate(.4)}
.telling-shared{inset:12%;opacity:var(--telling);box-shadow:0 2px 24px #0005;transform:scale(calc(.7 + var(--telling)*.3));transition:opacity .4s,transform .5s}
.telling-lived>span,.telling-heard>span{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;font-size:11px;letter-spacing:.15em;background:linear-gradient(transparent,#111b);color:#f2ecdf}
.telling-lived{transition:transform 3s,opacity 3s,filter 3s;transform-origin:left center}
.telling-thread{position:absolute;left:43%;width:14%;top:40%;border-top:1px solid var(--theme-line);opacity:calc(.25 + var(--telling)*.65)}
.telling-control{position:absolute;bottom:0;left:10%;right:10%;display:flex;align-items:center;gap:18px;font-size:11px}
.telling-control span{white-space:nowrap;color:var(--theme-muted)}
.telling-control input{appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:36px;background:transparent;cursor:ew-resize;touch-action:pan-y;color:var(--theme-fg)}
.telling-control input::-webkit-slider-runnable-track{height:1px;background:var(--theme-line)}
.telling-control input::-moz-range-track{height:1px;background:var(--theme-line)}
.telling-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border-radius:50%;border:1px solid var(--theme-muted);background:var(--theme-bg);margin-top:-9px}
.telling-control input::-moz-range-thumb{width:19px;height:19px;border-radius:50%;border:1px solid var(--theme-muted);background:var(--theme-bg)}
.telling-scene[data-withdrawn=true] .telling-lived{transform:translateX(-4%) scale(.88);opacity:.6;filter:saturate(.3)}
.telling-scene[data-withdrawn=true] .telling-shared{opacity:0;transition:opacity 3s}
.telling-scene[data-withdrawn=true] .telling-thread{opacity:.1;transition:opacity 3s}
@media(max-width:600px){
 .habitat-photo{background-position:60% center}
 .habitat-edge{border-width:0 10vw 0 4vw}
 .habitat-distance{left:62%;top:8%;width:26%;height:32%}
 .habitat-scene .title,.telling-scene .title{bottom:3%;left:5vw;right:5vw}
 .telling-space{inset:2% 5vw 57%}
 .telling-lived,.telling-heard{width:46%}.telling-thread{left:46%;width:8%}
 .telling-control{left:0;right:0;gap:12px}
 .telling-scene .title .definition{font-size:16px;line-height:1.4}
}
@media(max-height:650px){
 .habitat-scene .title,.telling-scene .title{bottom:2%}
 .telling-space{inset:1% 5vw 62%}
 .telling-scene .title .hint{margin:4px 0;font-size:10px}
 .telling-scene .title .definition{font-size:15px;line-height:1.35}
 .telling-scene .title h1{font-size:28px}
 .telling-scene .title .zh{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.habitat-scene *,.telling-scene *{transition:none!important}.habitat-photo,.habitat-edge{transform:none!important}.telling-scene[data-withdrawn=true] .telling-lived{transform:none}}
/* Keep the relationship in the whole scene, rather than two thumbnails above copy. */
.telling-space{inset:0;min-height:0}
.telling-lived,.telling-heard{top:0;bottom:0;width:49%;background:transparent}
.telling-lived:after,.telling-heard:after{content:'';position:absolute;inset:25% 0 0;background:linear-gradient(transparent,var(--theme-bg) 80%);pointer-events:none}
.telling-lived>span,.telling-heard>span{top:5%;bottom:auto;left:10%;right:auto;z-index:2;background:#14171570;padding:5px 10px}
.telling-memory,.telling-context{background-position:center top}
.telling-thread{left:49%;width:2%;top:35%;z-index:2}
.telling-shared{inset:12% 12% 48%;background-size:cover}
.telling-control{top:39%;bottom:auto;left:15%;right:15%;z-index:4;padding:0 14px;background:color-mix(in srgb,var(--theme-bg) 90%,transparent);border-radius:2px}
.telling-scene .title{max-width:750px}
@media(max-width:600px){.telling-control{top:30%;left:5%;right:5%}.telling-shared{inset:12% 6% 63%}.telling-lived>span,.telling-heard>span{left:10%;top:4%}.telling-scene .title{bottom:3%}}
@media(max-height:650px){.telling-control{top:26%}.telling-shared{inset:7% 10% 70%}}

/* Exulansis: a recollection loses its edges, rather than a photo being pasted on. */
.telling-memory{background-position:42% top;filter:blur(.6px) saturate(.55);transition:filter 4s,opacity 4s,transform 5s;transform:scale(1.02);mask-image:linear-gradient(#000 35%,transparent 84%)}
.telling-lived:before{content:'';position:absolute;inset:-8%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 38% 30%,#d2d4ce8c,transparent 66%),radial-gradient(ellipse at 70% 60%,#abb2af66,transparent 65%);opacity:.18;transition:opacity 4s,transform 5s}
.telling-scene .telling-shared{inset:auto;top:7%;left:50%;width:min(94%,58vh);height:auto;aspect-ratio:4/3;background-size:contain;background-repeat:no-repeat;background-position:center;box-shadow:none;transform:translateX(-50%);filter:blur(1.2px) saturate(.45);opacity:calc(var(--telling)*.82);mask-image:linear-gradient(transparent,#000 20%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-composite:intersect;transition:opacity 1s,filter 1.5s,transform 1.5s}
.telling-shared:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 60%,#cbd1cb80,transparent 70%);opacity:.3}
.telling-scene[data-withdrawn=true] .telling-lived{transform:none;opacity:1;filter:none}
.telling-scene[data-withdrawn=true] .telling-memory{filter:blur(7px) saturate(.2);opacity:.35;transform:translate(-2%,-2%) scale(1.05)}
.telling-scene[data-withdrawn=true] .telling-lived:before{opacity:.72;transform:translate(3%,-2%)}
.telling-scene[data-withdrawn=true] .telling-shared{opacity:0;filter:blur(9px) saturate(.2);transform:translate(-45%,-4%);transition:opacity 4s,filter 4s,transform 5s}
@media(max-width:600px){.telling-scene .telling-shared{top:8%;width:100%}.telling-memory{background-position:40% top}}
@media(prefers-reduced-motion:reduce){.telling-memory,.telling-lived:before{transform:none!important;transition:none!important}.telling-scene .telling-shared{transform:translateX(-50%)!important;transition:none!important}}
/* Monachopsis: keep the complete reading/action group near the visual centre. */
.habitat-scene .title{top:50%;bottom:auto;transform:translateY(-50%);max-width:min(520px,46vw);}
@media(max-width:600px){
 .habitat-scene .title{top:60%;bottom:auto;max-width:90vw;}
}