.diagnostic {
  --diagnostic-core-x: -12px;
  --diagnostic-core-y: -8px;
  position: relative;
  height: 180vh;
  min-height: 1160px;
  overflow: clip;
}

.diagnostic-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  padding: clamp(28px, 4vw, 64px) var(--page-gutter);
  overflow: hidden;
}

.diagnostic-layout {
  height: calc(100% - 38px);
  padding-top: 16px;
}

.diagnostic-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
}

.diagnostic-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(230px, 21vw, 330px);
  aspect-ratio: 2.6;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  transform: translate(-50%, -50%) translate(var(--diagnostic-core-x), var(--diagnostic-core-y));
  transition: transform .65s cubic-bezier(.22,1,.36,1), border-color .4s ease;
  display: grid;
  place-content: center;
  text-align: center;
}

.diagnostic-core span {
  color: #888;
  font-size: 9px;
  letter-spacing: .18em;
}

.diagnostic-core strong {
  display: block;
  margin-top: 7px;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: .94;
}

.diagnostic-core i {
  position: absolute;
  left: 15%;
  top: 50%;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(237, 96, 0, .62);
}

.diagnostic-cluster {
  position: absolute;
  z-index: 3;
  width: min(29%, 300px);
  min-height: 210px;
  opacity: .36;
  transition: opacity .42s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.diagnostic-cluster:nth-of-type(1) { left: 3%; top: 6%; }
.diagnostic-cluster:nth-of-type(2) { right: 3%; top: 6%; }
.diagnostic-cluster:nth-of-type(3) { left: 3%; bottom: 2%; }
.diagnostic-cluster:nth-of-type(4) { right: 3%; bottom: 2%; }
.diagnostic-cluster.is-active { opacity: 1; transform: translateY(-4px); }

.diagnostic-node {
  width: 100%;
  padding: 0 0 15px;
  border: 0;
  border-bottom: 1px solid #393939;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.diagnostic-node span {
  display: block;
  margin-bottom: 9px;
  color: var(--orange);
  font-size: 10px;
  letter-spacing: .16em;
}

.diagnostic-node strong {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
}

.diagnostic-node > i {
  position: absolute;
  right: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.diagnostic-node:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.diagnostic-topics { margin-top: 18px; }
.diagnostic-topics ul { list-style: none; margin: 0; padding: 0; }
.diagnostic-topics li {
  padding: 9px 0;
  border-bottom: 1px solid #202020;
  color: #d2d2d2;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.35;
}

.diagnostic.is-enhanced .diagnostic-cluster:not(.is-active) .diagnostic-topics {
  opacity: .38;
}

@media (max-width: 900px) {
  .diagnostic { height: 165vh; min-height: 1050px; }
  .diagnostic-cluster { width: min(32%, 250px); }
  .diagnostic-cluster:nth-of-type(1), .diagnostic-cluster:nth-of-type(3) { left: 0; }
  .diagnostic-cluster:nth-of-type(2), .diagnostic-cluster:nth-of-type(4) { right: 0; }
}

@media (max-width: 760px) {
  .diagnostic { height: auto; min-height: 0; overflow: visible; }
  .diagnostic-sticky { position: relative; height: auto; min-height: 0; overflow: visible; padding-block: 64px; }
  .diagnostic-layout, .diagnostic-map { height: auto; min-height: 0; }
  .diagnostic-map { display: grid; gap: 34px; }
  .diagnostic-core { position: relative; left: auto; top: auto; width: min(78vw, 300px); margin: 42px auto 24px; transform: none; }
  .diagnostic-cluster,
  .diagnostic-cluster:nth-of-type(1),
  .diagnostic-cluster:nth-of-type(2),
  .diagnostic-cluster:nth-of-type(3),
  .diagnostic-cluster:nth-of-type(4) {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    opacity: .56;
  }
  .diagnostic-cluster.is-active { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .diagnostic { height: auto; min-height: 0; }
  .diagnostic-sticky { position: relative; height: auto; min-height: 760px; }
  .diagnostic-cluster { opacity: 1; }
  .diagnostic-core, .diagnostic-cluster { transition: none; }
}