.fxp-art,.sfx-hero-art { position:relative; }
.fxp-hero-sequence { --hero-progress:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; position:relative; padding:20px; background:linear-gradient(110deg,#0a263e,#113b4b); isolation:isolate; }
.fxp-layer { position:relative; z-index:1; border:1px solid #527084; background:#0b243be8; color:#e9faff; padding:15px; border-radius:13px; transform:translate(var(--layer-x,0px),var(--layer-y,0px)) rotate(var(--layer-turn,0deg)); box-shadow:0 0 var(--layer-glow,0px) #63e3ee44; }
.fxp-layer strong { display:block; font-size:.74rem; line-height:1.4; margin-block:12px; }
.fxp-layer-symbol { position:relative; width:44px; height:44px; display:grid; place-items:center; }
.fxp-layer-symbol > svg:not(.fxp-layer-ring) { width:22px; height:22px; color:#91e7ee; transform:scale(var(--layer-scale,1)); }
.fxp-layer-ring { position:absolute; inset:0; width:44px; height:44px; transform:rotate(-90deg); }
.fxp-layer-ring circle { fill:none; stroke:#80e9ee; stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--layer-progress,1)); }
.fxp-layer-lines { display:grid; gap:5px; }
.fxp-layer-lines span { height:4px; border-radius:5px; background:#60bcc9; transform:scaleX(var(--layer-progress,1)); transform-origin:left; }
.fxp-layer-lines span:nth-child(2) { width:80%; opacity:.65; }
.fxp-layer-lines span:nth-child(3) { width:55%; opacity:.4; }
.fxp-links { position:absolute; left:0; top:20px; width:100%; height:100px; z-index:0; }
.fxp-links path { fill:none; stroke:#456573; stroke-width:2; }
.fxp-links .fxp-link-progress { stroke:#9cf5ee; stroke-width:3; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--hero-progress,1)); }
@media(max-width:800px) {
  .fxp-hero-sequence { gap:8px; padding:14px 10px; }
  .fxp-layer { padding:10px 8px; border-radius:9px; }
  .fxp-layer strong { font-size:.65rem; }
  .fxp-layer-symbol,.fxp-layer-ring { width:36px; height:36px; }
}