/* SpamTracker homepage — artwork-free by design until the user supplies backgrounds.
   Once ready, assign each slide's --st-image variable to url('/home-backgrounds/decks.webp') etc. */
.st-home,.st-plugin-page{width:min(1400px,100%);margin:auto;padding:48px 5vw 78px;color:#fdf8ff}
.st-home-intro{margin-bottom:30px}.st-overline{display:block;color:#6bf0ff;font-size:11px;letter-spacing:2.1px;font-weight:800;text-transform:uppercase}
.st-home-intro h1,.st-plugin-hero h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(48px,6vw,80px);margin:12px 0 6px;line-height:1.02;letter-spacing:.7px}
.st-home-intro p{margin:0;color:#cdbfe3;font-size:15px}
.st-carousel{position:relative;border:1px solid #965bc9;border-bottom:3px solid #5ceaff;border-radius:16px;background:#170b32;overflow:hidden;box-shadow:0 18px 70px #070212a8,0 0 34px #6c40a833}
.st-carousel-stage{height:500px;overflow:hidden}.st-slide{--st-image:none;--st-accent:#61eeff;--st-glow:#6041da;position:relative;isolation:isolate;display:grid;grid-template-columns:1.08fr .92fr;height:100%;min-height:0;background-image:linear-gradient(110deg,#150a30 4%,#211145e8 51%,#19234cd9 100%),var(--st-image);background-size:cover;background-position:center;overflow:hidden}
.st-slide[hidden]{display:none}.st-slide--plugin{--st-accent:#ec91ff;--st-glow:#e053ef;background-image:linear-gradient(110deg,#180a30 4%,#261049e8 51%,#382056d9 100%),var(--st-image)}
.st-slide--collection{--st-accent:#8dffad;--st-glow:#44cd88;background-image:linear-gradient(110deg,#100d2f 4%,#16194ce8 51%,#1b4b4ed9 100%),var(--st-image)}
.st-slide--damage{--st-accent:#ffb66e;--st-glow:#f6798f;background-image:linear-gradient(110deg,#170b2e 4%,#302044e8 51%,#61304dd9 100%),var(--st-image)}
.st-slide:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,#fff1 31%,transparent 32%,transparent 74%,#fff1 74.5%,transparent 75%),radial-gradient(circle at 84% 52%,var(--st-glow),transparent 38%);opacity:.45;pointer-events:none}
.st-slide-copy{padding:clamp(34px,5vw,73px);padding-right:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;z-index:1;padding-bottom:65px}
.st-kicker{color:var(--st-accent);font-size:12px;font-weight:800;letter-spacing:2.5px;border-left:3px solid var(--st-accent);padding-left:13px;text-transform:uppercase}
.st-slide h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(44px,5vw,78px);line-height:1.0;letter-spacing:.3px;margin:21px 0 17px;color:#fff;text-shadow:3px 3px 0 #0b041d;text-wrap:balance}
.st-slide p{max-width:470px;font-size:clamp(13px,1.15vw,16px);line-height:1.75;color:#e4d9f5;margin:0 0 31px}
.st-cta{display:inline-flex;gap:23px;align-items:center;justify-content:space-between;min-width:200px;padding:15px 20px;background:var(--st-accent);color:#160c27;border:2px solid #ffffff85;box-shadow:4px 4px 0 #0d0623,0 0 20px color-mix(in srgb,var(--st-accent),transparent 70%);border-radius:4px;font-weight:800;font-size:13px;transition:transform .15s,filter .15s}
.st-cta:hover{transform:translateY(-2px);filter:brightness(1.1)}.st-cta:focus-visible{outline:3px solid white}
.st-slide-visual{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.st-slide-visual:before{content:'';position:absolute;width:min(70%,310px);aspect-ratio:1;border:2px solid var(--st-accent);border-radius:50%;opacity:.45;box-shadow:0 0 0 35px #fff1,0 0 0 73px #fff1,0 0 100px var(--st-glow)}
.st-slide-artlabel{position:absolute;z-index:0;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(95px,12vw,200px);font-weight:800;color:#ffffff0b;transform:rotate(-12deg);letter-spacing:-8px;white-space:nowrap;user-select:none}
.st-visual-elements{position:relative;width:100%;height:100%;max-height:475px;min-height:330px}
.st-art-deck{position:absolute;width:134px;height:197px;border-radius:9px;border:3px solid #90eeff;top:26%;left:37%;box-shadow:0 20px 30px #060318a8,inset 0 0 36px #0009;background:radial-gradient(circle at 55% 30%,#c5f5ff65,transparent 42%),linear-gradient(135deg,#4327aa,#0c192e);transform:rotate(-13deg) translateX(-85px)}
.st-art-deck:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;font-size:72px;color:#c6faff55}
.st-art-deck--two{border-color:#ff7a55;background:linear-gradient(140deg,#b33b2e,#3c0a2f);transform:rotate(-5deg) translateX(-35px) translateY(-8px)}.st-art-deck--three{border-color:#76ffb8;background:linear-gradient(145deg,#237968,#1b124b);transform:rotate(8deg) translateX(25px) translateY(-12px)}.st-art-deck--four{border-color:#d695ff;background:linear-gradient(140deg,#8c39b3,#221044);transform:rotate(18deg) translateX(85px)}
.st-art-device{position:absolute;inset:22% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #df92ff;border-radius:20px;background:linear-gradient(145deg,#3e1d66,#160c30);box-shadow:0 0 55px #ce70ff66,inset 0 0 40px #c55cff22;transform:rotate(-8deg);font:800 clamp(18px,2.1vw,30px) 'Barlow Condensed',sans-serif;letter-spacing:1px}.st-device-symbol{color:#e8acff;font-size:100px;line-height:1.1}.st-device-accent{color:#73efff}.st-orbit{position:absolute;left:17%;top:20%;width:64%;height:60%;border:1px dashed #b57cff88;border-radius:50%;transform:rotate(30deg)}.st-orbit--two{transform:rotate(-30deg)}
.st-art-collection-card{position:absolute;width:196px;height:265px;left:36%;top:20%;border:3px solid #91ffc9;border-radius:13px;box-shadow:0 18px 45px #0009;background:radial-gradient(circle at 50% 36%,#71ffc477,transparent 34%),linear-gradient(150deg,#14565c,#1c164d)}.st-art-collection-card--back{transform:rotate(-20deg) translateX(-65px);border-color:#96caff}.st-art-collection-card--front{transform:rotate(8deg) translateX(32px);display:grid;place-items:center}.st-art-collection-card--front span{font-size:108px;color:#afffd4;text-shadow:0 0 40px #43eda7}.st-art-collection-spark{position:absolute;top:17%;left:68%;font-size:55px;color:#bcffef}
.st-art-damage{position:absolute;inset:20% 18%;border:2px solid #ffb884;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,#5e214caa,#27153dbb);box-shadow:0 15px 60px #0008,0 0 55px #e24f8880}.st-art-damage:before,.st-art-damage:after{content:'';position:absolute;width:65%;height:1px;background:#ffcb9d88}.st-art-damage:after{transform:rotate(90deg)}.st-art-damage>span{font-size:110px;color:#ffe0b9;text-shadow:0 0 40px #ff8d75}.st-art-damage>div{position:absolute;bottom:12%;left:10%;right:10%;display:flex;align-items:end;gap:9px;height:30%}.st-art-damage i{flex:1;background:#ff997f99;height:45%;border-radius:3px 3px 0 0}.st-art-damage i:nth-child(2){height:80%}.st-art-damage i:nth-child(3){height:58%}.st-art-damage i:nth-child(4){height:95%}.st-art-damage i:nth-child(5){height:35%}
/* Four small pagination dots sit inside the carousel, not below it. */
.st-carousel-pagination{position:absolute;z-index:5;bottom:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:13px;pointer-events:none}
.st-carousel-dot{pointer-events:auto;width:12px;height:12px;min-width:12px;padding:0;border:2px solid #dbd1eea8;border-radius:50%;background:#1b0e37b8;cursor:pointer;box-shadow:0 1px 7px #08031b8a;transition:background .18s,transform .18s,border-color .18s}
.st-carousel-dot.active{background:#65efff;border-color:#65efff;transform:scale(1.25);box-shadow:0 0 10px #65efff70}
.st-carousel-dot:hover{background:#b084ff;border-color:white}
.st-carousel-dot:focus-visible{outline:2px solid white;outline-offset:4px}
.st-screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.st-plugin-back{display:inline-block;font-size:12px;color:#78edff;margin-bottom:20px}.st-plugin-hero{display:grid;grid-template-columns:1.5fr .5fr;align-items:center;gap:30px;background:radial-gradient(circle at 85% 45%,#8a3fe766,transparent 35%),linear-gradient(130deg,#241040,#141232);border:1px solid #77439a;border-radius:15px;padding:50px;overflow:hidden}.st-plugin-hero p{font-size:16px;max-width:650px}.st-plugin-hero-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.st-secondary-link{padding:13px 18px;border:1px solid #7c57a4;border-radius:5px;font-size:12px;font-weight:800}.st-secondary-link:hover{border-color:#64efff;color:#64efff}.st-plugin-emblem{width:205px;aspect-ratio:1;border:2px solid #79efff;border-radius:28px;display:grid;place-items:center;justify-self:center;background:linear-gradient(145deg,#361162,#113a54);box-shadow:0 0 40px #7d39cc55;position:relative;transform:rotate(-8deg)}.st-plugin-emblem span{position:absolute;color:#db81ff;font-size:115px;opacity:.28}.st-plugin-emblem b{z-index:1;font:800 110px 'Barlow Condensed',sans-serif;background:linear-gradient(110deg,#6d46ff,#d75afc,#49f9ef);background-clip:text;color:transparent}
.st-plugin-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0}.st-plugin-features article{padding:26px;background:#211238;border:1px solid #60407d;border-radius:11px}.st-feature-icon{font-size:34px;color:#6ff1ff}.st-plugin-features h2{font-size:27px;margin:17px 0 8px}.st-plugin-features p{margin:0;font-size:13px}
.st-plugin-download{display:grid;grid-template-columns:1fr .9fr;gap:30px;padding:32px;border:1px solid #695087;background:#180d30;border-radius:12px}.st-plugin-download h2{font-size:36px;margin:14px 0}.st-plugin-download p{font-size:13px}.st-download-disabled{margin-top:18px;padding:15px 24px;border-radius:5px;border:1px solid #685979;background:#302840;color:#bdb0c8;opacity:.8;cursor:not-allowed;font-weight:800}.st-plugin-steps{padding:8px 0 0 20px;border-left:1px solid #60477c}.st-plugin-steps h3{font-size:22px}.st-plugin-steps ol{padding-left:22px;color:#d2c3e6;line-height:1.9;font-size:13px}.st-plugin-steps li{padding:4px 0}
@media(max-width:900px){.st-home,.st-plugin-page{padding:34px 4vw 60px}.st-carousel-stage{height:520px}.st-slide{grid-template-columns:1fr 0.75fr}.st-slide-copy{padding:35px}.st-slide h2{font-size:clamp(38px,5vw,65px)}.st-art-deck{width:100px;height:155px}.st-art-collection-card{width:135px;height:195px}.st-plugin-hero{padding:34px}}
@media(max-width:620px){.st-home-intro h1{font-size:49px}.st-home-intro p{font-size:13px}.st-slide{display:flex;flex-direction:column;height:100%;min-height:0}.st-carousel-stage{height:670px}.st-slide-copy{padding:27px 26px 10px;flex:0 0 auto;justify-content:flex-start}.st-slide h2{font-size:clamp(33px,9vw,49px);line-height:1.02;margin:12px 0 10px}.st-slide p{font-size:13px;line-height:1.5;margin-bottom:16px}.st-cta{min-width:unset;padding:12px 18px}.st-slide-visual{flex:1;min-height:170px;padding-bottom:45px}.st-visual-elements{min-height:170px;max-height:260px}.st-art-deck{top:18%;left:40%;width:83px;height:126px}.st-art-collection-card{top:8%;width:105px;height:142px}.st-art-collection-card--front span{font-size:65px}.st-art-device{inset:10% 29%;font-size:18px}.st-device-symbol{font-size:65px}.st-art-damage{inset:7% 24%}.st-art-damage>span{font-size:75px}.st-carousel-pagination{bottom:17px;gap:15px}.st-plugin-hero,.st-plugin-download{grid-template-columns:1fr}.st-plugin-emblem{display:none}.st-plugin-features{grid-template-columns:1fr}.st-plugin-steps{padding-left:0;border:0;border-top:1px solid #60477c;padding-top:20px}.st-plugin-hero h1{font-size:48px}}
@media(prefers-reduced-motion:reduce){.st-cta{transition:none}}
/* Four navigation entries fit on phones, with horizontal scrolling on narrower screens. */
@media(max-width:850px){header nav{justify-content:flex-start;gap:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#7840a1 transparent}header nav a{white-space:nowrap;padding:13px 12px;font-size:17px;flex:0 0 auto}}

/* Keep the third (longer) slide within the same frame as the others. */
.st-slide-copy{min-width:0}
.st-slide h2{max-width:100%}
@media(max-width:375px){.st-carousel-stage{height:710px}.st-slide-copy{padding:26px 20px 8px}.st-slide h2{font-size:32px}.st-slide p{font-size:12px;line-height:1.42;margin-bottom:14px}.st-slide-visual{min-height:140px}}

/* Headlines span the full carousel instead of the narrow left column.
   Font size is fitted against the available width for every language and slide. */
.st-slide-title{
  position:absolute;z-index:3;
  top:clamp(33px,5vw,70px);
  left:clamp(30px,5vw,73px);
  width:calc(100% - 2 * clamp(30px,5vw,73px));
  max-width:none;
  margin:0;
  font:800 64px/1.06 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:.25px;
  color:#fff;
  text-shadow:3px 3px 0 #0b041d;
  white-space:nowrap;
  text-wrap:nowrap;
  pointer-events:none;
}
.st-slide-title span{display:inline-block;white-space:nowrap}
.st-slide-copy{padding-top:180px;padding-bottom:88px;justify-content:flex-start}
.st-slide-copy p{margin-bottom:26px}
@media(max-width:900px){
  .st-slide-title{top:44px;left:35px;width:calc(100% - 70px)}
  .st-slide-copy{padding-top:160px;padding-bottom:70px}
}
@media(max-width:620px){
  .st-slide-title{top:27px;left:24px;width:calc(100% - 48px);font-size:40px}
  .st-slide-copy{padding:98px 26px 12px;justify-content:flex-start}
  .st-slide-copy p{margin:0 0 17px}
}
@media(max-width:375px){
  .st-slide-title{left:20px;width:calc(100% - 40px)}
  .st-slide-copy{padding:94px 20px 12px}
}

.st-title-small{display:none!important}
@media(max-width:620px){.st-title-full{display:none!important}.st-title-small{display:inline-block!important}}


/* Keep every carousel CTA in exactly the same spot across slides. */
.st-slide-copy{height:100%;display:flex;flex-direction:column;align-items:flex-start;}
.st-slide-copy p{margin:0;max-width:560px;}
.st-slide-copy .st-cta{margin-top:auto;align-self:flex-start;}
@media(max-width:620px){
  .st-slide-copy{height:auto;min-height:0;}
  .st-slide-copy .st-cta{margin-top:auto;}
}

/* Plugin distribution and installation guide */
.st-plugin-download{margin-top:28px;align-items:start}
.st-plugin-download .st-secondary-link{display:inline-block;margin-top:16px}
.st-plugin-download-link{display:inline-flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.st-plugin-download-link span{font-size:12px;opacity:.8}
[data-plugin-download] small{display:block;margin-top:12px;color:#c5b5db}
.st-install{margin-top:42px}.st-install>h2{font-size:36px;margin:10px 0 24px}
.st-install-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding:0;counter-reset:step}
.st-install-grid li{background:linear-gradient(150deg,#241638,#140c26);border:1px solid #60407d;border-radius:12px;padding:24px}
.st-install-number{font:800 28px 'Barlow Condensed',sans-serif;color:#65edff}
.st-install-grid h3{font-size:22px;margin:12px 0}.st-install-grid p,.st-install>p{font-size:14px;line-height:1.75;color:#d2c3e6}
.st-install-path{padding:20px;background:#0d081b;border:1px solid #60407d;border-radius:10px;margin:24px 0}
.st-install-path span{display:block;color:#c5b5db;font-size:12px;margin-bottom:10px}.st-install-path code{color:#65edff;overflow-wrap:anywhere}
.st-install-help{border-top:1px solid #60407d;padding:20px 0;font-size:14px}.st-install-help summary{cursor:pointer;font-weight:700}.st-install-help p{line-height:1.8;color:#d2c3e6}.st-install-help a{color:#65edff}
.st-plugin-page a:focus-visible,.st-plugin-page button:focus-visible,.st-install-help summary:focus-visible{outline:3px solid #65edff;outline-offset:5px}
@media(max-width:1000px){.st-install-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.st-install-grid{grid-template-columns:1fr}.st-plugin-download{padding:24px}.st-plugin-download h2,.st-install>h2{font-size:29px}.st-plugin-download-link{font-size:14px;max-width:100%}}
.st-plugin-download-link{--st-accent:#65edff;background:#65edff;color:#160c27}


/* My Collection: two continuously scrolling, randomly selected illustration lanes.
   The artwork is decorational; text, CTA and navigation remain on top. */
.st-slide--collection{background:#100d2f}
.st-slide--collection .st-collection-reel{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.st-slide--collection .st-collection-reel-lane{
  position:absolute;left:-5%;width:110%;height:42%;overflow:hidden;
}
.st-collection-reel-lane--first{top:18%;transform:rotate(-5deg) scale(1.04)}
.st-collection-reel-lane--second{top:53%;transform:rotate(4deg) scale(1.04)}
.st-collection-reel-track{
  display:flex;width:max-content;height:100%;will-change:transform;
  animation:st-collection-scroll 48s linear infinite;
}
.st-collection-reel-lane--second .st-collection-reel-track{
  animation-name:st-collection-scroll-reverse;animation-duration:58s;
}
.st-collection-reel-set{display:flex;gap:14px;padding-right:14px;flex:none;height:100%;align-items:center}
.st-collection-reel-set img{
  display:block;flex:none;width:clamp(118px,11.5vw,172px);height:94%;object-fit:cover;
  border:2px solid #ac9af7;border-radius:11px;
  background:#24113f;box-shadow:0 9px 22px #08051a99,0 0 18px #6b4cce40;
}
.st-collection-reel-lane--second img{border-color:#81edb7}
@keyframes st-collection-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes st-collection-scroll-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* The dark fade prioritizes readable text while keeping artwork visible on the right. */
.st-slide--collection:has(.st-collection-reel)::after{
  content:'';position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#110b2bf5 0%,#110b2be8 29%,#110b2bbf 47%,#110b2b40 74%,#110b2b13 100%),linear-gradient(0deg,#110b2b95 0%,transparent 23%,transparent 82%,#110b2b65 100%);
}
.st-slide--collection:has(.st-collection-reel) .st-slide-visual{visibility:hidden}
.st-slide--collection .st-slide-copy{z-index:2}
@media(max-width:620px){
  .st-collection-reel-lane--first{top:46%;height:27%}
  .st-collection-reel-lane--second{top:70%;height:27%}
  .st-collection-reel-set img{width:118px;border-radius:8px}
  .st-slide--collection:has(.st-collection-reel)::after{
    background:linear-gradient(180deg,#110b2b 0%,#110b2bf2 32%,#110b2bb0 46%,#110b2b22 70%,#110b2b77 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .st-collection-reel-track,.st-collection-reel-lane--second .st-collection-reel-track{animation:none;transform:none}
}


/* Decks carousel: actual four-card compositions glide across two lanes.
   Images use the published card_<ID> paths already used elsewhere on the site. */
.st-slide--decks .st-deck-reel{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.st-deck-reel-lane{
  position:absolute;left:-4%;width:108%;height:42%;overflow:hidden;
}
.st-deck-reel-lane--first{top:16%;transform:rotate(-4deg) scale(1.025)}
.st-deck-reel-lane--second{top:52%;transform:rotate(4deg) scale(1.025)}
.st-deck-reel-track{
  display:flex;width:max-content;height:100%;will-change:transform;
  animation:st-deck-scroll 52s linear infinite;
}
.st-deck-reel-lane--second .st-deck-reel-track{
  animation-name:st-deck-scroll-back;animation-duration:62s;
}
.st-deck-reel-set{display:flex;gap:17px;padding-right:17px;align-items:center;flex:none;height:100%}
.st-deck-reel-group{
  display:flex;align-items:center;gap:5px;padding:8px;flex:none;height:88%;
  border:1px solid #9874d3;border-radius:11px;background:#180f31dd;
  box-shadow:0 8px 26px #060414a8,0 0 13px #7748d14f;
}
.st-deck-reel-group img{
  display:block;flex:none;width:clamp(80px,8vw,111px);height:100%;min-width:0;
  object-fit:cover;border-radius:5px;background:#24113f;
}
.st-deck-reel-lane--second .st-deck-reel-group{border-color:#73dced}
@keyframes st-deck-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes st-deck-scroll-back{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.st-slide--decks:has(.st-deck-reel)::after{
  content:'';position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#150a30f9 0%,#150a30ed 29%,#150a30bd 48%,#150a3040 75%,#150a3013 100%),
    linear-gradient(0deg,#150a308a 0%,transparent 26%,transparent 80%,#150a306c 100%);
}
.st-slide--decks:has(.st-deck-reel) .st-slide-visual{visibility:hidden}
.st-slide--decks .st-slide-copy{z-index:2}
@media(max-width:620px){
  .st-deck-reel-lane--first{top:47%;height:25%}
  .st-deck-reel-lane--second{top:72%;height:25%}
  .st-deck-reel-group{padding:5px;gap:4px;border-radius:8px}
  .st-deck-reel-group img{width:clamp(64px,18vw,78px);border-radius:4px}
  .st-slide--decks:has(.st-deck-reel)::after{
    background:linear-gradient(180deg,#150a30 0%,#150a30f7 33%,#150a30bb 47%,#150a3024 72%,#150a3077 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .st-deck-reel-track,.st-deck-reel-lane--second .st-deck-reel-track{animation:none;transform:none;will-change:auto}
}

/* Slide 2 — cinematic but decorative game-to-site synchronization. */
.st-slide--plugin .st-slide-visual:before,
.st-slide--damage .st-slide-visual:before{display:none}
.st-slide--plugin .st-slide-artlabel,
.st-slide--damage .st-slide-artlabel{display:none}
.st-sync-scene,.st-battle-scene{position:absolute;inset:0;isolation:isolate;overflow:hidden;pointer-events:none}
.st-sync-scene{background:radial-gradient(ellipse at 56% 53%,#873cb43c,transparent 66%)}
.st-sync-orbit{position:absolute;width:74%;aspect-ratio:1;top:8%;left:13%;border:1px solid #b583ef4a;border-radius:50%;transform:rotate(-20deg);box-shadow:inset 0 0 45px #a54bea18,0 0 45px #b475f11a}
.st-sync-orbit--two{width:52%;left:24%;top:19%;border-style:dashed;border-color:#76e9fc50;animation:st-sync-turn 26s linear infinite}
.st-sync-link{position:absolute;left:17%;right:13%;top:50%;height:3px;border-radius:10px;background:linear-gradient(90deg,#e17aff55,#76e6ffcc,#a0ffdd5e);box-shadow:0 0 18px #7ae5ffa0}
.st-sync-link:after{content:'';position:absolute;inset:-6px 0;background:repeating-linear-gradient(90deg,transparent 0 18px,#c5f8ff44 18px 22px,transparent 22px 38px);animation:st-sync-bars 3s linear infinite}
.st-sync-node{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:110px;height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px solid #c981ff;border-radius:18px;background:linear-gradient(145deg,#56216b,#180d33 75%);box-shadow:0 9px 26px #08041caa,0 0 25px #d975fa6b;text-align:center}
.st-sync-node--source{left:0}
.st-sync-node--target{right:0;border-color:#7df1ff;background:linear-gradient(145deg,#154f69,#161235 75%);box-shadow:0 9px 26px #08041caa,0 0 25px #65eaff7a}
.st-sync-node-symbol{font:900 35px/1 'Barlow Condensed',Impact,sans-serif;color:#f6b7ff;text-shadow:0 0 20px #fa9bff80}
.st-sync-node--target .st-sync-node-symbol{font-size:45px;color:#70f4ff}
.st-sync-node b{font:900 18px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.3px;color:#fff}
.st-sync-node--target b{font-size:16px}
.st-sync-node small{font:800 10px/1.2 sans-serif;letter-spacing:1.4px;color:#cbbde9}
.st-sync-packets{position:absolute;inset:0;z-index:2}
.st-sync-packet{position:absolute;top:50%;left:20%;width:64px;height:88px;opacity:0;transform:translate(-50%,-50%) scale(.62);animation:st-sync-transfer 7.2s linear infinite}
.st-sync-packet--2{animation-delay:-5.4s}
.st-sync-packet--3{animation-delay:-3.6s}
.st-sync-packet--4{animation-delay:-1.8s}
.st-sync-packet img,.st-sync-packet .st-scene-placeholder{display:block;width:100%;height:100%;object-fit:cover;border:2px solid #8af4ff;border-radius:7px;background:#332450;box-shadow:0 0 19px #83eaffb0,0 5px 20px #080320}
@keyframes st-sync-turn{to{transform:rotate(340deg)}}
@keyframes st-sync-bars{to{background-position:76px 0}}
@keyframes st-sync-transfer{
  0%{left:20%;opacity:0;transform:translate(-50%,-50%) scale(.58) rotate(-12deg)}
  10%{opacity:1}
  52%{opacity:1;transform:translate(-50%,-63%) scale(.88) rotate(5deg)}
  85%{opacity:1}
  100%{left:80%;opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(12deg)}
}

/* Slide 4 — illustrative, repeatable damage preview; no live battle data. */
.st-battle-scene{background:radial-gradient(ellipse at 52% 55%,#eb71662e,transparent 68%)}
.st-battle-halo{position:absolute;top:18%;left:6%;width:46%;height:64%;background:radial-gradient(ellipse,#a067f052,transparent 69%);filter:blur(16px);animation:st-battle-breathe 5s ease-in-out infinite}
.st-battle-halo--two{left:54%;background:radial-gradient(ellipse,#ff89614f,transparent 69%);animation-delay:-2.5s}
.st-battle-card{position:absolute;z-index:2;top:28%;width:32%;height:53%;padding:5px;border:2px solid #9ef7ff;border-radius:12px;background:#1b1237;box-shadow:0 16px 36px #080319a8,0 0 35px #6cdbff59;transform:rotate(-9deg);animation:st-attacker-pulse 5.8s ease-in-out infinite}
.st-battle-card--attack{left:8%}
.st-battle-card--defend{right:8%;border-color:#ffbe84;box-shadow:0 16px 36px #080319a8,0 0 35px #ff8c7555;transform:rotate(9deg);animation:st-defender-hit 5.8s ease-in-out infinite}
.st-battle-card img,.st-battle-card .st-scene-placeholder{display:block;width:100%;height:100%;object-fit:cover;border-radius:7px;background:#281742}
.st-scene-placeholder{display:grid!important;place-items:center;background:linear-gradient(140deg,#51258c,#253a70)!important;color:#ceadff;font-size:35px}
.st-battle-tag{position:absolute;top:-15px;left:-10px;padding:5px 10px;background:#7df3ff;border-radius:5px;color:#160a27;font:900 11px/1 sans-serif;box-shadow:0 4px 12px #0007}
.st-battle-tag--hp{left:auto;right:-10px;background:#ffc18c}
.st-battle-health{position:absolute;bottom:-15px;left:2%;right:2%;height:10px;padding:2px;border:1px solid #8effd0;border-radius:8px;background:#100c21;transform:rotate(-9deg)}
.st-battle-health-fill{height:100%;width:100%;background:linear-gradient(90deg,#54d794,#bcff9c);border-radius:5px;transform-origin:left;animation:st-battle-hp 5.8s ease-in-out infinite}
.st-battle-beam{position:absolute;z-index:3;top:52%;left:32%;width:39%;height:9px;opacity:0;transform:rotate(-8deg) scaleX(.2);transform-origin:left;border-radius:20px;background:linear-gradient(90deg,transparent,#b2f4ff,#fff4bd,#ffa267);box-shadow:0 0 18px 6px #a9edff8a;animation:st-battle-shot 5.8s ease-out infinite}
.st-battle-impact{
  position:absolute;z-index:4;top:42%;left:68%;
  padding:8px 14px;border:2px solid #ffc38b;border-radius:10px;
  background:linear-gradient(145deg,#5d1f31f2,#2a0f24f4);
  font:900 clamp(28px,3.2vw,52px)/1 'Barlow Condensed',Impact,sans-serif;
  color:#ffe7c6;white-space:nowrap;
  opacity:0;text-shadow:0 0 22px #ff7769,0 0 7px white;
  box-shadow:0 8px 24px #08031cb5,0 0 22px #ffab6c55;
  transform:translate(-50%,-50%) scale(.1);
  animation:st-battle-impact 5.8s ease-out infinite
}
.st-battle-value{
  position:absolute;z-index:5;top:14%;right:8%;width:32%;box-sizing:border-box;
  padding:8px 6px;text-align:center;
  font:900 clamp(27px,3vw,43px)/1 'Barlow Condensed',Impact,sans-serif;
  color:#ffe7c6;white-space:nowrap;
  border:2px solid #ffc38b;border-radius:9px;
  background:linear-gradient(145deg,#42213fdc,#1b0b2ff0);
  text-shadow:0 2px 8px #ff9b6470;
  box-shadow:0 4px 18px #08031cba,0 0 17px #ffab6c55;
}
@keyframes st-battle-breathe{50%{opacity:.53;transform:scale(1.18)}}
@keyframes st-attacker-pulse{0%,20%,100%{transform:rotate(-9deg) translateX(0)}32%{transform:rotate(-5deg) translateX(12px)}50%{transform:rotate(-9deg) translateX(0)}}
@keyframes st-defender-hit{0%,39%,55%,100%{transform:rotate(9deg) translateX(0);filter:brightness(1)}44%{transform:rotate(14deg) translateX(9px);filter:brightness(1.65)}48%{transform:rotate(6deg) translateX(-5px);filter:brightness(1)}}
@keyframes st-battle-shot{0%,25%{opacity:0;transform:rotate(-8deg) scaleX(.1)}29%,38%{opacity:1;transform:rotate(-8deg) scaleX(1)}42%,100%{opacity:0;transform:rotate(-8deg) scaleX(1)}}
@keyframes st-battle-impact{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.1)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}50%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
@keyframes st-battle-hp{0%,36%{width:100%}46%,87%{width:var(--st-hp-left)}91%,100%{width:100%}}

@media(max-width:900px){
  .st-sync-node{width:82px;height:102px;border-radius:14px}
  .st-sync-node b{font-size:15px}.st-sync-node--target b{font-size:12px}
  .st-sync-node-symbol{font-size:29px}.st-sync-node--target .st-sync-node-symbol{font-size:37px}
  .st-sync-packet{width:49px;height:70px}
}
@media(max-width:620px){
  .st-slide--plugin .st-visual-elements,.st-slide--damage .st-visual-elements{height:100%;min-height:185px;max-height:none}
  .st-sync-scene,.st-battle-scene{inset:0}
  .st-sync-node{width:82px;height:96px}
  .st-sync-node--source{left:6%}.st-sync-node--target{right:6%}
  .st-sync-packet{width:46px;height:65px}
  .st-sync-orbit{height:auto;top:-24%;width:80%;left:10%}
  .st-sync-orbit--two{top:-4%;width:55%;left:22%}
  .st-battle-card{top:28%;height:51%;width:29%}
  .st-battle-card--attack{left:12%}.st-battle-card--defend{right:12%}
  .st-battle-value{top:10%;right:12%;width:29%;padding:6px 4px;font-size:29px}
  .st-battle-impact{top:43%;padding:6px 10px;font-size:34px}
}
@media(max-width:375px){
  .st-sync-node--source{left:2%}.st-sync-node--target{right:2%}
  .st-sync-node{width:72px;height:88px}
  .st-sync-node b{font-size:13px}.st-sync-node--target b{font-size:11px}
  .st-sync-packet{width:41px;height:57px}
  .st-battle-card{width:30%}
  .st-battle-value{font-size:25px;padding:5px 3px}
}
@media(prefers-reduced-motion:reduce){
  .st-sync-orbit--two,.st-sync-link:after,.st-sync-packet,
  .st-battle-halo,.st-battle-card,.st-battle-beam,.st-battle-impact,
  .st-battle-health-fill{animation:none!important}
  .st-sync-packet--1{left:39%;opacity:1;transform:translate(-50%,-50%) scale(.8)}
  .st-sync-packet--3{left:61%;opacity:1;transform:translate(-50%,-50%) scale(.8)}
  .st-battle-card--attack{transform:rotate(-9deg)}
  .st-battle-card--defend{transform:rotate(9deg)}
  .st-battle-value{opacity:1;transform:none}
  .st-battle-health-fill{width:var(--st-hp-left)}
}
/* Final alignment polish: keep labels inside their devices and titles unobstructed. */
.st-sync-node--target b{font-size:12px;letter-spacing:-.15px}
.st-battle-card{top:35%;height:48%}
@media(max-width:620px){.st-battle-card{top:28%;height:50%}}
@media(max-width:900px){.st-sync-node--target b{font-size:10px}}