/* Shared listening surface, using the site's existing color tokens and controls. */
.beat-detail-media{align-self:start;min-width:0}.beat-detail-media img,.demo-preview img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px}.beat-detail-media p{font-size:.9rem;opacity:.8}.detail-hero:has(.beat-detail-media){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.player-fallback{padding:16px 0 4px;border-top:1px solid #b79a6655;margin-top:16px}.player-fallback p{font-size:.9rem;margin:0 0 12px}.player-fallback a{white-space:normal;text-align:center;min-height:44px}.demo-preview{margin-top:20px;min-width:0}.demo-preview[hidden],.preview-dock[hidden]{display:none!important}.demo-preview h3{margin:16px 0 8px}.demo-preview audio{display:block;width:100%;margin:16px 0}.demo-preview a{display:inline-flex;white-space:normal;font-size:.9rem;min-height:44px}.demo-preview p{line-height:1.6}
.preview-dock{position:fixed;z-index:1000;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 24px));box-sizing:border-box;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:#17141e;color:#fff;border:1px solid #c9a96b;border-radius:18px;box-shadow:0 8px 32px #0004}.preview-info{min-width:140px;flex:1}.preview-info strong,.preview-label{display:block}.preview-label{font-size:.7rem;letter-spacing:.08em;color:#e3ca93}.preview-dock audio{max-width:100%;width:280px}.preview-dock .preview-license{min-height:44px;white-space:normal;background:#c9a96b;color:#18140f}.preview-close{min-height:44px;padding:10px 14px;color:inherit;background:transparent;border:1px solid #ffffff55;border-radius:8px;cursor:pointer}.preview-status{flex-basis:100%;margin:0;font-size:.875rem}.preview-status:empty{display:none}.has-preview-dock{padding-bottom:180px}.preview-dock :focus-visible,.demo-preview :focus-visible{outline:3px solid #e6b85b;outline-offset:4px}
@media(max-width:760px){.detail-hero:has(.beat-detail-media){grid-template-columns:1fr}.beat-detail-media{grid-row:1}.beat-detail-media img{max-height:35vh}.preview-dock{gap:10px;padding:12px}.preview-dock .preview-info{flex-basis:calc(100% - 90px);min-width:0;overflow-wrap:anywhere}.preview-dock audio{order:3;flex:1;min-width:180px}.preview-dock .preview-license{order:4;flex:1;font-size:.8rem}.preview-close{order:2}.preview-status{order:5}.has-preview-dock{padding-bottom:230px}}