.audio-player-shell[data-v-cbcb89ec]{border-radius:12px}.audio-player-shell[data-v-cbcb89ec] wave{border-radius:12px}.use-demo-title{color:var(--ws-color-ink,#0a0a0a);font-weight:600;letter-spacing:-.5px}.use-demo-description{color:var(--ws-color-steel,#5f5f5f);font-size:1.125rem;font-weight:500;line-height:1.5}.use-demo-shell{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:none;margin:2rem auto 0;overflow:hidden;padding:0;width:calc(100% - 2rem)}@media (min-width:768px){.use-demo-shell{margin-top:3rem;padding:0;width:100%}}.use-demo-nav{background:#f7f8fa;border-bottom:1px solid #e5e7eb;display:flex;flex-shrink:0;flex-wrap:nowrap;gap:.25rem;max-width:100%;overflow-x:auto;padding:.5rem;scrollbar-width:none;width:100%}.use-demo-nav::-webkit-scrollbar{display:none}@media (min-width:768px){.use-demo-nav{border-bottom:none;border-radius:16px 0 0 16px;border-right:1px solid #e5e7eb;flex-direction:column;gap:.375rem;overflow-x:visible;padding:1.5rem 1rem 1.25rem 1.5rem;width:14rem}}@media (min-width:1024px){.use-demo-nav{width:16rem}}@media (min-width:1280px){.use-demo-nav{width:18rem}}.use-demo-tab-btn{background:transparent;border:none;border-radius:9999px;color:var(--ws-color-steel,#5f5f5f);cursor:pointer;flex-shrink:0;font-size:1rem;font-weight:500;line-height:1.35;min-width:7.5rem;padding:.75rem 1rem;text-align:left;transition:background-color .2s ease,color .2s ease;white-space:nowrap}@media (min-width:768px){.use-demo-tab-btn{min-width:0}}.use-demo-tab-btn:hover:not(.use-demo-tab-btn--active){background:#eef0f3;color:var(--ws-color-ink,#0a0a0a)}.use-demo-tab-btn:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}.use-demo-tab-btn--active{background:#0a0a0a;color:#fff}.use-demo-tab-btn--active:hover{background:#222;color:#fff}.use-demo-panel{background:#fff;flex:1 1 0;max-width:none;min-width:0;padding:1rem;width:100%}@media (min-width:768px){.use-demo-panel{border-radius:0 16px 16px 0;padding:1.5rem}}.use-demo-panel-title{color:var(--ws-color-ink,#0a0a0a);font-size:1.5rem;font-weight:600;line-height:1.3;margin:0 0 1.25rem}.use-demo-type-label{color:var(--ws-color-steel,#5f5f5f);display:flex;font-size:1.125rem;font-weight:600;gap:.5rem;margin-bottom:.5rem}@media (min-width:768px){.use-demo-type-label{margin-bottom:1.5rem}}.use-demo-type-label--enhanced{color:var(--system-color,#8882f5)}.use-demo-audio-card{background:#f7f8fa;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;padding:1rem;text-align:center}.use-demo-wave{height:98px;min-width:0;overflow:visible;width:100%}.use-demo-audio-card--enhanced{background:color-mix(in srgb,var(--system-color,#8882f5) 4%,#fff);border-color:color-mix(in srgb,var(--system-color,#8882f5) 24%,#e5e7eb)}.use-demo-audio-list{gap:1.5rem}@media (min-width:768px){.use-demo-panel-title{margin-bottom:1.5rem}.use-demo-audio-card{border-radius:16px;padding:1.5rem}.use-demo-audio-list{gap:2rem}}.use-demo-play-btn{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:row;gap:1rem;justify-content:flex-start;padding:.5rem 0;width:100%}.use-demo-play-btn:focus-visible{border-radius:8px;outline:2px solid #0a0a0a;outline-offset:2px}.use-demo-play-icon{align-items:center;background:#fff;border-radius:9999px;display:flex;flex-shrink:0;height:3rem;justify-content:center;width:3rem}.use-demo-play-icon--original{border:2px solid #e5e7eb;box-shadow:none;color:#64748b}.use-demo-play-icon--enhanced{border:2px solid var(--system-color,#8882f5);box-shadow:none;color:var(--system-color,#8882f5)}.use-demo-play-label{align-items:flex-start;display:flex;font-size:1.125rem;font-weight:500;justify-content:center;line-height:1.35}.use-demo-play-label--original{color:var(--ws-color-ink,#0a0a0a)}.use-demo-play-label--enhanced{color:var(--system-color,#8882f5)}.use-demo-cta-btn{align-items:center;background:#0a0a0a;border:none;border-radius:9999px;box-shadow:none;color:#fff;cursor:pointer;display:inline-flex;font-size:1.125rem;font-weight:600;gap:.75rem;justify-content:center;line-height:1.4;margin-top:2.5rem;padding:.75rem 1.375rem;transition:background-color .2s ease}@media (min-width:1024px){.use-demo-cta-btn{margin-top:4rem}}.use-demo-cta-btn:hover{background:#222}.use-demo-cta-icon{align-items:center;display:inline-flex;justify-content:center}