/* Einstein joins the existing STX music homepage; styles stay within this feature. */
.stx-einstein-entry {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  border: 1px solid #adff5a45; border-radius: 999px; padding: 8px 14px;
  background: #051019d9; color: #d3ffa7; text-decoration: none;
  font: 600 13px/1.3 Rajdhani, "Segoe UI", sans-serif; letter-spacing: .04em;
}
.stx-einstein-entry:hover { color: #fff; border-color: #bcff6e; }
.stx-einstein-stage {
  position: relative; z-index: 2; isolation: isolate; display: grid;
  grid-template-columns: 1.08fr .92fr; align-items: center; gap: 20px;
  width: 100%; min-width: 0; min-height: 520px; margin: 34px 0 8px;
  padding: 42px 5%; border: 1px solid #67d7df40; border-radius: 24px;
  background: radial-gradient(ellipse at 84% 54%, #39e4ff1b, transparent 53%),
    radial-gradient(ellipse at 94% 9%, #ee4dc725, transparent 42%),
    linear-gradient(118deg, #040a16f5, #0a1020ee);
  box-shadow: inset 0 1px #a5e9ff13, 0 22px 70px #0005;
  scroll-margin-top: 20px;
}
.stx-einstein-copy { position: relative; z-index: 2; min-width: 0; }
.stx-einstein-kicker { color: #c9ff80; font: 600 12px/1.4 "Segoe UI", sans-serif; letter-spacing: .19em; margin: 0 0 18px; }
.stx-einstein-kicker span { font-size: 21px; margin-right: 5px; }
.stx-einstein-stage h2 { color: #f5faff; font: 700 clamp(34px, 3.5vw, 55px)/1.09 Rajdhani, "Segoe UI", sans-serif; letter-spacing: -.02em; margin: 0 0 23px; }
.stx-einstein-stage h2 span { color: #bdff68; }
.stx-einstein-intro { max-width: 500px; color: #bfd0e1; font: 400 16px/1.65 "Segoe UI", sans-serif; margin: 0; }
.stx-einstein-line { margin: 24px 0; padding: 0 0 0 17px; border-left: 2px solid #ca72ed; color: #e2cefa; font: 500 17px/1.6 Rajdhani, "Segoe UI", sans-serif; }
.stx-einstein-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stx-einstein-actions a, .stx-einstein-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 18px; border-radius: 10px; border: 1px solid #7bcada55; font: 700 14px/1.35 "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; }
.stx-einstein-actions .stx-einstein-play { color: #102108; background: #bcf968; border-color: #bcf968; box-shadow: 0 5px 23px #97f35415; }
.stx-einstein-actions .stx-einstein-play:hover { background: #d1ff8d; }
.stx-einstein-actions .stx-einstein-dance { color: #ceeefb; background: #111f31; }
.stx-einstein-actions .stx-einstein-dance:hover { color: #fff; border-color: #9ae8fb; }
.stx-einstein-actions .stx-einstein-dance:disabled { opacity: .48; cursor: default; }
.stx-einstein-caption { color: #92a9bf; font: 400 12px/1.5 "Segoe UI", sans-serif; margin: 14px 0 0; }
.stx-einstein-art { position: relative; display: grid; place-items: center; min-width: 0; height: 460px; }
.stx-einstein-character { position: relative; z-index: 2; display: block; width: auto; max-width: 100%; height: 480px; object-fit: contain; transform-origin: 52% 84%; filter: drop-shadow(-12px 6px 18px #f341bc20) drop-shadow(10px 7px 23px #48c8e124); }
.stx-einstein-orbit { position: absolute; width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #5bdbfa37; box-shadow: 0 0 0 23px #80e5ff06, inset 0 0 65px #5cd4f511; background: radial-gradient(circle, #46777d16, transparent 68%); }
.stx-einstein-floor { position: absolute; bottom: 15px; width: 72%; height: 34px; border: 1px solid #94eb9666; border-radius: 50%; background: #5aff6a0b; box-shadow: 0 0 35px #86f95c20; }
.stx-einstein-stamp { position: absolute; z-index: 3; right: -2%; top: 21px; color: #accef5; border: 1px solid #8be8f64f; border-radius: 9px; padding: 8px 12px; background: #071325df; rotate: 7deg; font: 500 10px/1.5 "Segoe UI", sans-serif; letter-spacing: .1em; }
.stx-einstein-stamp b { color: #d4ffa2; font-weight: 700; }
.stx-einstein-entry:focus-visible, .stx-einstein-actions a:focus-visible, .stx-einstein-actions button:focus-visible { outline: 3px solid #a0e9ff; outline-offset: 5px; }
.stx-einstein-stage.is-dancing .stx-einstein-character { animation: stx-einstein-step .6s ease-in-out 8; }
@keyframes stx-einstein-step { 0%, 100% { transform: rotate(-4deg) translateY(0); } 25% { transform: rotate(1deg) translateY(-15px); } 50% { transform: rotate(4deg) translateY(0); } 75% { transform: rotate(-1deg) translateY(-10px); } }
.stx-effects-paused .stx-einstein-character { animation: none !important; }
@media(max-width:900px) { .stx-einstein-stage { gap: 10px; padding: 32px 4%; } .stx-einstein-art { height: 380px; } .stx-einstein-character { height: 400px; } .stx-einstein-stamp { font-size: 8px; right: 0; } }
@media(max-width:680px) {
  .stx-einstein-entry { margin-top: 13px; font-size: 12px; }
  .stx-einstein-stage { grid-template-columns: 1fr; min-height: 0; margin-top: 24px; padding: 27px 22px; gap: 22px; }
  .stx-einstein-copy { order: 2; } .stx-einstein-art { order: 1; height: 320px; }
  .stx-einstein-character { height: 350px; } .stx-einstein-orbit { width: 250px; }
  .stx-einstein-floor { bottom: -1px; max-width: 240px; } .stx-einstein-stamp { right: 0; top: 9px; font-size: 9px; }
  .stx-einstein-stage h2 { font-size: clamp(30px, 8vw, 42px); }
  .stx-einstein-intro { font-size: 15px; } .stx-einstein-actions { display: grid; grid-template-columns: 1fr; }
  .stx-einstein-actions a, .stx-einstein-actions button { width: 100%; }
}
@media(prefers-reduced-motion:reduce) { .stx-einstein-character { animation: none !important; } }