/* Sparse perimeter lights. No animation of the portrait bitmap or layout. */
.sf-portrait{display:block;position:relative;isolation:isolate;width:100%;line-height:0;aspect-ratio:2/3}
.sf-portrait>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.sf-sparks,.sf-hero:after{position:absolute;inset:6% 5%;z-index:2;pointer-events:none;opacity:.55;background:radial-gradient(circle at 10% 31%,#fff4c7 0 1.5px,transparent 3px),radial-gradient(circle at 91% 44%,#e8cbff 0 1.5px,transparent 3px),radial-gradient(circle at 19% 78%,#f8dd97 0 1px,transparent 2.5px),radial-gradient(circle at 83% 85%,#fff6d7 0 1px,transparent 2.5px);animation:sf-starlight 4.8s ease-in-out infinite}
.sf-hero{position:relative}.sf-hero:after{content:""}
.skin-card .sf-portrait{padding:0;font-size:inherit;height:auto}.skin-card .sf-portrait>img{height:auto}
.skin-preview-dialog>.sf-portrait{aspect-ratio:auto}.skin-preview-dialog>.sf-portrait>.skin-preview-art{height:min(58dvh,620px)}
.home-character.profession-character .sf-portrait{width:100%;height:100%;aspect-ratio:auto}
.fd-contact-portrait .sf-sparks,.fd-market-mini .sf-sparks,.fc-small-portrait .sf-sparks,.skin-card .sf-sparks{display:none}
@keyframes sf-starlight{0%,100%{opacity:.28;transform:translateY(2px)}50%{opacity:.72;transform:translateY(-3px)}}
@media(max-width:680px){.sf-sparks,.sf-hero:after{animation-duration:6.4s}.skin-preview-dialog>.sf-portrait>.skin-preview-art{height:53dvh}}
@media(prefers-reduced-motion:reduce){.sf-sparks,.sf-hero:after{animation:none;opacity:.35}}