:root {
      --bg: #14110f;
      --card: #1f1a17;
      --line: #322a25;
      --text: #f3ece4;
      --sub: #9b8f84;
      --accent: #ff7a3d;
    }

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

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 16px;
      background: var(--bg);
      color: var(--text);
      font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      cursor: pointer
    }

    button:focus-visible,
    input:focus-visible,
    li:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px
    }

    .player {
      width: 100%;
      max-width: 380px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 28px 24px 20px;
    }

    /* disc */
    .disc-wrap {
      display: grid;
      place-items: center;
      margin-bottom: 24px
    }

    .disc {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: relative;
      background:
        radial-gradient(circle at center, var(--accent) 0 22%, #0d0b0a 23% 26%, transparent 27%),
        repeating-radial-gradient(circle at center, #1a1512 0 3px, #0f0c0a 3px 6px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
      animation: spin 8s linear infinite;
      animation-play-state: paused;
    }

    .disc::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .07) 25%, transparent 30% 70%, rgba(255, 255, 255, .05) 75%, transparent 80%);
    }

    .player.playing .disc {
      animation-play-state: running
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .disc {
        animation: none
      }
    }

    /* info */
    .info {
      text-align: center;
      margin-bottom: 20px;
      min-height: 48px
    }

    .title {
      font-size: 18px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .artist {
      color: var(--sub);
      font-size: 14px;
      margin-top: 4px
    }

    /* progress */
    .progress {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--sub);
      font-size: 12px;
      font-variant-numeric: tabular-nums
    }

    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      height: 4px;
      border-radius: 2px;
      cursor: pointer;
      background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line) var(--p, 0%));
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--text);
      border: 0;
    }

    input[type=range]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--text);
      border: 0
    }

    /* controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      margin: 20px 0
    }

    .ctl {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--sub);
      transition: color .15s
    }

    .ctl:hover,
    .ctl.on {
      color: var(--text)
    }

    .ctl.on {
      color: var(--accent)
    }

    .ctl svg {
      width: 22px;
      height: 22px;
      fill: currentColor
    }

    .play {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--accent);
      color: #1a0d05;
      display: grid;
      place-items: center;
      transition: transform .1s;
    }

    .play:hover {
      transform: scale(1.06)
    }

    .play svg {
      width: 26px;
      height: 26px;
      fill: currentColor
    }

    /* volume */
    .vol {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--sub);
      margin-bottom: 18px
    }

    .vol svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
      flex: none
    }

    /* playlist */
    .list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      margin-bottom: 8px;
    }

    .list-head span {
      font-size: 13px;
      color: var(--sub)
    }

    .add {
      background: var(--text);
      color: #14110f;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
    }

    .add:hover {
      background: #fff
    }

    .playlist {
      list-style: none;
      max-height: 180px;
      overflow-y: auto
    }

    .playlist li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 8px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
    }

    .playlist li:hover {
      background: var(--line)
    }

    .playlist li.active {
      color: var(--accent)
    }

    .playlist .n {
      width: 18px;
      color: var(--sub);
      font-size: 12px;
      text-align: right;
      flex: none
    }

    .playlist .t {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .empty {
      color: var(--sub);
      font-size: 13px;
      text-align: center;
      padding: 18px 0
    }