/* One interaction target at a time: photos, linked names, or Journal cards.
   Idle controls stay neutral; an active preview always retains its rose frame. */
#vp-portal .vp-discovery-media{transition:border-color .2s ease}
#vp-portal :is(.ai-portrait-gallery__slide[href],.card .cover)::after{
 content:"";position:absolute;inset:0;z-index:2;border:1px solid transparent;
 border-radius:6px;pointer-events:none;transition:border-color .2s ease;
}
#vp-portal :is(.vp-name a,.ai-info h2 a,.model-name){color:var(--vp-text);transition:color .2s ease}
#vp-portal :is(.home-live-play,.preview-icon){pointer-events:auto}

@media(hover:hover){
 html:not(.touch-input) #vp-portal .vp-discovery-media:hover{border-color:var(--vp-accent)}
 html:not(.touch-input) #vp-portal :is(.ai-portrait-gallery__slide[href],.card .cover):hover::after{border-color:var(--vp-accent)}
 html:not(.touch-input) #vp-portal :is(.vp-name a,.ai-info h2 a,.model-name):hover{color:var(--vp-accent)}
 html:not(.touch-input) #vp-portal :is(.home-guides,.guides-index) .guide-card:hover{border-color:var(--vp-accent)}
 /* The visible play circle has its own neutral feedback, like gallery arrows. */
 html:not(.touch-input) #vp-portal .vp-discovery-media:has(.home-live-play:hover){border-color:#ffffff1c}
 html:not(.touch-input) #vp-portal .card .cover:has(.preview-icon:hover)::after{border-color:transparent}
}
#vp-portal .vp-discovery-media.is-tap-feedback{border-color:var(--vp-accent)}
#vp-portal :is(.ai-portrait-gallery__slide[href],.card .cover).is-tap-feedback::after{border-color:var(--vp-accent)}
#vp-portal :is(.vp-name a,.ai-info h2 a,.model-name).is-tap-feedback{color:var(--vp-accent)}
#vp-portal :is(.home-guides,.guides-index) .guide-card.is-tap-feedback{border-color:var(--vp-accent)}
/* One physical edge per live photo, reused for hover, press and playback. */
#vp-portal .picture,
#vp-portal #home-live-picks .home-live-picture{outline:none}
#vp-portal .card.playing .picture,
#vp-portal #home-live-picks .is-previewing .home-live-picture{outline:none}
#vp-portal .card.playing .cover::after{border-color:var(--vp-accent)}
#vp-portal #home-live-picks .home-live-picture .vp-discovery-media{border:0}
#vp-portal #home-live-picks .home-live-picture::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid #ffffff1c;border-radius:6px;transition:border-color .2s ease}
@media(hover:hover){html:not(.touch-input) #vp-portal #home-live-picks .home-live-picture:has(.vp-discovery-media:hover):not(:has(.home-live-play:hover))::after{border-color:var(--vp-accent)}}
#vp-portal #home-live-picks .home-live-picture:has(.vp-discovery-media.is-tap-feedback)::after,
#vp-portal #home-live-picks .is-previewing .home-live-picture::after{border-color:var(--vp-accent)}
@supports(clip-path:polygon(0 0,100% 0,100% 90%,90% 100%,0 100%)){
 @media(hover:hover){html:not(.touch-input) #vp-portal :is(.home-guides,.guides-index) .guide-card:hover{--guide-edge:var(--vp-accent)}}
 #vp-portal :is(.home-guides,.guides-index) .guide-card.is-tap-feedback{--guide-edge:var(--vp-accent)}
}
@media(prefers-reduced-motion:reduce){
 #vp-portal .vp-discovery-media,
 #vp-portal :is(.ai-portrait-gallery__slide[href],.card .cover)::after,
 #vp-portal :is(.vp-name a,.ai-info h2 a,.model-name),
 #vp-portal #home-live-picks .home-live-picture::after{transition:none}
}

/* About and Partners: the same line-only mouse and touch feedback. */
@media(hover:hover){html:not(.touch-input) #vp-portal[data-page=home] .site-closing-links>a:hover{border-top-color:var(--vp-accent)}}
#vp-portal[data-page=home] .site-closing-links>a.is-tap-feedback{border-top-color:var(--vp-accent)}

/* Homepage portraits only: the same subtle zoom on mouse hover or touch press.
   Swiping clears the press class; controls and active players stay still. */
@media(prefers-reduced-motion:no-preference){
 @media(hover:hover){
  html:not(.touch-input) #vp-portal[data-page=home] .vp-discovery-media:hover:not(:has(.home-live-play:hover)) .vp-discovery-photo{transform:scale(1.025)}
 }
 #vp-portal[data-page=home] .vp-discovery-media.is-tap-feedback .vp-discovery-photo{transform:scale(1.025)}
 #vp-portal[data-page=home] .is-previewing .vp-discovery-photo{transform:none}
}

/* Identity circles scale with their heading: 22px home sections / 30px page titles.
   The human artwork remains 20% larger than the chip drawing box. */
#vp-portal .identity-heading{--identity-size:30px;--identity-icon:18px;--identity-human:21.6px;--identity-offset:-.6px;display:flex;align-items:center;column-gap:22px}
#vp-portal[data-page=home] .identity-heading{--identity-size:22px;--identity-icon:13.2px;--identity-human:15.84px;--identity-offset:-.44px;column-gap:18px}
#vp-portal .identity-heading__text{display:block;min-width:0;line-height:1}
#vp-portal .identity-badge{position:relative;display:grid;place-items:center;flex:0 0 var(--identity-size);width:var(--identity-size);height:var(--identity-size);line-height:0;letter-spacing:normal;align-self:center;transform:none}
#vp-portal .identity-badge .identity-badge__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--identity-size);height:var(--identity-size);min-width:var(--identity-size);min-height:var(--identity-size);max-width:var(--identity-size);max-height:var(--identity-size);aspect-ratio:1;appearance:none;-webkit-appearance:none;flex-shrink:0;padding:0;margin:0;font-size:0;line-height:0;border:1px solid #956375;border-radius:50%;background:#2b2226;color:var(--vp-rose,#d2829b);box-shadow:none;cursor:pointer;transform:none;transition:border-color .2s ease}
#vp-portal .identity-badge__button svg{display:block;flex:none;width:var(--identity-icon);height:var(--identity-icon);pointer-events:none}
#vp-portal .identity-badge__button--human svg{width:var(--identity-human);height:var(--identity-human);transform:translateY(var(--identity-offset))}
#vp-portal .identity-badge__button:focus-visible{outline:2px solid var(--vp-rose,#d2829b);outline-offset:3px}
#vp-portal .identity-badge__label{position:absolute;z-index:20;top:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:190px;padding:9px 11px;border:1px solid var(--vp-border,#ffffff1c);border-radius:5px;background:#252324;color:var(--vp-text,#f5f2f0);font-family:inherit;font-size:13px;font-weight:400;line-height:1.3;text-align:center;visibility:hidden;opacity:0;pointer-events:none}
#vp-portal .identity-badge__button:focus-visible + .identity-badge__label,
#vp-portal .identity-badge.is-open .identity-badge__label{visibility:visible;opacity:1}
@media(hover:hover){#vp-portal .identity-badge:hover .identity-badge__label{visibility:visible;opacity:1}#vp-portal .identity-badge__button:hover{border-color:var(--vp-rose,#d2829b)}}
@media(max-width:600px){#vp-portal .identity-heading{column-gap:18px}#vp-portal .identity-badge__label{left:auto;right:0;transform:none}}

/* Explicit geometry avoids mobile button layout/baseline offsets. */
#vp-portal .identity-badge .identity-badge__button{position:relative}
#vp-portal .identity-badge .identity-badge__button svg{position:absolute;left:50%;top:50%;margin:0;padding:0;transform:translate(-50%,-50%)}
#vp-portal .identity-badge .identity-badge__button--human svg{transform:translate(-50%,calc(-50% + var(--identity-offset)))}