@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
    :root {
      --bg-color: #ffffff;
      --text-color: #6b7280;
      --primary-color: #000000;
      --card-bg: #f9f9f9;
      --shadow-color: rgba(0,0,0,0.05);
      --border-radius: 0.75rem;
      --max-width: 400px;
    }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: var(--bg-color);
      color: var(--text-color);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem;
    }
    .card {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      box-shadow: 0 4px 12px var(--shadow-color);
      padding: 2rem;
      max-width: var(--max-width);
      text-align: center;
    }
    .avatar {
      border-radius: 50%;
      width: 120px;
      height: 120px;
      box-shadow: 0 0 10px var(--primary-color);
      margin-bottom: 1rem;
    }
    h1 {
      font-weight: 800;
      font-size: 2.5rem;
      margin: 0 0 0.25rem;
      color: var(--primary-color);
    }
    .status {
      font-weight: 600;
      font-size: 1.25rem;
      color: #1a7f37; /* Green for online example */
      margin-top: 0;
      user-select: none;
    }
    /* You can add more statuses with different colors by adding classes */
    .status.offline {
      color: #787c7e;
    }
    .status.idle {
      color: #bfa21a;
    }
    .status.dnd {
      color: #a22a2a;
    }