.living-world {
  --world-inset:84px; --world-departure:1; --world-arrival:0; --world-progress:0;
  position:relative; background:#071b23; color:#f2edd7; isolation:isolate;
  scroll-margin-top:var(--world-inset);
}
.living-world.is-scrollable { height:280svh; }
.living-world-stage {
  position:relative; height:calc(100svh - var(--world-inset)); min-height:540px;
  overflow:hidden; contain:paint;
  background:radial-gradient(ellipse at 48% 44%,#315d77 0%,#193b55 32%,#102a40 65%,#091e29 100%);
}
.living-world.is-scrollable .living-world-stage { position:sticky; top:var(--world-inset); min-height:0; }
.living-world-stage::before {
  content:""; position:absolute; z-index:1; pointer-events:none; inset:0;
  background:radial-gradient(ellipse at 44% 41%,#e2d5a312 0%,transparent 24%),radial-gradient(ellipse at 50% 49%,transparent 15%,#04191422 65%,#03191288 100%);
}
.living-world-stage::after {
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none; opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.living-world-canvas,.living-world-poster { position:absolute; inset:0; width:100%; height:100%; }
.living-world-canvas canvas { display:block; width:100%; height:100%; }
.living-world-poster { object-fit:contain; opacity:1; transition:opacity .45s ease; }
.living-world[data-renderer="webgl"] .living-world-poster { opacity:0; pointer-events:none; }
.living-world-topline {
  position:absolute; z-index:3; top:38px; left:48px; right:48px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font:400 10px/1.5 monospace; letter-spacing:.16em; text-transform:uppercase; color:#c9d5c4;
}
.living-world-topline::before { content:"+"; margin-right:-10px; color:#ccdd9c; font-size:17px; }
.living-world-topline p { margin:0; flex:1; }
.living-world-topline span { color:#92ada6; font-size:9px; letter-spacing:.12em; }
.living-world-intro {
  position:absolute; z-index:3; left:0; right:0; top:19%; text-align:center;
  opacity:var(--world-departure); pointer-events:none; text-shadow:0 2px 22px #061f28;
  transform:translateY(calc((1 - var(--world-departure))*-14px));
}
.living-world-intro h2 { font-family:var(--display); font-size:clamp(30px,3.8vw,58px); line-height:1.15; font-weight:400; letter-spacing:-.055em; }
.living-world-intro p { margin-top:17px; font-size:13px; letter-spacing:.015em; color:#bdcfc8; }
.living-world-ending {
  position:absolute; z-index:3; bottom:7.5%; left:0; right:0; text-align:center;
  opacity:var(--world-arrival); transform:translateY(calc((1 - var(--world-arrival))*14px)); pointer-events:none;
}
.living-world-ending p { font-family:var(--display); font-size:clamp(30px,3.8vw,58px); line-height:1.1; letter-spacing:-.05em; }
.living-world-baseline {
  position:absolute; z-index:3; bottom:29px; left:48px; right:48px;
  display:flex; align-items:center; gap:18px; color:#9fb5a4;
  font:400 9px/1.5 monospace; letter-spacing:.14em; text-transform:uppercase;
}
.living-world-baseline .world-rule { height:1px; flex:1; background:#88a49e40; }
.living-world-baseline .world-rule::after { content:""; display:block; width:calc(var(--world-progress)*100%); height:1px; background:#c4d4a4; }
.living-world:not(.is-scrollable) { --world-arrival:1; --world-departure:0; }
@media(max-width:700px) {
  .living-world.is-scrollable { height:240svh; }
  .living-world-topline { top:26px; left:24px; right:24px; font-size:9px; letter-spacing:.11em; }
  .living-world-topline span { display:none; }
  .living-world-intro { top:16%; padding:0 25px; }
  .living-world-intro h2 { font-size:clamp(30px,7.9vw,46px); }
  .living-world-intro p { max-width:250px; margin:15px auto 0; font-size:12px; line-height:1.6; }
  .living-world-ending { bottom:15%; }
  .living-world-ending p { font-size:36px; }
  .living-world-baseline { bottom:23px; left:24px; right:24px; font-size:8px; gap:12px; }
}
@media(max-height:550px) and (min-width:701px) {
  .living-world-topline { top:18px; }
  .living-world-intro { top:15%; }
  .living-world-intro h2,.living-world-ending p { font-size:30px; }
  .living-world-ending { bottom:7%; }
  .living-world-baseline { bottom:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .living-world,.living-world.is-scrollable { height:auto; }
  .living-world-stage,.living-world.is-scrollable .living-world-stage { position:relative; top:auto; min-height:540px; }
  .living-world-poster { transition:none; }
  .living-world-intro { display:none; }
  .living-world-ending { opacity:1; transform:none; }
}
@media print {
  .living-world,.living-world.is-scrollable { height:auto; break-inside:avoid; }
  .living-world-stage,.living-world.is-scrollable .living-world-stage { position:relative; top:0; height:500px; }
  .living-world-canvas { display:none; }
  .living-world-poster { opacity:1!important; }
}