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

html{
scroll-behavior:smooth;
}

body{
font-family:"Arial Narrow",Arial,sans-serif;
background:#F8F8F8;
color:#111;
overflow-y:auto;
}

#topbar{
position:sticky;
top:0;
z-index:100;
height:60px;
padding:0 24px;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(248,248,248,.9);
backdrop-filter:blur(12px);
border-bottom:1px solid #E7E7E7;
}

#backButton{
background:none;
border:none;
font-family:"Arial Narrow";
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;
}

.playlist-location{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

#hero{
position:relative;
height:320px;
overflow:hidden;
}

.hero-background{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
opacity:.18;
transform:scale(1.08);
}

.hero-gradient{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(255,255,255,.1),#F8F8F8 90%);
}

.hero-content{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
gap:28px;
height:100%;
padding:40px 55px;
}

.playlist-cover{
width:180px;
height:180px;
border-radius:14px;
object-fit:cover;
filter:grayscale(100%);
box-shadow:0 12px 40px rgba(0,0,0,.08);
}

.playlist-type,
.playlist-meta{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

.hero-content h1{
font-size:64px;
margin:10px 0;
}

.playlist-meta{
display:flex;
gap:10px;
margin-bottom:16px;
}

.playlist-description{
max-width:620px;
line-height:175%;
font-size:14px;
margin-bottom:24px;
}

.playlist-actions{
display:flex;
align-items:center;
gap:12px;
}

.play-button{
padding:11px 22px;
border-radius:999px;
border:none;
background:#111;
color:white;
font-family:"Arial Narrow";
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;
}

.icon-button{
width:38px;
height:38px;
border-radius:50%;
border:1px solid #DDD;
background:white;
cursor:pointer;
font-size:16px;
}

#layout{
display:grid;
grid-template-columns:230px minmax(0,1fr) 220px;
gap:35px;
padding:35px 45px 140px;
align-items:start;
}

#tracklist{
position:sticky;
top:90px;
background:white;
border:1px solid #ECECEC;
border-radius:16px;
padding:18px;
}

.track-header{
display:grid;
grid-template-columns:40px 1fr;
padding-bottom:10px;
border-bottom:1px solid #E8E8E8;
margin-bottom:10px;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#777;
}

.track{
display:grid;
grid-template-columns:40px 1fr;
align-items:center;
padding:10px;
border-radius:10px;
cursor:pointer;
transition:.25s;
}

.track:hover,
.track.active{
background:#EFEFEF;
}

.track span{
font-size:11px;
letter-spacing:2px;
color:#777;
}

.track p{
font-size:14px;
}

#content{
min-width:0;
}

.content-section{
padding-bottom:60px;
margin-bottom:60px;
border-bottom:1px solid #ECECEC;
}

.content-section:last-child{
border-bottom:none;
}

.content-section h2{
font-size:34px;
margin-bottom:30px;
}

.info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-bottom:28px;
}

label{
display:block;
margin-bottom:6px;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#777;
}

p,li{
line-height:180%;
font-size:14px;
}

.fullbody{
width:260px;
margin-bottom:25px;
border-radius:12px;
}

blockquote{
padding-left:18px;
border-left:2px solid #111;
font-style:italic;
margin-bottom:24px;
}

.timeline{
display:flex;
flex-direction:column;
gap:28px;
}

.event{
display:grid;
grid-template-columns:50px 1fr;
gap:18px;
}

.event span{
font-size:10px;
letter-spacing:2px;
color:#777;
}

.ability-card,
.relationship{
background:white;
border:1px solid #E8E8E8;
border-radius:14px;
padding:18px;
margin-bottom:18px;
}

.relationship-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
}

.relationship img{
width:100%;
border-radius:10px;
filter:grayscale(100%);
object-fit:cover;
}

.relationship img{
aspect-ratio:1;
margin-bottom:12px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
}

.gallery-grid img{
width:100%;
border-radius:10px;
object-fit:cover;
}

#sidebar-info{
position:sticky;
top:90px;
display:flex;
flex-direction:column;
gap:18px;
}

.mini-card{
background:white;
border:1px solid #ECECEC;
border-radius:14px;
padding:16px;
}

.small{
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#777;
margin-bottom:8px;
}

#player{
position:sticky;
bottom:0;
background:white;
height:78px;
border-top:1px solid #DDD;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 22px;
z-index:90;
}

.player-left{
display:flex;
align-items:center;
gap:14px;
}

.player-left img{
width:48px;
height:48px;
border-radius:6px;
object-fit:cover;
filter:grayscale(100%);
}

.player-left small,
.player-right{
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

.player-middle{
width:380px;
display:flex;
flex-direction:column;
gap:8px;
align-items:center;
}

.controls{
display:flex;
gap:18px;
}

.controls button{
background:none;
border:none;
cursor:pointer;
font-family:"Arial Narrow";
font-size:18px;
}

.progress-bar{
width:100%;
height:4px;
background:#E5E5E5;
border-radius:999px;
overflow:hidden;
}

.progress{
width:12%;
height:100%;
background:#111;
}

@media (max-width:1000px){
#layout{
grid-template-columns:1fr;
}

#tracklist,
#sidebar-info{
position:static;
}

.hero-content{
flex-direction:column;
align-items:flex-start;
}
}

/* =======================================================
   CUSTOM CURSOR
   ======================================================= */

html,
body,
body * {
    cursor: url("https://i.postimg.cc/d1Fm422m/tumblr-c6bf3ce6a54303a5cd8421135157c1c8-f73cf445-64-32x25.png") 2 2, auto !important;
}