.sample{min-width:0}
.sample .track-art{overflow:clip}
.sample-theme-burgundy{background:var(--burgundy);color:var(--paper)}.sample-theme-khaki{background:var(--khaki);color:var(--paper)}.sample-theme-brick{background:var(--brick);color:var(--paper)}.sample-theme-ink{background:var(--ink);color:var(--paper)}
.track-art .sample-cover-title{white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:clamp(30px,3.5vw,45px);line-height:1.03}
.sample-note{font-size:10px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.sample .track-meta h3,.sample .track-meta p{overflow-wrap:anywhere}
#example-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:38px}
#example-list.no-examples{grid-template-columns:1fr}.no-examples .your-track{border-left:0;padding-left:0}
#examples-status[hidden]{display:none}
@media(max-width:800px){#example-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sample-toggle{position:absolute;right:19px;bottom:18px;z-index:2;width:54px;height:54px;border:1px solid #efece499;border-radius:50%;background:#efece415;color:var(--paper);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.sample-toggle[hidden],.sample-timeline[hidden],.sample-audio[hidden]{display:none}
.sample-toggle:hover{transform:scale(1.07);background:#efece433}
.sample-toggle:active{transform:scale(.95)}
.sample-toggle:focus-visible{outline-color:var(--paper);outline-offset:4px}
.sample-toggle svg{width:25px;height:25px;fill:currentColor}
.sample-toggle .pause-icon,.sample.is-playing .play-icon{display:none}
.sample.is-playing .pause-icon{display:block}
.sample.is-playing .track-art{transform:translateY(-4px)}
.sample-wave{display:flex;align-items:center;gap:4px;position:absolute;right:24px;bottom:84px;height:22px;opacity:0;transition:opacity .3s}
.sample-wave i{width:3px;height:7px;border-radius:2px;background:var(--paper);animation:sample-pulse .85s ease-in-out infinite alternate;animation-play-state:paused}
.sample-wave i:nth-child(2){animation-delay:-.4s}.sample-wave i:nth-child(3){animation-delay:-.2s}.sample-wave i:nth-child(4){animation-delay:-.6s}
.sample.is-playing .sample-wave{opacity:.7}.sample.is-playing .sample-wave i{animation-play-state:running}
@keyframes sample-pulse{to{height:22px}}
.sample-timeline{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}
.sample-seek{--progress:0%;appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:24px;margin:0;background:transparent;cursor:pointer;touch-action:auto}
.sample-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--brick) var(--progress),var(--line) var(--progress))}
.sample-seek::-moz-range-track{height:3px;border-radius:3px;background:var(--line)}
.sample-seek::-moz-range-progress{height:3px;background:var(--brick)}
.sample-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--brick);margin-top:-4px}
.sample-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--brick)}
.sample-seek:disabled{opacity:.5;cursor:default}.sample-seek:focus-visible{outline:2px solid var(--brick);outline-offset:3px;border-radius:3px}
.sample-audio{display:block;width:100%;height:40px;margin-top:15px}
.sample-message{font-size:11px;line-height:1.6;color:var(--burgundy);margin:8px 0 0}.sample-message:empty{display:none}
@media(max-width:800px){.sample-toggle{right:14px;bottom:14px;width:46px;height:46px}.sample-wave{right:21px;bottom:72px}.sample .track-meta{flex-wrap:wrap}.sample .track-meta>span{display:none}.sample-timeline{gap:7px}}
@media(max-width:430px){.sample .track-art{aspect-ratio:.75}.sample .track-art strong{font-size:30px}.sample .band strong{font-size:39px}.sample-wave{display:none}}
@media(prefers-reduced-motion:reduce){.sample-wave i{animation:none;height:12px}.sample-wave i:nth-child(even){height:20px}.sample-toggle,.sample-wave{transition:none}}