/* About opening card: keep text and mathematical artwork in separate zones. */
.intro.pw-animated-hero {
  display: block !important;
  min-height: 0 !important;
  width: 100%;
  padding: clamp(36px, 5vw, 64px) !important;
  padding-right: min(41%, 430px) !important;
  margin: 25px 0 48px !important;
  border: 1px solid var(--ui-line, #dbe4f1) !important;
  border-radius: 32px !important;
  background: linear-gradient(132deg, #f5f8ff, #e7efff) !important;
  box-shadow: 0 12px 34px #23427a0a !important;
  overflow: hidden !important;
}
.intro.pw-animated-hero > :not(.pw-math-art) {
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative;
  z-index: 2;
}
.intro.pw-animated-hero h1 {
  font-size: clamp(54px, 7vw, 96px) !important;
  line-height: 1 !important;
  overflow-wrap: normal;
}
.intro.pw-animated-hero .lead {
  font-size: clamp(25px, 2.9vw, 37px) !important;
  line-height: 1.25 !important;
}
.intro.pw-animated-hero .deck {
  font-size: 15px !important;
  line-height: 1.8 !important;
}
.intro.pw-animated-hero .pw-eigen-art {
  position: absolute !important;
  width: min(35%, 330px) !important;
  right: clamp(24px, 4vw, 54px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  max-width: 100% !important;
}
html[data-theme="dark"] .intro.pw-animated-hero {
  background: linear-gradient(132deg, #273e6a, #303253 75%, #473849) !important;
  border-color: #4d6387 !important;
}
@media(max-width:820px) {
  .intro.pw-animated-hero {
    padding: 30px 26px !important;
    margin: 18px 0 35px !important;
    border-radius: 25px !important;
  }
  .intro.pw-animated-hero .pw-eigen-art {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(100%, 300px) !important;
    margin: 26px auto 0 !important;
  }
  .intro.pw-animated-hero h1 { font-size: clamp(52px, 11vw, 78px) !important; }
  .intro.pw-animated-hero .lead { font-size: clamp(26px, 5vw, 34px) !important; }
}
@media(max-width:420px) {
  .intro.pw-animated-hero { padding: 26px 20px !important; }
  .intro.pw-animated-hero h1 { font-size: clamp(48px, 12vw, 64px) !important; }
}