.profile { text-align: center; margin-bottom: 36px; }
.ring {
  --c: var(--offline);
  width: 108px; height: 108px;
  margin: 0 auto 20px;
  border-radius: 50%;
  padding: 4px;
  border: 3px solid var(--c);
  transition: border-color .4s;
}
.ring[data-status="online"] { --c: var(--online); }
.ring[data-status="idle"]   { --c: var(--idle); }
.ring[data-status="dnd"]    { --c: var(--dnd); }
.ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--line); }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.handle { color: var(--muted); font-size: .9rem; }
.status { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.time { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bio { margin: 14px auto 0; max-width: 32ch; font-size: .95rem; }