/* Dialogue is typography; the installation is geometry inside the room renderer. */
.living-loop{color:var(--scene-ink,var(--ink));max-width:430px;position:relative}
.living-caption{min-height:140px}
#loop-actor{font:10px var(--mono);letter-spacing:1.8px;opacity:.7;margin:0 0 16px}
#loop-message{font:32px/1.13 var(--sans,sans-serif);font-weight:400;letter-spacing:-1px;margin:0 0 15px;max-width:390px}
#loop-detail{font:13px/1.65 var(--sans,sans-serif);max-width:325px;margin:0;opacity:.85}
.loop-status{display:flex;gap:25px;margin:25px 0 35px;font:9px/1.8 var(--mono);opacity:.7}
.loop-status span{display:block}.loop-status b{display:block;font-weight:400;color:var(--scene-ink,var(--ink))}
.loop-record{font:8px var(--mono);letter-spacing:1.3px;margin:0 0 15px;opacity:.6}
.living-bottom{display:flex;gap:18px;align-items:center;font:8px/1.7 var(--mono);opacity:.65}
.loop-pause{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid #82907780;padding:6px 0;cursor:pointer;white-space:nowrap}
.immersive .world-anchored.perspective{padding:30px 25px;justify-content:flex-start}
.immersive .world-anchored .perspective-heading{display:block;margin:0 0 65px;width:420px;padding:0}
.immersive .world-anchored .perspective-heading h2{font-size:40px;line-height:1.12}
.immersive .world-anchored .perspective-heading>p{font-size:13px;max-width:295px;line-height:1.7;margin:18px 0 0;padding:0}
@media(max-width:700px){
.immersive .perspective{padding:100px 7% 80px;justify-content:flex-start}
.immersive .perspective-heading h2{font-size:32px}
.immersive .perspective-heading>p{max-width:260px}
.immersive .living-loop{margin-top:auto;background:#142219dc;padding:20px;color:#f1f3e5;max-width:100%}
.immersive .living-loop :is(p,b){color:#f1f3e5}
#loop-message{font-size:25px}.living-caption{min-height:105px}.loop-status{margin:12px 0 18px}.living-bottom{font-size:7px}
}
/* Open, in-scene flow controls. Hidden steps never become floating panels. */
[hidden]{display:none!important}
.demo-welcome h3,.demo-ending h3,.signup-receipt h3{font:32px/1.12 var(--sans);font-weight:400;letter-spacing:-.04em;margin:15px 0}
.demo-welcome>p,.demo-ending>p,.signup-receipt>p{font-size:13px;line-height:1.7;max-width:345px}
.scene-action{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #a1b39180;border-radius:999px;background:#acbca012;color:inherit;padding:12px 20px;font:12px var(--sans);cursor:pointer;margin-top:15px}
.scene-action:hover{background:#acbca025}
.scene-action:focus-visible,.demo-replay:focus-visible,.demo-future:focus-visible,.signup-another:focus-visible{outline:2px solid #c0d4ae;outline-offset:4px}
.demo-note{font:9px/1.7 var(--mono)!important;opacity:.65;margin-top:20px}
.demo-end-actions{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;max-width:390px}
.demo-replay,.demo-future,.signup-another,.demo-next{font:11px var(--sans);border:0;background:none;color:inherit;padding:10px 0;text-align:left;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.demo-future{width:100%;margin-top:-6px}
.demo-replay{align-self:center;margin-top:15px}
.signup-receipt{outline:none}.signup-receipt .tiny{color:var(--scene-muted,var(--muted))}
.signup-another{display:block;margin-top:18px;opacity:.75}
.signup-demo-link{display:inline-block;font-size:11px;margin-top:24px;opacity:.8;text-underline-offset:5px}
.signup-demo-link:hover{text-decoration:underline}
.immersive .world-anchored .perspective-heading{margin-bottom:42px}
@media(max-width:700px){.demo-welcome h3,.demo-ending h3,.signup-receipt h3{font-size:27px}.demo-welcome>p,.demo-ending>p{font-size:12px}.demo-end-actions{gap:8px}.scene-action{font-size:11px}}
/* The explanation stays left; the complete conversation lives above the seats. */
@media(min-width:701px){
.immersive .world-anchored.perspective{display:block;padding:45px 25px}
.immersive .world-anchored .perspective-heading{position:absolute;left:25px;top:120px;width:325px;margin:0}
.immersive .world-anchored .perspective-heading h2{font-size:37px;line-height:1.15}
.immersive .world-anchored .perspective-heading>p{max-width:270px;margin-top:24px;line-height:1.8}
.immersive .world-anchored .living-loop{position:absolute;left:440px;top:40px;width:600px;max-width:600px;text-align:center}
.immersive .world-anchored .living-caption{min-height:145px}
.immersive .world-anchored #loop-message{max-width:560px;margin:0 auto 15px;font-size:37px;line-height:1.15}
.immersive .world-anchored #loop-detail{max-width:480px;margin:0 auto;font-size:15px}
.immersive .world-anchored .loop-status{justify-content:center;gap:48px;margin:18px 0}
.immersive .world-anchored .living-bottom{justify-content:center;margin-top:18px}
.immersive .world-anchored .demo-ending h3{font-size:35px}
.immersive .world-anchored .demo-ending>p{margin:16px auto;max-width:430px}
.immersive .world-anchored .demo-end-actions{justify-content:center;max-width:none}
}
.perspective .loop-record,.perspective .demo-future,.perspective .demo-ending .tiny,.perspective #demo-result-note{display:none!important}
.perspective .demo-playing{animation:conversation-arrive .35s ease-out}
@keyframes conversation-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.reduced-view .perspective .living-loop{text-align:left}
@media(prefers-reduced-motion:reduce){.perspective .demo-playing{animation:none}}
/* WebGL owns the dialogue at each chair; HTML remains available to assistive technology. */
.immersive:has(.journey-world[data-renderer="webgl"]) .living-caption,.immersive:has(.journey-world[data-renderer="webgl"]) .loop-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.immersive:has(.journey-world[data-renderer="webgl"]) .demo-ending h3,.immersive:has(.journey-world[data-renderer="webgl"]) .demo-ending>p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.immersive:has(.journey-world[data-renderer="webgl"]) .world-anchored .living-loop{top:560px}
.immersive:has(.journey-world[data-renderer="webgl"]) .living-bottom{margin:0;justify-content:center}
.immersive:has(.journey-world[data-renderer="webgl"]) .demo-end-actions{margin:0;gap:24px;align-items:center}
.immersive:has(.journey-world[data-renderer="webgl"]) .demo-end-actions .scene-action{display:none}
@media(min-width:701px){
.immersive:has(.journey-world[data-renderer="webgl"]) .world-anchored .living-loop{left:25px;top:450px;width:325px;max-width:325px;text-align:left}
.immersive:has(.journey-world[data-renderer="webgl"]) .living-bottom,.immersive:has(.journey-world[data-renderer="webgl"]) .demo-end-actions{justify-content:flex-start}
}