/* One catalogue, one player. The sound keeps its catalogue color. */
.sound-preview{margin-top:16px;width:calc(100% + 24px);max-width:560px;display:flex;flex-direction:column;align-items:center;gap:12px;--sound-accent:var(--accent)}
.sound-preview h2{margin:0;font:600 14px/1.4 var(--font-rounded);color:var(--white-92)}
.preview-hint{margin:0;max-width:calc(100% - 24px);font:var(--type-hint);color:var(--white-50)}
.bars-row{display:flex;width:100%;max-width:480px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--white-10) transparent;padding:3px 0}
.bar-hit{flex:1 0 24px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bar-hit i{display:flex;align-items:center;justify-content:center;gap:2px;height:36px}
.bar-hit span{display:none;width:3px;height:24px;border-radius:3px;background:var(--bar-color);opacity:1;transition:height .2s ease,opacity .2s ease}
.bar-hit span:nth-child(3){display:block}
.bar-hit:hover span,.bar-hit:focus-visible span{height:32px;opacity:1}
.bar-hit[aria-pressed="true"] span{height:36px;opacity:1}
.bar-hit:focus-visible,.preview-toggle:focus-visible,.preview-seek:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
.sound-preview.is-playing .bar-hit[aria-pressed="true"] span{display:block;width:2px;height:28px;animation:preview-wave 1.3s ease-in-out infinite alternate}
.sound-preview.is-playing .bar-hit[aria-pressed="true"] span:nth-child(2){animation-delay:-.7s;height:20px}
.sound-preview.is-playing .bar-hit[aria-pressed="true"] span:nth-child(3){animation-delay:-.3s;height:36px}
.sound-preview.is-playing .bar-hit[aria-pressed="true"] span:nth-child(4){animation-delay:-1s;height:24px}
.sound-preview.is-playing .bar-hit[aria-pressed="true"] span:nth-child(5){animation-delay:-.5s;height:18px}
.preview-player{display:flex;align-items:center;gap:16px;width:min(calc(100% - 24px),360px);text-align:left}
.preview-toggle{flex:0 0 52px;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;color:var(--on-light-control);background:var(--accent);cursor:pointer;transition:transform .12s ease,opacity .12s ease}
.preview-toggle:active{transform:scale(.96);opacity:.86}
.preview-toggle svg{width:22px;height:22px;fill:currentColor}
.preview-toggle [data-icon="pause"]{display:none}
.is-playing .preview-toggle [data-icon="pause"]{display:block}
.is-playing .preview-toggle [data-icon="play"]{display:none}
.bars-label{min-width:0;display:flex;flex-direction:column;gap:4px;min-height:44px;justify-content:center}
.bars-label b{font:var(--type-sound-title);color:var(--text-title)}
.bars-label span{font:var(--type-metadata);color:var(--white-50)}
.preview-timeline{width:min(calc(100% - 24px),360px);display:flex;align-items:center;gap:12px}
.preview-seek{appearance:none;-webkit-appearance:none;min-width:0;flex:1;height:32px;margin:0;cursor:pointer;background:linear-gradient(to right,var(--sound-accent) var(--played,0%),var(--white-10) var(--played,0%)) center/100% 3px no-repeat}
.preview-seek::-webkit-slider-runnable-track{height:3px;background:transparent}
.preview-seek::-moz-range-track{height:3px;background:transparent}
.preview-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:var(--sound-accent);margin-top:-4.5px}
.preview-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--sound-accent)}
.preview-seek:disabled{opacity:.5;cursor:default}
.preview-time{font:var(--type-metadata);font-variant-numeric:tabular-nums;color:var(--white-50);white-space:nowrap}
.preview-status{margin:0;min-height:18px;font:var(--type-metadata);color:var(--white-50);max-width:360px}
.sound-preview audio{width:min(100%,360px);height:54px}
.sound-preview.is-enhanced audio{display:none}
.preview-fallback{margin:0;font:var(--type-hint);line-height:1.6}
.sound-preview.is-enhanced .preview-fallback{display:none}
.sound-preview [hidden]{display:none!important}
@keyframes preview-wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.sound-preview *{animation:none!important;transition:none!important}}