body{max-width:768px;margin:auto;justify-content:center;align-items:center;gap:clamp(40px,8vh,72px)}.profiles__tagline{display:flex;align-items:center;gap:12px}.profiles__title{font-weight:450;font-size:clamp(22px,16px + 1.8vw,30px)}.profiles__logo{height:100%;display:grid;place-items:center}.profiles__logo svg{width:24px}.profiles{width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5vh,44px);padding:0 var(--sidepadding)}.profiles__list{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:clamp(12px,3vw,24px)}.profile{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted);opacity:1;transition:opacity .3s ease,color .3s ease}.profile__avatar{width:clamp(120px,24vw,176px);aspect-ratio:1 / 1;background-color:var(--tile);background-image:linear-gradient(155deg,hsl(from var(--contrast) h s l / .16),transparent 62%);border-radius:6px;display:grid;place-items:center;outline:2px solid transparent;outline-offset:5px;transition:outline-color .3s ease}.profile__monogram{font-size:clamp(52px,11vw,80px);font-weight:450;line-height:1;color:var(--contrast)}.profile__name{font-size:15px;font-weight:450;letter-spacing:.01em}@media(hover:hover){.profiles__list:has(.profile:hover) .profile{opacity:.75}.profiles__list:has(.profile:hover) .profile:hover{opacity:1}.profile:hover{color:var(--contrast)}}.profile:focus-visible{outline:none;color:var(--contrast)}.profile:focus-visible .profile__avatar{outline-color:var(--contrast)}.profile--add .profile__avatar{background-color:hsl(from var(--muted) h s l / .08);background-image:none;border:2px dashed hsl(from var(--muted) h s l / .24);transition:background-color .3s ease,border-color .3s ease}.profile--add .profile__monogram{color:var(--muted);font-weight:300;transition:color .3s ease}.profile--add:focus-visible .profile__avatar{outline-color:transparent;border-color:var(--muted);background-color:hsl(from var(--muted) h s l / .14)}.profile--add:focus-visible .profile__monogram{color:var(--contrast)}@media(hover:hover){.profile--add:hover .profile__avatar{outline-color:transparent;border-color:var(--muted);background-color:hsl(from var(--muted) h s l / .14)}.profile--add:hover .profile__monogram{color:var(--contrast)}}.profiles__manage{color:var(--muted);font-family:Geist Mono,monospace;font-size:14px}