.track-preview-widget{margin:16px 0 30px;padding:18px 21px 17px;border:1px solid #d39eaf55;background:linear-gradient(108deg,#2e1a2a 0%,#190e18 100%);color:#fff}
.track-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.track-preview-heading span{font-size:11px;font-weight:800;letter-spacing:.2em;color:#f3d9e0}
.track-preview-heading small{font-size:10px;color:#c999ab;letter-spacing:.08em}
.track-preview-controls{display:flex;align-items:center;gap:16px}
.track-preview-play{height:46px;width:46px;flex:0 0 46px;display:grid;place-items:center;border:0;background:#ead0d8;color:#24131c;border-radius:50%;font-size:16px;cursor:pointer}
.track-preview-play:hover{background:#fff}
.track-preview-seek{flex:1;min-width:0}
.track-preview-seek input{width:100%;height:5px;display:block;margin:7px 0 8px;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#e79eb8 var(--seek-percent,0%),#745063 var(--seek-percent,0%));border-radius:4px;cursor:pointer}
.track-preview-seek input::-webkit-slider-thumb{appearance:none;background:#f4dbe4;width:13px;height:13px;border-radius:50%;border:2px solid #ad5f78}
.track-preview-seek input::-moz-range-thumb{background:#f4dbe4;width:11px;height:11px;border-radius:50%;border:2px solid #ad5f78}
.track-preview-times{display:flex;justify-content:space-between;color:#c6a6b3;font-size:11px;font-variant-numeric:tabular-nums}
.track-preview-play:focus-visible,.track-preview-seek input:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:780px){.track-preview-widget{padding:16px;margin:15px 0 25px}.track-preview-heading span{font-size:10px}}