:root { font-family: "DM Sans", sans-serif; color: #101010; background: #fff; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { width: 22px; height: 22px; stroke-width: 2; }
.topbar { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: 1fr minmax(180px, 270px) 1fr; align-items: center; height: 64px; padding: 0 max(20px, calc((100% - 1000px) / 2)); border-bottom: 1px solid #dbdbdb; background: rgb(255 255 255 / 96%); }
.wordmark { color: #111; font-family: "Grand Hotel", cursive; font-size: 31px; text-decoration: none; }
.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; background: #efefef; color: #737373; }
.search svg { width: 17px; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; }
.topbar nav { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.topbar nav button, .icon-button { display: grid; padding: 0; border: 0; background: transparent; place-items: center; }
.nav-avatar { width: 26px; height: 26px; border-radius: 50%; }
main { width: min(calc(100% - 32px), 935px); margin: 32px auto 70px; }
.profile { display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: center; }
.profile-avatar-ring { display: grid; width: 164px; height: 164px; place-items: center; justify-self: center; border-radius: 50%; background: linear-gradient(45deg, #ffd600, #ff0169 55%, #d300c5); }
.profile-avatar { display: grid; width: 154px; height: 154px; place-items: center; border: 4px solid white; border-radius: 50%; }
.placeholder { background: linear-gradient(135deg, #98a99d, #d9c7ab); color: #39433c; font-weight: 700; }
.profile-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-title h1 { margin: 0 2px 0 0; font-size: 21px; font-weight: 500; overflow-wrap: anywhere; }
.verified { color: #0095f6; fill: #0095f6; stroke: white; }
.profile-title button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #efefef; font-weight: 700; }
.profile-title .primary { background: #0095f6; color: white; }
.profile-title .icon-button { width: 34px; padding: 0; }
.metrics { display: flex; gap: 38px; margin: 24px 0 18px; }
.metrics div { display: flex; gap: 5px; }
.metrics dt { font-weight: 700; }
.metrics dd { margin: 0; }
.bio { display: grid; justify-items: start; font-size: 14px; line-height: 1.45; }
.bio span { color: #737373; }
.bio p { max-width: 520px; margin: 3px 0; }
.bio a { color: #00376b; font-weight: 700; text-decoration: none; }
.highlights { display: flex; gap: 42px; margin: 44px 16px 48px; overflow-x: auto; }
.highlight { display: grid; flex: 0 0 82px; justify-items: center; gap: 8px; border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.highlight span:first-child { display: grid; width: 77px; height: 77px; place-items: center; border: 1px solid #dbdbdb; border-radius: 50%; background: #fafafa; color: #767676; }
.tabs { display: flex; justify-content: center; gap: 58px; border-top: 1px solid #dbdbdb; }
.tabs button { display: flex; height: 53px; align-items: center; gap: 7px; margin-top: -1px; padding: 0; border: 0; border-top: 1px solid transparent; background: transparent; color: #737373; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.tabs button[aria-selected="true"] { border-top-color: #151515; color: #151515; }
.tabs svg { width: 13px; height: 13px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.media-tile { position: relative; display: grid; aspect-ratio: 1; place-items: center; border: 0; color: #28312c; }
.media-tile::after { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 42%); color: white; content: attr(data-stats); font-weight: 700; opacity: 0; transition: opacity .18s; }
.media-tile:hover::after { opacity: 1; }
.tone-0 { background: linear-gradient(135deg, #869e8a, #d6e0d5); }
.tone-1 { background: linear-gradient(135deg, #c17c57, #efd2b5); }
.tone-2 { background: linear-gradient(135deg, #809ca9, #d4e0e4); }
.tone-3 { background: linear-gradient(135deg, #a89061, #e4d8b6); }
.tone-4 { background: linear-gradient(135deg, #805f72, #ddcbd4); }
.tone-5 { background: linear-gradient(135deg, #ad7880, #ead2d4); }
dialog { width: min(1050px, calc(100% - 50px)); padding: 0; border: 0; background: transparent; color: white; overflow: visible; }
dialog::backdrop { background: rgb(0 0 0 / 82%); }
.dialog-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); min-height: 560px; background: white; color: #111; }
.dialog-media { display: grid; min-height: 560px; place-items: center; }
.dialog-layout article { display: grid; grid-template-rows: auto 1fr auto; }
.dialog-layout header { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid #efefef; }
.small-avatar { width: 34px; height: 34px; border-radius: 50%; }
.dialog-layout header svg { width: 17px; color: #0095f6; }
.caption { padding: 22px 16px; line-height: 1.45; }
.dialog-layout footer { display: grid; gap: 10px; padding: 14px; border-top: 1px solid #efefef; }
.dialog-layout footer div { display: flex; gap: 16px; }
.dialog-close { position: fixed; top: 14px; right: 14px; border: 0; background: transparent; color: white; }
.arrow { position: fixed; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: white; color: #333; }
.previous { left: 12px; }.next { right: 12px; }
@media (max-width: 680px) {
  .topbar { grid-template-columns: 1fr auto; height: 54px; padding: 0 14px; }
  .search, .topbar nav button:nth-child(-n+3) { display: none; }
  .topbar nav { gap: 15px; }
  main { width: 100%; margin-top: 20px; }
  .profile { grid-template-columns: 105px 1fr; gap: 10px; align-items: start; padding: 0 14px; }
  .profile-avatar-ring { width: 90px; height: 90px; }.profile-avatar { width: 84px; height: 84px; border-width: 3px; font-size: 12px; }
  .profile-copy { display: contents; }
  .profile-title { grid-column: 2; min-height: 90px; align-content: center; }.profile-title h1 { max-width: 165px; }
  .profile-title button { padding-inline: 12px; }.profile-title .icon-button { display: none; }
  .metrics { grid-column: 1 / -1; grid-row: 2; justify-content: space-around; gap: 10px; margin: 16px -14px 0; padding: 12px 0; border-block: 1px solid #efefef; }
  .metrics div { display: grid; justify-items: center; gap: 0; }.metrics dd { font-size: 12px; color: #737373; }
  .bio { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
  .highlights { gap: 22px; margin: 24px 14px; }.highlight { flex-basis: 68px; }.highlight span:first-child { width: 64px; height: 64px; }
  .tabs { justify-content: space-around; gap: 0; }.tabs button { width: 33.333%; justify-content: center; font-size: 0; }.tabs svg { width: 22px; height: 22px; }
  .media-grid { gap: 2px; }
  .dialog-layout { grid-template-columns: 1fr; min-height: 0; }.dialog-media { min-height: 0; aspect-ratio: 1; }.dialog-layout article { min-height: 240px; }
  .arrow { top: 42%; width: 36px; height: 36px; }.previous { left: 5px; }.next { right: 5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }