*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    height:100vh;
    font-family:'Inter', sans-serif;
    background: radial-gradient(circle at 20% 20%, #111, #000);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:white;
}

canvas{
    position:fixed;
    top:0;
    left:0;
    z-index:0;
    pointer-events:none;
}

.scene{
    perspective:1200px;
    position:relative;
    z-index:2;
}

.card{
    position:relative;
    z-index:3;
    width:370px;
    padding:30px;
    border-radius:22px;
    background:rgba(15,15,20,0.75);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.05);
}

.avatar{
    width:170px;
    height:170px;
    border-radius:50%;
    margin:0 auto 12px auto; 
    display:block;           
    box-shadow:0 0 25px rgba(140,0,255,0.5);
}

h1{
    font-size:26px;
}

.tag{
    color:#888;
    font-size:13px;
    margin-bottom:12px;
}

.bio{
    font-size:14px;
    margin-bottom:15px;
    color:#bbb;
}

.links a{
    display:flex;
    padding:11px;
    margin:6px 0;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    color:white;
    text-decoration:none;
    transition:0.2s;
}

.links a:hover{
    background:rgba(140,0,255,0.15);
    transform:translateX(6px);
}

.msc{
    margin-top:18px;
    padding:16px;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(140,0,255,0.12), rgba(0,0,0,0.4));
    border:1px solid rgba(140,0,255,0.25);
    position:relative;
    overflow:hidden;
}

.msc:hover{
    box-shadow:0 0 25px rgba(140,0,255,0.35);
}

.msc-header{
    font-weight:600;
    margin-bottom:5px;
}

.msc-desc{
    font-size:13px;
    color:#aaa;
}

.msc-btn{
    display:block;
    margin-top:10px;
    padding:10px;
    text-align:center;
    border-radius:10px;
    background:#6a00ff;
    color:white;
    text-decoration:none;
}

.player{
    margin-top:18px;
    width:100%;
    position:relative;
}

.controls{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.controls button{
    flex:1;
    padding:10px;
    border:none;
    border-radius:10px;
    background:#6a00ff;
    color:white;
    cursor:pointer;
}

.progress{
    height:6px;
    background:rgba(255,255,255,0.1);
    margin-top:10px;
    cursor:pointer;
}

.progress-bar{
    height:100%;
    width:0%;
    background:#a855ff;
}

.links{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:12px;
}

.links a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    color:white;
    text-decoration:none;
    transition:0.2s;
}

.links a:hover{
    background:rgba(140,0,255,0.15);
    transform:translateX(6px);
}
.controls,
.progress,
#trackName{
    position:relative;
    z-index:2;
}
.bar{
    flex:1;
    margin:0 1px;
    background:linear-gradient(180deg, #a855ff, #6a00ff);
    border-radius:2px;
    height:5px;
}

.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.4s;
}

.overlay span{
    color:#777;
    letter-spacing:3px;
}