:root{--b:#050505;--f:#f1f1ec;--m:#858580;--l:#292927;--a:#b7ff00}
*{box-sizing:border-box}
html,body{margin:0;background:var(--b);color:var(--f);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
main{min-height:100vh;padding:22px;display:grid;grid-template-rows:auto 1fr auto auto}
header,footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.brand-logo{display:block;width:clamp(220px,32vw,470px);height:auto}
header span{color:var(--a)}
.player{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:32px;border-top:1px solid var(--l);border-bottom:1px solid var(--l);margin-top:24px;padding:clamp(44px,8vw,100px) 0}
.player button{width:110px;height:110px;border-radius:50%;border:1px solid var(--f);background:none;color:var(--f);font-size:26px;cursor:pointer;transition:.18s ease}
.player button:hover{background:var(--f);color:var(--b)}
small{color:var(--m);letter-spacing:.16em}
h1{font-size:clamp(27px,5vw,68px);letter-spacing:-.04em;line-height:.95;margin:12px 0 0}
h2{font-size:clamp(12px,1.4vw,18px);font-weight:normal;color:var(--m);letter-spacing:.09em}
.time{display:grid;grid-template-columns:48px 1fr 48px;gap:12px;align-items:center;margin-top:30px;font-size:10px;color:var(--m)}
input[type=range]{width:100%;accent-color:var(--a);cursor:pointer}
#playlist{padding:18px 0 46px}
.item{display:grid;grid-template-columns:44px 1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--l);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.item:first-child{border-top:1px solid var(--l)}
.item:hover,.item.active{color:var(--a)}
.detail,.num{color:var(--m)}
.item.active .detail{color:var(--a)}
footer{border-top:1px solid var(--l);padding-top:16px;color:var(--m)}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--f)}
@media(max-width:680px){
  main{padding:16px}
  header{align-items:flex-start;gap:16px}
  .brand-logo{width:min(68vw,300px)}
  header span{padding-top:4px;font-size:9px}
  .player{grid-template-columns:1fr;gap:24px;padding:48px 0}
  .player button{width:76px;height:76px}
  .item{grid-template-columns:34px 1fr}
  .detail{grid-column:2}
  footer{gap:12px;flex-wrap:wrap}
}