*{box-sizing:border-box} :root{color-scheme:dark;--ink:#f3eee7;--muted:#a9a49f;--line:#ffffff1c;--accent:#FF9999} body{margin:0;background:#0b1016;color:var(--ink);font-family:open_sansregular,Arial,sans-serif;line-height:1.5}main{max-width:1060px;margin:auto;padding:64px 36px 30px}.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center}.cover{width:100%;height:auto;display:block;box-shadow:0 22px 70px #0005}.artist{font-size:13px;letter-spacing:.32em;color:var(--accent);margin:0 0 20px}h1{font-family:open_sansregular,Arial,sans-serif;font-size:clamp(44px,6vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.035em;margin:0 0 24px}.description{color:var(--muted);font-size:14px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.actions button,.download{font:inherit;font-size:14px;padding:12px 17px;border:1px solid var(--accent);border-radius:3px;text-decoration:none;cursor:pointer}.actions button{color:#151719;background:var(--accent)}.actions button span{margin-left:18px}.download{color:var(--ink);border-color:var(--line);display:flex;flex-direction:column;justify-content:center;line-height:1.3}.download span{font-size:10px;color:var(--muted);margin-top:3px}.listening{margin-top:54px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:center}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent)}#now-title{margin:6px 0 0;font-size:15px}audio{width:100%;height:42px}#status:empty{display:none}#status{margin:0;color:var(--accent);grid-column:1/-1;font-size:13px}.tracklist{margin-top:34px}.list-heading{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.list-heading h2{font-size:13px;font-weight:400;color:var(--ink)}ol{list-style:none;margin:12px 0 0;padding:0}.track{display:grid;grid-template-columns:35px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:14px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}.track:hover,.track[aria-current="true"]{background:#ffffff08}.track[aria-current="true"]{color:var(--accent)}.number,.duration{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.track[aria-current="true"] .number{color:var(--accent)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}footer{margin-top:46px;font-size:11px;color:var(--muted);letter-spacing:.08em}@media(max-width:650px){main{padding:26px 20px}.intro{grid-template-columns:1fr;gap:30px}.cover{max-width:500px}.artist{margin-bottom:12px}h1{font-size:52px}h1 br{display:none}.listening{margin-top:32px;grid-template-columns:1fr;gap:14px}.track{padding:14px 2px;gap:8px;grid-template-columns:26px 1fr auto}.details .description{margin-bottom:0}.actions{margin-top:22px}}
/* Shared homepage identity and atmospheric background. */
html{min-height:100%;background:#030303}
body{min-height:100vh;position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(0,0,0,.48),#030303 58%,#030303),none center top / cover fixed,#030303}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-2;background:none center top / cover;filter:blur(28px) saturate(1.22) brightness(.58);transform:scale(1.08);opacity:.72}
body::after{z-index:-1;background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.18),transparent 15rem),radial-gradient(circle at 24% 28%,rgba(255,106,190,.16),transparent 14rem),radial-gradient(circle at 82% 38%,rgba(136,238,244,.12),transparent 16rem),linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.78))}
.artist-logo{width:72px;height:72px;border-radius:50%;display:block;object-fit:cover;margin-bottom:24px;border:1px solid rgba(255,255,255,.42);box-shadow:0 0 0 5px rgba(255,255,255,.06),0 0 30px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.58)}
#play-album{display:inline-flex;align-items:center;justify-content:center;gap:18px}
.play-icon{display:block;width:13px;height:15px;flex:0 0 auto}
.download{background:rgba(8,8,10,.7)}
@media(max-width:650px){.artist-logo{width:64px;height:64px;margin-bottom:20px}}

/* Visible artwork at the top, fading to black down the page. */
html{background:#030303}
body{background:#030303}
body::before{position:absolute;inset:0 0 auto;height:1100px;max-height:100%;z-index:-2;background:linear-gradient(180deg,rgba(3,3,3,.32) 0%,rgba(3,3,3,.55) 35%,rgba(3,3,3,.88) 70%,#030303 100%),none center top / cover no-repeat;filter:none;transform:none;opacity:1}
body::after{display:none}
/* Frosted glass play control. */
#play-album{color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.34);border-radius:12px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.2);text-shadow:0 1px 3px rgba(0,0,0,.3);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
#play-album:hover{background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.1));border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px rgba(0,0,0,.25)}
#play-album:active{background:rgba(255,255,255,.1);box-shadow:inset 0 2px 8px rgba(0,0,0,.2)}
@media(max-width:650px){body::before{height:850px;background-size:auto,auto 850px;background-position:center top}}
@media(prefers-reduced-motion:reduce){#play-album{transition:none}}

/* Glass treatment inspired by Petr Knoll: https://codepen.io/Petr-Knoll/pen/QwWLZdx */
@property --glass-rim-angle {syntax:'<angle>';inherits:false;initial-value:135deg}
#play-album {
  --glass-rim-angle:135deg;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:58px;padding:15px 24px;border:0;border-radius:999px;
  color:#fff;background:linear-gradient(115deg,#ffffff0a,#ffffff30 48%,#ffffff0c);
  backdrop-filter:blur(3px) saturate(125%);-webkit-backdrop-filter:blur(3px) saturate(125%);
  box-shadow:inset 0 2px 5px #0003,inset 0 -2px 3px #ffffff70,inset 0 0 8px #ffffff36,0 8px 12px -6px #0009;
  text-shadow:0 2px 3px #0007;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,backdrop-filter .35s,--glass-rim-angle .5s;
}
#play-album::before {
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--glass-rim-angle),#ffffff12,#ffffffe6 12%,#ffffff28 30%,#ffffff08 48%,#ffffffc9 65%,#ffffff17 85%,#ffffff12);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
#play-album::after {
  content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,#ffffff30 42%,#ffffff63 46%,transparent 53%);
  background-size:240% 100%;background-position:100% 0;opacity:.65;
  transition:background-position .6s cubic-bezier(.2,.8,.2,1),opacity .35s;
}
@media(hover:hover){
  #play-album:hover{--glass-rim-angle:225deg;transform:translateY(1px) scale(.98);background:linear-gradient(115deg,#ffffff0a,#ffffff30 48%,#ffffff0c);backdrop-filter:blur(1px) saturate(140%);-webkit-backdrop-filter:blur(1px) saturate(140%);box-shadow:inset 0 1px 3px #0003,inset 0 -2px 3px #ffffffa0,inset 0 0 4px #ffffff70,0 4px 8px -5px #000b}
  #play-album:hover::after{background-position:0% 0;opacity:.9}
}
#play-album:active{transform:perspective(400px) rotateX(12deg) translateY(2px) scale(.97);box-shadow:inset 0 3px 6px #0005,inset 0 -2px 2px #ffffffa0,0 2px 3px #0006}
#play-album:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){#play-album,#play-album::after{transition:none}#play-album:hover,#play-album:active{transform:none}}

/* Icon-only circular player and download action. */
.actions{align-items:center;gap:20px}
#play-album{width:80px;height:80px;min-height:80px;padding:0;border-radius:50%;flex:0 0 80px;gap:0}
#play-album .play-icon{width:25px;height:29px;margin-left:5px}
.download{flex-direction:row;align-items:center;gap:12px;min-height:58px}
.download .download-icon{width:24px;height:24px;flex:0 0 auto}
.download .download-copy{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--ink);margin:0}
.download .download-size{font-size:10px;color:var(--muted);margin:0}

.download{border-radius:50px;padding:12px 26px}

#play-album.is-playing .play-icon{margin-left:0}

/* Quiet dark-grey page background. */
html{background:#08090b}
body{background:linear-gradient(180deg,#202226 0%,#141619 38%,#08090b 100%)}
body::before,body::after{display:none}

/* Download inversion for pointer hover and keyboard focus. */
.download{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.download .download-copy,.download .download-size{transition:color .18s ease}
.download:focus-visible{background:#f3eee7;color:#17191c;border-color:#f3eee7;outline:2px solid #f3eee7;outline-offset:4px}
.download:focus-visible .download-copy{color:#17191c}
.download:focus-visible .download-size{color:#51545a}
@media(hover:hover){
 .download:hover{background:#f3eee7;color:#17191c;border-color:#f3eee7}
 .download:hover .download-copy{color:#17191c}
 .download:hover .download-size{color:#51545a}
}
@media(prefers-reduced-motion:reduce){.download,.download .download-copy,.download .download-size{transition:none}}

/* Track deep links and copy controls. */
.tracklist li{display:flex;align-items:stretch;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.tracklist .track{flex:1;min-width:0;border-bottom:0}
.track-link{width:44px;flex:0 0 44px;display:grid;place-items:center;color:var(--muted);border-radius:6px;transition:color .15s,background .15s}
.track-link:hover,.track-link:focus-visible{color:var(--accent);background:#ffffff08}
.track-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#status a{color:var(--accent);overflow-wrap:anywhere}

/* Previous / play / next transport. */
.transport{display:flex;align-items:center;gap:10px}
.actions .skip-track{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:#ffffff08;color:var(--ink);cursor:pointer;transition:background .18s,color .18s}
.actions .skip-track:hover:not(:disabled){background:#ffffff16;color:var(--accent)}
.actions .skip-track:disabled{opacity:.3;cursor:default}
.actions .skip-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.actions .skip-track{transition:none}}