/* Featured artwork and indicators form a display-only showcase. */
#featured-slot .feature-window-area > [hidden],
#featured-slot .feature-controls[hidden] { display: none; }
#featured-slot .feature-window-area > .is-feature-incoming { will-change: opacity; }
#featured-slot .feature-controls { display: flex; align-items: center; justify-content: center; padding: 16px 40px 24px; background: var(--vi-surface); color: var(--vi-secondary); }
#featured-slot .feature-announcement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#featured-slot .feature-dots { display: flex; }
#featured-slot .feature-dot { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; transition: background-color 160ms ease,color 160ms ease,transform 160ms cubic-bezier(.2,.8,.2,1); }
#featured-slot .feature-dot span { display: block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .45; transition: width 240ms ease,opacity 160ms ease; }
#featured-slot .feature-dot[aria-pressed="true"] { color: var(--vi-link); }
#featured-slot .feature-dot[aria-pressed="true"] span { width: 22px; opacity: 1; }
#featured-slot .feature-dot:focus-visible { outline: 2px solid var(--vi-link); outline-offset: 2px; }
#featured-slot .feature-dot:active { transform: scale(.985); transition-duration: 80ms; }
@media (hover:hover) and (pointer:fine) {
  #featured-slot .feature-dot:hover { color: var(--vi-ink); background: var(--vi-paper); }
}
@media (max-width:760px) {
  #featured-slot .feature-controls { padding: 12px 20px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  #featured-slot :is(.feature-dot,.feature-dot span) { transition: none; }
}