.portrait-container{position:relative;display:block;width:220px;height:220px;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;color:#f4f0e8;background:#171719;font:inherit;box-shadow:0 0 0 1px hsl(var(--border)),0 20px 60px rgb(0 0 0/.35);transition:transform .32s cubic-bezier(.22,1,.36,1)}.portrait-container:focus-visible{outline:3px solid #c8f45b;outline-offset:8px}.portrait-image{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%;pointer-events:none}.portrait-real{z-index:2;opacity:1;transition:opacity .32s ease}.portrait-digital{z-index:1;-o-object-position:center calc(50% + 15px);object-position:center calc(50% + 15px)}.portrait-container[data-digital=true] .portrait-real{opacity:0}.portrait-control{position:absolute;z-index:3;bottom:16px;left:50%;display:inline-flex;min-height:40px;align-items:center;gap:10px;padding:6px 14px;transform:translateX(-50%);white-space:nowrap;color:#f4f0e8;background:#171719;border:1px solid rgb(255 255 255/.3);border-radius:999px;font-size:.875rem;font-weight:600}.portrait-control>span{color:#c8f45b}@media (min-width:768px){.portrait-container{width:300px;height:300px}}@media (min-width:1024px){.portrait-container{width:340px;height:340px}}@media (hover:hover) and (prefers-reduced-motion:no-preference){.portrait-container:hover{transform:scale(1.025)}}@media (prefers-reduced-motion:reduce){.portrait-container,.portrait-real{transition:none}}