/* ELM structure: scoped to the Platform page diagram. */
.platform-diagram.platform-diagram--elm {
  display: block;
  width: min(100%, 800px);
  aspect-ratio: 800 / 760;
  margin-left: auto;
}
.platform-diagram--elm::before { display: none; }
.elm-structure {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: 'Pretendard', sans-serif;
  text-anchor: middle;
}
.elm-orbit {
  fill: none;
  stroke: #acc9e3;
  stroke-width: 2;
  stroke-dasharray: 11 13;
}
.elm-support circle {
  fill: #f5faff;
  stroke: #92bde3;
  stroke-width: 2;
  transition: fill 250ms ease, stroke 250ms ease, stroke-width 250ms ease, filter 250ms ease;
}
.elm-support { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.elm-support text { pointer-events: none; }
.elm-support:focus { outline: none; }
.elm-support:focus-visible circle {
  stroke: #1861b1;
  stroke-width: 5;
}
.elm-support[aria-pressed="true"] circle {
  fill: #dceeff;
  stroke: #3686df;
  stroke-width: 4;
  filter: drop-shadow(0 5px 9px #4d99dd33);
}
@media (hover: hover) {
  .elm-support:hover circle {
    fill: #e1f0ff;
    stroke: #3686df;
    stroke-width: 4;
    filter: drop-shadow(0 5px 9px #4d99dd33);
  }
}
.elm-ready .elm-model,
.elm-ready .elm-support { opacity: 0; }
.is-animated .elm-model { animation: elm-appear 900ms 100ms both cubic-bezier(.2,.7,.2,1); }
.is-animated .elm-support[data-core="core1"] { animation: elm-appear 900ms 380ms both cubic-bezier(.2,.7,.2,1); }
.is-animated .elm-support[data-core="core2"] { animation: elm-appear 900ms 620ms both cubic-bezier(.2,.7,.2,1); }
.elm-ready .elm-orbit {
  transform-origin: 400px 300px;
  animation: elm-orbit-turn 65s linear infinite;
  animation-play-state: paused;
}
.elm-ready.is-in-view .elm-orbit { animation-play-state: running; }
@keyframes elm-appear {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes elm-orbit-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .elm-ready .elm-model,
  .elm-ready .elm-support,
  .elm-ready .elm-orbit { animation: none; opacity: 1; transform: none; }
  .elm-support circle { transition: none; }
}
.elm-core-label {
  fill: #1a3b5c;
  font-size: 28px;
  font-weight: 700;
}
.elm-core-description {
  fill: #415b73;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.elm-model circle {
  fill: #6ba8eb;
  stroke: #6ba8eb;
  stroke-width: 2;
  filter: drop-shadow(0 22px 28px rgba(82, 143, 215, .22)) drop-shadow(0 0 38px rgba(110, 176, 241, .28));
}
.elm-model-name {
  fill: white;
  font-size: 84px;
  font-weight: 700;
  letter-spacing: -2px;
}
.elm-model-description {
  fill: white;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
@media (max-width: 767px) {
  .platform-diagram.platform-diagram--elm {
    width: min(100%, 480px);
    margin: 0 auto;
  }
  .elm-core-label { font-size: 30px; }
  .elm-core-description { font-size: 25px; }
  .elm-model-description { font-size: 27px; }
}
