.article-jde__scene { height: 540px; perspective: 1100px; display: grid; place-items: center; }
.article-jde__assembly { position: relative; width: 320px; height: 320px; transform-style: preserve-3d; transform: rotateX(25deg); }
.article-jde__block, .article-jde__node { position: absolute; transform-style: preserve-3d; width: 170px; height: 170px; left: 75px; top: 75px; }
.article-jde__block--base { width: 210px; height: 210px; left: 55px; top: 55px; transform: translateZ(0); }
.article-jde__block--integration { width: 190px; height: 190px; left: 65px; top: 65px; transform: translateZ(58px); }
.article-jde__block--core { transform: translateZ(116px); }
.article-jde__top { position: absolute; inset: 0; background: linear-gradient(135deg, #314b70, #10213d); border: 1px solid #7290b3; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #f5f7fc; }
.article-jde__front { position: absolute; top: 100%; width: 100%; height: 24px; transform-origin: top; transform: rotateX(-90deg); background: #0a1730; border: 1px solid #375277; }
.article-jde__side { position: absolute; left: 100%; width: 24px; height: 100%; transform-origin: left; transform: rotateY(90deg); background: #192e4f; border: 1px solid #526c90; }
.article-jde__block--core .article-jde__top { background: linear-gradient(135deg, #ff4b5b, #d31830 70%, #ad132b); border-color: #ff9aa5; box-shadow: inset 0 0 0 9px #ffffff08; }
.article-jde__block--core .article-jde__front { background: #811b31; border-color: #ad3048; }
.article-jde__block--core .article-jde__side { background: #ac2039; border-color: #d44c60; }
.article-jde__top small { font-size: 11px; letter-spacing: 2px; }
.article-jde__top strong { font-size: 42px; line-height: 1.3; letter-spacing: 3px; }
.article-jde__top span { font-size: 8px; letter-spacing: 2px; }
.article-jde__top i { display: block; height: 3px; width: 95px; margin: 7px; background: #8fa7c5; opacity: .5; }
.article-jde__block--integration .article-jde__top i:nth-child(2) { background: #ff4b5b; opacity: 1; }
.article-jde__circuit { position: absolute; inset: -20px; border: 1px solid #48658b; transform: translateZ(-26px); background: repeating-linear-gradient(0deg, transparent 0 39px, #6589bc12 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #6589bc12 39px 40px); }
.article-jde__circuit::before, .article-jde__circuit::after { content: ''; position: absolute; background: #ef2b34; opacity: .75; }
.article-jde__circuit::before { top: 50%; left: 0; right: 0; height: 1px; }
.article-jde__circuit::after { left: 50%; top: 0; bottom: 0; width: 1px; }
.article-jde__node { width: 82px; height: 72px; transform: translateZ(12px); }
.article-jde__node--0 { left: -65px; top: 122px; }
.article-jde__node--1 { left: 122px; top: -65px; }
.article-jde__node--2 { left: 300px; top: 122px; }
.article-jde__node--3 { left: 122px; top: 310px; }
.article-jde__node .article-jde__top { background: #142745; border-color: #6a83a3; }
.article-jde__node .article-jde__top span { font-size: 8px; letter-spacing: .5px; text-transform: uppercase; }
.article-jde__node .article-jde__top i { height: 2px; width: 40px; margin: 3px; }
.article-jde__node .article-jde__top i:last-child { background: #ff5265; opacity: .9; width: 25px; }
.article-jde__caption { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; font-size: .55rem; letter-spacing: .12em; color: #9cacbf; margin: 1rem 0 0; }
.article-jde__caption span:last-child { color: #ff5b6c; }
@media (prefers-reduced-motion: no-preference) {
  .article-jde__block--integration { animation: jde-integration 9s ease-in-out infinite alternate; }
  .article-jde__block--core { animation: jde-evolution 9s ease-in-out infinite alternate; }
}
@keyframes jde-integration { to { transform: translateZ(78px); } }
@keyframes jde-evolution { to { transform: translateZ(156px); } }
.article-paused .article-jde__block { animation-play-state: paused; }
@media (min-width: 1400px) { .article-jde__assembly { scale: 1.16; } }
@media (max-width: 1100px) {
  .publication-article__header { grid-template-columns: minmax(0, 1fr); }
  .publication-article__header .article-jde { grid-column: 1; grid-row: 2; }
  .article-jde__scene { height: 410px; }
  .article-jde__assembly { scale: .85; }
}
@media (max-width: 500px) {
  .article-jde__scene { height: 350px; }
  .article-jde__assembly { scale: .66; }
  .article-jde__caption { font-size: .5rem; gap: .65rem; }
}