/* Image-generated garden portal; the original logo and live controls sit above the artwork. */
.hero .hero-copy.hero-portal {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 94px 38px 116px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
  overflow: visible;
}
.hero-portal::before { content: none; }
.hero-portal::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 9% 12%;
  border-radius: 48% 48% 42% 42% / 18% 18% 25% 25%;
  background: linear-gradient(180deg, #d9f6fff2 0%, #ebfbfff7 47%, #e4f8eff5 100%);
  box-shadow: 0 0 35px 14px #b8eeff70;
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.hero-portal > .portal-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 9px #17483038);
}
.portal-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.hero-portal h1.hero-logo { width: 100%; margin: 0; }
.hero-portal .hero-logo img {
  width: 100%;
  max-width: 326px;
  height: auto;
  filter: drop-shadow(0 6px 5px #256d8733);
}
.hero-portal .eyebrow {
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 5px 11px;
  border: 1px solid #6cc9c280;
  border-radius: 999px;
  background: #efffffdb;
  color: #246b78;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0;
}
.portal-content > p {
  max-width: 350px;
  margin: 12px 0 0;
  color: #294d72;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  text-wrap: balance;
}
.hero-portal .hero-actions {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 19px 0 0;
}
.hero-portal .hero-actions .primary {
  justify-content: center;
  gap: 24px;
  min-height: 54px;
  padding: 11px 24px;
  border: 2px solid #fff2b3;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffeb82, #ffc23d);
  box-shadow: 0 5px 0 #b77618, inset 0 2px 0 #fff9cf, 0 11px 19px #8c641e24;
  color: #393471;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
.hero-portal .primary > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #8651bd;
  color: #fff;
  font-size: 22px;
}
.hero-portal .primary:hover { background: linear-gradient(180deg, #fff19b, #ffd050); }
.hero-portal .primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #b77618; }
.hero-portal .quiet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  color: #57447f;
  text-underline-offset: 5px;
}
.hero-portal .welcome-voice {
  min-height: 44px;
  margin: 15px 0 0;
  padding: 7px 17px;
  border: 1px solid #b993df;
  border-radius: 999px;
  background: #faf1ffe8;
  color: #63378c;
  box-shadow: 0 3px 0 #b89ad1;
  font-size: 12px;
}
.hero-portal .welcome-voice[aria-pressed="true"] { background: #e9d6fb; }
.hero-portal .hero-notes {
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 15px 0 0;
  color: #3b675e;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
}
.hero-portal .narration-caption { width: 100%; }
@media (max-width: 1050px) and (min-width: 761px) {
  .hero .hero-copy.hero-portal { padding: 83px 30px 100px; }
  .portal-content > p { font-size: 13px; }
  .hero-portal .hero-actions { gap: 3px 11px; }
  .hero-portal .hero-actions .primary { padding-inline: 20px; font-size: 15px; gap: 18px; }
}
@media (max-width: 760px) {
  .hero.wrap { display: flex; flex-direction: column; gap: 26px; padding-top: 18px; }
  .hero .hero-copy.hero-portal { max-width: 520px; padding: 100px 37px 118px; }
  .hero-portal .hero-logo img { max-width: 330px; }
  .hero-world { width: 100%; max-width: 520px; }
}
@media (max-width: 480px) {
  .hero.wrap { padding-inline: 6px; padding-top: 13px; gap: 22px; }
  .hero .hero-copy.hero-portal { padding: 86px 29px 103px; }
  .hero-portal .hero-logo img { max-width: 280px; }
  .hero-portal .eyebrow { margin-top: 5px; font-size: 10px; padding: 4px 9px; }
  .portal-content > p { margin-top: 10px; font-size: 13px; line-height: 1.75; }
  .hero-portal .hero-actions { flex-wrap: nowrap; gap: 12px; margin-top: 15px; }
  .hero-portal .hero-actions .primary { min-height: 51px; padding: 10px 17px; gap: 15px; font-size: 15px; }
  .hero-portal .primary > span { width: 25px; height: 25px; font-size: 20px; }
  .hero-portal .quiet-link { max-width: 110px; font-size: 11px; line-height: 1.5; }
  .hero-portal .welcome-voice { margin-top: 13px; font-size: 12px; }
  .hero-portal .hero-notes { margin-top: 13px; gap: 4px 10px; font-size: 9px; }
  .hero-world { width: calc(100% - 20px); }
}
@media (max-width: 350px) {
  .hero .hero-copy.hero-portal { padding: 77px 25px 95px; }
  .portal-content > p { font-size: 12px; }
  .hero-portal .hero-actions { gap: 9px; }
  .hero-portal .hero-actions .primary { font-size: 14px; gap: 9px; padding-inline: 14px; }
  .hero-portal .quiet-link { max-width: 85px; font-size: 10px; }
  .hero-portal .hero-notes { gap: 4px 8px; font-size: 8px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-portal::after { background: #e9faff; backdrop-filter: none; }
}