.lk-native-demo{border-block:1px solid var(--lk-line);padding:17px 0 12px}
.lk-demo-controls{display:flex;align-items:center;gap:15px;min-width:0}
.lk-demo-controls[hidden]{display:none}
.lk-demo-toggle{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--lk-teal);border-radius:50%;background:none;color:var(--lk-cream);cursor:pointer;font-size:12px;transition:background .15s,color .15s}
.lk-demo-toggle:hover,.lk-demo-toggle[aria-pressed=true]{background:var(--lk-teal);color:var(--lk-ink)}
.lk-demo-toggle:focus-visible{outline:2px solid var(--lk-cream);outline-offset:4px}
.lk-demo-body{flex:1;min-width:0}
.lk-demo-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:11px;color:var(--lk-cream)}
.lk-demo-time{color:var(--lk-muted);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lk-demo-wave{height:45px;position:relative;--lk-demo-progress:0%}
.lk-demo-wave svg{display:block;width:100%;height:100%;fill:var(--lk-teal);opacity:.65}
.lk-demo-wave rect.is-played{fill:var(--lk-cream)}
.lk-demo-wave input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.lk-demo-wave:has(input:focus-visible){outline:2px solid var(--lk-teal);outline-offset:4px}
.lk-demo-wave::after{content:'';position:absolute;left:var(--lk-demo-progress);top:0;bottom:0;width:1px;background:var(--lk-cream);opacity:.8;pointer-events:none}
.lk-demo-status{font-size:11px;line-height:1.7;color:var(--lk-muted);margin:9px 0 0}
.lk-demo-status:empty{display:none}
.lk-native-demo audio{width:100%;display:block}
.lk-native-demo.is-enhanced audio{display:none}
@media(max-width:450px){.lk-demo-controls{gap:12px}.lk-demo-toggle{width:40px;height:40px}.lk-demo-heading{font-size:10px}.lk-demo-wave{height:42px}}
@media(prefers-reduced-motion:reduce){.lk-demo-toggle{transition:none}}