/* Original vector samples use a static composed poster until the visible player loads. */
.dn-sample{min-width:0;margin:0;padding:18px;border:1px solid #343434;border-radius:var(--r-xl);background:#101010;box-shadow:0 22px 70px #0005;overflow:hidden}
.dn-sample__heading{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.dn-sample__heading>span{display:flex;align-items:center;gap:8px;color:var(--fg-3);font-size:13px}
.dn-sample__heading i{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
.dn-sample__heading>b{color:var(--fg);font:600 clamp(18px,2vw,23px)/1.4 var(--font-title);letter-spacing:0}
.dn-sample__picture{overflow:hidden;border-radius:var(--r-md);background:#111}
.dn-sample__picture>svg{display:block;width:100%;height:auto;font-family:var(--font-text);font-weight:500}
.dn-sample__picture text{font-style:normal;letter-spacing:0}
.dn-sample__beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:18px 0}
.dn-sample__beats li{display:flex;flex-direction:column;gap:7px;border-top:1px solid #3c3c3c;padding-top:10px;color:var(--fg-3);font-size:13px;line-height:1.5}
.dn-sample__beats li.is-current{border-color:var(--red);color:var(--fg)}
.dn-sample__beats bdi{font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
.dn-sample__controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:44px}
.dn-sample__controls .ds-btn{min-height:44px;padding:10px 14px;font-size:13px;line-height:1.4}
.dn-sample__play svg{flex:none}
.dn-sample__clock{margin-inline-start:auto;color:var(--fg-3);font:12px/1.5 var(--font-mono);white-space:nowrap}
.dn-sample__note{margin:12px 0 0;color:var(--fg-3);font-size:12px;line-height:1.5}
html[lang=ar] .dn-sample__heading>b{font-family:var(--font-text);font-weight:600}
html[lang=ar] .dn-sample__controls .ds-btn{font-size:14px}
html[lang=ar] .dn-sample :is(.dn-sample__beats li,.dn-sample__note,.dn-sample__heading>span){font-size:13px;letter-spacing:0;text-transform:none;font-style:normal}
@media(max-width:460px){.dn-sample{padding:14px}.dn-sample__beats{gap:9px}.dn-sample__clock{font-size:11px}.dn-sample__controls .ds-btn{padding-inline:12px}.dn-sample__heading>b{font-size:20px}}