/* The hero changes from a landscape model into the plan of that same model. */
#scene {transition:background-color .65s ease;}
#scene:is([data-view="blueprint"],[data-view="network"]) {cursor:default;background-color:#edf1f3;background-image:linear-gradient(#385d8810 1px,transparent 1px),linear-gradient(90deg,#385d8810 1px,transparent 1px);background-size:28px 28px;}
/* Network lights the drawing lines without changing the blueprint paper. */
#scene:before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--network-light,0);background-image:linear-gradient(#267bbe28 1px,transparent 1px),linear-gradient(90deg,#267bbe28 1px,transparent 1px);background-size:28px 28px;}
.hero-plan-frame {position:absolute;inset:18px;z-index:2;pointer-events:none;border:1px solid #395e873a;opacity:0;transition:opacity .5s;}
.hero-plan-frame:before,.hero-plan-frame:after {content:"";position:absolute;inset:-5px;border-block:1px solid #395e8748;}
.hero-plan-frame:after {inset:-5px 5px;border:0;border-inline:1px solid #395e8748;}
.hero-plan-north {position:absolute;right:14px;top:12px;display:grid;justify-items:center;gap:5px;color:#335983;font:12px Menlo,monospace;}
.hero-plan-north svg {width:18px;height:34px;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hero-plan-frame {opacity:1;}
.hotspot.association-hotspot .pin {border-radius:2px;background:#fff;width:34px;height:34px;border:1px solid #d3d9cc;box-shadow:0 3px 9px #2133331a;padding:3px;}
.association-hotspot .pin img {width:100%;height:100%;object-fit:contain;}
.association-hotspot .pin:before {display:none;}
.hotspot.association-hotspot .hotspot-label {font-weight:600;font-size:12px;}
.hotspot[data-site="distribution"] {left:65%;top:76%;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot {gap:0;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot .pin {background:#edf1f3;color:#2c5685;border:1px solid #466991;box-shadow:none;border-radius:0;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot .pin:before {display:none;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot-label {border:1px solid #466991;border-left:0;border-radius:0;box-shadow:none;background:#edf1f3f5;color:#214d80;font:13px Menlo,monospace;padding:9px 10px;transition:background .2s,color .2s;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot.label-left .hotspot-label {border-left:1px solid #466991;border-right:0;}
#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot:hover .hotspot-label,#scene:is([data-view="blueprint"],[data-view="network"]) .hotspot:focus-visible .hotspot-label {background:#244c83;color:white;transform:none;}
.hotspot:focus-visible {outline:2px solid var(--primary);outline-offset:5px;}
#scene .hotspot {transform:none;min-height:38px;}
.scene-leaders {position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;}
.scene-leaders path {fill:none;stroke:#607785;stroke-width:1;opacity:.45;}
#scene:is([data-view="blueprint"],[data-view="network"]) .scene-leaders path {stroke:#244c83;opacity:.6;}
#scene .data-hotspot .hotspot-label {background:#244c83;color:white;border-color:#244c83;padding:8px 13px;}
.data-hotspot .hotspot-label strong {display:block;font:600 13px var(--font);line-height:1.3;}
.data-hotspot .hotspot-label small {display:block;font:12px var(--font);margin-top:3px;}
#scene .service-hotspot .hotspot-label {display:block;}
#scene .animal-hotspot {display:flex;}
#scene .service-node {display:flex;flex-direction:column;align-items:stretch;gap:0;background:#fefefbf5;border:1px solid #cbd3d3;border-radius:2px;}
#scene .service-node .hotspot-label {border:0;border-radius:0;box-shadow:none;padding:9px 12px;font:600 13px var(--font);color:#244c83;background:none;transform:none;}
.hotspot-association {display:flex;align-items:center;gap:7px;border-top:1px solid #d9dedc;padding:7px 11px;font:11px var(--font);}
.hotspot-association img {width:20px;height:20px;object-fit:contain;}
#scene .service-node a:hover,#scene .service-node a:focus-visible {background:#e5ecf1;color:#193f70;}
#scene:is([data-view="blueprint"],[data-view="network"]) .service-node {background:#edf1f3f5;border-color:#466991;}
#scene:is([data-view="blueprint"],[data-view="network"]) .service-node .hotspot-label {font-family:Menlo,monospace;font-weight:400;}
.scene-motion-toggle {width:38px;height:38px;border:1px solid var(--line);border-radius:3px;font:14px var(--font);}
.scene-motion-toggle:hover {background:#fff;}
.mode-tabs button {position:relative;overflow:hidden;}
.mode-tabs button:after {content:"";position:absolute;bottom:0;left:0;width:var(--tour-progress,0%);height:2px;background:#91d8df;}
@media(max-width:760px){
  #scene {min-height:550px;}
  #scene .association-hotspot .hotspot-label {display:block;font-size:12px;padding:9px 6px;}
  #scene .association-hotspot .pin {width:29px;height:29px;}
  #scene .hotspot {min-height:44px;align-items:center;}
  #scene:is([data-view="blueprint"],[data-view="network"]) .hotspot-label {font-size:12px;padding:9px 6px;}
  #scene:is([data-view="blueprint"],[data-view="network"]) .data-hotspot .hotspot-label {font-size:12px;}
  .hero-plan-frame {inset:7px;}
  .hero-plan-north {right:10px;top:10px;}
  #scene .service-node a {min-height:44px;display:flex;align-items:center;padding:7px 10px;}
  #scene .service-hotspot .hotspot-label {font-size:12px;padding:9px 7px;}
  #scene .data-hotspot .hotspot-label {padding:8px 10px;}
  .scene-controls {gap:10px;}
  .scene-motion-toggle {width:40px;height:40px;}
}
@media(prefers-reduced-motion:reduce){#scene,.hero-plan-frame{transition:none;}}
#scene[data-view="network"] .scene-leaders path {stroke:#257abc;opacity:.75;}