:root{
      --bg: #0a0a0f;
      --card: #1a1a24;
      --card-secondary: #13131d;
      --text-primary: #e8e8f0;
      --text-muted: #9494a8;
      --accent: #6366f1;
      --accent-hover: #818cf8;
      --glass: rgba(99, 102, 241, 0.05);
      --border: rgba(99, 102, 241, 0.15);
      --radius: 16px;
      --maxw: 420px;
    }

    html,body{height:100%;margin:0}
    body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background: radial-gradient(ellipse at top, #1a1a2e 0%, var(--bg) 50%);
      color: var(--text-primary);
      line-height: 1.6;
    }

    .card{
      width:100%;
      max-width:var(--maxw);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius:var(--radius);
      padding:32px 28px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 1px rgba(99, 102, 241, 0.3);
      text-align:center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .card:hover{
      transform:translateY(-2px);
      box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 2px rgba(99, 102, 241, 0.5);
    }

    .profile{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      margin-bottom: 24px;
    }
    .avatar{
      width:96px;
      height:96px;
      border-radius:50%;
      object-fit:cover;
      border:3px solid var(--accent);
      background: var(--card-secondary);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
    }
    .name{
      margin:4px 0 0;
      font-size:1.35rem;
      font-weight:700;
      letter-spacing: -0.02em;
    }
    .tagline{
      margin:6px 0 0;
      color:var(--text-muted);
      font-size:0.95rem;
      line-height: 1.5;
    }

    .links{
      margin-top:20px;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
    }
    .link{
      display:flex;
      gap:12px;
      align-items:center;
      padding:14px 12px;
      border-radius:12px;
      text-decoration:none;
      background: var(--glass);
      border: 1px solid var(--border);
      color: var(--text-primary);
      transition: all 0.2s ease;
    }
    .link img{
      width:32px;
      height:32px;
      border-radius:8px;
      flex:0 0 32px;
    }
    .link .label{
      font-weight:600;
      font-size:0.95rem;
      text-align: left;
    }
    .link:hover{
      transform:translateY(-2px);
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--accent);
    }

    /* Brand hover colors */
    .link.bsky:hover{color:#1083fd;border-color:#1083fd;box-shadow:0 4px 16px rgba(16,131,253,0.3)}
    .link.deer:hover{color:#749f7a;border-color:#749f7a;box-shadow:0 4px 16px rgba(116,159,122,0.3)}
    .link.catsky:hover{color:#cca6f7;border-color:#cca6f7;box-shadow:0 4px 16px rgba(204,166,247,0.3)}
    .link.blacksky:hover{color:#ffffff;border-color:#ffffff;box-shadow:0 4px 16px rgba(255,255,255,0.3)}
    .link.anisota:hover{color:#c28431;border-color:#c28431;box-shadow:0 4px 16px rgba(194,132,49,0.3)}
    .link.tangled:hover{color:#ffffff;border-color:#ffffff;box-shadow:0 4px 16px rgba(255,255,255,0.3)}
    .link.nooki:hover{color:#FDC417;border-color:#FDC417;box-shadow:0 4px 16px rgba(253,196,23,0.3)}
    .link.splace:hover{color:#f8baca;border-color:#f8baca;box-shadow:0 4px 16px rgba(248,186,202,0.3)}
    .link.bitch:hover{color:#9b7ba0;border-color:#9b7ba0;box-shadow:0 4px 16px rgba(155,123,160,0.3)}
    .link.redd:hover{color:#ff4242;border-color:#ff4242;box-shadow:0 4px 16px rgba(255,66,66,0.3)}

    #more-clients{
      display: none;
    }
    #more-clients.show{
      display: grid;
    }

    .show-more-btn{
      margin-top: 12px;
      padding: 12px 20px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--accent-hover);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.9rem;
    }
    .show-more-btn:hover{
      background: rgba(99, 102, 241, 0.1);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .controls{
      margin-top:24px;
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
    }
    .control-row{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .control-row input{
      flex:1;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid var(--border);
      background: var(--card-secondary);
      color: var(--text-primary);
      outline:none;
      font-size: 0.95rem;
      transition: border-color 0.2s ease;
    }
    .control-row input:focus{
      border-color: var(--accent);
    }
    .control-row input::placeholder{
      color: var(--text-muted);
    }
    .control-row button{
      padding:12px 18px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      background: var(--accent);
      color: white;
      font-weight:600;
      font-size: 0.95rem;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .control-row button:hover{
      background: var(--accent-hover);
      transform: translateY(-1px);
    }

    .meta{
      margin-top:20px;
      font-size:0.85rem;
      color:var(--text-muted);
    }
    .meta a{
      color:var(--accent-hover);
      text-decoration:none;
      transition: color 0.2s ease;
    }
    .meta a:hover{
      color: var(--accent);
      text-decoration:underline;
    }

    @media(max-width:480px){
      :root{--maxw:100%}
      .links, #more-clients{grid-template-columns:1fr}
      body{padding: 16px}
      .card{padding: 24px 20px}
    }