html[data-theme] .portal-ai .portal-hero { background: #f4f8fd; }
html[data-theme="dark"] .portal-ai .portal-hero { background: #14263e; }
html[data-theme] .portal-ai .portal-hero::before,
html[data-theme] .portal-ai .portal-hero::after,
html[data-theme] .portal-ai .portal-hero-grid { display: none; }
.portal-ai .ai-page-hero-art { position: absolute; inset: 0; pointer-events: none; }
.portal-ai .ai-page-hero-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 0;
  transition: opacity 1.5s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .38) 46%, rgba(0, 0, 0, .75) 58%, #000 68%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .38) 46%, rgba(0, 0, 0, .75) 58%, #000 68%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.portal-ai .ai-page-hero-art img.is-active { opacity: 1; }
.portal-ai .ai-page-hero-controls { position: absolute; z-index: 3; top: 102px; right: max(24px, calc((100% - var(--max)) / 2)); display: flex; align-items: center; gap: 5px; }
.portal-ai .ai-page-hero-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--panel); font-size: 18px; cursor: pointer; }
.portal-ai .ai-page-hero-controls button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.portal-ai .ai-page-hero-counter { padding-right: 8px; color: var(--muted); font-size: 11px; }
.portal-ai .ai-page-hero-label { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--panel); font-size: 12px; }
html[data-theme] .portal-ai .portal-hero-meta { padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 12px; background: rgba(244, 248, 253, .87); backdrop-filter: blur(8px); }
html[data-theme="dark"] .portal-ai .portal-hero-meta { border-color: rgba(255, 255, 255, .15); background: rgba(20, 38, 62, .87); }
@media (max-width: 760px) {
  .portal-ai .ai-page-hero-art img { object-fit: cover; object-position: 82% center; -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 65%, #000 90%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 65%, #000 90%, #000), linear-gradient(180deg, transparent, #000 8%, #000 85%, transparent); }
  .portal-ai .ai-page-hero-controls { top: 84px; right: 20px; }
  .portal-ai .ai-page-hero-label { max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-ai .ai-page-hero-art img { transition: none; }
}