#habitat.connected-care-stage {
  position:relative;
  isolation:isolate;
  min-height:100%;
  overflow:hidden;
  background:#070b09;
  color:#f4f0e9;
  font-family:var(--sans);
}

.connected-scene-plane,
.connected-hotspot-plane {
  position:absolute;
  left:0;
  top:44%;
  width:100%;
  aspect-ratio:1672 / 941;
  transform:translateY(-50%);
}

.connected-scene-plane { z-index:0; }
.connected-scene-plane img { display:block; width:100%; height:100%; object-fit:fill; }

.connected-scene-shade {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#050907e8 0%,#060a08a6 27%,#060a0817 52%,#05080626 100%),
    linear-gradient(0deg,#050907dc 0%,#05090745 28%,transparent 58%,#05090721 100%);
}

.connected-hotspot-plane { z-index:3; pointer-events:none; }
.connected-hotspot {
  position:absolute;
  left:var(--hotspot-x);
  top:var(--hotspot-y);
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:transparent;
  color:#fff8e7;
  pointer-events:auto;
}
.connected-hotspot:focus-visible { outline:1px solid #ffe2a9; outline-offset:3px; }
.connected-hotspot-beacon,
.connected-hotspot-beacon::before,
.connected-hotspot-beacon::after { position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; }
.connected-hotspot-beacon {
  width:9px;
  height:9px;
  transform:translate(-50%,-50%);
  background:#fff7dc;
  box-shadow:0 0 6px 2px #fff7dc,0 0 22px 9px #e8b462bf,0 0 50px 18px #d98d2f6e;
  transition:transform .25s ease,box-shadow .25s ease;
}
.connected-hotspot-beacon::before {
  content:'';
  width:26px;
  height:26px;
  border:1px solid #ffe6b2b8;
  transform:translate(-50%,-50%);
  animation:connected-pulse 2.8s ease-out infinite;
}
.connected-hotspot-beacon::after {
  content:'';
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#f4bd6840 0 14%,#e29b3530 32%,transparent 70%);
  animation:connected-breathe 2.8s ease-in-out infinite;
}
.connected-hotspot:nth-child(2) .connected-hotspot-beacon::before,
.connected-hotspot:nth-child(2) .connected-hotspot-beacon::after { animation-delay:.55s; }
.connected-hotspot:nth-child(3) .connected-hotspot-beacon::before,
.connected-hotspot:nth-child(3) .connected-hotspot-beacon::after { animation-delay:1.1s; }
.connected-hotspot:nth-child(4) .connected-hotspot-beacon::before,
.connected-hotspot:nth-child(4) .connected-hotspot-beacon::after { animation-delay:1.65s; }
.connected-hotspot--static { pointer-events:none; }
.connected-hotspot:hover .connected-hotspot-beacon,
.connected-hotspot:focus-visible .connected-hotspot-beacon {
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 7px 3px #fff8df,0 0 26px 12px #efbd70db,0 0 58px 22px #d98d2f8c;
}

.connected-hotspot-label {
  position:absolute;
  left:calc(100% + 4px);
  top:50%;
  min-width:max-content;
  padding:7px 10px;
  border:1px solid #ffe2ab47;
  border-radius:2px;
  transform:translateY(-50%);
  background:#0a0f0cc7;
  box-shadow:0 8px 24px #0006;
  color:#fff7e8;
  font:500 .75rem/1.15 var(--sans);
  letter-spacing:.035em;
  text-shadow:0 1px 8px #000;
  white-space:nowrap;
  backdrop-filter:blur(8px);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.connected-hotspot--x10 .connected-hotspot-label,
.connected-hotspot--mask .connected-hotspot-label,
.connected-hotspot--ring .connected-hotspot-label { left:auto; right:calc(100% + 4px); }
.connected-hotspot:hover .connected-hotspot-label,
.connected-hotspot:focus-visible .connected-hotspot-label { border-color:#ffe2a9a6; background:#111812ed; color:#fff; }

.connected-scene-copy {
  position:absolute;
  z-index:2;
  left:var(--journey-pad);
  bottom:clamp(34px,5.5dvh,72px);
  width:min(510px,38vw);
  text-shadow:0 2px 26px #000b;
}
.connected-scene-kicker {
  margin:0 0 18px;
  color:#e5ba79;
  font:500 .75rem/1.4 var(--sans);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.connected-scene-copy h3 {
  max-width:11ch;
  margin:0;
  font-size:clamp(2.5rem,min(4.7vw,7.4dvh),5.5rem);
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.04em;
  text-transform:uppercase;
  text-wrap:balance;
}
.connected-scene-prompt {
  max-width:33ch;
  margin:20px 0 0;
  color:#dedbd3;
  font-size:.9375rem;
  line-height:1.6;
}
.connected-scene-description {
  max-width:62ch;
  margin:18px 0 0;
  color:#c9ccc6;
  font-size:clamp(.75rem,.82vw,.875rem);
  line-height:1.58;
  text-wrap:pretty;
}
.connected-scene-legend { display:none; }
.connected-scene-caption {
  position:absolute;
  z-index:2;
  right:var(--journey-pad);
  bottom:22px;
  color:#d7d5cf;
  font-size:.6875rem;
  line-height:1.5;
  letter-spacing:.04em;
  text-shadow:0 1px 12px #000;
}

@keyframes connected-pulse {
  0% { opacity:.9; transform:translate(-50%,-50%) scale(.7); }
  68%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.65); }
}
@keyframes connected-breathe {
  0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.82); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.16); }
}

@media (min-width:701px) and (max-height:760px) {
  .connected-scene-copy { bottom:28px; }
  .connected-scene-kicker { margin-bottom:10px; }
  .connected-scene-prompt { margin-top:12px; }
  .connected-scene-copy h3 { font-size:clamp(2.35rem,min(4.35vw,6.5dvh),4.25rem); }
  .connected-scene-description { margin-top:12px; font-size:.75rem; line-height:1.45; }
}

@media (max-width:700px) {
  #habitat.connected-care-stage { overflow-x:hidden; overflow-y:auto; }
  .connected-scene-plane,
  .connected-hotspot-plane { top:0; transform:none; }
  .connected-scene-shade {
    background:
      linear-gradient(180deg,#0509070f 0%,#0509071a 23%,#070b09ec 45%,#070b09 60%,#070b09 100%),
      linear-gradient(90deg,#0509074d,transparent 64%);
  }
  .connected-hotspot { width:42px; height:42px; }
  .connected-hotspot-label { display:none; }
  .connected-hotspot-beacon { width:8px; height:8px; }
  .connected-scene-copy {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:auto;
    margin-top:clamp(245px,58vw,320px);
    padding:0 var(--journey-pad) 30px;
  }
  .connected-scene-kicker { margin-bottom:9px; font-size:.6875rem; }
  .connected-scene-copy h3 { max-width:12ch; font-size:clamp(2rem,9vw,3.2rem); }
  .connected-scene-prompt { margin-top:10px; font-size:.8125rem; }
  .connected-scene-description { margin-top:14px; font-size:.8125rem; line-height:1.55; }
  .connected-scene-legend {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
    margin:18px 0 0;
    padding:15px 0 0;
    border-top:1px solid #ffffff24;
    list-style:none;
  }
  .connected-scene-legend li { display:flex; align-items:center; gap:8px; min-width:0; color:#f0ece4; font-size:.75rem; line-height:1.35; }
  .connected-scene-legend li > span { flex:none; width:6px; height:6px; border-radius:50%; background:#ffe6ad; box-shadow:0 0 10px 4px #e2a34880; }
  .connected-scene-caption { display:none; }
}

@media (max-width:390px), (max-width:700px) and (max-height:650px) {
  .connected-scene-copy { margin-top:225px; padding-bottom:22px; }
  .connected-scene-copy h3 { font-size:clamp(1.75rem,8vw,2.5rem); }
  .connected-scene-description { font-size:.75rem; line-height:1.48; }
  .connected-scene-legend { gap:7px 10px; margin-top:12px; padding-top:11px; }
  .connected-scene-legend li { font-size:.6875rem; }
}

@media (prefers-reduced-motion:reduce) {
  .connected-hotspot-beacon::before,
  .connected-hotspot-beacon::after { animation:none; }
  .connected-hotspot-beacon,
  .connected-hotspot-label { transition:none; }
}