.future-lab {
  position: relative;
  overflow: hidden;
  padding: 130px 6vw 150px;
  color: #f7f5ff;
  background:
    radial-gradient(circle at 76% 14%, rgba(205, 91, 197, .2), transparent 27%),
    radial-gradient(circle at 14% 78%, rgba(53, 126, 224, .22), transparent 31%),
    radial-gradient(circle at 48% 52%, rgba(90, 59, 181, .18), transparent 38%),
    linear-gradient(155deg, #050b2b, #101b56 48%, #17104e 74%, #080b2a);
}

.future-lab::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .76;
  background-image:
    radial-gradient(circle, rgba(255, 210, 226, .82) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(133, 226, 255, .72) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .6) 0 1px, transparent 1.4px);
  background-position: 18px 25px, 55px 80px, 3px 4px;
  background-size: 109px 109px, 143px 143px, 71px 71px;
}

.future-lab::after {
  position: absolute;
  inset: 20% -20% -15%;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(89, 94, 226, .12), transparent 58%);
  filter: blur(20px);
}

.future-heading {
  position: relative;
  z-index: 2;
  margin: 75px 0 26px;
}

.future-heading > p {
  color: rgba(255, 255, 255, .34);
  font: 8px var(--mono);
  letter-spacing: .16em;
}

.future-heading h2 {
  max-width: 1040px;
  margin: 24px 0 0;
  font: 400 clamp(52px, 7.2vw, 102px)/.98 var(--serif);
  letter-spacing: -.055em;
}

.future-heading h2 i { color: #b9b3d3; font-weight: 400; }

.future-stage {
  --parallax-x: 0px;
  --parallax-y: 0px;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  position: relative;
  z-index: 3;
  height: 1160px;
  max-width: 1240px;
  margin: 0 auto;
  isolation: isolate;
}

.future-sky-decor { position: absolute; z-index: 0; inset: -140px -5% 0; pointer-events: none; }
.future-moon { position: absolute; left: 3%; top: 32px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff7d4, #ffc49f 56%, #e27aa9); box-shadow: 0 0 55px rgba(255, 174, 190, .35); }
.future-moon::before,.future-moon::after { position: absolute; content: ""; border-radius: 50%; background: rgba(191, 105, 151, .12); }
.future-moon::before { width: 18px; height: 18px; left: 23px; top: 22px; }
.future-moon::after { width: 12px; height: 12px; right: 22px; bottom: 24px; }
.future-cloud { position: absolute; width: 66px; height: 20px; border-radius: 30px; background: linear-gradient(180deg, rgba(188, 157, 233, .86), rgba(91, 91, 184, .8)); box-shadow: 0 9px 24px rgba(10, 16, 64, .35); }
.future-cloud::before,.future-cloud::after { position: absolute; bottom: 5px; content: ""; border-radius: 50%; background: inherit; }
.future-cloud::before { left: 12px; width: 28px; height: 28px; }.future-cloud::after { right: 10px; width: 22px; height: 22px; }
.future-cloud.cloud-a { right: 10%; top: 64px; transform: scale(.75); }.future-cloud.cloud-b { left: 14%; top: 320px; transform: scale(.52); opacity: .66; }
.future-spark { position: absolute; width: 8px; height: 8px; background: #ffd296; clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); filter: drop-shadow(0 0 8px #ffb7cc); animation: future-twinkle 2.6s ease-in-out infinite; }
.future-spark.spark-a { left: 18%; top: 178px; }.future-spark.spark-b { right: 4%; top: 420px; animation-delay: -1s; }.future-spark.spark-c { left: 48%; bottom: 80px; animation-delay: -1.8s; }
.future-cube { position: absolute; width: 24px; height: 24px; border: 0; background: linear-gradient(135deg, #e498c8, #826bc4); box-shadow: 8px 8px 0 #3c438b, 0 0 24px rgba(226, 129, 206, .2); transform: rotate(30deg) skew(-8deg); }
.future-cube.cube-a { left: 7%; top: 520px; }.future-cube.cube-b { right: 5%; top: 720px; transform: scale(.66) rotate(30deg) skew(-8deg); }.future-cube.cube-c { left: 42%; bottom: 20px; transform: scale(.48) rotate(30deg) skew(-8deg); }

.future-depth,
.future-depth i {
  position: absolute;
  border: 1px solid rgba(205, 201, 237, .09);
  border-radius: 50%;
  pointer-events: none;
}

.future-depth { inset: 90px 12% 60px; border-color: rgba(205, 201, 237, .055); }
.future-depth i:nth-child(1) { width: 560px; height: 560px; top: 40px; right: -190px; }
.future-depth i:nth-child(2) { width: 390px; height: 390px; top: 380px; left: -135px; }
.future-depth i:nth-child(3) { width: 700px; height: 700px; right: 4%; bottom: -300px; }

.future-road-network {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .28));
  transition: opacity .5s ease, filter .5s ease;
}

.road-segment path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.road-shadow { stroke: rgba(2, 4, 34, .52); stroke-width: 64; transform: translateY(22px); }
.road-side { stroke: url(#roadSide); stroke-width: 49; }
.road-top { stroke: url(#roadTop); stroke-width: 42; transition: stroke-width .35s ease, filter .35s ease; }
.road-edge { stroke: rgba(255, 220, 244, .62); stroke-width: 1.4; }
.road-flow {
  stroke: url(#roadLight);
  stroke-width: 3;
  stroke-dasharray: 9 25;
  opacity: .54;
  filter: url(#roadGlow);
  transition: opacity .3s ease;
  animation: road-travel 2.2s linear infinite;
}

.road-piers path:nth-of-type(odd) { fill: #7860a9; stroke: rgba(255, 203, 235, .32); stroke-width: 1; }
.road-piers path:nth-of-type(even) { fill: #29245f; }
.road-nodes circle { fill: #292662; stroke: rgba(255, 194, 231, .72); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .3s, filter .3s; }
.route-pods rect:first-child { fill: #ffd2db; stroke: #7ee4ff; stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(108, 226, 255, .75)); }
.route-pods rect:last-child { fill: #664d9b; }.route-pod { transform-box: fill-box; transform-origin: center; animation: pod-hover 2.8s ease-in-out infinite; }.route-pod.pod-b { animation-delay: -1.3s; }

.future-stage[data-route-focus="home"] .road-home-transit .road-flow,
.future-stage[data-route-focus="office"] .road-transit-office .road-flow,
.future-stage[data-route-focus="transit"] .road-flow { opacity: .95; animation: road-travel 1.7s linear infinite; }
.future-stage[data-route-focus="home"] .road-home-transit .road-top,
.future-stage[data-route-focus="office"] .road-transit-office .road-top,
.future-stage[data-route-focus="transit"] .road-top { stroke-width: 47; filter: url(#roadGlow); }
.future-stage[data-route-focus="home"] .road-nodes circle:first-child,
.future-stage[data-route-focus="transit"] .road-nodes circle:nth-child(2),
.future-stage[data-route-focus="office"] .road-nodes circle:last-child { fill: #d8d2ff; filter: drop-shadow(0 0 12px #c8c1ff); }

.future-world {
  --surface: #7f6bb0;
  --surface-top: #c58cbd;
  --surface-dark: #40387b;
  --glass: rgba(129, 222, 255, .54);
  --light: #d9d5ff;
  position: absolute;
  z-index: 3;
  width: 500px;
  height: 360px;
  transition: opacity .55s ease, filter .55s ease;
}

.world-office { top: 38px; right: 5%; --light: #92e8ff; --surface: #7468b1; --surface-top: #bb8cc7; }
.world-transit { top: 390px; left: 1%; --light: #75ebff; --surface: #7967af; --surface-top: #d18ab7; }
.world-home { top: 746px; right: 8%; --light: #ffd19d; --surface: #9a6dab; --surface-top: #e895aa; }

.world-trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  perspective: 1100px;
}

.world-trigger:focus-visible { outline: 1px solid rgba(226, 222, 255, .8); outline-offset: 10px; }

.world-label {
  position: absolute;
  z-index: 4;
  top: 52%;
  width: 185px;
  padding: 17px 18px 15px;
  border: 1px solid rgba(255, 196, 232, .3);
  background: rgba(17, 19, 69, .72);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .3s, background .3s, transform .3s;
}

.world-home .world-label,
.world-office .world-label { right: -4px; }
.world-transit .world-label { left: -4px; }

.world-label small,
.world-label i {
  display: block;
  color: rgba(255, 255, 255, .35);
  font: 7px var(--mono);
  font-style: normal;
  letter-spacing: .11em;
}

.world-label strong {
  display: block;
  margin: 10px 0 9px;
  font: 400 21px/1.15 var(--serif);
  letter-spacing: -.02em;
}

.world-label i { opacity: 0; transform: translateY(4px); transition: .3s ease; }

.world-trigger:hover .world-label {
  border-color: rgba(255, 202, 235, .72);
  background: rgba(104, 67, 139, .72);
  transform: translateY(-5px);
}

.world-trigger:hover .world-label i { opacity: 1; transform: none; }

.world-svg {
  display: block;
  width: 430px;
  height: 320px;
  overflow: visible;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
  transform-origin: 50% 54%;
  filter: drop-shadow(0 36px 34px rgba(0, 0, 34, .42)) drop-shadow(0 0 18px rgba(255, 128, 211, .1));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.world-home .world-svg,
.world-office .world-svg { margin-left: 0; }
.world-transit .world-svg { margin-left: 62px; }

.world-trigger:hover .world-svg {
  transform: translate3d(var(--parallax-x), calc(var(--parallax-y) - 7px), 34px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(1.025);
  filter: drop-shadow(0 48px 42px rgba(0, 0, 0, .38));
}

.world-orbit ellipse {
  fill: none;
  stroke: color-mix(in srgb, var(--light) 42%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 10;
  transform-origin: center;
  animation: orbit-turn 20s linear infinite;
}

.platform-top { fill: var(--surface); stroke: rgba(255, 204, 234, .5); stroke-width: 1.2; }
.platform-left { fill: #493b83; }
.platform-right { fill: #2c2866; }
.building-left { fill: #b177ac; }
.building-right { fill: #6d5aa0; }
.building-top { fill: #e2a6c4; }
.window { fill: color-mix(in srgb, var(--light) 62%, #506581); filter: drop-shadow(0 0 7px var(--light)); transition: fill .5s, filter .5s; }
.door { fill: #594282; }

.home-wing-left { fill: #936a9f; }
.home-wing-top { fill: #e7a2b3; }
.home-garden path { fill: #5a7695; }
.home-garden circle { fill: #72c3b4; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.home-lights circle,
.office-lights circle,
.transit-signals circle { fill: var(--light); filter: drop-shadow(0 0 8px var(--light)); }
.home-lights path,
.office-lights path,
.transit-signals path { fill: none; stroke: color-mix(in srgb, var(--light) 55%, transparent); stroke-width: 1; stroke-dasharray: 8 10; }

.transit-route {
  fill: none;
  stroke: color-mix(in srgb, var(--light) 76%, #51617e);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--light) 75%, transparent));
  transition: stroke .5s, stroke-width .5s;
}
.station-roof { fill: #ef9fc8; }
.station-glass { fill: rgba(114, 229, 255, .6); }
.station-side { fill: rgba(94, 91, 173, .86); }
.station-bench { fill: #604477; }
.shuttle-top { fill: #ffd0d8; }
.shuttle-left { fill: #b36f9d; }
.shuttle-right { fill: #65528f; }
.shuttle-window { fill: #b2e0e8; filter: drop-shadow(0 0 5px rgba(164, 227, 239, .7)); }
.shuttle { transform-origin: 170px 184px; animation: shuttle-breathe 4s ease-in-out infinite; }

.office-glass-left { fill: rgba(125, 222, 255, .58); }
.office-glass-right { fill: rgba(105, 169, 233, .52); }
.office-grid { fill: none; stroke: rgba(229, 231, 248, .36); stroke-width: 1; }
.roof-garden { fill: #72b8a8; }
.office-desks path { fill: #ffd0b4; filter: drop-shadow(0 0 5px rgba(255, 193, 171, .5)); }

.sofa-top { fill: #ffb29e; }.sofa-side { fill: #b96891; }.coffee-table { fill: #ffd5a8; }
.home-robot { fill: #eed3eb; stroke: #7deaff; stroke-width: 1; }.home-robot-eye { fill: #4451a0; }
.sensor-waves { fill: none; stroke: #7deaff; stroke-width: 2; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 5px #7deaff); animation: sensor-pulse 2.2s ease-in-out infinite; }
.home-steps,.office-steps { fill: #d78cbb; stroke: rgba(255,221,239,.42); stroke-width: .6; }

.lane-marks { fill: none; stroke: rgba(255, 229, 243, .78); stroke-width: 2; stroke-dasharray: 9 8; }
.tree-trunk { stroke: #684770; stroke-width: 4; }.tree-top { fill: #75c4b4; }
.info-pillar { fill: #72589b; }.info-screen { fill: #72dff5; filter: drop-shadow(0 0 7px #72dff5); }.signal-dot { fill: #ffd09e; filter: drop-shadow(0 0 5px #ffd09e); }

.office-screen { fill: #6b4e96; stroke: rgba(126, 233, 255, .66); stroke-width: 1; }.office-screen-line { fill: none; stroke: #7deaff; stroke-width: 1.3; filter: drop-shadow(0 0 4px #7deaff); }
.office-person { fill: #ffd1b8; stroke: #6b4c86; stroke-width: 1; }.office-chair { fill: none; stroke: #7b4e86; stroke-width: 4; stroke-linecap: round; }

.world-home[data-scene-mode="morning"] { --light: #f2e7bd; --surface: #747996; }
.world-home[data-scene-mode="night"] { --light: #9bb8ff; --surface: #4d5277; }
.world-home[data-scene-mode="night"] .window { fill: #97b7ff; }
.world-transit[data-scene-mode="link"] { --light: #c9b9ff; }
.world-transit[data-scene-mode="link"] .transit-route { stroke-width: 7; stroke-dasharray: 18 7; }
.world-transit[data-scene-mode="night"] { --light: #8eb7ff; --surface: #454b73; }
.world-office[data-scene-mode="together"] { --light: #e6c4ff; }
.world-office[data-scene-mode="together"] .office-grid { stroke: rgba(244, 217, 255, .8); }
.world-office[data-scene-mode="idea"] { --light: #f4d99c; }
.world-office[data-scene-mode="idea"] .roof-garden { filter: drop-shadow(0 0 12px #e9d7a8); }

.world-detail {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 7vw;
  width: min(36vw, 470px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% + 22px));
  transition: opacity .45s .18s, transform .55s .14s, visibility 0s .6s;
}

.world-back {
  margin-bottom: 68px;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  background: none;
  font: 8px var(--mono);
  letter-spacing: .1em;
}

.world-back:hover { color: #fff; border-color: #fff; }
.world-detail > p:first-of-type { color: rgba(255, 255, 255, .35); font: 8px var(--mono); letter-spacing: .15em; }
.world-detail h3 { margin: 28px 0 24px; font: 400 clamp(43px, 5vw, 72px)/1.02 var(--serif); letter-spacing: -.05em; }
.world-copy { max-width: 390px; min-height: 48px; color: rgba(255, 255, 255, .56); font-size: 12px; line-height: 1.9; }

.world-modes { display: flex; gap: 8px; margin-top: 35px; }
.world-modes button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  background: rgba(255, 255, 255, .025);
  font-size: 10px;
  transition: .25s ease;
}
.world-modes button:hover,
.world-modes button.is-active { color: #fff; border-color: rgba(224, 220, 255, .55); background: rgba(181, 174, 226, .14); }

.future-stage-note {
  position: absolute;
  bottom: 8px;
  left: 50%;
  margin: 0;
  color: rgba(255, 255, 255, .25);
  font: 7px var(--mono);
  letter-spacing: .16em;
  transform: translateX(-50%);
}

.future-stage.is-immersive .future-depth,
.future-stage.is-immersive .future-road-network,
.future-stage.is-immersive .future-stage-note,
.future-stage.is-immersive .future-world:not(.is-active) { opacity: 0; pointer-events: none; }
.future-stage.is-immersive { z-index: 1500; }

.future-world.is-active {
  position: fixed;
  z-index: 1300;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 48%, color-mix(in srgb, var(--light) 24%, transparent), transparent 31%),
    radial-gradient(circle at 28% 24%, rgba(211, 84, 194, .13), transparent 28%),
    radial-gradient(circle at 68% 50%, #25266f, #080b30 64%);
}

.future-world.is-active::before,
.future-world.is-active::after {
  position: absolute;
  content: "";
  border: 1px solid color-mix(in srgb, var(--light) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.future-world.is-active::before { width: 76vmin; height: 76vmin; right: 1vw; top: 50%; transform: translateY(-50%); }
.future-world.is-active::after { width: 47vmin; height: 47vmin; right: 15vw; top: 50%; transform: translateY(-50%); }

.future-world.is-active .world-trigger {
  top: 50%;
  right: 1vw;
  bottom: auto;
  left: auto;
  width: 61vw;
  height: min(78vh, 740px);
  transform: translateY(-50%);
  cursor: default;
}
.future-world.is-active .world-label { opacity: 0; pointer-events: none; }
.future-world.is-active .world-svg {
  width: 100%;
  height: 100%;
  margin: 0;
  filter: drop-shadow(0 70px 60px rgba(0, 0, 0, .42));
  animation: scene-breathe 6s ease-in-out infinite;
}
.future-world.is-active .world-detail { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: .26s; }
.future-world.is-transitioning { view-transition-name: future-world; }
.future-immersive-open { overflow: hidden; }
.future-immersive-open .nav { opacity: 0; pointer-events: none; }

::view-transition-old(future-world),
::view-transition-new(future-world) { animation-duration: .86s; animation-timing-function: cubic-bezier(.2, .75, .2, 1); }

@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes shuttle-breathe { 50% { transform: translate(3px, -2px); } }
@keyframes scene-breathe { 50% { transform: translate3d(var(--parallax-x), calc(var(--parallax-y) - 7px), 0) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(1.015); } }
@keyframes road-travel { to { stroke-dashoffset: -34; } }
@keyframes future-twinkle { 50% { opacity: .35; transform: scale(.72) rotate(35deg); } }
@keyframes pod-hover { 50% { filter: brightness(1.25) drop-shadow(0 0 7px rgba(118,232,255,.65)); } }
@keyframes sensor-pulse { 50% { opacity: .35; transform: translateX(2px); } }

@media (max-width: 900px) {
  .future-stage { height: 1080px; }
  .future-world { width: 450px; }
  .world-office { right: -2%; }
  .world-transit { left: -4%; }
  .world-home { right: -3%; }
  .future-world.is-active .world-trigger { right: -5vw; width: 68vw; }
  .world-detail { left: 5vw; width: 40vw; }
}

@media (max-width: 620px) {
  .future-lab { padding: 90px 5vw 110px; }
  .future-heading { margin: 55px 0 30px; }
  .future-stage { height: 1010px; }
  .future-world { width: 360px; height: 300px; }
  .world-svg { width: 350px; height: 280px; }
  .world-office { top: 20px; right: -24px; }
  .world-transit { top: 330px; left: -24px; }
  .world-home { top: 650px; right: -24px; }
  .world-label { top: 60%; width: 152px; padding: 13px 14px; }
  .world-label strong { font-size: 17px; }
  .world-label i { display: none; }
  .future-world.is-active .world-trigger { top: 58%; right: -10vw; width: 120vw; height: 56vh; }
  .future-world.is-active::before { top: 59%; right: -24vw; width: 100vmin; height: 100vmin; }
  .future-world.is-active::after { display: none; }
  .world-detail { top: 0; left: 0; width: 100%; padding: 28px 6vw 0; transform: translateY(18px); }
  .future-world.is-active .world-detail { transform: none; }
  .world-back { margin-bottom: 30px; }
  .world-detail h3 { margin: 18px 0 12px; font-size: 39px; }
  .world-copy { max-width: 88vw; min-height: 42px; font-size: 11px; }
  .world-modes { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .world-orbit ellipse,
  .shuttle,
  .road-flow,
  .future-world.is-active .world-svg { animation: none !important; }
  .world-svg,
  .future-world,
  .world-detail,
  .world-label { transition: none !important; }
}

/* Scene-legibility pass: the three worlds read before the connecting road. */
.future-road-network {
  opacity: .58;
}

.future-stage[data-route-focus] .future-road-network {
  opacity: .88;
}

.future-world {
  width: 540px;
  height: 390px;
}

.world-svg {
  width: 500px;
  height: 365px;
  overflow: visible;
  filter:
    saturate(1.18)
    contrast(1.05)
    drop-shadow(0 34px 28px rgba(56, 54, 105, .28))
    drop-shadow(0 0 20px rgba(255, 255, 255, .22));
}

.world-trigger::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 47%;
  width: 72%;
  height: 62%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--light) 20%, white), transparent 68%);
  opacity: .72;
  filter: blur(12px);
  transform: translate(-50%, -50%);
  transition: opacity .35s ease, scale .45s var(--ease);
}

.world-trigger:hover::before,
.world-trigger:focus-visible::before {
  opacity: 1;
  scale: 1.1;
}

.world-platform {
  filter: drop-shadow(0 11px 8px rgba(44, 43, 84, .22));
}

.home-building,
.office-building,
.transit-station,
.shuttle {
  filter: drop-shadow(0 9px 8px rgba(45, 43, 83, .26));
}

.home-building,
.home-furniture,
.home-garden {
  transform-box: fill-box;
  transform-origin: center;
}

.home-building { transform: translate(-7px, -9px) scale(1.13); }
.home-furniture { transform: translate(8px, -2px) scale(1.1); }
.home-garden { transform: translate(-3px, 1px) scale(1.08); }

.transit-station {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(2px, -7px) scale(1.15);
}

.shuttle {
  animation: shuttle-clear 4s ease-in-out infinite;
}

.office-building,
.office-details,
.office-desks {
  transform-box: fill-box;
  transform-origin: center;
}

.office-building { transform: translate(-5px, -10px) scale(1.15); }
.office-details,
.office-desks { transform: translate(3px, -1px) scale(1.08); }

.home-building path,
.home-furniture path,
.transit-station path,
.shuttle path,
.office-building path,
.office-details path,
.office-desks path {
  stroke: rgba(67, 57, 108, .55);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
}

.world-home .platform-top { fill: #9b82bd; }
.world-home .platform-left { fill: #69518f; }
.world-home .platform-right { fill: #4c437c; }
.world-home .building-left { fill: #e7a2a2; }
.world-home .building-right { fill: #bc81a5; }
.world-home .building-top { fill: #ffd0b9; }
.world-home .home-wing-left { fill: #c8869e; }
.world-home .home-wing-top { fill: #f3b8ad; }
.world-home .window { fill: #b9ecf1; }
.world-home .door { fill: #634b78; }
.world-home .home-garden path { fill: #7195a2; }
.world-home .home-garden circle { fill: #69c6aa; }

.world-transit .platform-top { fill: #7189bc; }
.world-transit .platform-left { fill: #566a9c; }
.world-transit .platform-right { fill: #3e477b; }
.world-transit .transit-route {
  stroke: #8de5ed;
  stroke-width: 14;
}
.world-transit .station-roof { fill: #ffb4c7; }
.world-transit .station-glass { fill: rgba(167, 236, 244, .84); }
.world-transit .station-side { fill: #8273b7; }
.world-transit .shuttle-top { fill: #fff0d2; }
.world-transit .shuttle-left { fill: #df8f9f; }
.world-transit .shuttle-right { fill: #846ca4; }
.world-transit .shuttle-window { fill: #c8f0f2; }

.world-office .platform-top { fill: #7880ba; }
.world-office .platform-left { fill: #59649c; }
.world-office .platform-right { fill: #424878; }
.world-office .building-left { fill: #aaa7d5; }
.world-office .building-right { fill: #7f8ac4; }
.world-office .building-top { fill: #d8c1e3; }
.world-office .office-glass-left { fill: rgba(153, 224, 239, .82); }
.world-office .office-glass-right { fill: rgba(132, 190, 232, .82); }
.world-office .office-grid { stroke: rgba(255, 255, 255, .82); }
.world-office .roof-garden { fill: #72bda7; }
.world-office .office-screen { fill: #63548e; stroke: #92eff4; stroke-width: 1.8; }
.world-office .office-desks path { fill: #ffd7bd; }

.world-home .world-label,
.world-office .world-label {
  right: -12px;
}

.world-transit .world-label {
  left: -12px;
}

@keyframes shuttle-clear {
  0%, 100% { transform: translate(-2px, -3px) scale(1.22); }
  50% { transform: translate(5px, -6px) scale(1.22); }
}

@media (max-width: 900px) {
  .future-world {
    width: 480px;
    height: 365px;
  }

  .world-svg {
    width: 450px;
    height: 335px;
  }
}

@media (max-width: 620px) {
  .future-world {
    width: 380px;
    height: 310px;
  }

  .world-svg {
    width: 370px;
    height: 292px;
  }

  .future-road-network {
    opacity: .48;
  }
}