ecplayer 1.0.8 → 1.1.0

package/dist/ecplayer.es.js

@@ -1,21 +1,21 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ecp-full-width{width:100%}.ecp-h-full{height:100%}.ecp-relative{position:relative}.ecp-absolute{position:absolute}.ecp-inset-0{top:0;right:0;bottom:0;left:0}.ecp-z-10{z-index:10}.ecp-flex{display:flex}.ecp-inline-flex{display:inline-flex}.ecp-flex-col{flex-direction:column}.ecp-flex-wrap{flex-wrap:wrap}.ecp-flex-1{flex:1 1 0%}.ecp-flex-shrink-0{flex-shrink:0}.ecp-grid{display:grid}.ecp-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ecp-hidden{display:none}.ecp-items-center{align-items:center}.ecp-items-end{align-items:flex-end}.ecp-items-start{align-items:flex-start}.ecp-justify-center{justify-content:center}.ecp-justify-between{justify-content:space-between}.ecp-justify-end{justify-content:flex-end}.ecp-justify-start{justify-content:flex-start}.ecp-text-center{text-align:center}.ecp-text-right{text-align:right}.ecp-self-center{align-self:center}.ecp-gap-1{gap:.25rem}.ecp-gap-2{gap:.5rem}.ecp-gap-3{gap:.75rem}.ecp-gap-px{gap:1px}.ecp-gap-05{gap:2px}.ecp-mb-1{margin-bottom:.25rem}.ecp-mb-2{margin-bottom:.5rem}.ecp-mb-4{margin-bottom:1rem}.ecp-mb-6{margin-bottom:1.5rem}.ecp-mr-2{margin-right:.5rem}.ecp-mt-4{margin-top:1rem}.ecp-mt-6{margin-top:1.5rem}.ecp-ml-auto{margin-left:auto}.ecp-p-1{padding:.25rem}.ecp-p-1-5{padding:.375rem}.ecp-p-2{padding:.5rem}.ecp-p-3{padding:.75rem}.ecp-p-4{padding:1rem}.ecp-p-6{padding:1.5rem}.ecp-p-8{padding:2rem}.ecp-px-2{padding-left:.5rem;padding-right:.5rem}.ecp-px-3{padding-left:.75rem;padding-right:.75rem}.ecp-px-4{padding-left:1rem;padding-right:1rem}.ecp-px-6{padding-left:1.5rem;padding-right:1.5rem}.ecp-py-1{padding-top:.25rem;padding-bottom:.25rem}.ecp-py-2{padding-top:.5rem;padding-bottom:.5rem}.ecp-py-3{padding-top:.75rem;padding-bottom:.75rem}.ecp-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.ecp-pb-2{padding-bottom:.5rem}.ecp-pt-2{padding-top:.5rem}.ecp-w-1{width:.25rem}.ecp-w-3{width:.75rem}.ecp-w-4{width:1rem}.ecp-w-10{width:2.5rem}.ecp-w-12{width:3rem}.ecp-w-20{width:5rem}.ecp-w-24{width:6rem}.ecp-w-px{width:1px}.ecp-w-full{width:100%}.ecp-max-w-xs{max-width:20rem}.ecp-max-w-lg{max-width:32rem}.ecp-max-w-4xl{max-width:56rem}.ecp-h-0-5{height:.125rem}.ecp-h-1{height:.25rem}.ecp-h-1-5{height:.375rem}.ecp-h-2{height:.5rem}.ecp-h-3{height:.75rem}.ecp-h-4{height:1rem}.ecp-h-6{height:1.5rem}.ecp-h-8{height:2rem}.ecp-h-10{height:2.5rem}.ecp-h-12{height:3rem}.ecp-h-20{height:5rem}.ecp-h-40{width:10rem;height:40px}.ecp-h-64{height:16rem}.ecp-h-screen{height:100vh}.ecp-min-h-screen{min-height:100vh}.ecp-min-h-0{min-height:0}.ecp-min-w-12{min-width:3rem}.ecp-min-w-0{min-width:0}.ecp-aspect-square{aspect-ratio:1 / 1}.ecp-text-xs{font-size:.75rem;line-height:1rem}.ecp-text-sm{font-size:.875rem;line-height:1.25rem}.ecp-text-lg{font-size:1.125rem;line-height:1.75rem}.ecp-text-2xl{font-size:1.5rem;line-height:2rem}.ecp-font-medium{font-weight:500}.ecp-font-semibold{font-weight:600}.ecp-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-text-white{color:#fff}.ecp-text-transparent{color:transparent}.ecp-text-gray-400{color:#9ca3af}.ecp-text-gray-500{color:#6b7280}.ecp-text-gray-600{color:#4b5563}.ecp-text-gray-700{color:#374151}.ecp-text-gray-800{color:#1f2937}.ecp-text-gray-100{color:#f3f4f6}.ecp-text-gray-200{color:#e5e7eb}.ecp-text-gray-300{color:#d1d5db}.ecp-text-red-500{color:#ef4444}.ecp-dark .ecp-text-dark-100{color:#f3f4f6}.ecp-dark .ecp-text-dark-200{color:#e5e7eb}.ecp-dark .ecp-text-dark-300{color:#d1d5db}.ecp-bg-white{background-color:#fff}.ecp-bg-black-20{background-color:#0003}.ecp-bg-black-30{background-color:#0000004d}.ecp-bg-black-40{background-color:#0006}.ecp-bg-black-50{background-color:#00000080}.ecp-bg-gray-100{background-color:#f3f4f6}.ecp-bg-gray-200{background-color:#e5e7eb}.ecp-bg-gray-300{background-color:#d1d5db}.ecp-bg-gray-700{background-color:#374151}.ecp-bg-gray-800{background-color:#1f2937}.ecp-bg-red-50{background-color:#fef2f2}.ecp-bg-transparent{background-color:transparent}.ecp-border{border-width:1px}.ecp-border-2{border-width:2px}.ecp-border-r{border-right-width:1px}.ecp-border-transparent{border-color:transparent}.ecp-border-gray-300{border-color:#d1d5db}.ecp-border-red-300{border-color:#fca5a5}.ecp-border-current{border-color:currentColor}.ecp-border-none{border:none}.ecp-outline-none{outline:none}.ecp-rounded{border-radius:.25rem}.ecp-rounded-lg{border-radius:.5rem}.ecp-rounded-xl{border-radius:.75rem}.ecp-rounded-2xl{border-radius:1rem}.ecp-rounded-full{border-radius:9999px}.ecp-rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ecp-shadow-sm{box-shadow:0 1px 2px #0000000d}.ecp-shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.ecp-shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.ecp-opacity-20{opacity:.2}.ecp-opacity-40{opacity:.4}.ecp-opacity-70{opacity:.7}.ecp-opacity-80{opacity:.8}.ecp-cursor-pointer{cursor:pointer}.ecp-cursor-not-allowed{cursor:not-allowed}.ecp-pointer-events-none{pointer-events:none}.ecp-transition{transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ecp-transition-all{transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-duration-75{transition-duration:75ms}.ecp-duration-100{transition-duration:.1s}.ecp-duration-150{transition-duration:.15s}.ecp-duration-300{transition-duration:.3s}.ecp-scale-0{transform:scale(0)}.ecp-translate-y-10{transform:translateY(2.5rem)}.ecp--translate-y-10{transform:translateY(-2.5rem)}.ecp-rotate-180{transform:rotate(180deg)}.ecp-hover-scale-105:hover{transform:scale(1.05)}.ecp-hover-scale-110:hover{transform:scale(1.1)}@keyframes ecp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ecp-animation-spin{animation:ecp-spin 15s infinite linear}.ecp-object-contain{-o-object-fit:contain;object-fit:contain}.ecp-backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-overflow-hidden{overflow:hidden}.ecp-top-0{top:0}.ecp-left-0{left:0}.ecp-fixed{position:fixed}.ecp-z-9999{z-index:9999}.ecp-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.ecp-page-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}@media (min-width: 768px){.ecp-page-wrapper{padding:2rem}}.ecp-demo-container{width:100%;height:100%}@media (min-width: 768px){.ecp-demo-container{height:auto;max-width:56rem}}.ecp-container-glass{border-radius:.75rem;padding:2rem}.ecp-demo-header{margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:flex-start}.ecp-demo-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.25rem}.ecp-demo-title--dark{color:#e5e7eb}.ecp-demo-subtitle{font-size:.875rem;color:#6b7280}.ecp-theme-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-theme-btn:hover{background:#f9fafb}.ecp-demo-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-action-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-action-btn:hover{background:#f9fafb}.ecp-file-input-hidden{display:none}.ecp-theme-selector-panel{border-radius:.75rem;padding:1.5rem;margin-bottom:1.5rem}.ecp-theme-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ecp-theme-selector-title{font-size:1.125rem;font-weight:600;color:#1f2937}.ecp-theme-selector-close{color:#6b7280;font-size:.875rem;font-weight:500;background:none;border:none;cursor:pointer}.ecp-theme-selector-close:hover{color:#374151}.ecp-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}@media (min-width: 640px){.ecp-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.ecp-theme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.ecp-theme-card{background:#fff;padding:1rem;border-radius:.5rem;cursor:pointer;border:2px solid transparent;transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-theme-card--active{border-color:currentColor;box-shadow:0 10px 15px -3px #0000001a}.ecp-theme-color-preview{height:2.5rem;border-radius:.25rem;margin-bottom:.5rem}.ecp-theme-name{font-size:.875rem;font-weight:500;color:#374151}.ecp-vp-wrapper{width:100%;border-radius:.75rem;overflow:hidden}.ecp-vp-bg{padding:1rem}.ecp-vp-vu-outer{position:relative}.ecp-vp-vu-bg{border-radius:.5rem;margin-bottom:1.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d}.ecp-vp-vu-bg--light{background:#ffffffb3}.ecp-vp-vu-bg--dark{background:#0006}.ecp-vp-vu-bg--transparent{background:transparent!important;padding:0!important;box-shadow:none!important}.ecp-vp-vu-bg--dimmed{opacity:.3}.ecp-vp-vu-bg--no-margin{margin-bottom:0}.ecp-vp-vu-bars{display:flex;justify-content:center;align-items:flex-end;gap:.25rem;height:16rem}.ecp-vp-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-vp-eq-overlay--light{background:#fffc}.ecp-vp-eq-overlay--dark{background:#00000080}.ecp-vp-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-vp-eq-title--light{color:#374151}.ecp-vp-eq-title--dark{color:#e5e7eb}.ecp-vp-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-vp-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-vp-eq-band-label{font-size:.75rem}.ecp-vp-eq-band-label--light{color:#4b5563}.ecp-vp-eq-band-label--dark{color:#d1d5db}.ecp-vp-eq-band-range{display:flex;align-items:center;gap:.75rem}.ecp-vp-eq-range-bound{font-size:.75rem}.ecp-vp-eq-range-bound--light{color:#6b7280}.ecp-vp-eq-range-bound--dark{color:#9ca3af}.ecp-vp-eq-slider{flex:1;height:2rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-footer{display:flex;justify-content:flex-end;margin-top:1rem}.ecp-vp-eq-reset{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;transition:all .15s;border:none}.ecp-vp-eq-reset--light{background:#e5e7eb;color:#374151}.ecp-vp-eq-reset--light:hover{background:#d1d5db}.ecp-vp-eq-reset--dark{background:#374151;color:#e5e7eb}.ecp-vp-eq-reset--dark:hover{background:#4b5563}.ecp-vp-track{margin-bottom:1.5rem;display:flex;align-items:center}.ecp-vp-thumbnail-wrap{margin-right:.5rem;width:3rem;flex-shrink:0}.ecp-vp-thumbnail{height:3rem;width:3rem;border-radius:9999px}.ecp-vp-track-info{width:100%;min-width:0}.ecp-vp-track-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-vp-track-name--light{color:#374151}.ecp-vp-track-name--dark{color:#f3f4f6}.ecp-vp-track-author{font-size:.75rem}.ecp-vp-track-author--light{color:#6b7280}.ecp-vp-track-author--dark{color:#d1d5db}.ecp-vp-seekbar{margin-bottom:1.5rem}.ecp-vp-seekbar-row{display:flex;align-items:center;gap:.25rem}.ecp-vp-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-vp-time--right{text-align:right}.ecp-vp-time--light{color:#4b5563}.ecp-vp-time--dark{color:#f3f4f6}.ecp-vp-seek-input{flex:1;height:.5rem;background:#e5e7eb;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-seek-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-vp-controls--sm{gap:.5rem}.ecp-vp-play-btn{padding:.5rem 1rem;min-width:6rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s}.ecp-vp-play-btn:hover{opacity:.9}.ecp-vp-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-play-btn--compact{padding:1.25rem .75rem;min-width:unset}.ecp-vp-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-vp-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-stop-btn--light{background:#374151;color:#fff}.ecp-vp-stop-btn--light:hover{background:#1f2937}.ecp-vp-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-vp-stop-btn--dark:hover{background:#d1d5db}.ecp-vp-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-stop-btn--wide{padding:.5rem 1rem}.ecp-vp-eq-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-eq-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-eq-btn--off:hover{background:#d1d5db}.ecp-vp-eq-btn--on{color:#fff}.ecp-vp-eq-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-eq-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-loop-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-loop-btn--off:hover{background:#d1d5db}.ecp-vp-loop-btn--on{color:#fff}.ecp-vp-loop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-loop-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-icon--active{transform:rotate(180deg)}.ecp-vp-speed-wrap{display:flex;align-items:center}.ecp-vp-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;transition:all .15s;background:transparent}.ecp-vp-speed-select--light{color:#1f2937}.ecp-vp-speed-select--dark{color:#e5e7eb}.ecp-vp-speed-option--light{background:#fff;color:#1f2937}.ecp-vp-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-vp-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-vp-volume{gap:.75rem}}.ecp-vp-mute-btn{padding:.5rem;border-radius:9999px;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-vp-mute-btn:hover{background:#f3f4f680}.ecp-vp-mute-icon--light{color:#4b5563}.ecp-vp-mute-icon--dark{color:#f3f4f6}.ecp-vp-volume-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-vp-volume-slider{display:none}}.ecp-vp-volume-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-vp-volume-pct--light{color:#374151}.ecp-vp-volume-pct--dark{color:#f3f4f6}.ecp-vp-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-wave-outer{width:100%;max-width:32rem;position:relative}.ecp-wave-audio-el{display:none}.ecp-wave-card{border-radius:1rem;box-shadow:0 25px 50px -12px #00000040}.ecp-wave-card-inner{border-radius:1rem;padding:1.5rem;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-wave-thumbnail-wrap{width:100%;padding:1rem}.ecp-wave-thumbnail{width:100%;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-wave-seek{position:relative;height:5rem;margin-bottom:1.5rem;cursor:pointer}.ecp-wave-bars{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%;gap:1px}.ecp-wave-bar{width:.25rem;border-radius:.25rem .25rem 0 0;transition:all .15s}.ecp-wave-progress-line{position:absolute;top:0;height:100%;width:.25rem;background:#fff;border-right:1px solid black;border-radius:9999px;transition:all .15s;transform:translate(-50%)}.ecp-wave-times{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:1.5rem}.ecp-wave-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-content:space-between;margin-bottom:1rem}.ecp-wave-left-controls{display:flex;align-items:center;gap:.5rem}.ecp-wave-vol-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-vol-slider{width:5rem;height:.375rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 3px #0003}.ecp-wave-vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none}.ecp-wave-center-controls{display:flex;justify-content:center}.ecp-wave-play-btn{padding:1rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s;box-shadow:0 10px 15px -3px #0000001a}.ecp-wave-play-btn:hover{transform:scale(1.05)}.ecp-wave-right-controls{display:flex;align-items:center;gap:.75rem}.ecp-wave-speed-select{padding:.25rem .5rem;border-radius:.5rem;font-size:.875rem;border:none;cursor:pointer}.ecp-wave-speed-select--light{background:#f3f4f6;color:#374151}.ecp-wave-speed-select--dark{background:#1f2937;color:#f3f4f6}.ecp-wave-eq-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0003;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:1rem;padding:1rem}.ecp-wave-eq-panel{max-width:20rem;width:100%;padding:.5rem 1rem 1rem;border-radius:.75rem}.ecp-wave-eq-panel--light{background:#fff}.ecp-wave-eq-panel--dark{background:#1f2937}.ecp-wave-eq-title{font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.ecp-wave-eq-title--light{color:#374151}.ecp-wave-eq-title--dark{color:#e5e7eb}.ecp-wave-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-wave-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-wave-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-wave-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-wave-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-wave-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-wave-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-wave-eq-slider{flex:1;height:1rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-wave-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-wave-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-wave-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-wave-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-wave-eq-footer-btn--light:hover{background:#d1d5db}.ecp-wave-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-wave-eq-footer-btn--dark:hover{background:#4b5563}.ecp-wave-error{padding:1.5rem;border-radius:.75rem;text-align:center}.ecp-wave-error-title{font-weight:500}.ecp-wave-error-msg{font-size:.875rem}.ecp-wave-error--light{color:#dc2626}.ecp-wave-error--dark{color:#fca5a5}.ecp-nano-wrapper{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;padding:.5rem .75rem;box-shadow:0 10px 15px -3px #0000001a}.ecp-nano-wrapper--pill{border-radius:9999px;width:110px;height:40px}.ecp-nano-wrapper--card{border-radius:1rem;width:120px;height:150px}.ecp-nano-progress-bg{position:absolute;top:0;left:0;height:100%;opacity:.2}.ecp-nano-content{position:absolute;display:flex;flex-direction:column}.ecp-nano-thumbnail-wrap{width:6rem;padding-bottom:.5rem}.ecp-nano-thumbnail{width:6rem;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-nano-row{display:flex;align-items:center;gap:.5rem}.ecp-nano-play-btn{padding:.375rem;border-radius:9999px;border:none;cursor:pointer;flex-shrink:0;transition:transform .15s}.ecp-nano-play-btn:hover{transform:scale(1.1)}.ecp-nano-waveform{display:flex;width:100%;min-width:3rem;align-items:center;gap:2px;height:1.5rem}.ecp-nano-wave-bar{border-radius:9999px;width:100%;transition:height .2s}.ecp-video-wrapper{border-radius:.75rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-video-wrapper--fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;height:100vh;width:100vw;background:#000}.ecp-video-inner{height:auto}.ecp-video-inner--fullscreen{display:flex;flex-direction:column;flex:1;min-height:0}.ecp-video-inner--padded{padding:1rem}.ecp-video-name{margin-bottom:1rem;font-weight:500}.ecp-video-name--light{color:#374151}.ecp-video-name--dark{color:#f3f4f6}.ecp-video-layout{position:relative;margin-bottom:1rem}.ecp-video-layout--row{display:flex;gap:.75rem}.ecp-video-layout--col{display:flex;flex-direction:column;gap:.75rem}.ecp-video-layout--fullscreen{flex:1;min-height:0}.ecp-video-vu-top,.ecp-video-vu-bottom{width:100%;height:3rem}.ecp-video-vu-side{width:3rem;background:#00000080;border-radius:.5rem;padding:.25rem}.ecp-video-el-wrap{flex:1;border-radius:.5rem;overflow:hidden;position:relative}.ecp-video-el-wrap--light{background:#ffffffb3}.ecp-video-el-wrap--dark{background:#000000b3}.ecp-video-el{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.ecp-video-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel{max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel--light{background:#fffc}.ecp-video-eq-panel--dark{background:#000000b3}.ecp-video-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-video-eq-title--light{color:#374151}.ecp-video-eq-title--dark{color:#e5e7eb}.ecp-video-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-video-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-video-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-video-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-video-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-video-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-video-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-video-eq-slider{flex:1;height:1.5rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-video-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-video-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-video-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-video-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-video-eq-footer-btn--light:hover{background:#d1d5db}.ecp-video-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-video-eq-footer-btn--dark:hover{background:#4b5563}.ecp-video-seekbar{margin-bottom:1rem}.ecp-video-seekbar--fullscreen{margin-top:.75rem}.ecp-video-seekbar-row{display:flex;align-items:center;gap:.75rem}.ecp-video-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-video-time--right{text-align:right}.ecp-video-time--light{color:#4b5563}.ecp-video-time--dark{color:#f3f4f6}.ecp-video-seek-input{flex:1;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-video-seek-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-video-play-btn{border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s;padding:.5rem 1rem}.ecp-video-play-btn:hover{opacity:.9}.ecp-video-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-play-btn--compact{padding:1.25rem .75rem}.ecp-video-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-video-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-stop-btn--light{background:#374151;color:#fff}.ecp-video-stop-btn--light:hover{background:#1f2937}.ecp-video-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-video-stop-btn--dark:hover{background:#d1d5db}.ecp-video-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-fullscreen-btn{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s;padding:.75rem}.ecp-video-fullscreen-btn--light{background:#374151;color:#fff}.ecp-video-fullscreen-btn--light:hover{background:#1f2937}.ecp-video-fullscreen-btn--dark{background:#f3f4f6;color:#000}.ecp-video-fullscreen-btn--dark:hover{background:#d1d5db}.ecp-video-fullscreen-btn--wide{padding:.5rem 1rem}.ecp-video-eq-toggle-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-eq-toggle-btn--off{background:#f3f4f6;color:#374151}.ecp-video-eq-toggle-btn--off:hover{background:#d1d5db}.ecp-video-eq-toggle-btn--on{color:#fff}.ecp-video-eq-toggle-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-eq-toggle-btn--wide{padding:.5rem 1rem}.ecp-video-speed-wrap{display:flex;align-items:center}.ecp-video-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;background:transparent;transition:all .15s}.ecp-video-speed-select--light{color:#1f2937}.ecp-video-speed-select--dark{color:#e5e7eb}.ecp-video-speed-option--light{background:#f3f4f6;color:#1f2937}.ecp-video-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-video-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-video-volume{gap:.75rem}}.ecp-video-mute-btn{padding:.5rem;border-radius:.5rem;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-video-mute-btn:hover{background:#f3f4f6}.ecp-video-mute-icon--light{color:#4b5563}.ecp-video-mute-icon--dark{color:#f3f4f6}.ecp-video-vol-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-vol-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-video-vol-slider{display:none}}.ecp-video-vol-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-video-vol-pct--light{color:#374151}.ecp-video-vol-pct--dark{color:#f3f4f6}.ecp-video-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-vu-bar-wrap{flex:1;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.ecp-vu-bar-fill{border-radius:.25rem .25rem 0 0;transition:height 75ms}.ecp-vu-peak-line{position:absolute;width:100%;height:2px;transition:top .1s}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { jsx as e, Fragment as Ve, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as Qe, createElement as Ie, useState as m, useRef as b, useEffect as $ } from "react";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ecp-full-width{width:100%}.ecp-h-full{height:100%}.ecp-relative{position:relative}.ecp-absolute{position:absolute}.ecp-inset-0{top:0;right:0;bottom:0;left:0}.ecp-z-10{z-index:10}.ecp-flex{display:flex}.ecp-inline-flex{display:inline-flex}.ecp-flex-col{flex-direction:column}.ecp-flex-wrap{flex-wrap:wrap}.ecp-flex-1{flex:1 1 0%}.ecp-flex-shrink-0{flex-shrink:0}.ecp-grid{display:grid}.ecp-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ecp-hidden{display:none}.ecp-items-center{align-items:center}.ecp-items-end{align-items:flex-end}.ecp-items-start{align-items:flex-start}.ecp-justify-center{justify-content:center}.ecp-justify-between{justify-content:space-between}.ecp-justify-end{justify-content:flex-end}.ecp-justify-start{justify-content:flex-start}.ecp-text-center{text-align:center}.ecp-text-right{text-align:right}.ecp-self-center{align-self:center}.ecp-gap-1{gap:.25rem}.ecp-gap-2{gap:.5rem}.ecp-gap-3{gap:.75rem}.ecp-gap-px{gap:1px}.ecp-gap-05{gap:2px}.ecp-mb-1{margin-bottom:.25rem}.ecp-mb-2{margin-bottom:.5rem}.ecp-mb-4{margin-bottom:1rem}.ecp-mb-6{margin-bottom:1.5rem}.ecp-mr-2{margin-right:.5rem}.ecp-mt-4{margin-top:1rem}.ecp-mt-6{margin-top:1.5rem}.ecp-ml-auto{margin-left:auto}.ecp-p-1{padding:.25rem}.ecp-p-1-5{padding:.375rem}.ecp-p-2{padding:.5rem}.ecp-p-3{padding:.75rem}.ecp-p-4{padding:1rem}.ecp-p-6{padding:1.5rem}.ecp-p-8{padding:2rem}.ecp-px-2{padding-left:.5rem;padding-right:.5rem}.ecp-px-3{padding-left:.75rem;padding-right:.75rem}.ecp-px-4{padding-left:1rem;padding-right:1rem}.ecp-px-6{padding-left:1.5rem;padding-right:1.5rem}.ecp-py-1{padding-top:.25rem;padding-bottom:.25rem}.ecp-py-2{padding-top:.5rem;padding-bottom:.5rem}.ecp-py-3{padding-top:.75rem;padding-bottom:.75rem}.ecp-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.ecp-pb-2{padding-bottom:.5rem}.ecp-pt-2{padding-top:.5rem}.ecp-w-1{width:.25rem}.ecp-w-3{width:.75rem}.ecp-w-4{width:1rem}.ecp-w-10{width:2.5rem}.ecp-w-12{width:3rem}.ecp-w-20{width:5rem}.ecp-w-24{width:6rem}.ecp-w-px{width:1px}.ecp-w-full{width:100%}.ecp-max-w-xs{max-width:20rem}.ecp-max-w-lg{max-width:32rem}.ecp-max-w-4xl{max-width:56rem}.ecp-h-0-5{height:.125rem}.ecp-h-1{height:.25rem}.ecp-h-1-5{height:.375rem}.ecp-h-2{height:.5rem}.ecp-h-3{height:.75rem}.ecp-h-4{height:1rem}.ecp-h-6{height:1.5rem}.ecp-h-8{height:2rem}.ecp-h-10{height:2.5rem}.ecp-h-12{height:3rem}.ecp-h-20{height:5rem}.ecp-h-40{width:10rem;height:40px}.ecp-h-64{height:16rem}.ecp-h-screen{height:100vh}.ecp-min-h-screen{min-height:100vh}.ecp-min-h-0{min-height:0}.ecp-min-w-12{min-width:3rem}.ecp-min-w-0{min-width:0}.ecp-aspect-square{aspect-ratio:1 / 1}.ecp-text-xs{font-size:.75rem;line-height:1rem}.ecp-text-sm{font-size:.875rem;line-height:1.25rem}.ecp-text-lg{font-size:1.125rem;line-height:1.75rem}.ecp-text-2xl{font-size:1.5rem;line-height:2rem}.ecp-font-medium{font-weight:500}.ecp-font-semibold{font-weight:600}.ecp-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-text-white{color:#fff}.ecp-text-transparent{color:transparent}.ecp-text-gray-400{color:#9ca3af}.ecp-text-gray-500{color:#6b7280}.ecp-text-gray-600{color:#4b5563}.ecp-text-gray-700{color:#374151}.ecp-text-gray-800{color:#1f2937}.ecp-text-gray-100{color:#f3f4f6}.ecp-text-gray-200{color:#e5e7eb}.ecp-text-gray-300{color:#d1d5db}.ecp-text-red-500{color:#ef4444}.ecp-dark .ecp-text-dark-100{color:#f3f4f6}.ecp-dark .ecp-text-dark-200{color:#e5e7eb}.ecp-dark .ecp-text-dark-300{color:#d1d5db}.ecp-bg-white{background-color:#fff}.ecp-bg-black-20{background-color:#0003}.ecp-bg-black-30{background-color:#0000004d}.ecp-bg-black-40{background-color:#0006}.ecp-bg-black-50{background-color:#00000080}.ecp-bg-gray-100{background-color:#f3f4f6}.ecp-bg-gray-200{background-color:#e5e7eb}.ecp-bg-gray-300{background-color:#d1d5db}.ecp-bg-gray-700{background-color:#374151}.ecp-bg-gray-800{background-color:#1f2937}.ecp-bg-red-50{background-color:#fef2f2}.ecp-bg-transparent{background-color:transparent}.ecp-border{border-width:1px}.ecp-border-2{border-width:2px}.ecp-border-r{border-right-width:1px}.ecp-border-transparent{border-color:transparent}.ecp-border-gray-300{border-color:#d1d5db}.ecp-border-red-300{border-color:#fca5a5}.ecp-border-current{border-color:currentColor}.ecp-border-none{border:none}.ecp-outline-none{outline:none}.ecp-rounded{border-radius:.25rem}.ecp-rounded-lg{border-radius:.5rem}.ecp-rounded-xl{border-radius:.75rem}.ecp-rounded-2xl{border-radius:1rem}.ecp-rounded-full{border-radius:9999px}.ecp-rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ecp-shadow-sm{box-shadow:0 1px 2px #0000000d}.ecp-shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.ecp-shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.ecp-opacity-20{opacity:.2}.ecp-opacity-40{opacity:.4}.ecp-opacity-70{opacity:.7}.ecp-opacity-80{opacity:.8}.ecp-cursor-pointer{cursor:pointer}.ecp-cursor-not-allowed{cursor:not-allowed}.ecp-pointer-events-none{pointer-events:none}.ecp-transition{transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ecp-transition-all{transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-duration-75{transition-duration:75ms}.ecp-duration-100{transition-duration:.1s}.ecp-duration-150{transition-duration:.15s}.ecp-duration-300{transition-duration:.3s}.ecp-scale-0{transform:scale(0)}.ecp-translate-y-10{transform:translateY(2.5rem)}.ecp--translate-y-10{transform:translateY(-2.5rem)}.ecp-rotate-180{transform:rotate(180deg)}.ecp-hover-scale-105:hover{transform:scale(1.05)}.ecp-hover-scale-110:hover{transform:scale(1.1)}@keyframes ecp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ecp-animation-spin{animation:ecp-spin 15s infinite linear}.ecp-object-contain{-o-object-fit:contain;object-fit:contain}.ecp-backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-overflow-hidden{overflow:hidden}.ecp-top-0{top:0}.ecp-left-0{left:0}.ecp-fixed{position:fixed}.ecp-z-9999{z-index:9999}.ecp-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.ecp-page-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}@media (min-width: 768px){.ecp-page-wrapper{padding:2rem}}.ecp-demo-container{width:100%;height:100%}@media (min-width: 768px){.ecp-demo-container{height:auto;max-width:56rem}}.ecp-container-glass{border-radius:.75rem;padding:2rem}.ecp-demo-header{margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:flex-start}.ecp-demo-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.25rem}.ecp-demo-title--dark{color:#e5e7eb}.ecp-demo-subtitle{font-size:.875rem;color:#6b7280}.ecp-theme-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-theme-btn:hover{background:#f9fafb}.ecp-demo-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-action-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-action-btn:hover{background:#f9fafb}.ecp-file-input-hidden{display:none}.ecp-theme-selector-panel{border-radius:.75rem;padding:1.5rem;margin-bottom:1.5rem}.ecp-theme-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ecp-theme-selector-title{font-size:1.125rem;font-weight:600;color:#1f2937}.ecp-theme-selector-close{color:#6b7280;font-size:.875rem;font-weight:500;background:none;border:none;cursor:pointer}.ecp-theme-selector-close:hover{color:#374151}.ecp-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}@media (min-width: 640px){.ecp-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.ecp-theme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.ecp-theme-card{background:#fff;padding:1rem;border-radius:.5rem;cursor:pointer;border:2px solid transparent;transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-theme-card--active{border-color:currentColor;box-shadow:0 10px 15px -3px #0000001a}.ecp-theme-color-preview{height:2.5rem;border-radius:.25rem;margin-bottom:.5rem}.ecp-theme-name{font-size:.875rem;font-weight:500;color:#374151}.ecp-vp-wrapper{width:100%;border-radius:.75rem;overflow:hidden}.ecp-vp-bg{padding:1rem}.ecp-vp-vu-outer{position:relative}.ecp-vp-vu-bg{border-radius:.5rem;margin-bottom:1.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d}.ecp-vp-vu-bg--light{background:#ffffffb3}.ecp-vp-vu-bg--dark{background:#0006}.ecp-vp-vu-bg--transparent{background:transparent!important;padding:0!important;box-shadow:none!important}.ecp-vp-vu-bg--dimmed{opacity:.3}.ecp-vp-vu-bg--no-margin{margin-bottom:0}.ecp-vp-vu-bars{display:flex;justify-content:center;align-items:flex-end;gap:.25rem;height:16rem}.ecp-vp-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-vp-eq-overlay--light{background:#ffffffe6}.ecp-vp-eq-overlay--dark{background:#000000b3}.ecp-vp-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-vp-eq-title--light{color:#374151}.ecp-vp-eq-title--dark{color:#e5e7eb}.ecp-vp-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-vp-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-vp-eq-band-label{font-size:.75rem}.ecp-vp-eq-band-label--light{color:#4b5563}.ecp-vp-eq-band-label--dark{color:#d1d5db}.ecp-vp-eq-band-range{display:flex;align-items:center;gap:.75rem}.ecp-vp-eq-range-bound{font-size:.75rem}.ecp-vp-eq-range-bound--light{color:#6b7280}.ecp-vp-eq-range-bound--dark{color:#9ca3af}.ecp-vp-eq-slider{flex:1;height:2rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-footer{display:flex;justify-content:flex-end;margin-top:1rem}.ecp-vp-eq-reset{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;transition:all .15s;border:none}.ecp-vp-eq-reset--light{background:#e5e7eb;color:#374151}.ecp-vp-eq-reset--light:hover{background:#d1d5db}.ecp-vp-eq-reset--dark{background:#374151;color:#e5e7eb}.ecp-vp-eq-reset--dark:hover{background:#4b5563}.ecp-vp-8d-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.ecp-vp-8d-title-group,.ecp-vp-8d-toggle-wrap{display:flex;align-items:center;gap:.5rem}.ecp-vp-8d-toggle-label{font-size:.75rem;font-weight:500}.ecp-vp-8d-toggle-label--light{color:#4b5563}.ecp-vp-8d-toggle-label--dark{color:#d1d5db}.ecp-vp-8d-toggle{position:relative;width:2.75rem;height:1.5rem;border-radius:9999px;background:#d1d5db;cursor:pointer;border:none;transition:background .2s}.ecp-vp-8d-toggle--on{background:var(--theme-slider, #8b5cf6)}.ecp-vp-8d-toggle-thumb{position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0000004d}.ecp-vp-8d-toggle--on .ecp-vp-8d-toggle-thumb{transform:translate(1.25rem)}.ecp-vp-8d-visualizer{position:relative;height:4.5rem;margin-bottom:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.ecp-vp-8d-visualizer--light{background:#0000000a}.ecp-vp-8d-visualizer--dark{background:#ffffff0f}.ecp-vp-8d-orbit-ring{position:absolute;width:6rem;height:3rem;border:1.5px dashed var(--theme-slider-alpha, rgba(139, 92, 246, .4));border-radius:50%}.ecp-vp-8d-head-icon{position:relative;z-index:2;color:var(--theme-slider, #8b5cf6)}.ecp-vp-8d-orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--theme-slider, #8b5cf6);box-shadow:0 0 10px var(--theme-slider, #8b5cf6),0 0 15px var(--theme-slider, #8b5cf6);z-index:3}.ecp-vp-8d-live-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.3rem;pointer-events:none;animation:ecp-8d-badge-blink 2s ease-in-out infinite}.ecp-vp-8d-live-visualizer{position:relative;width:14rem;height:9.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible}.ecp-vp-8d-live-visualizer--light{background:#fffd;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 20px #0000000d,0 8px 24px #0000000f}.ecp-vp-8d-live-visualizer--dark{background:#0c0c10d8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 30px #0006,0 8px 24px #00000040}.ecp-vp-8d-live-glow{position:absolute;width:14rem;height:9.5rem;border-radius:50%;animation:ecp-8d-pulse 2.5s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes ecp-8d-pulse{0%,to{opacity:.3;transform:scale(.92)}50%{opacity:.75;transform:scale(1.08)}}.ecp-vp-8d-live-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.ecp-vp-8d-radar-border{fill:none;stroke:var(--theme-slider, #8b5cf6);stroke-opacity:.25;stroke-width:1.5}.ecp-vp-8d-live-head-icon{position:absolute;z-index:3;filter:drop-shadow(0 0 5px currentColor)}.ecp-vp-8d-live-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;z-index:4;display:flex;align-items:center;justify-content:center}.ecp-vp-8d-live-dot-inner{width:5px;height:5px;border-radius:50%;background:#000000bf}@keyframes ecp-8d-badge-blink{0%,to{opacity:1}50%{opacity:.8}}.ecp-vp-8d-tabs{display:flex;gap:.25rem;margin-bottom:.75rem;border-bottom:1px solid rgba(156,163,175,.2);padding-bottom:.25rem}.ecp-vp-8d-tab{padding:.25rem .6rem;font-size:.75rem;font-weight:500;border-radius:.375rem;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .15s}.ecp-vp-8d-tab--light{color:#6b7280}.ecp-vp-8d-tab--light:hover{color:#1f2937;background:#0000000d}.ecp-vp-8d-tab--dark{color:#9ca3af}.ecp-vp-8d-tab--dark:hover{color:#f3f4f6;background:#ffffff14}.ecp-vp-8d-tab--active{background:var(--theme-slider-alpha, rgba(139, 92, 246, .15))!important;color:var(--theme-slider, #8b5cf6)!important;border-color:var(--theme-slider, #8b5cf6)!important}.ecp-vp-8d-controls-grid{display:flex;flex-direction:column;gap:.75rem;padding-top:.25rem}.ecp-vp-eq-bands--horizontal{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem;width:100%}.ecp-vp-eq-band-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}.ecp-vp-eq-band-col .ecp-vp-eq-slider{height:.5rem;border-radius:9999px}.ecp-vp-eq-band-col .ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.ecp-vp-eq-band-col .ecp-vp-eq-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.ecp-vp-eq-val{font-size:.75rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-vp-eq-val--light{color:#374151}.ecp-vp-eq-val--dark{color:#f3f4f6}.ecp-vp-eq-label{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.ecp-vp-eq-label--light{color:#6b7280}.ecp-vp-eq-label--dark{color:#9ca3af}.ecp-vp-eq-bar-wrap{width:100%;display:flex;align-items:center}@media (max-width: 640px){.ecp-vp-eq-bands--horizontal{flex-direction:column;gap:.6rem}.ecp-vp-eq-band-col{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:.6rem}.ecp-vp-eq-label{order:1;width:3.5rem;text-align:left;flex-shrink:0}.ecp-vp-eq-bar-wrap{order:2;flex:1}.ecp-vp-eq-val{order:3;width:3.5rem;text-align:right;flex-shrink:0}}.ecp-vp-track{margin-bottom:1.5rem;display:flex;align-items:center}.ecp-vp-thumbnail-wrap{margin-right:.5rem;width:3rem;flex-shrink:0}.ecp-vp-thumbnail{height:3rem;width:3rem;border-radius:9999px}.ecp-vp-track-info{width:100%;min-width:0}.ecp-vp-track-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-vp-track-name--light{color:#374151}.ecp-vp-track-name--dark{color:#f3f4f6}.ecp-vp-track-author{font-size:.75rem}.ecp-vp-track-author--light{color:#6b7280}.ecp-vp-track-author--dark{color:#d1d5db}.ecp-vp-seekbar{margin-bottom:1.5rem}.ecp-vp-seekbar-row{display:flex;align-items:center;gap:.25rem}.ecp-vp-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-vp-time--right{text-align:right}.ecp-vp-time--light{color:#4b5563}.ecp-vp-time--dark{color:#f3f4f6}.ecp-vp-seek-input{flex:1;height:.5rem;background:#e5e7eb;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-seek-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-vp-controls--sm{gap:.5rem}.ecp-vp-play-btn{padding:.5rem 1rem;min-width:6rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s}.ecp-vp-play-btn:hover{opacity:.9}.ecp-vp-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-play-btn--compact{padding:1.25rem .75rem;min-width:unset}.ecp-vp-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-vp-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-stop-btn--light{background:#374151;color:#fff}.ecp-vp-stop-btn--light:hover{background:#1f2937}.ecp-vp-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-vp-stop-btn--dark:hover{background:#d1d5db}.ecp-vp-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-stop-btn--wide{padding:.5rem 1rem}.ecp-vp-eq-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-eq-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-eq-btn--off:hover{background:#d1d5db}.ecp-vp-eq-btn--on{color:#fff}.ecp-vp-eq-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-eq-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-loop-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-loop-btn--off:hover{background:#d1d5db}.ecp-vp-loop-btn--on{color:#fff}.ecp-vp-loop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-loop-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-icon--active{transform:rotate(180deg)}.ecp-vp-speed-wrap{display:flex;align-items:center}.ecp-vp-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;transition:all .15s;background:transparent}.ecp-vp-speed-select--light{color:#1f2937}.ecp-vp-speed-select--dark{color:#e5e7eb}.ecp-vp-speed-option--light{background:#fff;color:#1f2937}.ecp-vp-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-vp-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-vp-volume{gap:.75rem}}.ecp-vp-mute-btn{padding:.5rem;border-radius:9999px;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-vp-mute-btn:hover{background:#f3f4f680}.ecp-vp-mute-icon--light{color:#4b5563}.ecp-vp-mute-icon--dark{color:#f3f4f6}.ecp-vp-volume-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-vp-volume-slider{display:none}}.ecp-vp-volume-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-vp-volume-pct--light{color:#374151}.ecp-vp-volume-pct--dark{color:#f3f4f6}.ecp-vp-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-wave-outer{width:100%;max-width:32rem;position:relative}.ecp-wave-audio-el{display:none}.ecp-wave-card{border-radius:1rem;box-shadow:0 25px 50px -12px #00000040}.ecp-wave-card-inner{border-radius:1rem;padding:1.5rem;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-wave-thumbnail-wrap{width:100%;padding:1rem}.ecp-wave-thumbnail{width:100%;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-wave-seek{position:relative;height:5rem;margin-bottom:1.5rem;cursor:pointer}.ecp-wave-bars{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%;gap:1px}.ecp-wave-bar{width:.25rem;border-radius:.25rem .25rem 0 0;transition:all .15s}.ecp-wave-progress-line{position:absolute;top:0;height:100%;width:.25rem;background:#fff;border-right:1px solid black;border-radius:9999px;transition:all .15s;transform:translate(-50%)}.ecp-wave-times{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:1.5rem}.ecp-wave-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-content:space-between;margin-bottom:1rem}.ecp-wave-left-controls{display:flex;align-items:center;gap:.5rem}.ecp-wave-vol-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-vol-slider{width:5rem;height:.375rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 3px #0003}.ecp-wave-vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none}.ecp-wave-center-controls{display:flex;justify-content:center}.ecp-wave-play-btn{padding:1rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s;box-shadow:0 10px 15px -3px #0000001a}.ecp-wave-play-btn:hover{transform:scale(1.05)}.ecp-wave-right-controls{display:flex;align-items:center;gap:.75rem}.ecp-wave-speed-select{padding:.25rem .5rem;border-radius:.5rem;font-size:.875rem;border:none;cursor:pointer}.ecp-wave-speed-select--light{background:#f3f4f6;color:#374151}.ecp-wave-speed-select--dark{background:#1f2937;color:#f3f4f6}.ecp-wave-eq-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0003;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:1rem;padding:1rem}.ecp-wave-eq-panel{max-width:20rem;width:100%;padding:.5rem 1rem 1rem;border-radius:.75rem}.ecp-wave-eq-panel--light{background:#fff}.ecp-wave-eq-panel--dark{background:#1f2937}.ecp-wave-eq-title{font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.ecp-wave-eq-title--light{color:#374151}.ecp-wave-eq-title--dark{color:#e5e7eb}.ecp-wave-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-wave-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-wave-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-wave-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-wave-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-wave-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-wave-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-wave-eq-slider{flex:1;height:1rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-wave-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-wave-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-wave-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-wave-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-wave-eq-footer-btn--light:hover{background:#d1d5db}.ecp-wave-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-wave-eq-footer-btn--dark:hover{background:#4b5563}.ecp-wave-error{padding:1.5rem;border-radius:.75rem;text-align:center}.ecp-wave-error-title{font-weight:500}.ecp-wave-error-msg{font-size:.875rem}.ecp-wave-error--light{color:#dc2626}.ecp-wave-error--dark{color:#fca5a5}.ecp-nano-wrapper{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;padding:.5rem .75rem;box-shadow:0 10px 15px -3px #0000001a}.ecp-nano-wrapper--pill{border-radius:9999px;width:110px;height:40px}.ecp-nano-wrapper--card{border-radius:1rem;width:120px;height:150px}.ecp-nano-progress-bg{position:absolute;top:0;left:0;height:100%;opacity:.2}.ecp-nano-content{position:absolute;display:flex;flex-direction:column}.ecp-nano-thumbnail-wrap{width:6rem;padding-bottom:.5rem}.ecp-nano-thumbnail{width:6rem;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-nano-row{display:flex;align-items:center;gap:.5rem}.ecp-nano-play-btn{padding:.375rem;border-radius:9999px;border:none;cursor:pointer;flex-shrink:0;transition:transform .15s}.ecp-nano-play-btn:hover{transform:scale(1.1)}.ecp-nano-waveform{display:flex;width:100%;min-width:3rem;align-items:center;gap:2px;height:1.5rem}.ecp-nano-wave-bar{border-radius:9999px;width:100%;transition:height .2s}.ecp-video-wrapper{border-radius:.75rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-video-wrapper--fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;height:100vh;width:100vw;background:#000}.ecp-video-inner{height:auto}.ecp-video-inner--fullscreen{display:flex;flex-direction:column;flex:1;min-height:0}.ecp-video-inner--padded{padding:1rem}.ecp-video-name{margin-bottom:1rem;font-weight:500}.ecp-video-name--light{color:#374151}.ecp-video-name--dark{color:#f3f4f6}.ecp-video-layout{position:relative;margin-bottom:1rem}.ecp-video-layout--row{display:flex;gap:.75rem}.ecp-video-layout--col{display:flex;flex-direction:column;gap:.75rem}.ecp-video-layout--fullscreen{flex:1;min-height:0}.ecp-video-vu-top,.ecp-video-vu-bottom{width:100%;height:3rem}.ecp-video-vu-side{width:3rem;background:#00000080;border-radius:.5rem;padding:.25rem}.ecp-video-el-wrap{flex:1;border-radius:.5rem;overflow:hidden;position:relative}.ecp-video-el-wrap--light{background:#ffffffb3}.ecp-video-el-wrap--dark{background:#000000b3}.ecp-video-el{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.ecp-video-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel{max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel--light{background:#fffc}.ecp-video-eq-panel--dark{background:#000000b3}.ecp-video-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-video-eq-title--light{color:#374151}.ecp-video-eq-title--dark{color:#e5e7eb}.ecp-video-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-video-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-video-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-video-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-video-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-video-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-video-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-video-eq-slider{flex:1;height:1.5rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-video-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-video-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-video-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-video-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-video-eq-footer-btn--light:hover{background:#d1d5db}.ecp-video-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-video-eq-footer-btn--dark:hover{background:#4b5563}.ecp-video-seekbar{margin-bottom:1rem}.ecp-video-seekbar--fullscreen{margin-top:.75rem}.ecp-video-seekbar-row{display:flex;align-items:center;gap:.75rem}.ecp-video-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-video-time--right{text-align:right}.ecp-video-time--light{color:#4b5563}.ecp-video-time--dark{color:#f3f4f6}.ecp-video-seek-input{flex:1;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-video-seek-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-video-play-btn{border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s;padding:.5rem 1rem}.ecp-video-play-btn:hover{opacity:.9}.ecp-video-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-play-btn--compact{padding:1.25rem .75rem}.ecp-video-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-video-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-stop-btn--light{background:#374151;color:#fff}.ecp-video-stop-btn--light:hover{background:#1f2937}.ecp-video-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-video-stop-btn--dark:hover{background:#d1d5db}.ecp-video-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-fullscreen-btn{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s;padding:.75rem}.ecp-video-fullscreen-btn--light{background:#374151;color:#fff}.ecp-video-fullscreen-btn--light:hover{background:#1f2937}.ecp-video-fullscreen-btn--dark{background:#f3f4f6;color:#000}.ecp-video-fullscreen-btn--dark:hover{background:#d1d5db}.ecp-video-fullscreen-btn--wide{padding:.5rem 1rem}.ecp-video-eq-toggle-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-eq-toggle-btn--off{background:#f3f4f6;color:#374151}.ecp-video-eq-toggle-btn--off:hover{background:#d1d5db}.ecp-video-eq-toggle-btn--on{color:#fff}.ecp-video-eq-toggle-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-eq-toggle-btn--wide{padding:.5rem 1rem}.ecp-video-speed-wrap{display:flex;align-items:center}.ecp-video-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;background:transparent;transition:all .15s}.ecp-video-speed-select--light{color:#1f2937}.ecp-video-speed-select--dark{color:#e5e7eb}.ecp-video-speed-option--light{background:#f3f4f6;color:#1f2937}.ecp-video-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-video-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-video-volume{gap:.75rem}}.ecp-video-mute-btn{padding:.5rem;border-radius:.5rem;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-video-mute-btn:hover{background:#f3f4f6}.ecp-video-mute-icon--light{color:#4b5563}.ecp-video-mute-icon--dark{color:#f3f4f6}.ecp-video-vol-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-vol-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-video-vol-slider{display:none}}.ecp-video-vol-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-video-vol-pct--light{color:#374151}.ecp-video-vol-pct--dark{color:#f3f4f6}.ecp-video-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-vu-bar-wrap{flex:1;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.ecp-vu-bar-fill{border-radius:.25rem .25rem 0 0;transition:height 75ms}.ecp-vu-peak-line{position:absolute;width:100%;height:2px;transition:top .1s}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { jsx as e, Fragment as Ft, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as zt, createElement as st, useState as b, useEffect as E, useRef as u } from "react";
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ke = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Xe = (s) => s.replace(
+const Vt = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Yt = (s) => s.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (l, u, v) => v ? v.toUpperCase() : u.toLowerCase()
-), We = (s) => {
-  const l = Xe(s);
-  return l.charAt(0).toUpperCase() + l.slice(1);
-}, Ye = (...s) => s.filter((l, u, v) => !!l && l.trim() !== "" && v.indexOf(l) === u).join(" ").trim(), Ze = (s) => {
-  for (const l in s)
-    if (l.startsWith("aria-") || l === "role" || l === "title")
+  (p, v, y) => y ? y.toUpperCase() : v.toLowerCase()
+), Pt = (s) => {
+  const p = Yt(s);
+  return p.charAt(0).toUpperCase() + p.slice(1);
+}, Lt = (...s) => s.filter((p, v, y) => !!p && p.trim() !== "" && y.indexOf(p) === v).join(" ").trim(), Zt = (s) => {
+  for (const p in s)
+    if (p.startsWith("aria-") || p === "role" || p === "title")
       return !0;
 };
 /**
@@ -24,7 +24,7 @@ const Ke = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Xe = (
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var Je = {
+var Kt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -41,32 +41,32 @@ var Je = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const et = Qe(
+const Qt = zt(
   ({
     color: s = "currentColor",
-    size: l = 24,
-    strokeWidth: u = 2,
-    absoluteStrokeWidth: v,
-    className: C = "",
-    children: f,
-    iconNode: y,
-    ...O
-  }, x) => Ie(
+    size: p = 24,
+    strokeWidth: v = 2,
+    absoluteStrokeWidth: y,
+    className: T = "",
+    children: h,
+    iconNode: q,
+    ...te
+  }, R) => st(
     "svg",
     {
-      ref: x,
-      ...Je,
-      width: l,
-      height: l,
+      ref: R,
+      ...Kt,
+      width: p,
+      height: p,
       stroke: s,
-      strokeWidth: v ? Number(u) * 24 / Number(l) : u,
-      className: Ye("lucide", C),
-      ...!f && !Ze(O) && { "aria-hidden": "true" },
-      ...O
+      strokeWidth: y ? Number(v) * 24 / Number(p) : v,
+      className: Lt("lucide", T),
+      ...!h && !Zt(te) && { "aria-hidden": "true" },
+      ...te
     },
     [
-      ...y.map(([F, I]) => Ie(F, I)),
-      ...Array.isArray(f) ? f : [f]
+      ...q.map(([S, V]) => st(S, V)),
+      ...Array.isArray(h) ? h : [h]
     ]
   )
 );
@@ -76,20 +76,20 @@ const et = Qe(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const le = (s, l) => {
-  const u = Qe(
-    ({ className: v, ...C }, f) => Ie(et, {
-      ref: f,
-      iconNode: l,
-      className: Ye(
-        `lucide-${Ke(We(s))}`,
+const ge = (s, p) => {
+  const v = zt(
+    ({ className: y, ...T }, h) => st(Qt, {
+      ref: h,
+      iconNode: p,
+      className: Lt(
+        `lucide-${Vt(Pt(s))}`,
         `lucide-${s}`,
-        v
+        y
       ),
-      ...C
+      ...T
     })
   );
-  return u.displayName = We(s), u;
+  return v.displayName = Pt(s), v;
 };
 /**
  * @license lucide-react v0.540.0 - ISC
@@ -97,41 +97,56 @@ const le = (s, l) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const tt = [
+const Jt = [
+  [
+    "path",
+    {
+      d: "M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3",
+      key: "1xhozi"
+    }
+  ]
+], it = ge("headphones", Jt);
+/**
+ * @license lucide-react v0.540.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const er = [
   ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
   ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
   ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
   ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
-], rt = le("maximize", tt);
+], tr = ge("maximize", er);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const nt = [
+const rr = [
   ["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
   ["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
   ["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
   ["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
-], at = le("minimize", nt);
+], nr = ge("minimize", rr);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ct = [
+const ar = [
   ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
   ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
-], Pe = le("pause", ct);
+], et = ge("pause", ar);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const st = [
+const cr = [
   [
     "path",
     {
@@ -139,26 +154,26 @@ const st = [
       key: "10ikf1"
     }
   ]
-], Me = le("play", st);
+], tt = ge("play", cr);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const it = [
+const ir = [
   ["path", { d: "m17 2 4 4-4 4", key: "nntrym" }],
   ["path", { d: "M3 11v-1a4 4 0 0 1 4-4h14", key: "84bu3i" }],
   ["path", { d: "m7 22-4-4 4-4", key: "1wqhfi" }],
   ["path", { d: "M21 13v1a4 4 0 0 1-4 4H3", key: "1rx37r" }]
-], ot = le("repeat", it);
+], sr = ge("repeat", ir);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const lt = [
+const lr = [
   ["line", { x1: "4", x2: "4", y1: "21", y2: "14", key: "1p332r" }],
   ["line", { x1: "4", x2: "4", y1: "10", y2: "3", key: "gb41h5" }],
   ["line", { x1: "12", x2: "12", y1: "21", y2: "12", key: "hf2csr" }],
@@ -168,34 +183,34 @@ const lt = [
   ["line", { x1: "2", x2: "6", y1: "14", y2: "14", key: "1uebub" }],
   ["line", { x1: "10", x2: "14", y1: "8", y2: "8", key: "1yglbp" }],
   ["line", { x1: "18", x2: "22", y1: "16", y2: "16", key: "1jxqpz" }]
-], Fe = le("sliders-vertical", lt);
+], Je = ge("sliders-vertical", lr);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const dt = [
+const or = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
-], Ge = le("square", dt);
+], St = ge("square", or);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ut = [
+const pr = [
   ["path", { d: "M12 3v12", key: "1x0j5s" }],
   ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
-], pt = le("upload", ut);
+], dr = ge("upload", pr);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const mt = [
+const ur = [
   [
     "path",
     {
@@ -205,14 +220,14 @@ const mt = [
   ],
   ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
   ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
-], De = le("volume-2", mt);
+], lt = ge("volume-2", ur);
 /**
  * @license lucide-react v0.540.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ft = [
+const vr = [
   [
     "path",
     {
@@ -222,7 +237,7 @@ const ft = [
   ],
   ["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
   ["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
-], _e = le("volume-x", ft), ge = {
+], ot = ge("volume-x", vr), Ae = {
   rainbow: {
     name: "Rainbow",
     bg: "linear-gradient(135deg, #ef444422 0%, #f9731622 15%, #f59e0b22 30%, #10b98122 45%, #06b6d422 60%, #3b82f622 75%, #6366f122 85%, #a855f722 92%, #ec489922 100%)",
@@ -322,45 +337,63 @@ const ft = [
     slider: "#ec4899"
   }
 };
-function ht({ theme: s, setTheme: l, close: u }) {
-  const v = Object.keys(ge).map((C) => ({
-    key: C,
-    name: ge[C].name,
-    colors: ge[C].bars
+function hr({ theme: s, setTheme: p, close: v }) {
+  const y = Object.keys(Ae).map((T) => ({
+    key: T,
+    name: Ae[T].name,
+    colors: Ae[T].bars
   }));
-  return /* @__PURE__ */ c("div", { className: "ecp-theme-selector-panel", children: [
-    /* @__PURE__ */ c("div", { className: "ecp-theme-selector-header", children: [
+  return /* @__PURE__ */ r("div", { className: "ecp-theme-selector-panel", children: [
+    /* @__PURE__ */ r("div", { className: "ecp-theme-selector-header", children: [
       /* @__PURE__ */ e("h2", { className: "ecp-theme-selector-title", children: "Choose Color Palette" }),
-      /* @__PURE__ */ e("button", { onClick: () => u(), className: "ecp-theme-selector-close", children: "Close" })
+      /* @__PURE__ */ e("button", { onClick: () => v(), className: "ecp-theme-selector-close", children: "Close" })
     ] }),
-    /* @__PURE__ */ e("div", { className: "ecp-theme-grid", children: v.map((C) => /* @__PURE__ */ c(
+    /* @__PURE__ */ e("div", { className: "ecp-theme-grid", children: y.map((T) => /* @__PURE__ */ r(
       "div",
       {
-        className: `ecp-theme-card${s === C.key ? " ecp-theme-card--active" : ""}`,
-        onClick: () => l(C.key),
+        className: `ecp-theme-card${s === T.key ? " ecp-theme-card--active" : ""}`,
+        onClick: () => p(T.key),
         children: [
           /* @__PURE__ */ e(
             "div",
             {
               className: "ecp-theme-color-preview",
-              style: { background: `linear-gradient(to right, ${C.colors.join(", ")})` }
+              style: { background: `linear-gradient(to right, ${T.colors.join(", ")})` }
             }
           ),
-          /* @__PURE__ */ e("div", { className: "ecp-theme-name", children: C.name })
+          /* @__PURE__ */ e("div", { className: "ecp-theme-name", children: T.name })
         ]
       },
-      C.key
+      T.key
     )) })
   ] });
 }
-function vt({
+const At = (s, p) => {
+  const v = s.sampleRate, y = Math.max(1, Math.floor(v * Math.max(0.1, p))), T = s.createBuffer(2, y, v), h = T.getChannelData(0), q = T.getChannelData(1), te = 3 / p;
+  for (let R = 0; R < y; R++) {
+    const S = R / v, V = Math.exp(-S * te);
+    h[R] = (Math.random() * 2 - 1) * V, q[R] = (Math.random() * 2 - 1) * V;
+  }
+  return T;
+}, Mt = (s) => {
+  const p = Math.max(0, s), v = 44100, y = new Float32Array(v), T = Math.PI / 180;
+  if (p === 0)
+    for (let h = 0; h < v; ++h) y[h] = h * 2 / v - 1;
+  else
+    for (let h = 0; h < v; ++h) {
+      const q = h * 2 / v - 1;
+      y[h] = (3 + p) * q * 20 * T / (Math.PI + p * Math.abs(q));
+    }
+  return y;
+};
+function mr({
   audio: s,
-  name: l = "No track loaded",
-  author: u,
-  theme: v = "rainbow",
-  volume: C = 100,
-  thumbnail: f = null,
-  controls: y = {
+  name: p = "No track loaded",
+  author: v,
+  theme: y = "rainbow",
+  volume: T = 100,
+  thumbnail: h = null,
+  controls: q = {
     play: !0,
     pause: !0,
     stop: !0,
@@ -369,41 +402,124 @@ function vt({
     loop: !0,
     trackName: !0,
     equalizer: !0,
-    speed: !0
+    speed: !0,
+    dolby8d: !1
   },
-  mode: O = "light",
-  bands: x = null,
-  transparent: F = !1,
-  autoPlay: I = !1,
-  equalizer: z = { bass: 0, mid: 0, treble: 0 }
+  mode: te = "light",
+  bands: R = null,
+  transparent: S = !1,
+  autoPlay: V = !1,
+  equalizer: U = { bass: 0, mid: 0, treble: 0 },
+  dolby8d: a = null
 }) {
-  const [E, H] = m(!1), [j, P] = m(0), [M, D] = m(0), [k, S] = m(C || 100), [ae, me] = m(!1), [V, ee] = m(!1), [se, ie] = m(!1), [ce, de] = m([]), [R, Q] = m(!1), [Y, oe] = m({
-    bass: z.bass || 0,
-    mid: z.mid || 0,
-    treble: z.treble || 0
-  }), [ue, te] = m(1), [G, w] = m(0), p = b(null), L = b(null), K = b(null), fe = b(null), W = b(null), re = b(null), X = b(null), N = b(null), T = b(null), Z = b(null);
-  $(() => {
-    const t = Z.current;
+  var bt, yt, kt, qt, Nt, wt, $t, xt, Ct, Et, Tt;
+  const [G, D] = b(!1), [H, Y] = b(0), [O, z] = b(0), [M, Me] = b(T || 100), [fe, Ce] = b(!1), [_, Fe] = b(!1), [me, be] = b(!1), [ye, X] = b([]), [Q, ze] = b(!1), [Z, Ee] = b({
+    bass: U.bass || 0,
+    mid: U.mid || 0,
+    treble: U.treble || 0
+  }), [ae, _e] = b(1), [N, Te] = b(0), [ce, Ne] = b(!1), [o, pe] = b({
+    enable: q.dolby8d && (a == null ? void 0 : a.enable) !== void 0 ? a.enable : !1,
+    spatial: {
+      rate: ((bt = a == null ? void 0 : a.spatial) == null ? void 0 : bt.rate) !== void 0 ? a.spatial.rate : 0.11,
+      width: ((yt = a == null ? void 0 : a.spatial) == null ? void 0 : yt.width) !== void 0 ? a.spatial.width : 135,
+      focus: ((kt = a == null ? void 0 : a.spatial) == null ? void 0 : kt.focus) !== void 0 ? a.spatial.focus : 65
+    },
+    reverb: {
+      size: ((qt = a == null ? void 0 : a.reverb) == null ? void 0 : qt.size) !== void 0 ? a.reverb.size : 2.4,
+      tone: ((Nt = a == null ? void 0 : a.reverb) == null ? void 0 : Nt.tone) !== void 0 ? a.reverb.tone : 62,
+      mix: ((wt = a == null ? void 0 : a.reverb) == null ? void 0 : wt.mix) !== void 0 ? a.reverb.mix : 30
+    },
+    echo: {
+      time: (($t = a == null ? void 0 : a.echo) == null ? void 0 : $t.time) !== void 0 ? a.echo.time : 500,
+      feedback: ((xt = a == null ? void 0 : a.echo) == null ? void 0 : xt.feedback) !== void 0 ? a.echo.feedback : 45,
+      mix: ((Ct = a == null ? void 0 : a.echo) == null ? void 0 : Ct.mix) !== void 0 ? a.echo.mix : 5
+    },
+    tape: {
+      speed: typeof (a == null ? void 0 : a.tape) == "number" ? a.tape : ((Et = a == null ? void 0 : a.tape) == null ? void 0 : Et.speed) !== void 0 ? a.tape.speed : 1,
+      drive: typeof (a == null ? void 0 : a.tape) == "object" && ((Tt = a.tape) == null ? void 0 : Tt.drive) !== void 0 ? a.tape.drive : 0
+    }
+  });
+  E(() => {
+    var t, i, g, m, x, K, le, re, ne, j, oe;
+    a && pe({
+      enable: a.enable !== void 0 ? a.enable : !0,
+      spatial: {
+        rate: ((t = a.spatial) == null ? void 0 : t.rate) !== void 0 ? a.spatial.rate : 0.2,
+        width: ((i = a.spatial) == null ? void 0 : i.width) !== void 0 ? a.spatial.width : 80,
+        focus: ((g = a.spatial) == null ? void 0 : g.focus) !== void 0 ? a.spatial.focus : 20
+      },
+      reverb: {
+        size: ((m = a.reverb) == null ? void 0 : m.size) !== void 0 ? a.reverb.size : 3,
+        tone: ((x = a.reverb) == null ? void 0 : x.tone) !== void 0 ? a.reverb.tone : 40,
+        mix: ((K = a.reverb) == null ? void 0 : K.mix) !== void 0 ? a.reverb.mix : 30
+      },
+      echo: {
+        time: ((le = a.echo) == null ? void 0 : le.time) !== void 0 ? a.echo.time : 50,
+        feedback: ((re = a.echo) == null ? void 0 : re.feedback) !== void 0 ? a.echo.feedback : 20,
+        mix: ((ne = a.echo) == null ? void 0 : ne.mix) !== void 0 ? a.echo.mix : 10
+      },
+      tape: {
+        speed: typeof a.tape == "number" ? a.tape : ((j = a.tape) == null ? void 0 : j.speed) !== void 0 ? a.tape.speed : 1,
+        drive: typeof a.tape == "object" && ((oe = a.tape) == null ? void 0 : oe.drive) !== void 0 ? a.tape.drive : 0
+      }
+    });
+  }, [a]);
+  const [de, ke] = b("spatial"), P = u(o), B = u(ae);
+  E(() => {
+    P.current = o;
+  }, [o]), E(() => {
+    B.current = ae;
+  }, [ae]);
+  const ie = () => {
+    if (d.current) {
+      const t = P.current.enable, i = t ? P.current.tape.speed : 1, m = !(t && i !== 1);
+      "preservesPitch" in d.current && (d.current.preservesPitch = m), "webkitPreservesPitch" in d.current && (d.current.webkitPreservesPitch = m), "mozPreservesPitch" in d.current && (d.current.mozPreservesPitch = m), d.current.playbackRate = B.current * i;
+    }
+  }, c = (t, i, g) => {
+    pe((m) => ({
+      ...m,
+      enable: !0,
+      [t]: {
+        ...m[t],
+        [i]: g
+      }
+    }));
+  }, w = () => {
+    pe((t) => ({
+      ...t,
+      enable: !t.enable
+    }));
+  }, F = () => {
+    pe({
+      enable: !0,
+      spatial: { rate: 0.11, width: 135, focus: 65 },
+      reverb: { size: 2.4, tone: 62, mix: 30 },
+      echo: { time: 500, feedback: 45, mix: 5 },
+      tape: { speed: 1, drive: 0 }
+    });
+  }, d = u(null), C = u(null), J = u(null), A = u(null), ue = u(null), Re = u(null), we = u(null), I = u(null), ve = u(null), De = u(null), We = u(null), Ue = u(null), Be = u(null), je = u(null), Ge = u(null), Xe = u(null), rt = u(null), Ve = u(0), Le = u(null), $e = u(null), ee = u(null), he = u(null), Se = u(0), Ze = u(null), nt = u(null);
+  E(() => {
+    const t = nt.current;
     if (!t) return;
-    const a = new ResizeObserver((o) => {
-      for (let i of o) w(i.contentRect.width);
+    const i = new ResizeObserver((g) => {
+      for (let m of g) Te(m.contentRect.width);
     });
-    return a.observe(t), () => a.disconnect();
-  }, []), $(() => {
+    return i.observe(t), () => i.disconnect();
+  }, []), E(() => {
     const t = [];
-    if (s && typeof s != "string" && t.push(["TypeError", "audio must be a string (URL or path)"]), l && typeof l != "string" && t.push(["TypeError", "name must be a string"]), v && typeof v != "string" && typeof v != "object") t.push(["TypeError", "theme must be a string or a valid theme object"]);
-    else if (typeof v == "object") {
-      const a = ["name", "bg", "bars", "peak", "button", "buttonHover", "slider"];
-      for (const o of a)
-        o in v || t.push(["ThemeError", `theme object missing key: ${o}`]);
+    if (s && typeof s != "string" && t.push(["TypeError", "audio must be a string (URL or path)"]), p && typeof p != "string" && t.push(["TypeError", "name must be a string"]), y && typeof y != "string" && typeof y != "object") t.push(["TypeError", "theme must be a string or a valid theme object"]);
+    else if (typeof y == "object") {
+      const i = ["name", "bg", "bars", "peak", "button", "buttonHover", "slider"];
+      for (const g of i)
+        g in y || t.push(["ThemeError", `theme object missing key: ${g}`]);
     }
-    (typeof C != "number" || C < 0 || C > 100) && t.push(["TypeError", "volume must be a number between 0 and 100"]), typeof y != "object" || Array.isArray(y) ? t.push(["TypeError", "controls must be an object"]) : ["play", "pause", "stop", "seekbar", "volume", "loop", "trackName", "equalizer"].forEach((o) => {
-      y && o in y && typeof y[o] != "boolean" && t.push(["TypeError", `controls.${o} must be a boolean`]);
-    }), x && (Array.isArray(x) ? x.length === 0 ? t.push(["ValueError", "bands array cannot be empty"]) : x.forEach((a, o) => {
-      typeof a.freq != "number" && t.push(["TypeError", `bands[${o}].freq must be a number`]);
-    }) : t.push(["TypeError", "bands must be an array"])), t.length > 0 ? (de(t), console.group("%cVisualizePlayer: Prop validation failed", "color:red"), t.forEach((a) => console.error(`${a[0]}: ${a[1]}`)), console.groupEnd()) : de([]);
-  }, [s, l, v, C, y, O, x]);
-  const r = x || [
+    (typeof T != "number" || T < 0 || T > 100) && t.push(["TypeError", "volume must be a number between 0 and 100"]), typeof q != "object" || Array.isArray(q) ? t.push(["TypeError", "controls must be an object"]) : ["play", "pause", "stop", "seekbar", "volume", "loop", "trackName", "equalizer"].forEach((g) => {
+      q && g in q && typeof q[g] != "boolean" && t.push(["TypeError", `controls.${g} must be a boolean`]);
+    }), R && (Array.isArray(R) ? R.length === 0 ? t.push(["ValueError", "bands array cannot be empty"]) : R.forEach((i, g) => {
+      typeof i.freq != "number" && t.push(["TypeError", `bands[${g}].freq must be a number`]);
+    }) : t.push(["TypeError", "bands must be an array"])), t.length > 0 ? (X(t), console.group("%cVisualizePlayer: Prop validation failed", "color:red"), t.forEach((i) => console.error(`${i[0]}: ${i[1]}`)), console.groupEnd()) : X([]);
+  }, [s, p, y, T, q, te, R]);
+  const n = R || [
     { freq: 0 },
     { freq: 10 },
     { freq: 20 },
@@ -435,325 +551,787 @@ function vt({
     { freq: 8e3 },
     { freq: 1e4 },
     { freq: 12500 }
-  ], d = b(r.map(() => 0)), g = b(r.map(() => 0)), B = b(r.map(() => 0)), _ = b(!1), J = b(typeof v == "string" ? v : "purple"), h = typeof v == "string" ? ge[v] || ge.purple : typeof v == "object" ? v : ge.purple, A = O === "dark", ke = typeof y == "object" && Object.keys(y).length === 0;
-  $(() => {
-    typeof v == "string" ? J.current = v : J.current = "purple", ve();
-  }, [v]), $(() => {
-    p.current || (p.current = new Audio());
-    const t = p.current, a = () => {
-      se || P(t.currentTime);
-    }, o = () => D(t.duration), i = () => {
-      V || (H(!1), N.current && cancelAnimationFrame(N.current));
-    }, q = () => H(!0), U = () => H(!1);
-    return t.addEventListener("timeupdate", a), t.addEventListener("loadedmetadata", o), t.addEventListener("ended", i), t.addEventListener("play", q), t.addEventListener("pause", U), () => {
-      t.removeEventListener("timeupdate", a), t.removeEventListener("loadedmetadata", o), t.removeEventListener("ended", i), t.removeEventListener("play", q), t.removeEventListener("pause", U);
+  ], f = u(n.map(() => 0)), $ = u(n.map(() => 0)), L = u(n.map(() => 0)), W = u(!1), se = u(typeof y == "string" ? y : "purple"), l = typeof y == "string" ? Ae[y] || Ae.purple : typeof y == "object" ? y : Ae.purple, k = te === "dark", at = typeof q == "object" && Object.keys(q).length === 0;
+  E(() => {
+    typeof y == "string" ? se.current = y : se.current = "purple", He();
+  }, [y]), E(() => {
+    d.current || (d.current = new Audio());
+    const t = d.current, i = () => {
+      me || Y(t.currentTime);
+    }, g = () => z(t.duration), m = () => {
+      _ || (D(!1), ee.current && cancelAnimationFrame(ee.current));
+    }, x = () => {
+      D(!0), ie();
+    }, K = () => D(!1);
+    return t.addEventListener("timeupdate", i), t.addEventListener("loadedmetadata", g), t.addEventListener("ended", m), t.addEventListener("play", x), t.addEventListener("pause", K), () => {
+      t.removeEventListener("timeupdate", i), t.removeEventListener("loadedmetadata", g), t.removeEventListener("ended", m), t.removeEventListener("play", x), t.removeEventListener("pause", K);
     };
-  }, [se, V]), $(() => () => {
-    p.current && (p.current.pause(), p.current.src = "", p.current.load()), L.current && L.current.close().catch((t) => console.warn("AudioContext cleanup error:", t)), N.current && cancelAnimationFrame(N.current);
-  }, []), $(() => {
+  }, [me, _]), E(() => () => {
+    he.current && clearInterval(he.current), d.current && (d.current.pause(), d.current.src = "", d.current.load()), C.current && C.current.close().catch((t) => console.warn("AudioContext cleanup error:", t)), ee.current && cancelAnimationFrame(ee.current);
+  }, []), E(() => {
     if (s) {
-      const t = E, a = k, o = V;
-      if (N.current && (cancelAnimationFrame(N.current), N.current = null), fe.current) {
+      const t = G, i = M, g = _;
+      if (ee.current && (cancelAnimationFrame(ee.current), ee.current = null), A.current) {
         try {
-          fe.current.disconnect();
+          A.current.disconnect();
         } catch {
         }
-        fe.current = null;
+        A.current = null;
       }
-      if (K.current) {
+      if (J.current) {
         try {
-          K.current.disconnect();
+          J.current.disconnect();
         } catch {
         }
-        K.current = null;
+        J.current = null;
       }
-      if (W.current) {
+      if (ue.current) {
         try {
-          W.current.disconnect();
+          ue.current.disconnect();
         } catch {
         }
-        W.current = null;
+        ue.current = null;
       }
-      if (re.current) {
+      if (Re.current) {
         try {
-          re.current.disconnect();
+          Re.current.disconnect();
         } catch {
         }
-        re.current = null;
+        Re.current = null;
       }
-      if (X.current) {
+      if (we.current) {
         try {
-          X.current.disconnect();
+          we.current.disconnect();
         } catch {
         }
-        X.current = null;
+        we.current = null;
       }
-      L.current && (L.current.close().catch((ne) => console.warn("AudioContext close error:", ne)), L.current = null), p.current && (p.current.pause(), p.current.src = "", p.current.load()), p.current = new Audio();
+      C.current && (C.current.close().catch((j) => console.warn("AudioContext close error:", j)), C.current = null), d.current && (d.current.pause(), d.current.src = "", d.current.load()), d.current = new Audio();
       try {
-        p.current.crossOrigin = "anonymous";
+        d.current.crossOrigin = "anonymous";
       } catch {
       }
-      p.current.src = s, p.current.preload = "auto", p.current.muted = !1, p.current.volume = ae ? 0 : a / 100, p.current.loop = o, p.current.load();
-      const i = p.current, q = () => {
-        se || P(i.currentTime);
-      }, U = () => D(i.duration), pe = () => {
-        V || (H(!1), N.current && cancelAnimationFrame(N.current));
-      }, ye = () => H(!0), $e = () => H(!1);
-      i.addEventListener("timeupdate", q), i.addEventListener("loadedmetadata", U), i.addEventListener("ended", pe), i.addEventListener("play", ye), i.addEventListener("pause", $e), P(0), H(!1), d.current = r.map(() => 0), g.current = r.map(() => 0), B.current = r.map(() => 0), ve(), t && p.current.play().catch((ne) => console.error("Play failed:", ne));
+      d.current.src = s, d.current.preload = "auto", d.current.muted = !1, d.current.volume = fe ? 0 : i / 100, d.current.loop = g, d.current.load();
+      const m = d.current, x = () => {
+        me || Y(m.currentTime);
+      }, K = () => z(m.duration), le = () => {
+        _ || (D(!1), ee.current && cancelAnimationFrame(ee.current));
+      }, re = () => {
+        D(!0), ie();
+      }, ne = () => D(!1);
+      m.addEventListener("timeupdate", x), m.addEventListener("loadedmetadata", K), m.addEventListener("ended", le), m.addEventListener("play", re), m.addEventListener("pause", ne), Y(0), D(!1), f.current = n.map(() => 0), $.current = n.map(() => 0), L.current = n.map(() => 0), He(), t && d.current.play().catch((j) => console.error("Play failed:", j));
+    }
+  }, [s]), E(() => {
+    d.current && (d.current.volume = fe ? 0 : M / 100);
+  }, [M, fe]), E(() => {
+    d.current && (d.current.loop = _);
+  }, [_]), E(() => {
+    ie();
+  }, [ae, o.tape.speed, o.enable]), E(() => {
+    C.current && (ue.current && (ue.current.gain.value = Z.bass), Re.current && (Re.current.gain.value = Z.mid), we.current && (we.current.gain.value = Z.treble));
+  }, [Z]), E(() => {
+    if (C.current) {
+      const t = o.enable;
+      if (Xe.current && (Xe.current.curve = Mt(t ? o.tape.drive : 0)), We.current && (We.current.frequency.value = o.reverb.tone / 100 * 8e3 + 500), Ue.current && (Ue.current.gain.value = t ? o.reverb.mix / 100 : 0), De.current && C.current)
+        try {
+          De.current.buffer = At(C.current, o.reverb.size);
+        } catch {
+        }
+      if (Be.current && (Be.current.delayTime.value = Math.max(0.01, o.echo.time / 1e3)), je.current && (je.current.gain.value = t ? Math.min(0.85, o.echo.feedback / 100) : 0), Ge.current && (Ge.current.gain.value = t ? o.echo.mix / 100 : 0), !t && (ve.current && (ve.current.pan.value = 0), I.current && C.current)) {
+        const i = C.current.currentTime;
+        I.current.positionX ? (I.current.positionX.setTargetAtTime(0, i, 0.01), I.current.positionY.setTargetAtTime(0, i, 0.01), I.current.positionZ.setTargetAtTime(-1.4, i, 0.01)) : I.current.setPosition && I.current.setPosition(0, 0, -1.4);
+      }
     }
-  }, [s]), $(() => {
-    p.current && (p.current.volume = ae ? 0 : k / 100);
-  }, [k, ae]), $(() => {
-    p.current && (p.current.loop = V);
-  }, [V]), $(() => {
-    p.current && (p.current.playbackRate = ue);
-  }, [ue]), $(() => {
-    L.current && (W.current && (W.current.gain.value = Y.bass), re.current && (re.current.gain.value = Y.mid), X.current && (X.current.gain.value = Y.treble));
-  }, [Y]), $(() => {
-    _.current = E, N.current && (cancelAnimationFrame(N.current), N.current = null), E ? (L.current || Ce(), Ne()) : he();
-  }, [E]);
-  const Ce = () => {
-    if (!L.current && p.current)
+  }, [o]);
+  const pt = () => {
+    if (!C.current || !W.current) return;
+    const t = P.current;
+    if (!t.enable) return;
+    const i = performance.now(), g = Se.current ? Math.min(0.1, (i - Se.current) / 1e3) : 0.016;
+    Se.current = i;
+    const m = t.spatial.rate;
+    Ve.current += m * 5 * g;
+    const x = Ve.current, le = 2.3 * (t.spatial.width / 135), re = Math.sin(x) * le, ne = -Math.cos(x) * le, j = Math.sin(x * 2) * 0.4, oe = C.current.currentTime;
+    if (I.current && (I.current.positionX ? (I.current.positionX.setTargetAtTime(re, oe, 0.04), I.current.positionY.setTargetAtTime(j, oe, 0.04), I.current.positionZ.setTargetAtTime(ne, oe, 0.04)) : I.current.setPosition && I.current.setPosition(re, j, ne)), ve.current) {
+      const qe = Math.sin(x) * (t.spatial.width / 180), Pe = (t.spatial.focus - 50) / 100, Oe = Math.max(-1, Math.min(1, qe + Pe));
+      ve.current.pan.setTargetAtTime(Oe, oe, 0.04);
+    }
+  };
+  E(() => {
+    W.current = G, ee.current && (cancelAnimationFrame(ee.current), ee.current = null), he.current && (clearInterval(he.current), he.current = null), G ? (C.current || It(), Se.current = performance.now(), he.current = window.setInterval(pt, 30), vt()) : ut();
+  }, [G]);
+  const It = () => {
+    if (!C.current && d.current)
       try {
         const t = window.AudioContext || window.webkitAudioContext;
         if (t) {
-          const a = new t();
-          L.current = a;
-          const o = a.createBiquadFilter();
-          o.type = "lowshelf", o.frequency.value = 320, o.gain.value = Y.bass;
-          const i = a.createBiquadFilter();
-          i.type = "peaking", i.frequency.value = 1e3, i.Q.value = 0.5, i.gain.value = Y.mid;
-          const q = a.createBiquadFilter();
-          q.type = "highshelf", q.frequency.value = 3200, q.gain.value = Y.treble;
-          const U = a.createAnalyser();
-          U.fftSize = 8192, U.smoothingTimeConstant = 0.7;
-          const pe = a.createMediaElementSource(p.current);
-          pe.connect(o), o.connect(i), i.connect(q), q.connect(U), U.connect(a.destination), W.current = o, re.current = i, X.current = q, K.current = U, fe.current = pe;
+          const i = new t();
+          C.current = i;
+          const g = i.createBiquadFilter();
+          g.type = "lowshelf", g.frequency.value = 320, g.gain.value = Z.bass;
+          const m = i.createBiquadFilter();
+          m.type = "peaking", m.frequency.value = 1e3, m.Q.value = 0.5, m.gain.value = Z.mid;
+          const x = i.createBiquadFilter();
+          x.type = "highshelf", x.frequency.value = 3200, x.gain.value = Z.treble;
+          const K = i.createWaveShaper();
+          K.curve = Mt(P.current.enable ? P.current.tape.drive : 0), ie();
+          let le = null;
+          try {
+            const xe = i.createPanner();
+            xe.panningModel = "HRTF", xe.distanceModel = "inverse", xe.refDistance = 1.4, xe.rolloffFactor = 0.55, le = xe;
+          } catch {
+          }
+          let re = null;
+          if (i.createStereoPanner) {
+            const xe = i.createStereoPanner();
+            xe.pan.value = 0, re = xe;
+          }
+          const ne = i.createGain();
+          ne.gain.value = 1;
+          const j = i.createConvolver();
+          j.buffer = At(i, P.current.reverb.size);
+          const oe = i.createBiquadFilter();
+          oe.type = "lowpass", oe.frequency.value = P.current.reverb.tone / 100 * 8e3 + 500;
+          const qe = i.createGain();
+          qe.gain.value = P.current.enable ? P.current.reverb.mix / 100 : 0;
+          const Pe = i.createDelay(2);
+          Pe.delayTime.value = P.current.echo.time / 1e3;
+          const Oe = i.createGain();
+          Oe.gain.value = Math.min(0.85, P.current.echo.feedback / 100);
+          const Ke = i.createGain();
+          Ke.gain.value = P.current.enable ? P.current.echo.mix / 100 : 0, Pe.connect(Oe), Oe.connect(Pe);
+          const Ie = i.createAnalyser();
+          Ie.fftSize = 8192, Ie.smoothingTimeConstant = 0.7;
+          const Rt = i.createMediaElementSource(d.current);
+          Rt.connect(g), g.connect(m), m.connect(x), x.connect(K);
+          const Qe = le, Ye = re, ct = Qe || Ye || K;
+          Qe ? (K.connect(Qe), Ye && Qe.connect(Ye)) : Ye && K.connect(Ye), ct.connect(ne), ne.connect(Ie), ct.connect(j), j.connect(oe), oe.connect(qe), qe.connect(Ie), ct.connect(Pe), Pe.connect(Ke), Ke.connect(Ie), Ie.connect(i.destination), ue.current = g, Re.current = m, we.current = x, Xe.current = K, I.current = le, ve.current = re, rt.current = ne, De.current = j, We.current = oe, Ue.current = qe, Be.current = Pe, je.current = Oe, Ge.current = Ke, J.current = Ie, A.current = Rt;
         }
       } catch (t) {
         console.error("Failed to setup audio context:", t);
       }
-  }, we = (t) => {
-    const a = L.current, o = K.current;
-    if (!a || !o) return 0;
-    const i = a.sampleRate / 2, q = Math.round(t / i * o.frequencyBinCount);
-    return Math.min(q, o.frequencyBinCount - 1);
-  }, he = () => {
-    if (_.current) return;
-    d.current = d.current.map((i) => i * 0.7);
+  }, dt = (t) => {
+    const i = C.current, g = J.current;
+    if (!i || !g) return 0;
+    const m = i.sampleRate / 2, x = Math.round(t / m * g.frequencyBinCount);
+    return Math.min(x, g.frequencyBinCount - 1);
+  }, ut = () => {
+    if (W.current) return;
+    f.current = f.current.map((m) => m * 0.7);
     const t = Date.now();
-    g.current = g.current.map((i, q) => t - B.current[q] > 1500 ? i * 0.95 : i), ve();
-    const a = Math.max(...d.current), o = Math.max(...g.current);
-    a > 0.01 || o > 0.01 ? N.current = requestAnimationFrame(he) : (_.current || (d.current = r.map(() => 0), g.current = r.map(() => 0), B.current = r.map(() => 0), ve()), N.current && cancelAnimationFrame(N.current), N.current = null);
-  }, Ne = () => {
-    if (!K.current || !_.current) return;
-    const t = K.current.frequencyBinCount, a = new Uint8Array(t);
-    K.current.getByteFrequencyData(a), r.forEach((o, i) => {
-      const q = we(o.freq), U = i < r.length - 1 ? we(r[i + 1].freq) : a.length;
-      let pe = 0, ye = 0;
-      for (let He = q; He < U; He++)
-        pe += a[He], ye++;
-      let $e = ye > 0 ? pe / ye / 255 : 0;
-      $e = Math.pow($e, 0.6), d.current[i] = d.current[i] * 0.8 + $e * 0.2;
-      const ne = Date.now();
-      d.current[i] > g.current[i] ? (g.current[i] = d.current[i], B.current[i] = ne) : ne - B.current[i] > 1500 && (g.current[i] *= 0.95);
-    }), ve(), N.current = requestAnimationFrame(Ne);
-  }, ve = () => {
-    if (!T.current) return;
-    const t = ge[J.current] || ge.rainbow;
-    let a = "";
-    r.forEach((o, i) => {
-      const q = d.current[i] * 100, U = 100 - g.current[i] * 100, pe = Math.floor(i / r.length * t.bars.length), ye = t.bars[Math.min(pe, t.bars.length - 1)];
-      a += `
+    $.current = $.current.map((m, x) => t - L.current[x] > 1500 ? m * 0.95 : m), He();
+    const i = Math.max(...f.current), g = Math.max(...$.current);
+    i > 0.01 || g > 0.01 ? ee.current = requestAnimationFrame(ut) : (W.current || (f.current = n.map(() => 0), $.current = n.map(() => 0), L.current = n.map(() => 0), He()), ee.current && cancelAnimationFrame(ee.current), ee.current = null);
+  }, vt = () => {
+    if (!J.current || !W.current) return;
+    const t = P.current;
+    if (t.enable && C.current) {
+      pt();
+      const m = Ve.current, x = t.spatial.width / 135;
+      if (Le.current) {
+        const K = 85 * (x > 0 ? 1 : 0), le = 55 * (x > 0 ? 1 : 0), re = Math.sin(m) * K, ne = -Math.cos(m) * le;
+        Le.current.style.transform = `translate(${re}px, ${ne}px)`, $e.current && ($e.current.setAttribute("x2", `${110 + re}`), $e.current.setAttribute("y2", `${75 + ne}`));
+      }
+    } else if (C.current) {
+      const m = C.current.currentTime;
+      I.current && (I.current.positionX ? (I.current.positionX.setTargetAtTime(0, m, 0.04), I.current.positionY.setTargetAtTime(0, m, 0.04), I.current.positionZ.setTargetAtTime(-1.4, m, 0.04)) : I.current.setPosition && I.current.setPosition(0, 0, -1.4)), ve.current && ve.current.pan.setTargetAtTime(0, m, 0.04), Le.current && (Le.current.style.transform = "translate(0px, 0px)"), $e.current && ($e.current.setAttribute("x2", "110"), $e.current.setAttribute("y2", "20"));
+    }
+    const i = J.current.frequencyBinCount, g = new Uint8Array(i);
+    J.current.getByteFrequencyData(g), n.forEach((m, x) => {
+      const K = dt(m.freq), le = x < n.length - 1 ? dt(n[x + 1].freq) : g.length;
+      let re = 0, ne = 0;
+      for (let qe = K; qe < le; qe++)
+        re += g[qe], ne++;
+      let j = ne > 0 ? re / ne / 255 : 0;
+      j = Math.pow(j, 0.6), f.current[x] = f.current[x] * 0.8 + j * 0.2;
+      const oe = Date.now();
+      f.current[x] > $.current[x] ? ($.current[x] = f.current[x], L.current[x] = oe) : oe - L.current[x] > 1500 && ($.current[x] *= 0.95);
+    }), He(), ee.current = requestAnimationFrame(vt);
+  }, He = () => {
+    if (!Ze.current) return;
+    const t = Ae[se.current] || Ae.rainbow;
+    let i = "";
+    n.forEach((g, m) => {
+      const x = f.current[m] * 100, K = 100 - $.current[m] * 100, le = Math.floor(m / n.length * t.bars.length), re = t.bars[Math.min(le, t.bars.length - 1)];
+      i += `
                 <div class="ecp-vu-bar-wrap">
-                    <div class="ecp-vu-bar-fill" style="height: ${q}%; background: ${ye};">
-                        ${g.current[i] > 0.1 ? `<div class="ecp-vu-peak-line" style="top: ${U}%; background: ${t.peak};"></div>` : ""}
+                    <div class="ecp-vu-bar-fill" style="height: ${x}%; background: ${re};">
+                        ${$.current[m] > 0.1 ? `<div class="ecp-vu-peak-line" style="top: ${K}%; background: ${t.peak};"></div>` : ""}
                     </div>
                 </div>
             `;
-    }), T.current.innerHTML = a;
-  }, xe = () => {
-    !p.current || !s || (E ? p.current.pause() : (L.current && L.current.state === "suspended" && L.current.resume(), p.current.play().catch((t) => console.error("Play failed:", t))));
-  }, Ee = () => {
-    p.current && (p.current.pause(), p.current.currentTime = 0, H(!1), P(0), d.current = r.map(() => 0), g.current = r.map(() => 0), B.current = r.map(() => 0), ve());
-  }, Le = (t) => {
-    const o = parseFloat(t.target.value) / 100 * M;
-    P(o), p.current && !se && (p.current.currentTime = o);
-  }, Ae = () => ie(!0), Re = () => {
-    p.current && (p.current.currentTime = j), ie(!1);
-  }, ze = (t) => {
-    const a = parseInt(t.target.value);
-    S(a), me(a === 0);
-  }, Se = () => me(!ae), Be = (t) => te(parseFloat(t.target.value)), je = () => ee(!V), Te = (t, a) => oe((o) => ({ ...o, [t]: a })), be = () => oe({ bass: 0, mid: 0, treble: 0 });
-  $(() => {
-    ((typeof y == "object" && Object.keys(y).length === 0 || !y) && !E || I) && xe();
-  }, [y]);
-  const qe = (t) => {
+    }), Ze.current.innerHTML = i;
+  }, ht = () => {
+    !d.current || !s || (G ? d.current.pause() : (C.current && C.current.state === "suspended" && C.current.resume(), d.current.play().catch((t) => console.error("Play failed:", t))));
+  }, Dt = () => {
+    d.current && (d.current.pause(), d.current.currentTime = 0, D(!1), Y(0), f.current = n.map(() => 0), $.current = n.map(() => 0), L.current = n.map(() => 0), He());
+  }, Bt = (t) => {
+    const g = parseFloat(t.target.value) / 100 * O;
+    Y(g), d.current && !me && (d.current.currentTime = g);
+  }, mt = () => be(!0), ft = () => {
+    d.current && (d.current.currentTime = H), be(!1);
+  }, jt = (t) => {
+    const i = parseInt(t.target.value);
+    Me(i), Ce(i === 0);
+  }, Ht = () => Ce(!fe), Ot = (t) => _e(parseFloat(t.target.value)), _t = () => Fe(!_), Wt = (t, i) => Ee((g) => ({ ...g, [t]: i })), Ut = () => Ee({ bass: 0, mid: 0, treble: 0 });
+  E(() => {
+    ((typeof q == "object" && Object.keys(q).length === 0 || !q) && !G || V) && ht();
+  }, [q]);
+  const gt = (t) => {
     if (isNaN(t)) return "0:00";
-    const a = Math.floor(t / 60), o = Math.floor(t % 60);
-    return `${a}:${o.toString().padStart(2, "0")}`;
+    const i = Math.floor(t / 60), g = Math.floor(t % 60);
+    return `${i}:${g.toString().padStart(2, "0")}`;
   };
-  if (ce && ce.length > 0)
-    return /* @__PURE__ */ e(Ve, { children: ce.map((t, a) => /* @__PURE__ */ c("div", { className: "ecp-vp-error", children: [
-      /* @__PURE__ */ c("strong", { children: [
+  if (ye && ye.length > 0)
+    return /* @__PURE__ */ e(Ft, { children: ye.map((t, i) => /* @__PURE__ */ r("div", { className: "ecp-vp-error", children: [
+      /* @__PURE__ */ r("strong", { children: [
         t[0],
         ":"
       ] }),
       " ",
       t[1]
-    ] }, a)) });
-  const Ue = ke || F ? void 0 : A ? "#6060606a" : "#ffffffab", Oe = ke || F ? void 0 : h.bg;
-  return /* @__PURE__ */ e("div", { ref: Z, className: "ecp-vp-wrapper", style: { backgroundColor: Ue }, children: /* @__PURE__ */ c("div", { className: "ecp-vp-bg", style: { background: Oe }, children: [
-    /* @__PURE__ */ c("div", { className: "ecp-vp-vu-outer", children: [
-      /* @__PURE__ */ e("div", { className: `ecp-vp-vu-bg ${F ? " ecp-vp-vu-bg--transparent" : A ? " ecp-vp-vu-bg--dark" : " ecp-vp-vu-bg--light"}${R && F ? " ecp-vp-vu-bg--dimmed" : ""}${ke ? " ecp-vp-vu-bg--no-margin" : ""}`, children: /* @__PURE__ */ e("div", { className: "ecp-vp-vu-bars", ref: T }) }),
-      R && /* @__PURE__ */ c("div", { className: `ecp-vp-eq-overlay${A ? " ecp-vp-eq-overlay--dark" : " ecp-vp-eq-overlay--light"}`, children: [
-        /* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${A ? " ecp-vp-eq-title--dark" : " ecp-vp-eq-title--light"}`, children: "Equalizer" }),
-        /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bands", children: ["bass", "mid", "treble"].map((t) => /* @__PURE__ */ c("div", { className: "ecp-vp-eq-band", children: [
-          /* @__PURE__ */ c("div", { className: "ecp-vp-eq-band-header", children: [
-            /* @__PURE__ */ e("span", { className: `ecp-vp-eq-band-label${A ? " ecp-vp-eq-band-label--dark" : " ecp-vp-eq-band-label--light"}`, children: t.charAt(0).toUpperCase() + t.slice(1) }),
-            /* @__PURE__ */ c("span", { className: `ecp-vp-eq-band-label${A ? " ecp-vp-eq-band-label--dark" : " ecp-vp-eq-band-label--light"}`, children: [
-              Y[t],
+    ] }, i)) });
+  const Gt = at || S ? void 0 : k ? "#6060606a" : "#ffffffab", Xt = at || S ? void 0 : l.bg;
+  return /* @__PURE__ */ e("div", { ref: nt, className: "ecp-vp-wrapper", style: { backgroundColor: Gt }, children: /* @__PURE__ */ r("div", { className: "ecp-vp-bg", style: { background: Xt }, children: [
+    /* @__PURE__ */ r("div", { className: "ecp-vp-vu-outer", children: [
+      /* @__PURE__ */ e("div", { className: `ecp-vp-vu-bg ${S ? " ecp-vp-vu-bg--transparent" : k ? " ecp-vp-vu-bg--dark" : " ecp-vp-vu-bg--light"}${Q && S ? " ecp-vp-vu-bg--dimmed" : ""}${at ? " ecp-vp-vu-bg--no-margin" : ""}`, children: /* @__PURE__ */ e("div", { className: "ecp-vp-vu-bars", ref: Ze }) }),
+      o.enable && G && /* @__PURE__ */ e("div", { className: "ecp-vp-8d-live-overlay", children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: `ecp-vp-8d-live-visualizer${k ? " ecp-vp-8d-live-visualizer--dark" : " ecp-vp-8d-live-visualizer--light"}`,
+          style: { "--theme-slider": l.slider, "--theme-slider-alpha": `${l.slider}33` },
+          children: [
+            /* @__PURE__ */ e("div", { className: "ecp-vp-8d-live-glow", style: { background: `radial-gradient(circle, ${l.slider}35 0%, transparent 70%)` } }),
+            /* @__PURE__ */ r("svg", { className: "ecp-vp-8d-live-svg", viewBox: "0 0 220 150", children: [
+              /* @__PURE__ */ e("circle", { cx: "110", cy: "75", r: "35", stroke: l.slider, strokeOpacity: "0.2", strokeWidth: "1", fill: "none" }),
+              /* @__PURE__ */ e(
+                "ellipse",
+                {
+                  cx: "110",
+                  cy: "75",
+                  rx: "85",
+                  ry: "55",
+                  fill: "none",
+                  stroke: l.slider,
+                  strokeOpacity: "0.5",
+                  strokeWidth: "2",
+                  strokeDasharray: "2 7",
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "line",
+                {
+                  ref: $e,
+                  x1: "110",
+                  y1: "75",
+                  x2: "110",
+                  y2: "20",
+                  stroke: l.slider,
+                  strokeOpacity: "0.75",
+                  strokeWidth: "1.5"
+                }
+              ),
+              /* @__PURE__ */ r("g", { transform: "translate(110, 75)", children: [
+                /* @__PURE__ */ e("circle", { cx: "0", cy: "0", r: "14", fill: "none", stroke: l.slider, strokeOpacity: "0.8", strokeWidth: "1.5" }),
+                /* @__PURE__ */ e("line", { x1: "0", y1: "14", x2: "0", y2: "19", stroke: l.slider, strokeOpacity: "0.8", strokeWidth: "1.5" }),
+                /* @__PURE__ */ e(
+                  "text",
+                  {
+                    x: "0",
+                    y: "29",
+                    textAnchor: "middle",
+                    fill: l.slider,
+                    fillOpacity: "0.75",
+                    fontSize: "8",
+                    fontWeight: "700",
+                    letterSpacing: "0.5px",
+                    fontFamily: "monospace",
+                    children: "FRONT"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e(it, { size: 14, className: "ecp-vp-8d-live-head-icon", style: { color: l.slider } }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                ref: Le,
+                className: "ecp-vp-8d-live-dot",
+                style: {
+                  background: l.slider,
+                  boxShadow: `0 0 12px ${l.slider}`
+                },
+                children: /* @__PURE__ */ e("span", { className: "ecp-vp-8d-live-dot-inner" })
+              }
+            )
+          ]
+        }
+      ) }),
+      Q && /* @__PURE__ */ r("div", { className: `ecp-vp-eq-overlay${k ? " ecp-vp-eq-overlay--dark" : " ecp-vp-eq-overlay--light"}`, children: [
+        /* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${k ? " ecp-vp-eq-title--dark" : " ecp-vp-eq-title--light"}`, children: "Equalizer" }),
+        /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bands", children: ["bass", "mid", "treble"].map((t) => /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band", children: [
+          /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-header", children: [
+            /* @__PURE__ */ e("span", { className: `ecp-vp-eq-band-label${k ? " ecp-vp-eq-band-label--dark" : " ecp-vp-eq-band-label--light"}`, children: t.charAt(0).toUpperCase() + t.slice(1) }),
+            /* @__PURE__ */ r("span", { className: `ecp-vp-eq-band-label${k ? " ecp-vp-eq-band-label--dark" : " ecp-vp-eq-band-label--light"}`, children: [
+              Z[t] > 0 ? `+${Z[t]}` : Z[t],
               " dB"
             ] })
           ] }),
-          /* @__PURE__ */ c("div", { className: "ecp-vp-eq-band-range", children: [
-            /* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${A ? " ecp-vp-eq-range-bound--dark" : " ecp-vp-eq-range-bound--light"}`, children: "-20" }),
+          /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-range", children: [
+            /* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${k ? " ecp-vp-eq-range-bound--dark" : " ecp-vp-eq-range-bound--light"}`, children: "-20" }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "range",
                 min: "-20",
                 max: "20",
-                value: Y[t],
-                onChange: (a) => Te(t, parseInt(a.target.value)),
+                value: Z[t],
+                onChange: (i) => Wt(t, parseInt(i.target.value)),
                 className: "ecp-vp-eq-slider",
                 style: {
-                  background: `linear-gradient(to right, ${h.slider} ${(Y[t] + 20) / 40 * 100}%, ${h.slider + "30"} ${(Y[t] + 20) / 40 * 100}%)`,
-                  "--thumb-color": h.slider
+                  background: `linear-gradient(to right, ${l.slider} ${(Z[t] + 20) / 40 * 100}%, ${l.slider + "30"} ${(Z[t] + 20) / 40 * 100}%)`,
+                  "--thumb-color": l.slider
                 }
               }
             ),
-            /* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${A ? " ecp-vp-eq-range-bound--dark" : " ecp-vp-eq-range-bound--light"}`, children: "+20" })
+            /* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${k ? " ecp-vp-eq-range-bound--dark" : " ecp-vp-eq-range-bound--light"}`, children: "+20" })
           ] })
         ] }, t)) }),
-        /* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick: be, className: `ecp-vp-eq-reset${A ? " ecp-vp-eq-reset--dark" : " ecp-vp-eq-reset--light"}`, children: "Reset" }) })
-      ] })
+        /* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick: Ut, className: `ecp-vp-eq-reset${k ? " ecp-vp-eq-reset--dark" : " ecp-vp-eq-reset--light"}`, children: "Reset" }) })
+      ] }),
+      ce && /* @__PURE__ */ r(
+        "div",
+        {
+          className: `ecp-vp-eq-overlay${k ? " ecp-vp-eq-overlay--dark" : " ecp-vp-eq-overlay--light"}`,
+          style: {
+            "--theme-slider": l.slider,
+            "--theme-slider-alpha": `${l.slider}33`
+          },
+          children: [
+            /* @__PURE__ */ r("div", { className: "ecp-vp-8d-header", children: [
+              /* @__PURE__ */ r("div", { className: "ecp-vp-8d-title-group", children: [
+                /* @__PURE__ */ e(it, { size: 18, style: { color: l.slider } }),
+                /* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${k ? " ecp-vp-eq-title--dark" : " ecp-vp-eq-title--light"}`, style: { margin: 0 }, children: "8D Spatial Engine" })
+              ] }),
+              /* @__PURE__ */ r("div", { className: "ecp-vp-8d-toggle-wrap", children: [
+                /* @__PURE__ */ e("span", { className: `ecp-vp-8d-toggle-label${k ? " ecp-vp-8d-toggle-label--dark" : " ecp-vp-8d-toggle-label--light"}`, children: o.enable ? "On" : "Off" }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: w,
+                    className: `ecp-vp-8d-toggle${o.enable ? " ecp-vp-8d-toggle--on" : ""}`,
+                    children: /* @__PURE__ */ e("div", { className: "ecp-vp-8d-toggle-thumb" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "ecp-vp-8d-tabs", children: ["spatial", "reverb", "echo", "tape"].map((t) => /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => ke(t),
+                className: `ecp-vp-8d-tab${k ? " ecp-vp-8d-tab--dark" : " ecp-vp-8d-tab--light"}${de === t ? " ecp-vp-8d-tab--active" : ""}`,
+                children: t.charAt(0).toUpperCase() + t.slice(1)
+              },
+              t
+            )) }),
+            /* @__PURE__ */ r("div", { className: "ecp-vp-8d-controls-grid", children: [
+              de === "spatial" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.spatial.rate.toFixed(2),
+                    "x"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0.01",
+                      max: "1.00",
+                      step: "0.01",
+                      value: o.spatial.rate,
+                      onChange: (t) => c("spatial", "rate", parseFloat(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${(o.spatial.rate - 0.01) / 0.99 * 100}%, ${l.slider + "30"} ${(o.spatial.rate - 0.01) / 0.99 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "RATE" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.spatial.width,
+                    "°"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "180",
+                      step: "5",
+                      value: o.spatial.width,
+                      onChange: (t) => c("spatial", "width", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.spatial.width / 180 * 100}%, ${l.slider + "30"} ${o.spatial.width / 180 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "WIDTH" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.spatial.focus,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "100",
+                      step: "1",
+                      value: o.spatial.focus,
+                      onChange: (t) => c("spatial", "focus", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.spatial.focus}%, ${l.slider + "30"} ${o.spatial.focus}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "FOCUS" })
+                ] })
+              ] }),
+              de === "reverb" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.reverb.size.toFixed(1),
+                    "s"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0.2",
+                      max: "5.0",
+                      step: "0.1",
+                      value: o.reverb.size,
+                      onChange: (t) => c("reverb", "size", parseFloat(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${(o.reverb.size - 0.2) / 4.8 * 100}%, ${l.slider + "30"} ${(o.reverb.size - 0.2) / 4.8 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "SIZE" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.reverb.tone,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "100",
+                      step: "1",
+                      value: o.reverb.tone,
+                      onChange: (t) => c("reverb", "tone", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.reverb.tone}%, ${l.slider + "30"} ${o.reverb.tone}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "TONE" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.reverb.mix,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "100",
+                      step: "1",
+                      value: o.reverb.mix,
+                      onChange: (t) => c("reverb", "mix", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.reverb.mix}%, ${l.slider + "30"} ${o.reverb.mix}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "MIX" })
+                ] })
+              ] }),
+              de === "echo" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.echo.time,
+                    "ms"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "50",
+                      max: "1000",
+                      step: "10",
+                      value: o.echo.time,
+                      onChange: (t) => c("echo", "time", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${(o.echo.time - 50) / 950 * 100}%, ${l.slider + "30"} ${(o.echo.time - 50) / 950 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "TIME" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.echo.feedback,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "85",
+                      step: "1",
+                      value: o.echo.feedback,
+                      onChange: (t) => c("echo", "feedback", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.echo.feedback / 85 * 100}%, ${l.slider + "30"} ${o.echo.feedback / 85 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "FEEDBACK" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.echo.mix,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "100",
+                      step: "1",
+                      value: o.echo.mix,
+                      onChange: (t) => c("echo", "mix", parseInt(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.echo.mix}%, ${l.slider + "30"} ${o.echo.mix}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "MIX" })
+                ] })
+              ] }),
+              de === "tape" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
+                    o.tape.speed.toFixed(2),
+                    "x"
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0.50",
+                      max: "2.00",
+                      step: "0.05",
+                      value: o.tape.speed,
+                      onChange: (t) => c("tape", "speed", parseFloat(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${(o.tape.speed - 0.5) / 1.5 * 100}%, ${l.slider + "30"} ${(o.tape.speed - 0.5) / 1.5 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "TAPE" })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-val${k ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: o.tape.drive }),
+                  /* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "50",
+                      step: "1",
+                      value: o.tape.drive,
+                      onChange: (t) => c("tape", "drive", parseFloat(t.target.value)),
+                      className: "ecp-vp-eq-slider",
+                      style: {
+                        background: `linear-gradient(to right, ${l.slider} ${o.tape.drive / 50 * 100}%, ${l.slider + "30"} ${o.tape.drive / 50 * 100}%)`,
+                        "--thumb-color": l.slider
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${k ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "DRIVE" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick: F, className: `ecp-vp-eq-reset${k ? " ecp-vp-eq-reset--dark" : " ecp-vp-eq-reset--light"}`, children: "Reset Defaults" }) })
+          ]
+        }
+      )
     ] }),
-    y.trackName && /* @__PURE__ */ c("div", { className: "ecp-vp-track", children: [
-      f && /* @__PURE__ */ e("div", { className: "ecp-vp-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: f, alt: "", className: `ecp-vp-thumbnail${E ? " ecp-animation-spin" : ""}` }) }),
-      /* @__PURE__ */ c("div", { className: "ecp-vp-track-info", children: [
-        /* @__PURE__ */ e("div", { className: `ecp-vp-track-name${A ? " ecp-vp-track-name--dark" : " ecp-vp-track-name--light"}`, children: l }),
-        u && typeof u == "string" && /* @__PURE__ */ e("div", { className: `ecp-vp-track-author${A ? " ecp-vp-track-author--dark" : " ecp-vp-track-author--light"}`, children: u })
+    q.trackName && /* @__PURE__ */ r("div", { className: "ecp-vp-track", children: [
+      h && /* @__PURE__ */ e("div", { className: "ecp-vp-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: h, alt: "", className: `ecp-vp-thumbnail${G ? " ecp-animation-spin" : ""}` }) }),
+      /* @__PURE__ */ r("div", { className: "ecp-vp-track-info", children: [
+        /* @__PURE__ */ e("div", { className: `ecp-vp-track-name${k ? " ecp-vp-track-name--dark" : " ecp-vp-track-name--light"}`, children: p }),
+        v && typeof v == "string" && /* @__PURE__ */ e("div", { className: `ecp-vp-track-author${k ? " ecp-vp-track-author--dark" : " ecp-vp-track-author--light"}`, children: v })
       ] })
     ] }),
-    y.seekbar && /* @__PURE__ */ e("div", { className: "ecp-vp-seekbar", children: /* @__PURE__ */ c("div", { className: "ecp-vp-seekbar-row", children: [
-      /* @__PURE__ */ e("span", { className: `ecp-vp-time${A ? " ecp-vp-time--dark" : " ecp-vp-time--light"}`, children: qe(j) }),
+    q.seekbar && /* @__PURE__ */ e("div", { className: "ecp-vp-seekbar", children: /* @__PURE__ */ r("div", { className: "ecp-vp-seekbar-row", children: [
+      /* @__PURE__ */ e("span", { className: `ecp-vp-time${k ? " ecp-vp-time--dark" : " ecp-vp-time--light"}`, children: gt(H) }),
       /* @__PURE__ */ e(
         "input",
         {
           type: "range",
           min: "0",
           max: "100",
-          value: M > 0 ? j / M * 100 : 0,
-          onChange: Le,
-          onMouseDown: Ae,
-          onMouseUp: Re,
-          onTouchStart: Ae,
-          onTouchEnd: Re,
+          value: O > 0 ? H / O * 100 : 0,
+          onChange: Bt,
+          onMouseDown: mt,
+          onMouseUp: ft,
+          onTouchStart: mt,
+          onTouchEnd: ft,
           disabled: !s,
           className: "ecp-vp-seek-input",
           style: {
-            background: s && M > 0 ? `linear-gradient(to right, ${h.slider} ${j / M * 100}%, ${h.slider + "30"} ${j / M * 100}%)` : h.slider + "30",
-            "--thumb-color": h.slider
+            background: s && O > 0 ? `linear-gradient(to right, ${l.slider} ${H / O * 100}%, ${l.slider + "30"} ${H / O * 100}%)` : l.slider + "30",
+            "--thumb-color": l.slider
           }
         }
       ),
-      /* @__PURE__ */ e("span", { className: `ecp-vp-time ecp-vp-time--right${A ? " ecp-vp-time--dark" : " ecp-vp-time--light"}`, children: qe(M) })
+      /* @__PURE__ */ e("span", { className: `ecp-vp-time ecp-vp-time--right${k ? " ecp-vp-time--dark" : " ecp-vp-time--light"}`, children: gt(O) })
     ] }) }),
-    /* @__PURE__ */ c("div", { className: `ecp-vp-controls${G < 330 ? " ecp-vp-controls--sm" : ""}`, children: [
-      y.play && /* @__PURE__ */ c(
+    /* @__PURE__ */ r("div", { className: `ecp-vp-controls${N < 330 ? " ecp-vp-controls--sm" : ""}`, children: [
+      q.play && /* @__PURE__ */ r(
         "button",
         {
-          onClick: xe,
+          onClick: ht,
           disabled: !s,
-          className: `ecp-vp-play-btn${G < 350 ? " ecp-vp-play-btn--compact" : ""}`,
-          style: { backgroundColor: h.button },
+          className: `ecp-vp-play-btn${N < 350 ? " ecp-vp-play-btn--compact" : ""}`,
+          style: { backgroundColor: l.button },
           children: [
-            /* @__PURE__ */ c("div", { className: "ecp-vp-play-icon-wrap", children: [
-              /* @__PURE__ */ e(Pe, { size: 16, style: { position: "absolute", transform: E ? void 0 : "scale(0) translateY(2.5rem)", transition: "all 150ms" } }),
-              /* @__PURE__ */ e(Me, { size: 16, style: { position: "absolute", transform: E ? "scale(0) translateY(-2.5rem)" : void 0, transition: "all 150ms" } })
+            /* @__PURE__ */ r("div", { className: "ecp-vp-play-icon-wrap", children: [
+              /* @__PURE__ */ e(et, { size: 16, style: { position: "absolute", transform: G ? void 0 : "scale(0) translateY(2.5rem)", transition: "all 150ms" } }),
+              /* @__PURE__ */ e(tt, { size: 16, style: { position: "absolute", transform: G ? "scale(0) translateY(-2.5rem)" : void 0, transition: "all 150ms" } })
             ] }),
-            /* @__PURE__ */ e("span", { style: { display: G < 350 ? "none" : "block" }, children: E ? "Pause" : "Play" })
+            /* @__PURE__ */ e("span", { style: { display: N < 350 ? "none" : "block" }, children: G ? "Pause" : "Play" })
           ]
         }
       ),
-      y.stop && /* @__PURE__ */ c(
+      q.stop && /* @__PURE__ */ r(
         "button",
         {
-          onClick: Ee,
+          onClick: Dt,
           disabled: !s,
-          className: `ecp-vp-stop-btn${A ? " ecp-vp-stop-btn--dark" : " ecp-vp-stop-btn--light"}${G >= 600 ? " ecp-vp-stop-btn--wide" : ""}`,
+          className: `ecp-vp-stop-btn${k ? " ecp-vp-stop-btn--dark" : " ecp-vp-stop-btn--light"}${N >= 600 ? " ecp-vp-stop-btn--wide" : ""}`,
           children: [
-            /* @__PURE__ */ e(Ge, { size: 16 }),
-            /* @__PURE__ */ e("span", { style: { display: G < 600 ? "none" : "block" }, children: "Stop" })
+            /* @__PURE__ */ e(St, { size: 16 }),
+            /* @__PURE__ */ e("span", { style: { display: N < 600 ? "none" : "block" }, children: "Stop" })
           ]
         }
       ),
-      y.equalizer && /* @__PURE__ */ c(
+      q.equalizer && /* @__PURE__ */ r(
         "button",
         {
-          onClick: () => Q(!R),
+          onClick: () => {
+            ze(!Q), Ne(!1);
+          },
           disabled: !s,
-          className: `ecp-vp-eq-btn${R ? " ecp-vp-eq-btn--on" : " ecp-vp-eq-btn--off"}${G >= 600 ? " ecp-vp-eq-btn--wide" : ""}`,
-          style: R ? { backgroundColor: h.button } : {},
+          className: `ecp-vp-eq-btn${Q ? " ecp-vp-eq-btn--on" : " ecp-vp-eq-btn--off"}${N >= 600 ? " ecp-vp-eq-btn--wide" : ""}`,
+          style: Q ? { backgroundColor: l.button } : {},
           children: [
-            /* @__PURE__ */ e(Fe, { size: 16 }),
-            /* @__PURE__ */ e("span", { style: { display: G < 600 ? "none" : "block" }, children: "EQ" })
+            /* @__PURE__ */ e(Je, { size: 16 }),
+            /* @__PURE__ */ e("span", { style: { display: N < 600 ? "none" : "block" }, children: "EQ" })
           ]
         }
       ),
-      y.loop && /* @__PURE__ */ c(
+      q.loop && /* @__PURE__ */ r(
         "button",
         {
-          onClick: je,
+          onClick: _t,
           disabled: !s,
-          className: `ecp-vp-loop-btn${V ? " ecp-vp-loop-btn--on" : " ecp-vp-loop-btn--off"}${G >= 700 ? " ecp-vp-loop-btn--wide" : ""}`,
-          style: V ? { backgroundColor: h.button } : {},
+          className: `ecp-vp-loop-btn${_ ? " ecp-vp-loop-btn--on" : " ecp-vp-loop-btn--off"}${N >= 700 ? " ecp-vp-loop-btn--wide" : ""}`,
+          style: _ ? { backgroundColor: l.button } : {},
           children: [
-            /* @__PURE__ */ e(ot, { size: 16, className: V ? "ecp-vp-loop-icon--active" : "" }),
-            /* @__PURE__ */ e("span", { style: { display: G < 700 ? "none" : "block" }, children: "Loop" })
+            /* @__PURE__ */ e(sr, { size: 16, className: _ ? "ecp-vp-loop-icon--active" : "" }),
+            /* @__PURE__ */ e("span", { style: { display: N < 700 ? "none" : "block" }, children: "Loop" })
           ]
         }
       ),
-      y.speed && /* @__PURE__ */ e("div", { className: "ecp-vp-speed-wrap", children: /* @__PURE__ */ e("select", { value: ue, onChange: Be, className: `ecp-vp-speed-select${A ? " ecp-vp-speed-select--dark" : " ecp-vp-speed-select--light"}`, children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((t) => /* @__PURE__ */ c("option", { value: t, className: A ? "ecp-vp-speed-option--dark" : "ecp-vp-speed-option--light", children: [
+      q.speed && !q.dolby8d && /* @__PURE__ */ e("div", { className: "ecp-vp-speed-wrap", children: /* @__PURE__ */ e("select", { value: ae, onChange: Ot, className: `ecp-vp-speed-select${k ? " ecp-vp-speed-select--dark" : " ecp-vp-speed-select--light"}`, children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((t) => /* @__PURE__ */ r("option", { value: t, className: k ? "ecp-vp-speed-option--dark" : "ecp-vp-speed-option--light", children: [
         t,
         "x"
       ] }, t)) }) }),
-      y.volume && /* @__PURE__ */ c("div", { className: "ecp-vp-volume", children: [
-        /* @__PURE__ */ e("button", { onClick: Se, className: "ecp-vp-mute-btn", children: ae || k === 0 ? /* @__PURE__ */ e(_e, { size: 20, className: A ? "ecp-vp-mute-icon--dark" : "ecp-vp-mute-icon--light" }) : /* @__PURE__ */ e(De, { size: 20, className: A ? "ecp-vp-mute-icon--dark" : "ecp-vp-mute-icon--light" }) }),
+      q.dolby8d && /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: () => {
+            Ne(!ce), ze(!1);
+          },
+          disabled: !s,
+          className: `ecp-vp-loop-btn${ce ? " ecp-vp-loop-btn--on" : " ecp-vp-loop-btn--off"}${N >= 700 ? " ecp-vp-loop-btn--wide" : ""}`,
+          style: ce ? { backgroundColor: l.button } : {},
+          children: [
+            /* @__PURE__ */ e(it, { size: 16, className: "" }),
+            /* @__PURE__ */ e("span", { style: { display: N < 700 ? "none" : "block" }, children: "Dolby" })
+          ]
+        }
+      ),
+      q.volume && /* @__PURE__ */ r("div", { className: "ecp-vp-volume", children: [
+        /* @__PURE__ */ e("button", { onClick: Ht, className: "ecp-vp-mute-btn", children: fe || M === 0 ? /* @__PURE__ */ e(ot, { size: 20, className: k ? "ecp-vp-mute-icon--dark" : "ecp-vp-mute-icon--light" }) : /* @__PURE__ */ e(lt, { size: 20, className: k ? "ecp-vp-mute-icon--dark" : "ecp-vp-mute-icon--light" }) }),
         /* @__PURE__ */ e(
           "input",
           {
             type: "range",
             min: "0",
             max: "100",
-            value: k,
-            onChange: ze,
+            value: M,
+            onChange: jt,
             className: "ecp-vp-volume-slider",
             style: {
-              background: `linear-gradient(to right, ${h.slider} ${k}%, ${h.slider + "30"} ${k}%)`,
-              "--thumb-color": h.slider,
-              display: G < 460 ? "none" : "block"
+              background: `linear-gradient(to right, ${l.slider} ${M}%, ${l.slider + "30"} ${M}%)`,
+              "--thumb-color": l.slider,
+              display: N < 460 ? "none" : "block"
             }
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ r(
           "span",
           {
-            className: `ecp-vp-volume-pct${A ? " ecp-vp-volume-pct--dark" : " ecp-vp-volume-pct--light"}`,
-            style: { display: G < 800 ? "none" : "block" },
+            className: `ecp-vp-volume-pct${k ? " ecp-vp-volume-pct--dark" : " ecp-vp-volume-pct--light"}`,
+            style: { display: N < 800 ? "none" : "block" },
             children: [
-              k,
+              M,
               "%"
             ]
           }
@@ -762,121 +1340,121 @@ function vt({
     ] })
   ] }) });
 }
-function bt({
+function fr({
   audio: s,
-  gradient: l = ["#cd7eff", "#ff00f2"],
-  background: u = "#f4e4ffff",
-  autoPlay: v = !1,
-  thumbnail: C = null,
-  width: f,
-  equalizer: y = { bass: 0, mid: 0, treble: 0 },
-  mode: O = "light"
+  gradient: p = ["#cd7eff", "#ff00f2"],
+  background: v = "#f4e4ffff",
+  autoPlay: y = !1,
+  thumbnail: T = null,
+  width: h,
+  equalizer: q = { bass: 0, mid: 0, treble: 0 },
+  mode: te = "light"
 }) {
-  const [x, F] = m(!1), [I, z] = m(0), [E, H] = m(0), [j, P] = m(!1), [M, D] = m(80), [k, S] = m(1), [ae, me] = m([]), [V, ee] = m(null), [se, ie] = m(!1), [ce, de] = m({ bass: y.bass || 0, mid: y.mid || 0, treble: y.treble || 0 }), R = b(null), Q = b(null), Y = b(null), oe = b(null), ue = b(null), te = b(null), G = () => {
-    const r = [];
-    for (let d = 0; d < 100; d++) r.push(20 + Math.random() * 60);
-    return r;
+  const [R, S] = b(!1), [V, U] = b(0), [a, G] = b(0), [D, H] = b(!1), [Y, O] = b(80), [z, M] = b(1), [Me, fe] = b([]), [Ce, _] = b(null), [Fe, me] = b(!1), [be, ye] = b({ bass: q.bass || 0, mid: q.mid || 0, treble: q.treble || 0 }), X = u(null), Q = u(null), ze = u(null), Z = u(null), Ee = u(null), ae = u(null), _e = () => {
+    const c = [];
+    for (let w = 0; w < 100; w++) c.push(20 + Math.random() * 60);
+    return c;
   };
-  $(() => {
+  E(() => {
     if (!s) return;
-    if (!Array.isArray(l) || l.length < 2) {
-      ee("Gradient must be an array with at least 2 colors");
+    if (!Array.isArray(p) || p.length < 2) {
+      _("Gradient must be an array with at least 2 colors");
       return;
     }
-    const r = R.current;
-    if (!r) return;
-    const d = () => z(r.currentTime), g = () => {
-      H(r.duration), me(G());
-    }, B = () => F(!1), _ = (J) => {
-      var h, A;
-      return ee(`Audio error: ${((A = (h = J.target) == null ? void 0 : h.error) == null ? void 0 : A.message) || "Failed to load audio"}`);
+    const c = X.current;
+    if (!c) return;
+    const w = () => U(c.currentTime), F = () => {
+      G(c.duration), fe(_e());
+    }, d = () => S(!1), C = (J) => {
+      var A, ue;
+      return _(`Audio error: ${((ue = (A = J.target) == null ? void 0 : A.error) == null ? void 0 : ue.message) || "Failed to load audio"}`);
     };
-    return r.addEventListener("timeupdate", d), r.addEventListener("loadedmetadata", g), r.addEventListener("ended", B), r.addEventListener("error", _), () => {
-      r.removeEventListener("timeupdate", d), r.removeEventListener("loadedmetadata", g), r.removeEventListener("ended", B), r.removeEventListener("error", _);
+    return c.addEventListener("timeupdate", w), c.addEventListener("loadedmetadata", F), c.addEventListener("ended", d), c.addEventListener("error", C), () => {
+      c.removeEventListener("timeupdate", w), c.removeEventListener("loadedmetadata", F), c.removeEventListener("ended", d), c.removeEventListener("error", C);
     };
-  }, [s, l, O]), $(() => {
-    s && R.current && v && (R.current.play().catch((r) => {
-      console.error("Play failed:", r), F(!1);
-    }), F(!0));
-  }, [s]), $(() => {
-    if (R.current && !Q.current && R.current) {
-      const r = window.AudioContext || window.webkitAudioContext;
-      if (r) {
-        const d = new r();
-        Q.current = d;
-        const g = d.createMediaElementSource(R.current);
-        Y.current = g;
-        const B = d.createBiquadFilter();
-        B.type = "lowshelf", B.frequency.value = 200, oe.current = B;
-        const _ = d.createBiquadFilter();
-        _.type = "peaking", _.frequency.value = 1e3, _.Q.value = 1, ue.current = _;
-        const J = d.createBiquadFilter();
-        J.type = "highshelf", J.frequency.value = 3e3, te.current = J, g.connect(B).connect(_).connect(J).connect(d.destination);
+  }, [s, p, te]), E(() => {
+    s && X.current && y && (X.current.play().catch((c) => {
+      console.error("Play failed:", c), S(!1);
+    }), S(!0));
+  }, [s]), E(() => {
+    if (X.current && !Q.current && X.current) {
+      const c = window.AudioContext || window.webkitAudioContext;
+      if (c) {
+        const w = new c();
+        Q.current = w;
+        const F = w.createMediaElementSource(X.current);
+        ze.current = F;
+        const d = w.createBiquadFilter();
+        d.type = "lowshelf", d.frequency.value = 200, Z.current = d;
+        const C = w.createBiquadFilter();
+        C.type = "peaking", C.frequency.value = 1e3, C.Q.value = 1, Ee.current = C;
+        const J = w.createBiquadFilter();
+        J.type = "highshelf", J.frequency.value = 3e3, ae.current = J, F.connect(d).connect(C).connect(J).connect(w.destination);
       }
     }
-  }, [s]), $(() => {
-    R.current && (R.current.volume = j ? 0 : M / 100);
-  }, [M, j]), $(() => {
-    R.current && (R.current.playbackRate = k);
-  }, [k]);
-  const w = () => {
-    R.current && (x ? R.current.pause() : R.current.play().catch((r) => ee(`Playback failed: ${r instanceof Error ? r.message : String(r)}`)), F(!x));
-  }, p = () => P(!j), L = (r) => {
-    D(parseInt(r.target.value)), j && parseInt(r.target.value) > 0 && P(!1);
-  }, K = (r) => S(parseFloat(r.target.value)), fe = (r) => {
-    const d = r.currentTarget.getBoundingClientRect(), B = (r.clientX - d.left) / d.width * E;
-    R.current && (R.current.currentTime = B, z(B));
-  }, W = (r, d) => {
-    de((g) => ({ ...g, [r]: d })), r === "bass" && oe.current && (oe.current.gain.value = d), r === "mid" && ue.current && (ue.current.gain.value = d), r === "treble" && te.current && (te.current.gain.value = d);
-  }, re = () => {
-    W("bass", 0), W("mid", 0), W("treble", 0);
-  }, X = (r) => {
-    if (isNaN(r)) return "0:00";
-    const d = Math.floor(r / 60), g = Math.floor(r % 60);
-    return `${d}:${g.toString().padStart(2, "0")}`;
-  }, N = E > 0 ? I / E * 100 : 0, T = O === "dark";
-  if (V)
-    return /* @__PURE__ */ c("div", { className: "ecp-wave-error", style: { background: u }, children: [
-      /* @__PURE__ */ e("p", { className: `ecp-wave-error-title${T ? " ecp-wave-error--dark" : " ecp-wave-error--light"}`, children: "Error" }),
-      /* @__PURE__ */ e("p", { className: `ecp-wave-error-msg${T ? " ecp-wave-error--dark" : " ecp-wave-error--light"}`, children: V })
+  }, [s]), E(() => {
+    X.current && (X.current.volume = D ? 0 : Y / 100);
+  }, [Y, D]), E(() => {
+    X.current && (X.current.playbackRate = z);
+  }, [z]);
+  const N = () => {
+    X.current && (R ? X.current.pause() : X.current.play().catch((c) => _(`Playback failed: ${c instanceof Error ? c.message : String(c)}`)), S(!R));
+  }, Te = () => H(!D), ce = (c) => {
+    O(parseInt(c.target.value)), D && parseInt(c.target.value) > 0 && H(!1);
+  }, Ne = (c) => M(parseFloat(c.target.value)), o = (c) => {
+    const w = c.currentTarget.getBoundingClientRect(), d = (c.clientX - w.left) / w.width * a;
+    X.current && (X.current.currentTime = d, U(d));
+  }, pe = (c, w) => {
+    ye((F) => ({ ...F, [c]: w })), c === "bass" && Z.current && (Z.current.gain.value = w), c === "mid" && Ee.current && (Ee.current.gain.value = w), c === "treble" && ae.current && (ae.current.gain.value = w);
+  }, de = () => {
+    pe("bass", 0), pe("mid", 0), pe("treble", 0);
+  }, ke = (c) => {
+    if (isNaN(c)) return "0:00";
+    const w = Math.floor(c / 60), F = Math.floor(c % 60);
+    return `${w}:${F.toString().padStart(2, "0")}`;
+  }, P = a > 0 ? V / a * 100 : 0, B = te === "dark";
+  if (Ce)
+    return /* @__PURE__ */ r("div", { className: "ecp-wave-error", style: { background: v }, children: [
+      /* @__PURE__ */ e("p", { className: `ecp-wave-error-title${B ? " ecp-wave-error--dark" : " ecp-wave-error--light"}`, children: "Error" }),
+      /* @__PURE__ */ e("p", { className: `ecp-wave-error-msg${B ? " ecp-wave-error--dark" : " ecp-wave-error--light"}`, children: Ce })
     ] });
   if (!s) return null;
-  const Z = T ? "#9ca3af" : "#6b7280";
-  return /* @__PURE__ */ c("div", { className: "ecp-wave-outer", style: { width: f ? `${f}px` : void 0 }, children: [
-    /* @__PURE__ */ e("audio", { ref: R, src: s, className: "ecp-wave-audio-el" }),
-    /* @__PURE__ */ e("div", { className: "ecp-wave-card", children: /* @__PURE__ */ c("div", { className: "ecp-wave-card-inner", style: { background: u }, children: [
-      C && /* @__PURE__ */ e("div", { className: "ecp-wave-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: C, alt: "", className: "ecp-wave-thumbnail" }) }),
-      /* @__PURE__ */ c("div", { className: "ecp-wave-seek", onClick: fe, children: [
-        /* @__PURE__ */ e("div", { className: "ecp-wave-bars", children: ae.map((r, d) => {
-          const g = d / ae.length * 100 <= N;
+  const ie = B ? "#9ca3af" : "#6b7280";
+  return /* @__PURE__ */ r("div", { className: "ecp-wave-outer", style: { width: h ? `${h}px` : void 0 }, children: [
+    /* @__PURE__ */ e("audio", { ref: X, src: s, className: "ecp-wave-audio-el" }),
+    /* @__PURE__ */ e("div", { className: "ecp-wave-card", children: /* @__PURE__ */ r("div", { className: "ecp-wave-card-inner", style: { background: v }, children: [
+      T && /* @__PURE__ */ e("div", { className: "ecp-wave-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: T, alt: "", className: "ecp-wave-thumbnail" }) }),
+      /* @__PURE__ */ r("div", { className: "ecp-wave-seek", onClick: o, children: [
+        /* @__PURE__ */ e("div", { className: "ecp-wave-bars", children: Me.map((c, w) => {
+          const F = w / Me.length * 100 <= P;
           return /* @__PURE__ */ e(
             "div",
             {
               className: "ecp-wave-bar",
               style: {
-                height: `${r}%`,
-                background: g ? l[0] : l[1],
-                opacity: g ? 1 : 0.4
+                height: `${c}%`,
+                background: F ? p[0] : p[1],
+                opacity: F ? 1 : 0.4
               }
             },
-            d
+            w
           );
         }) }),
-        /* @__PURE__ */ e("div", { className: "ecp-wave-progress-line", style: { left: `${N}%` } })
+        /* @__PURE__ */ e("div", { className: "ecp-wave-progress-line", style: { left: `${P}%` } })
       ] }),
-      /* @__PURE__ */ c("div", { className: "ecp-wave-times", style: { color: Z }, children: [
-        /* @__PURE__ */ e("span", { children: X(I) }),
-        /* @__PURE__ */ e("span", { children: X(E) })
+      /* @__PURE__ */ r("div", { className: "ecp-wave-times", style: { color: ie }, children: [
+        /* @__PURE__ */ e("span", { children: ke(V) }),
+        /* @__PURE__ */ e("span", { children: ke(a) })
       ] }),
-      /* @__PURE__ */ c("div", { className: "ecp-wave-controls", children: [
-        /* @__PURE__ */ c("div", { className: "ecp-wave-left-controls", children: [
+      /* @__PURE__ */ r("div", { className: "ecp-wave-controls", children: [
+        /* @__PURE__ */ r("div", { className: "ecp-wave-left-controls", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: p,
+              onClick: Te,
               className: "ecp-wave-vol-btn",
-              style: { background: `linear-gradient(135deg, ${l[0]}, ${l[1]})` },
-              children: j || M === 0 ? /* @__PURE__ */ e(_e, { style: { width: "1rem", height: "1rem", color: "white" } }) : /* @__PURE__ */ e(De, { style: { width: "1rem", height: "1rem", color: "white" } })
+              style: { background: `linear-gradient(135deg, ${p[0]}, ${p[1]})` },
+              children: D || Y === 0 ? /* @__PURE__ */ e(ot, { style: { width: "1rem", height: "1rem", color: "white" } }) : /* @__PURE__ */ e(lt, { style: { width: "1rem", height: "1rem", color: "white" } })
             }
           ),
           /* @__PURE__ */ e(
@@ -885,160 +1463,160 @@ function bt({
               type: "range",
               min: "0",
               max: "100",
-              value: M,
-              onChange: L,
+              value: Y,
+              onChange: ce,
               className: "ecp-wave-vol-slider",
               style: {
-                background: `linear-gradient(to right, ${l[0]} ${M}%, ${T ? "#374151" : "#d1d5db"} ${M}%)`,
-                "--thumb-color": l[0],
-                display: f && f < 400 ? "none" : void 0
+                background: `linear-gradient(to right, ${p[0]} ${Y}%, ${B ? "#374151" : "#d1d5db"} ${Y}%)`,
+                "--thumb-color": p[0],
+                display: h && h < 400 ? "none" : void 0
               }
             }
           ),
-          f && f < 400 && /* @__PURE__ */ e(
+          h && h < 400 && /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => ie(!se),
+              onClick: () => me(!Fe),
               className: "ecp-wave-eq-btn",
-              style: { background: `linear-gradient(135deg, ${l[0]}, ${l[1]})` },
-              children: /* @__PURE__ */ e(Fe, { style: { width: "1rem", height: "1rem", color: "white" } })
+              style: { background: `linear-gradient(135deg, ${p[0]}, ${p[1]})` },
+              children: /* @__PURE__ */ e(Je, { style: { width: "1rem", height: "1rem", color: "white" } })
             }
           )
         ] }),
         /* @__PURE__ */ e("div", { className: "ecp-wave-center-controls", children: /* @__PURE__ */ e(
           "button",
           {
-            onClick: w,
+            onClick: N,
             className: "ecp-wave-play-btn",
-            style: { background: `linear-gradient(135deg, ${l[0]}, ${l[1]})` },
-            children: x ? /* @__PURE__ */ e(Pe, { style: { width: "1.5rem", height: "1.5rem", color: "white", fill: "white" } }) : /* @__PURE__ */ e(Me, { style: { width: "1.5rem", height: "1.5rem", color: "white", fill: "white" } })
+            style: { background: `linear-gradient(135deg, ${p[0]}, ${p[1]})` },
+            children: R ? /* @__PURE__ */ e(et, { style: { width: "1.5rem", height: "1.5rem", color: "white", fill: "white" } }) : /* @__PURE__ */ e(tt, { style: { width: "1.5rem", height: "1.5rem", color: "white", fill: "white" } })
           }
         ) }),
-        /* @__PURE__ */ c("div", { className: "ecp-wave-right-controls", children: [
+        /* @__PURE__ */ r("div", { className: "ecp-wave-right-controls", children: [
           /* @__PURE__ */ e(
             "select",
             {
-              value: k,
-              onChange: K,
-              className: `ecp-wave-speed-select${T ? " ecp-wave-speed-select--dark" : " ecp-wave-speed-select--light"}`,
-              style: { background: u, color: l[0] },
-              children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((r) => /* @__PURE__ */ c("option", { value: r, children: [
-                r,
+              value: z,
+              onChange: Ne,
+              className: `ecp-wave-speed-select${B ? " ecp-wave-speed-select--dark" : " ecp-wave-speed-select--light"}`,
+              style: { background: v, color: p[0] },
+              children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((c) => /* @__PURE__ */ r("option", { value: c, children: [
+                c,
                 "x"
-              ] }, r))
+              ] }, c))
             }
           ),
-          !(f && f < 400) && /* @__PURE__ */ e(
+          !(h && h < 400) && /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => ie(!se),
+              onClick: () => me(!Fe),
               className: "ecp-wave-eq-btn",
-              style: { background: `linear-gradient(135deg, ${l[0]}, ${l[1]})` },
-              children: /* @__PURE__ */ e(Fe, { style: { width: "1rem", height: "1rem", color: "white" } })
+              style: { background: `linear-gradient(135deg, ${p[0]}, ${p[1]})` },
+              children: /* @__PURE__ */ e(Je, { style: { width: "1rem", height: "1rem", color: "white" } })
             }
           )
         ] })
       ] })
     ] }) }),
-    se && /* @__PURE__ */ e("div", { className: "ecp-wave-eq-overlay", children: /* @__PURE__ */ c("div", { className: `ecp-wave-eq-panel${T ? " ecp-wave-eq-panel--dark" : " ecp-wave-eq-panel--light"}`, children: [
-      /* @__PURE__ */ e("h3", { className: `ecp-wave-eq-title${T ? " ecp-wave-eq-title--dark" : " ecp-wave-eq-title--light"}`, children: "Equalizer" }),
-      /* @__PURE__ */ e("div", { className: "ecp-wave-eq-bands", children: ["bass", "mid", "treble"].map((r) => /* @__PURE__ */ c("div", { children: [
-        /* @__PURE__ */ c("div", { className: "ecp-wave-eq-band-header", children: [
-          /* @__PURE__ */ e("span", { className: T ? "ecp-wave-eq-label--dark" : "ecp-wave-eq-label--light", children: r.charAt(0).toUpperCase() + r.slice(1) }),
-          /* @__PURE__ */ c("span", { className: T ? "ecp-wave-eq-label--dark" : "ecp-wave-eq-label--light", children: [
-            ce[r],
+    Fe && /* @__PURE__ */ e("div", { className: "ecp-wave-eq-overlay", children: /* @__PURE__ */ r("div", { className: `ecp-wave-eq-panel${B ? " ecp-wave-eq-panel--dark" : " ecp-wave-eq-panel--light"}`, children: [
+      /* @__PURE__ */ e("h3", { className: `ecp-wave-eq-title${B ? " ecp-wave-eq-title--dark" : " ecp-wave-eq-title--light"}`, children: "Equalizer" }),
+      /* @__PURE__ */ e("div", { className: "ecp-wave-eq-bands", children: ["bass", "mid", "treble"].map((c) => /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ r("div", { className: "ecp-wave-eq-band-header", children: [
+          /* @__PURE__ */ e("span", { className: B ? "ecp-wave-eq-label--dark" : "ecp-wave-eq-label--light", children: c.charAt(0).toUpperCase() + c.slice(1) }),
+          /* @__PURE__ */ r("span", { className: B ? "ecp-wave-eq-label--dark" : "ecp-wave-eq-label--light", children: [
+            be[c],
             " dB"
           ] })
         ] }),
-        /* @__PURE__ */ c("div", { className: "ecp-wave-eq-range-row", children: [
-          /* @__PURE__ */ e("span", { className: T ? "ecp-wave-eq-bound--dark" : "ecp-wave-eq-bound--light", children: "-20" }),
+        /* @__PURE__ */ r("div", { className: "ecp-wave-eq-range-row", children: [
+          /* @__PURE__ */ e("span", { className: B ? "ecp-wave-eq-bound--dark" : "ecp-wave-eq-bound--light", children: "-20" }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "range",
               min: "-20",
               max: "20",
-              value: ce[r],
-              onChange: (d) => W(r, parseInt(d.target.value)),
+              value: be[c],
+              onChange: (w) => pe(c, parseInt(w.target.value)),
               className: "ecp-wave-eq-slider",
               style: {
-                background: `linear-gradient(to right, ${l[0]} ${(ce[r] + 20) / 40 * 100}%, ${l[1] + "30"} ${(ce[r] + 20) / 40 * 100}%)`,
-                "--thumb-color": l[0]
+                background: `linear-gradient(to right, ${p[0]} ${(be[c] + 20) / 40 * 100}%, ${p[1] + "30"} ${(be[c] + 20) / 40 * 100}%)`,
+                "--thumb-color": p[0]
               }
             }
           ),
-          /* @__PURE__ */ e("span", { className: T ? "ecp-wave-eq-bound--dark" : "ecp-wave-eq-bound--light", children: "+20" })
+          /* @__PURE__ */ e("span", { className: B ? "ecp-wave-eq-bound--dark" : "ecp-wave-eq-bound--light", children: "+20" })
         ] })
-      ] }, r)) }),
-      /* @__PURE__ */ c("div", { className: "ecp-wave-eq-footer", children: [
-        /* @__PURE__ */ e("button", { onClick: re, className: `ecp-wave-eq-footer-btn${T ? " ecp-wave-eq-footer-btn--dark" : " ecp-wave-eq-footer-btn--light"}`, children: "Reset" }),
-        /* @__PURE__ */ e("button", { onClick: () => ie(!1), className: `ecp-wave-eq-footer-btn${T ? " ecp-wave-eq-footer-btn--dark" : " ecp-wave-eq-footer-btn--light"}`, children: "Close" })
+      ] }, c)) }),
+      /* @__PURE__ */ r("div", { className: "ecp-wave-eq-footer", children: [
+        /* @__PURE__ */ e("button", { onClick: de, className: `ecp-wave-eq-footer-btn${B ? " ecp-wave-eq-footer-btn--dark" : " ecp-wave-eq-footer-btn--light"}`, children: "Reset" }),
+        /* @__PURE__ */ e("button", { onClick: () => me(!1), className: `ecp-wave-eq-footer-btn${B ? " ecp-wave-eq-footer-btn--dark" : " ecp-wave-eq-footer-btn--light"}`, children: "Close" })
       ] })
     ] }) })
   ] });
 }
-function gt({ audio: s, thumbnail: l, gradient: u = ["#cd7eff", "#fe59f6"], background: v = "#1f273a", autoPlay: C = !1 }) {
-  const [f, y] = m(!1), [, O] = m(0), x = b(null), [F, I] = m(0), [z, E] = m(0), [H, j] = m(0);
-  $(() => {
-    const k = x.current;
-    if (!k) return;
-    const S = () => O(k.currentTime);
-    return k.addEventListener("timeupdate", S), () => k.removeEventListener("timeupdate", S);
-  }, []), $(() => {
-    const k = setInterval(() => {
-      f && I((S) => S + 0.1);
+function gr({ audio: s, thumbnail: p, gradient: v = ["#cd7eff", "#fe59f6"], background: y = "#1f273a", autoPlay: T = !1 }) {
+  const [h, q] = b(!1), [, te] = b(0), R = u(null), [S, V] = b(0), [U, a] = b(0), [G, D] = b(0);
+  E(() => {
+    const z = R.current;
+    if (!z) return;
+    const M = () => te(z.currentTime);
+    return z.addEventListener("timeupdate", M), () => z.removeEventListener("timeupdate", M);
+  }, []), E(() => {
+    const z = setInterval(() => {
+      h && V((M) => M + 0.1);
     }, 100);
-    return () => clearInterval(k);
-  }, [f]), $(() => {
-    const k = setInterval(() => {
-      f && j((S) => S + 0.1);
+    return () => clearInterval(z);
+  }, [h]), E(() => {
+    const z = setInterval(() => {
+      h && D((M) => M + 0.1);
     }, 100);
-    return () => clearInterval(k);
-  }, [f]), $(() => {
-    s && x.current && C && (x.current.play().catch(() => y(!1)), y(!0));
-  }, [s]), $(() => {
-    const k = x.current;
-    if (!k) return;
-    const S = () => E(k.duration);
-    return j(0), k.addEventListener("loadedmetadata", S), () => k.removeEventListener("loadedmetadata", S);
+    return () => clearInterval(z);
+  }, [h]), E(() => {
+    s && R.current && T && (R.current.play().catch(() => q(!1)), q(!0));
+  }, [s]), E(() => {
+    const z = R.current;
+    if (!z) return;
+    const M = () => a(z.duration);
+    return D(0), z.addEventListener("loadedmetadata", M), () => z.removeEventListener("loadedmetadata", M);
   }, [s]);
-  const P = () => {
-    x.current && (f ? x.current.pause() : x.current.play().catch((k) => console.error("NanoPlayer play failed:", k)), y(!f));
+  const H = () => {
+    R.current && (h ? R.current.pause() : R.current.play().catch((z) => console.error("NanoPlayer play failed:", z)), q(!h));
   };
   if (!s) return null;
-  const M = `linear-gradient(135deg, ${u[0]}, ${u[1]})`, D = `${(z > 0 ? H / z : 0) * 100}%`;
-  return /* @__PURE__ */ c(
+  const Y = `linear-gradient(135deg, ${v[0]}, ${v[1]})`, O = `${(U > 0 ? G / U : 0) * 100}%`;
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: `ecp-nano-wrapper${l ? " ecp-nano-wrapper--card" : " ecp-nano-wrapper--pill"}`,
-      style: { backgroundColor: v },
+      className: `ecp-nano-wrapper${p ? " ecp-nano-wrapper--card" : " ecp-nano-wrapper--pill"}`,
+      style: { backgroundColor: y },
       children: [
         /* @__PURE__ */ e(
           "audio",
           {
-            ref: x,
+            ref: R,
             src: s,
             onEnded: () => {
-              y(!1), j(0);
+              q(!1), D(0);
             }
           }
         ),
-        /* @__PURE__ */ e("div", { className: "ecp-nano-progress-bg", style: { width: D, backgroundImage: M } }),
-        /* @__PURE__ */ c("div", { className: "ecp-nano-content", children: [
-          l && /* @__PURE__ */ e("div", { className: "ecp-nano-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: l, alt: "", className: "ecp-nano-thumbnail" }) }),
-          /* @__PURE__ */ c("div", { className: "ecp-nano-row", children: [
-            /* @__PURE__ */ e("button", { onClick: P, className: "ecp-nano-play-btn", style: { background: M }, children: f ? /* @__PURE__ */ e(Pe, { fill: v, style: { width: "0.75rem", height: "0.75rem", color: "transparent" } }) : /* @__PURE__ */ e(Me, { fill: v, style: { width: "0.75rem", height: "0.75rem", color: "transparent" } }) }),
-            /* @__PURE__ */ e("div", { className: "ecp-nano-waveform", children: [...Array(12)].map((k, S) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "ecp-nano-progress-bg", style: { width: O, backgroundImage: Y } }),
+        /* @__PURE__ */ r("div", { className: "ecp-nano-content", children: [
+          p && /* @__PURE__ */ e("div", { className: "ecp-nano-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: p, alt: "", className: "ecp-nano-thumbnail" }) }),
+          /* @__PURE__ */ r("div", { className: "ecp-nano-row", children: [
+            /* @__PURE__ */ e("button", { onClick: H, className: "ecp-nano-play-btn", style: { background: Y }, children: h ? /* @__PURE__ */ e(et, { fill: y, style: { width: "0.75rem", height: "0.75rem", color: "transparent" } }) : /* @__PURE__ */ e(tt, { fill: y, style: { width: "0.75rem", height: "0.75rem", color: "transparent" } }) }),
+            /* @__PURE__ */ e("div", { className: "ecp-nano-waveform", children: [...Array(12)].map((z, M) => /* @__PURE__ */ e(
               "div",
               {
                 className: "ecp-nano-wave-bar",
                 style: {
-                  background: `linear-gradient(to top, ${u[0]}, ${u[1]})`,
-                  height: f ? `${8 + Math.sin((F * 8 + S) * 0.6) * 10}px` : "8px",
-                  opacity: f ? 0.8 : 0.4
+                  background: `linear-gradient(to top, ${v[0]}, ${v[1]})`,
+                  height: h ? `${8 + Math.sin((S * 8 + M) * 0.6) * 10}px` : "8px",
+                  opacity: h ? 0.8 : 0.4
                 }
               },
-              S
+              M
             )) })
           ] })
         ] })
@@ -1046,13 +1624,13 @@ function gt({ audio: s, thumbnail: l, gradient: u = ["#cd7eff", "#fe59f6"], back
     }
   );
 }
-function wt({
+function qr({
   video: s,
-  name: l = "No video loaded",
-  audioVisual: u = null,
-  volume: v = 100,
-  thumbnail: C = null,
-  controls: f = {
+  name: p = "No video loaded",
+  audioVisual: v = null,
+  volume: y = 100,
+  thumbnail: T = null,
+  controls: h = {
     play: !0,
     pause: !0,
     stop: !0,
@@ -1063,203 +1641,203 @@ function wt({
     equalizer: !0,
     speed: !0
   },
-  mode: y = "light",
-  transparent: O = !1,
-  autoPlay: x = !1,
-  color: F = "#3b82f6",
-  equalizer: I = { bass: 0, mid: 0, treble: 0 }
+  mode: q = "light",
+  transparent: te = !1,
+  autoPlay: R = !1,
+  color: S = "#3b82f6",
+  equalizer: V = { bass: 0, mid: 0, treble: 0 }
 }) {
-  const [z, E] = m(!1), [H, j] = m(0), [P, M] = m(0), [D, k] = m(v || 100), [S, ae] = m(!1), [me, V] = m(!1), [ee, se] = m(!1), [ie, ce] = m([]), [de, R] = m(!1), [Q, Y] = m({ bass: I.bass || 0, mid: I.mid || 0, treble: I.treble || 0 }), [oe, ue] = m(1), [te, G] = m(0), w = b(null), p = b(null), L = b(null), K = b(null), fe = b(null), W = b(null), re = b(null), X = b(null), N = b(null), T = b(null), Z = b(0), r = b(0), d = b(0), g = b(0), B = b(0), _ = b(0), J = b(!1), h = y === "dark" || ee, A = typeof f == "object" && Object.keys(f).length === 0;
-  $(() => {
-    const n = p.current;
+  const [U, a] = b(!1), [G, D] = b(0), [H, Y] = b(0), [O, z] = b(y || 100), [M, Me] = b(!1), [fe, Ce] = b(!1), [_, Fe] = b(!1), [me, be] = b([]), [ye, X] = b(!1), [Q, ze] = b({ bass: V.bass || 0, mid: V.mid || 0, treble: V.treble || 0 }), [Z, Ee] = b(1), [ae, _e] = b(0), N = u(null), Te = u(null), ce = u(null), Ne = u(null), o = u(null), pe = u(null), de = u(null), ke = u(null), P = u(null), B = u(null), ie = u(0), c = u(0), w = u(0), F = u(0), d = u(0), C = u(0), J = u(!1), A = q === "dark" || _, ue = typeof h == "object" && Object.keys(h).length === 0;
+  E(() => {
+    const n = Te.current;
     if (!n) return;
-    const t = new ResizeObserver((a) => {
-      for (let o of a) G(o.contentRect.width);
+    const f = new ResizeObserver(($) => {
+      for (let L of $) _e(L.contentRect.width);
     });
-    return t.observe(n), () => t.disconnect();
-  }, []), $(() => {
+    return f.observe(n), () => f.disconnect();
+  }, []), E(() => {
     const n = [];
-    s && typeof s != "string" && n.push(["TypeError", "video must be a string (URL or path)"]), l && typeof l != "string" && n.push(["TypeError", "name must be a string"]), (typeof v != "number" || v < 0 || v > 100) && n.push(["TypeError", "volume must be a number between 0 and 100"]), u && typeof u != "object" ? n.push(["TypeError", "audioVisual must be an object"]) : u && !["left", "right", "top", "bottom"].includes(u.side) && n.push(["ValueError", "audioVisual.side must be 'left', 'right', 'top', or 'bottom'"]), n.length > 0 ? ce(n) : ce([]);
-  }, [s, l, v, u, f, y]), $(() => {
-    if (!w.current) return;
-    const n = w.current, t = () => {
-      me || j(n.currentTime);
-    }, a = () => M(n.duration), o = () => {
-      E(!1), N.current && cancelAnimationFrame(N.current);
-    }, i = () => E(!0), q = () => E(!1);
-    return n.addEventListener("timeupdate", t), n.addEventListener("loadedmetadata", a), n.addEventListener("ended", o), n.addEventListener("play", i), n.addEventListener("pause", q), () => {
-      n.removeEventListener("timeupdate", t), n.removeEventListener("loadedmetadata", a), n.removeEventListener("ended", o), n.removeEventListener("play", i), n.removeEventListener("pause", q);
+    s && typeof s != "string" && n.push(["TypeError", "video must be a string (URL or path)"]), p && typeof p != "string" && n.push(["TypeError", "name must be a string"]), (typeof y != "number" || y < 0 || y > 100) && n.push(["TypeError", "volume must be a number between 0 and 100"]), v && typeof v != "object" ? n.push(["TypeError", "audioVisual must be an object"]) : v && !["left", "right", "top", "bottom"].includes(v.side) && n.push(["ValueError", "audioVisual.side must be 'left', 'right', 'top', or 'bottom'"]), n.length > 0 ? be(n) : be([]);
+  }, [s, p, y, v, h, q]), E(() => {
+    if (!N.current) return;
+    const n = N.current, f = () => {
+      fe || D(n.currentTime);
+    }, $ = () => Y(n.duration), L = () => {
+      a(!1), P.current && cancelAnimationFrame(P.current);
+    }, W = () => a(!0), se = () => a(!1);
+    return n.addEventListener("timeupdate", f), n.addEventListener("loadedmetadata", $), n.addEventListener("ended", L), n.addEventListener("play", W), n.addEventListener("pause", se), () => {
+      n.removeEventListener("timeupdate", f), n.removeEventListener("loadedmetadata", $), n.removeEventListener("ended", L), n.removeEventListener("play", W), n.removeEventListener("pause", se);
     };
-  }, [me]), $(() => {
+  }, [fe]), E(() => {
     if (s) {
-      const n = z, t = D;
-      if (w.current) {
-        w.current.pause(), w.current.src = s, w.current.volume = S ? 0 : t / 100;
-        const a = () => {
-          n && w.current && w.current.play().catch((o) => console.error("Play failed:", o)), w.current && w.current.removeEventListener("canplay", a);
+      const n = U, f = O;
+      if (N.current) {
+        N.current.pause(), N.current.src = s, N.current.volume = M ? 0 : f / 100;
+        const $ = () => {
+          n && N.current && N.current.play().catch((L) => console.error("Play failed:", L)), N.current && N.current.removeEventListener("canplay", $);
         };
-        w.current.addEventListener("canplay", a), w.current.load();
+        N.current.addEventListener("canplay", $), N.current.load();
       }
-      j(0), E(!1), Z.current = 0, r.current = 0, d.current = 0, g.current = 0, B.current = 0, _.current = 0, he();
+      D(0), a(!1), ie.current = 0, c.current = 0, w.current = 0, F.current = 0, d.current = 0, C.current = 0, ve();
     }
-  }, [s]), $(() => {
-    w.current && (w.current.volume = S ? 0 : D / 100);
-  }, [D, S]), $(() => {
-    w.current && (w.current.playbackRate = oe);
-  }, [oe]), $(() => {
-    L.current && (W.current && (W.current.gain.value = Q.bass), re.current && (re.current.gain.value = Q.mid), X.current && (X.current.gain.value = Q.treble));
-  }, [Q]), $(() => {
-    J.current = z, N.current && (cancelAnimationFrame(N.current), N.current = null), z && u ? (L.current || ke(), we()) : !z && u && Ce();
-  }, [z, u]), $(() => {
-    const n = () => se(!!document.fullscreenElement);
+  }, [s]), E(() => {
+    N.current && (N.current.volume = M ? 0 : O / 100);
+  }, [O, M]), E(() => {
+    N.current && (N.current.playbackRate = Z);
+  }, [Z]), E(() => {
+    ce.current && (pe.current && (pe.current.gain.value = Q.bass), de.current && (de.current.gain.value = Q.mid), ke.current && (ke.current.gain.value = Q.treble));
+  }, [Q]), E(() => {
+    J.current = U, P.current && (cancelAnimationFrame(P.current), P.current = null), U && v ? (ce.current || Re(), I()) : !U && v && we();
+  }, [U, v]), E(() => {
+    const n = () => Fe(!!document.fullscreenElement);
     return document.addEventListener("fullscreenchange", n), () => document.removeEventListener("fullscreenchange", n);
-  }, []), $(() => () => {
-    N.current && cancelAnimationFrame(N.current), L.current && L.current.close().catch((n) => console.warn("AudioContext cleanup error:", n));
+  }, []), E(() => () => {
+    P.current && cancelAnimationFrame(P.current), ce.current && ce.current.close().catch((n) => console.warn("AudioContext cleanup error:", n));
   }, []);
-  const ke = () => {
-    if (!L.current && w.current)
+  const Re = () => {
+    if (!ce.current && N.current)
       try {
         const n = window.AudioContext || window.webkitAudioContext;
         if (n) {
-          const t = new n();
-          L.current = t;
-          const a = t.createBiquadFilter();
-          a.type = "lowshelf", a.frequency.value = 320, a.gain.value = Q.bass;
-          const o = t.createBiquadFilter();
-          o.type = "peaking", o.frequency.value = 1e3, o.Q.value = 0.5, o.gain.value = Q.mid;
-          const i = t.createBiquadFilter();
-          i.type = "highshelf", i.frequency.value = 3200, i.gain.value = Q.treble;
-          const q = t.createAnalyser();
-          q.fftSize = 2048, q.smoothingTimeConstant = 0.8;
-          const U = t.createMediaElementSource(w.current);
-          U.connect(a), a.connect(o), o.connect(i), i.connect(q), i.connect(t.destination), W.current = a, re.current = o, X.current = i, K.current = q, fe.current = U;
+          const f = new n();
+          ce.current = f;
+          const $ = f.createBiquadFilter();
+          $.type = "lowshelf", $.frequency.value = 320, $.gain.value = Q.bass;
+          const L = f.createBiquadFilter();
+          L.type = "peaking", L.frequency.value = 1e3, L.Q.value = 0.5, L.gain.value = Q.mid;
+          const W = f.createBiquadFilter();
+          W.type = "highshelf", W.frequency.value = 3200, W.gain.value = Q.treble;
+          const se = f.createAnalyser();
+          se.fftSize = 2048, se.smoothingTimeConstant = 0.8;
+          const l = f.createMediaElementSource(N.current);
+          l.connect($), $.connect(L), L.connect(W), W.connect(se), W.connect(f.destination), pe.current = $, de.current = L, ke.current = W, Ne.current = se, o.current = l;
         }
       } catch (n) {
         console.error("Failed to setup audio context:", n);
       }
-  }, Ce = () => {
+  }, we = () => {
     if (J.current) return;
-    Z.current *= 0.7, r.current *= 0.7;
+    ie.current *= 0.7, c.current *= 0.7;
     const n = Date.now();
-    n - B.current > 1500 && (d.current *= 0.95), n - _.current > 1500 && (g.current *= 0.95), he();
-    const t = Math.max(Z.current, r.current), a = Math.max(d.current, g.current);
-    t > 0.01 || a > 0.01 ? N.current = requestAnimationFrame(Ce) : (J.current || (Z.current = 0, r.current = 0, d.current = 0, g.current = 0, he()), N.current && cancelAnimationFrame(N.current), N.current = null);
-  }, we = () => {
-    if (!K.current || !J.current) return;
-    const n = K.current.frequencyBinCount, t = new Uint8Array(n);
-    K.current.getByteFrequencyData(t);
-    let a = 0;
-    for (let q = 0; q < n; q++) a += t[q];
-    let o = Math.pow(a / n / 255, 0.5);
-    Z.current = Z.current * 0.7 + o * 0.3, r.current = r.current * 0.7 + o * 0.3;
-    const i = Date.now();
-    Z.current > d.current ? (d.current = Z.current, B.current = i) : i - B.current > 1500 && (d.current *= 0.95), r.current > g.current ? (g.current = r.current, _.current = i) : i - _.current > 1500 && (g.current *= 0.95), he(), N.current = requestAnimationFrame(we);
-  }, he = () => {
-    if (!T.current || !u) return;
-    const n = u.color || "#00ff00", t = u.peak || "#ff0000", a = Z.current * 100, o = r.current * 100, i = 100 - d.current * 100, q = 100 - g.current * 100;
-    u.side === "top" || u.side === "bottom" ? T.current.innerHTML = `
+    n - d.current > 1500 && (w.current *= 0.95), n - C.current > 1500 && (F.current *= 0.95), ve();
+    const f = Math.max(ie.current, c.current), $ = Math.max(w.current, F.current);
+    f > 0.01 || $ > 0.01 ? P.current = requestAnimationFrame(we) : (J.current || (ie.current = 0, c.current = 0, w.current = 0, F.current = 0, ve()), P.current && cancelAnimationFrame(P.current), P.current = null);
+  }, I = () => {
+    if (!Ne.current || !J.current) return;
+    const n = Ne.current.frequencyBinCount, f = new Uint8Array(n);
+    Ne.current.getByteFrequencyData(f);
+    let $ = 0;
+    for (let se = 0; se < n; se++) $ += f[se];
+    let L = Math.pow($ / n / 255, 0.5);
+    ie.current = ie.current * 0.7 + L * 0.3, c.current = c.current * 0.7 + L * 0.3;
+    const W = Date.now();
+    ie.current > w.current ? (w.current = ie.current, d.current = W) : W - d.current > 1500 && (w.current *= 0.95), c.current > F.current ? (F.current = c.current, C.current = W) : W - C.current > 1500 && (F.current *= 0.95), ve(), P.current = requestAnimationFrame(I);
+  }, ve = () => {
+    if (!B.current || !v) return;
+    const n = v.color || "#00ff00", f = v.peak || "#ff0000", $ = ie.current * 100, L = c.current * 100, W = 100 - w.current * 100, se = 100 - F.current * 100;
+    v.side === "top" || v.side === "bottom" ? B.current.innerHTML = `
                 <div style="display:flex;flex-direction:column;gap:0.25rem;height:100%;justify-content:center;">
                     <div style="display:flex;align-items:center;justify-content:center;gap:0.5rem;">
-                        <div style="font-size:0.75rem;opacity:0.8;width:1rem;text-align:center;color:${h ? "#f3f4f6" : "#111827"}">L</div>
+                        <div style="font-size:0.75rem;opacity:0.8;width:1rem;text-align:center;color:${A ? "#f3f4f6" : "#111827"}">L</div>
                         <div style="position:relative;flex:1;height:0.75rem;background:rgba(0,0,0,0.4);border-radius:9999px;overflow:hidden;display:flex;justify-content:flex-end;">
-                            <div style="height:100%;border-radius:9999px 0 0 9999px;transition:width 75ms;width:${a}%;background:${n};"></div>
-                            ${d.current > 0.1 ? `<div style="position:absolute;top:0;width:0.25rem;height:100%;transition:right 100ms;right:${d.current * 100}%;background:${t};"></div>` : ""}
+                            <div style="height:100%;border-radius:9999px 0 0 9999px;transition:width 75ms;width:${$}%;background:${n};"></div>
+                            ${w.current > 0.1 ? `<div style="position:absolute;top:0;width:0.25rem;height:100%;transition:right 100ms;right:${w.current * 100}%;background:${f};"></div>` : ""}
                         </div>
                         <div style="width:1px;height:1rem;background:rgba(255,255,255,0.2)"></div>
                         <div style="position:relative;flex:1;height:0.75rem;background:rgba(0,0,0,0.4);border-radius:9999px;overflow:hidden;display:flex;justify-content:flex-start;">
-                            <div style="height:100%;border-radius:0 9999px 9999px 0;transition:width 75ms;width:${o}%;background:${n};"></div>
-                            ${g.current > 0.1 ? `<div style="position:absolute;top:0;width:0.25rem;height:100%;transition:left 100ms;left:${g.current * 100}%;background:${t};"></div>` : ""}
+                            <div style="height:100%;border-radius:0 9999px 9999px 0;transition:width 75ms;width:${L}%;background:${n};"></div>
+                            ${F.current > 0.1 ? `<div style="position:absolute;top:0;width:0.25rem;height:100%;transition:left 100ms;left:${F.current * 100}%;background:${f};"></div>` : ""}
                         </div>
-                        <div style="font-size:0.75rem;opacity:0.8;width:1rem;text-align:center;color:${h ? "#f3f4f6" : "#111827"}">R</div>
+                        <div style="font-size:0.75rem;opacity:0.8;width:1rem;text-align:center;color:${A ? "#f3f4f6" : "#111827"}">R</div>
                     </div>
                 </div>
-            ` : T.current.innerHTML = `
+            ` : B.current.innerHTML = `
                 <div style="display:flex;gap:0.5rem;height:100%;">
                     <div style="flex:1;display:flex;flex-direction:column;">
                         <div style="font-size:0.75rem;color:white;opacity:0.7;text-align:center;margin-bottom:0.25rem;">L</div>
                         <div style="flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,0.3);border-radius:0.5rem;overflow:hidden;">
-                            <div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${a}%;background:${n};">
-                                ${d.current > 0.1 ? `<div style="position:absolute;width:100%;height:0.25rem;transition:top 100ms;top:${i}%;background:${t};"></div>` : ""}
+                            <div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${$}%;background:${n};">
+                                ${w.current > 0.1 ? `<div style="position:absolute;width:100%;height:0.25rem;transition:top 100ms;top:${W}%;background:${f};"></div>` : ""}
                             </div>
                         </div>
                     </div>
                     <div style="flex:1;display:flex;flex-direction:column;">
                         <div style="font-size:0.75rem;color:white;opacity:0.7;text-align:center;margin-bottom:0.25rem;">R</div>
                         <div style="flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,0.3);border-radius:0.5rem;overflow:hidden;">
-                            <div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${o}%;background:${n};">
-                                ${g.current > 0.1 ? `<div style="position:absolute;width:100%;height:0.25rem;transition:top 100ms;top:${q}%;background:${t};"></div>` : ""}
+                            <div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${L}%;background:${n};">
+                                ${F.current > 0.1 ? `<div style="position:absolute;width:100%;height:0.25rem;transition:top 100ms;top:${se}%;background:${f};"></div>` : ""}
                             </div>
                         </div>
                     </div>
                 </div>
             `;
-  }, Ne = () => {
-    !w.current || !s || (z ? w.current.pause() : (L.current && L.current.state === "suspended" && L.current.resume(), w.current.play().catch((n) => console.error("Play failed:", n))));
-  }, ve = () => {
-    w.current && (w.current.pause(), w.current.currentTime = 0, E(!1), j(0), Z.current = 0, r.current = 0, d.current = 0, g.current = 0, he());
-  }, xe = (n) => {
-    const a = parseFloat(n.target.value) / 100 * P;
-    j(a), w.current && !me && (w.current.currentTime = a);
-  }, Ee = () => V(!0), Le = () => {
-    w.current && (w.current.currentTime = H), V(!1);
-  }, Ae = (n) => {
-    const t = parseInt(n.target.value);
-    k(t), ae(t === 0);
-  }, Re = (n) => ue(parseFloat(n.target.value)), ze = () => ae(!S), Se = () => {
-    p.current && (document.fullscreenElement ? document.exitFullscreen() : p.current.requestFullscreen().catch((n) => console.error("Fullscreen failed:", n)));
-  }, Be = (n, t) => {
-    Y((a) => ({ ...a, [n]: t })), L.current && (n === "bass" && W.current && (W.current.gain.value = t), n === "mid" && re.current && (re.current.gain.value = t), n === "treble" && X.current && (X.current.gain.value = t));
-  }, je = () => Y({ bass: 0, mid: 0, treble: 0 }), Te = (n) => {
+  }, De = () => {
+    !N.current || !s || (U ? N.current.pause() : (ce.current && ce.current.state === "suspended" && ce.current.resume(), N.current.play().catch((n) => console.error("Play failed:", n))));
+  }, We = () => {
+    N.current && (N.current.pause(), N.current.currentTime = 0, a(!1), D(0), ie.current = 0, c.current = 0, w.current = 0, F.current = 0, ve());
+  }, Ue = (n) => {
+    const $ = parseFloat(n.target.value) / 100 * H;
+    D($), N.current && !fe && (N.current.currentTime = $);
+  }, Be = () => Ce(!0), je = () => {
+    N.current && (N.current.currentTime = G), Ce(!1);
+  }, Ge = (n) => {
+    const f = parseInt(n.target.value);
+    z(f), Me(f === 0);
+  }, Xe = (n) => Ee(parseFloat(n.target.value)), rt = () => Me(!M), Ve = () => {
+    Te.current && (document.fullscreenElement ? document.exitFullscreen() : Te.current.requestFullscreen().catch((n) => console.error("Fullscreen failed:", n)));
+  }, Le = (n, f) => {
+    ze(($) => ({ ...$, [n]: f })), ce.current && (n === "bass" && pe.current && (pe.current.gain.value = f), n === "mid" && de.current && (de.current.gain.value = f), n === "treble" && ke.current && (ke.current.gain.value = f));
+  }, $e = () => ze({ bass: 0, mid: 0, treble: 0 }), ee = (n) => {
     if (isNaN(n)) return "0:00";
-    const t = Math.floor(n / 60), a = Math.floor(n % 60);
-    return `${t}:${a.toString().padStart(2, "0")}`;
+    const f = Math.floor(n / 60), $ = Math.floor(n % 60);
+    return `${f}:${$.toString().padStart(2, "0")}`;
   };
-  if ($(() => {
-    (A && !z || x) && Ne();
-  }, [f]), ie && ie.length > 0)
-    return /* @__PURE__ */ e(Ve, { children: ie.map((n, t) => /* @__PURE__ */ c("div", { className: "ecp-video-error", children: [
-      /* @__PURE__ */ c("strong", { children: [
+  if (E(() => {
+    (ue && !U || R) && De();
+  }, [h]), me && me.length > 0)
+    return /* @__PURE__ */ e(Ft, { children: me.map((n, f) => /* @__PURE__ */ r("div", { className: "ecp-video-error", children: [
+      /* @__PURE__ */ r("strong", { children: [
         n[0],
         ":"
       ] }),
       " ",
       n[1]
-    ] }, t)) });
-  const be = u ? u.side : null, qe = be === "top" || be === "bottom";
+    ] }, f)) });
+  const he = v ? v.side : null, Se = he === "top" || he === "bottom";
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: p,
-      className: `ecp-video-wrapper${ee ? " ecp-video-wrapper--fullscreen" : ""}`,
-      style: { backgroundColor: A || O ? void 0 : h ? "#49494937" : "white" },
-      children: /* @__PURE__ */ c(
+      ref: Te,
+      className: `ecp-video-wrapper${_ ? " ecp-video-wrapper--fullscreen" : ""}`,
+      style: { backgroundColor: ue || te ? void 0 : A ? "#49494937" : "white" },
+      children: /* @__PURE__ */ r(
         "div",
         {
-          className: `ecp-video-inner${ee ? " ecp-video-inner--fullscreen" : ""}${O ? "" : " ecp-video-inner--padded"}`,
-          style: { background: A || O ? void 0 : h ? "#1a1a1ab0" : "#f5f5f5" },
+          className: `ecp-video-inner${_ ? " ecp-video-inner--fullscreen" : ""}${te ? "" : " ecp-video-inner--padded"}`,
+          style: { background: ue || te ? void 0 : A ? "#1a1a1ab0" : "#f5f5f5" },
           children: [
-            f.videoName && !ee && /* @__PURE__ */ e("div", { className: `ecp-video-name${h ? " ecp-video-name--dark" : " ecp-video-name--light"}`, children: l }),
-            /* @__PURE__ */ c("div", { className: `ecp-video-layout${qe ? " ecp-video-layout--col" : " ecp-video-layout--row"}${ee ? " ecp-video-layout--fullscreen" : ""}`, children: [
-              u && be === "top" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-top", ref: T }),
-              /* @__PURE__ */ c("div", { style: { display: "flex", flex: qe ? void 0 : 1, gap: "0.75rem" }, children: [
-                u && be === "left" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref: T }),
-                /* @__PURE__ */ c("div", { className: `ecp-video-el-wrap${h ? " ecp-video-el-wrap--dark" : " ecp-video-el-wrap--light"}`, children: [
-                  /* @__PURE__ */ c("video", { ref: w, className: "ecp-video-el", poster: C || void 0, children: [
+            h.videoName && !_ && /* @__PURE__ */ e("div", { className: `ecp-video-name${A ? " ecp-video-name--dark" : " ecp-video-name--light"}`, children: p }),
+            /* @__PURE__ */ r("div", { className: `ecp-video-layout${Se ? " ecp-video-layout--col" : " ecp-video-layout--row"}${_ ? " ecp-video-layout--fullscreen" : ""}`, children: [
+              v && he === "top" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-top", ref: B }),
+              /* @__PURE__ */ r("div", { style: { display: "flex", flex: Se ? void 0 : 1, gap: "0.75rem" }, children: [
+                v && he === "left" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref: B }),
+                /* @__PURE__ */ r("div", { className: `ecp-video-el-wrap${A ? " ecp-video-el-wrap--dark" : " ecp-video-el-wrap--light"}`, children: [
+                  /* @__PURE__ */ r("video", { ref: N, className: "ecp-video-el", poster: T || void 0, children: [
                     s && /* @__PURE__ */ e("source", { src: s }),
                     "Your browser does not support the video tag."
                   ] }),
-                  de && /* @__PURE__ */ e("div", { className: "ecp-video-eq-overlay", children: /* @__PURE__ */ c("div", { className: `ecp-video-eq-panel${h ? " ecp-video-eq-panel--dark" : " ecp-video-eq-panel--light"}`, children: [
-                    /* @__PURE__ */ e("h3", { className: `ecp-video-eq-title${h ? " ecp-video-eq-title--dark" : " ecp-video-eq-title--light"}`, children: "Equalizer" }),
-                    /* @__PURE__ */ e("div", { className: "ecp-video-eq-bands", children: ["bass", "mid", "treble"].map((n) => /* @__PURE__ */ c("div", { children: [
-                      /* @__PURE__ */ c("div", { className: "ecp-video-eq-band-header", children: [
-                        /* @__PURE__ */ e("span", { className: h ? "ecp-video-eq-label--dark" : "ecp-video-eq-label--light", children: n.charAt(0).toUpperCase() + n.slice(1) }),
-                        /* @__PURE__ */ c("span", { className: h ? "ecp-video-eq-label--dark" : "ecp-video-eq-label--light", children: [
+                  ye && /* @__PURE__ */ e("div", { className: "ecp-video-eq-overlay", children: /* @__PURE__ */ r("div", { className: `ecp-video-eq-panel${A ? " ecp-video-eq-panel--dark" : " ecp-video-eq-panel--light"}`, children: [
+                    /* @__PURE__ */ e("h3", { className: `ecp-video-eq-title${A ? " ecp-video-eq-title--dark" : " ecp-video-eq-title--light"}`, children: "Equalizer" }),
+                    /* @__PURE__ */ e("div", { className: "ecp-video-eq-bands", children: ["bass", "mid", "treble"].map((n) => /* @__PURE__ */ r("div", { children: [
+                      /* @__PURE__ */ r("div", { className: "ecp-video-eq-band-header", children: [
+                        /* @__PURE__ */ e("span", { className: A ? "ecp-video-eq-label--dark" : "ecp-video-eq-label--light", children: n.charAt(0).toUpperCase() + n.slice(1) }),
+                        /* @__PURE__ */ r("span", { className: A ? "ecp-video-eq-label--dark" : "ecp-video-eq-label--light", children: [
                           Q[n],
                           " dB"
                         ] })
                       ] }),
-                      /* @__PURE__ */ c("div", { className: "ecp-video-eq-range-row", children: [
-                        /* @__PURE__ */ e("span", { className: h ? "ecp-video-eq-bound--dark" : "ecp-video-eq-bound--light", children: "-20" }),
+                      /* @__PURE__ */ r("div", { className: "ecp-video-eq-range-row", children: [
+                        /* @__PURE__ */ e("span", { className: A ? "ecp-video-eq-bound--dark" : "ecp-video-eq-bound--light", children: "-20" }),
                         /* @__PURE__ */ e(
                           "input",
                           {
@@ -1267,122 +1845,122 @@ function wt({
                             min: "-20",
                             max: "20",
                             value: Q[n],
-                            onChange: (t) => Be(n, parseInt(t.target.value)),
+                            onChange: (f) => Le(n, parseInt(f.target.value)),
                             className: "ecp-video-eq-slider",
                             style: {
-                              background: `linear-gradient(to right, ${F} ${(Q[n] + 20) / 40 * 100}%, #e5e7eb ${(Q[n] + 20) / 40 * 100}%)`,
-                              "--thumb-color": F
+                              background: `linear-gradient(to right, ${S} ${(Q[n] + 20) / 40 * 100}%, #e5e7eb ${(Q[n] + 20) / 40 * 100}%)`,
+                              "--thumb-color": S
                             }
                           }
                         ),
-                        /* @__PURE__ */ e("span", { className: h ? "ecp-video-eq-bound--dark" : "ecp-video-eq-bound--light", children: "+20" })
+                        /* @__PURE__ */ e("span", { className: A ? "ecp-video-eq-bound--dark" : "ecp-video-eq-bound--light", children: "+20" })
                       ] })
                     ] }, n)) }),
-                    /* @__PURE__ */ c("div", { className: "ecp-video-eq-footer", children: [
-                      /* @__PURE__ */ e("button", { onClick: je, className: `ecp-video-eq-footer-btn${h ? " ecp-video-eq-footer-btn--dark" : " ecp-video-eq-footer-btn--light"}`, children: "Reset" }),
-                      /* @__PURE__ */ e("button", { onClick: () => R(!1), className: `ecp-video-eq-footer-btn${h ? " ecp-video-eq-footer-btn--dark" : " ecp-video-eq-footer-btn--light"}`, style: { marginLeft: "0.5rem" }, children: "Close" })
+                    /* @__PURE__ */ r("div", { className: "ecp-video-eq-footer", children: [
+                      /* @__PURE__ */ e("button", { onClick: $e, className: `ecp-video-eq-footer-btn${A ? " ecp-video-eq-footer-btn--dark" : " ecp-video-eq-footer-btn--light"}`, children: "Reset" }),
+                      /* @__PURE__ */ e("button", { onClick: () => X(!1), className: `ecp-video-eq-footer-btn${A ? " ecp-video-eq-footer-btn--dark" : " ecp-video-eq-footer-btn--light"}`, style: { marginLeft: "0.5rem" }, children: "Close" })
                     ] })
                   ] }) })
                 ] }),
-                u && be === "right" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref: T })
+                v && he === "right" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref: B })
               ] }),
-              u && be === "bottom" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-bottom", ref: T })
+              v && he === "bottom" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-bottom", ref: B })
             ] }),
-            f.seekbar && /* @__PURE__ */ e("div", { className: `ecp-video-seekbar${ee ? " ecp-video-seekbar--fullscreen" : ""}`, children: /* @__PURE__ */ c("div", { className: "ecp-video-seekbar-row", children: [
-              /* @__PURE__ */ e("span", { className: `ecp-video-time${h ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children: Te(H) }),
+            h.seekbar && /* @__PURE__ */ e("div", { className: `ecp-video-seekbar${_ ? " ecp-video-seekbar--fullscreen" : ""}`, children: /* @__PURE__ */ r("div", { className: "ecp-video-seekbar-row", children: [
+              /* @__PURE__ */ e("span", { className: `ecp-video-time${A ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children: ee(G) }),
               /* @__PURE__ */ e(
                 "input",
                 {
                   type: "range",
                   min: "0",
                   max: "100",
-                  value: P > 0 ? H / P * 100 : 0,
-                  onChange: xe,
-                  onMouseDown: Ee,
-                  onMouseUp: Le,
-                  onTouchStart: Ee,
-                  onTouchEnd: Le,
+                  value: H > 0 ? G / H * 100 : 0,
+                  onChange: Ue,
+                  onMouseDown: Be,
+                  onMouseUp: je,
+                  onTouchStart: Be,
+                  onTouchEnd: je,
                   disabled: !s,
                   className: "ecp-video-seek-input",
                   style: {
-                    background: s && P > 0 ? `linear-gradient(to right, ${F} ${H / P * 100}%, #e5e7eb ${H / P * 100}%)` : "#e5e7eb",
-                    "--thumb-color": F
+                    background: s && H > 0 ? `linear-gradient(to right, ${S} ${G / H * 100}%, #e5e7eb ${G / H * 100}%)` : "#e5e7eb",
+                    "--thumb-color": S
                   }
                 }
               ),
-              /* @__PURE__ */ e("span", { className: `ecp-video-time ecp-video-time--right${h ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children: Te(P) })
+              /* @__PURE__ */ e("span", { className: `ecp-video-time ecp-video-time--right${A ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children: ee(H) })
             ] }) }),
-            /* @__PURE__ */ c("div", { className: "ecp-video-controls", children: [
-              f.play && /* @__PURE__ */ c(
+            /* @__PURE__ */ r("div", { className: "ecp-video-controls", children: [
+              h.play && /* @__PURE__ */ r(
                 "button",
                 {
-                  onClick: Ne,
+                  onClick: De,
                   disabled: !s,
-                  className: `ecp-video-play-btn${te <= 400 ? " ecp-video-play-btn--compact" : ""}`,
-                  style: { backgroundColor: F },
+                  className: `ecp-video-play-btn${ae <= 400 ? " ecp-video-play-btn--compact" : ""}`,
+                  style: { backgroundColor: S },
                   children: [
-                    /* @__PURE__ */ c("div", { className: "ecp-video-play-icon-wrap", children: [
-                      /* @__PURE__ */ e(Pe, { size: 16, style: { position: "absolute", transform: z ? void 0 : "scale(0) translateY(2.5rem)", transition: "all 150ms" } }),
-                      /* @__PURE__ */ e(Me, { size: 16, style: { position: "absolute", transform: z ? "scale(0) translateY(-2.5rem)" : void 0, transition: "all 150ms" } })
+                    /* @__PURE__ */ r("div", { className: "ecp-video-play-icon-wrap", children: [
+                      /* @__PURE__ */ e(et, { size: 16, style: { position: "absolute", transform: U ? void 0 : "scale(0) translateY(2.5rem)", transition: "all 150ms" } }),
+                      /* @__PURE__ */ e(tt, { size: 16, style: { position: "absolute", transform: U ? "scale(0) translateY(-2.5rem)" : void 0, transition: "all 150ms" } })
                     ] }),
-                    te > 400 && (z ? "Pause" : "Play")
+                    ae > 400 && (U ? "Pause" : "Play")
                   ]
                 }
               ),
-              f.stop && /* @__PURE__ */ e("button", { onClick: ve, disabled: !s, className: `ecp-video-stop-btn${h ? " ecp-video-stop-btn--dark" : " ecp-video-stop-btn--light"}`, children: /* @__PURE__ */ e(Ge, { size: 16 }) }),
-              f.fullscreen && /* @__PURE__ */ c(
+              h.stop && /* @__PURE__ */ e("button", { onClick: We, disabled: !s, className: `ecp-video-stop-btn${A ? " ecp-video-stop-btn--dark" : " ecp-video-stop-btn--light"}`, children: /* @__PURE__ */ e(St, { size: 16 }) }),
+              h.fullscreen && /* @__PURE__ */ r(
                 "button",
                 {
-                  onClick: Se,
-                  className: `ecp-video-fullscreen-btn${h ? " ecp-video-fullscreen-btn--dark" : " ecp-video-fullscreen-btn--light"}${te >= 800 ? " ecp-video-fullscreen-btn--wide" : ""}`,
+                  onClick: Ve,
+                  className: `ecp-video-fullscreen-btn${A ? " ecp-video-fullscreen-btn--dark" : " ecp-video-fullscreen-btn--light"}${ae >= 800 ? " ecp-video-fullscreen-btn--wide" : ""}`,
                   children: [
-                    ee ? /* @__PURE__ */ e(at, { size: 16 }) : /* @__PURE__ */ e(rt, { size: 16 }),
-                    /* @__PURE__ */ e("span", { style: { display: te < 800 ? "none" : "block" }, children: ee ? "Exit" : "Full" })
+                    _ ? /* @__PURE__ */ e(nr, { size: 16 }) : /* @__PURE__ */ e(tr, { size: 16 }),
+                    /* @__PURE__ */ e("span", { style: { display: ae < 800 ? "none" : "block" }, children: _ ? "Exit" : "Full" })
                   ]
                 }
               ),
-              f.equalizer && /* @__PURE__ */ c(
+              h.equalizer && /* @__PURE__ */ r(
                 "button",
                 {
-                  onClick: () => R(!de),
+                  onClick: () => X(!ye),
                   disabled: !s,
-                  className: `ecp-video-eq-toggle-btn${de ? " ecp-video-eq-toggle-btn--on" : " ecp-video-eq-toggle-btn--off"}${te >= 700 ? " ecp-video-eq-toggle-btn--wide" : ""}`,
-                  style: de ? { backgroundColor: F } : {},
+                  className: `ecp-video-eq-toggle-btn${ye ? " ecp-video-eq-toggle-btn--on" : " ecp-video-eq-toggle-btn--off"}${ae >= 700 ? " ecp-video-eq-toggle-btn--wide" : ""}`,
+                  style: ye ? { backgroundColor: S } : {},
                   children: [
-                    /* @__PURE__ */ e(Fe, { size: 16 }),
-                    /* @__PURE__ */ e("span", { style: { display: te < 700 ? "none" : "block" }, children: "EQ" })
+                    /* @__PURE__ */ e(Je, { size: 16 }),
+                    /* @__PURE__ */ e("span", { style: { display: ae < 700 ? "none" : "block" }, children: "EQ" })
                   ]
                 }
               ),
-              f.speed && /* @__PURE__ */ e("div", { className: "ecp-video-speed-wrap", children: /* @__PURE__ */ e("select", { value: oe, onChange: Re, className: `ecp-video-speed-select${h ? " ecp-video-speed-select--dark" : " ecp-video-speed-select--light"}`, children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((n) => /* @__PURE__ */ c("option", { value: n, className: h ? "ecp-video-speed-option--dark" : "ecp-video-speed-option--light", children: [
+              h.speed && /* @__PURE__ */ e("div", { className: "ecp-video-speed-wrap", children: /* @__PURE__ */ e("select", { value: Z, onChange: Xe, className: `ecp-video-speed-select${A ? " ecp-video-speed-select--dark" : " ecp-video-speed-select--light"}`, children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((n) => /* @__PURE__ */ r("option", { value: n, className: A ? "ecp-video-speed-option--dark" : "ecp-video-speed-option--light", children: [
                 n,
                 "x"
               ] }, n)) }) }),
-              f.volume && /* @__PURE__ */ c("div", { className: "ecp-video-volume", children: [
-                /* @__PURE__ */ e("button", { onClick: ze, className: "ecp-video-mute-btn", children: S || D === 0 ? /* @__PURE__ */ e(_e, { size: 20, className: h ? "ecp-video-mute-icon--dark" : "ecp-video-mute-icon--light" }) : /* @__PURE__ */ e(De, { size: 20, className: h ? "ecp-video-mute-icon--dark" : "ecp-video-mute-icon--light" }) }),
+              h.volume && /* @__PURE__ */ r("div", { className: "ecp-video-volume", children: [
+                /* @__PURE__ */ e("button", { onClick: rt, className: "ecp-video-mute-btn", children: M || O === 0 ? /* @__PURE__ */ e(ot, { size: 20, className: A ? "ecp-video-mute-icon--dark" : "ecp-video-mute-icon--light" }) : /* @__PURE__ */ e(lt, { size: 20, className: A ? "ecp-video-mute-icon--dark" : "ecp-video-mute-icon--light" }) }),
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "range",
                     min: "0",
                     max: "100",
-                    value: D,
-                    onChange: Ae,
+                    value: O,
+                    onChange: Ge,
                     className: "ecp-video-vol-slider",
                     style: {
-                      background: `linear-gradient(to right, ${F} ${D}%, #e5e7eb ${D}%)`,
-                      "--thumb-color": F,
-                      display: te < 460 ? "none" : "block"
+                      background: `linear-gradient(to right, ${S} ${O}%, #e5e7eb ${O}%)`,
+                      "--thumb-color": S,
+                      display: ae < 460 ? "none" : "block"
                     }
                   }
                 ),
-                /* @__PURE__ */ c(
+                /* @__PURE__ */ r(
                   "span",
                   {
-                    className: `ecp-video-vol-pct${h ? " ecp-video-vol-pct--dark" : " ecp-video-vol-pct--light"}`,
-                    style: { display: te < 800 ? "none" : "block" },
+                    className: `ecp-video-vol-pct${A ? " ecp-video-vol-pct--dark" : " ecp-video-vol-pct--light"}`,
+                    style: { display: ae < 800 ? "none" : "block" },
                     children: [
-                      D,
+                      O,
                       "%"
                     ]
                   }
@@ -1395,32 +1973,32 @@ function wt({
     }
   );
 }
-function Nt() {
-  const [s, l] = m(null), [u, v] = m("No track loaded"), [C, f] = m("purple"), [y, O] = m(!1), [x, F] = m(!1), [I, z] = m("light"), E = b(null);
-  return /* @__PURE__ */ e("div", { className: "ecp-page-wrapper", style: { backgroundColor: I === "dark" ? "#222" : "white" }, children: /* @__PURE__ */ c("div", { className: "ecp-demo-container", children: [
-    y && /* @__PURE__ */ e(ht, { theme: C, setTheme: f, close: () => O(!1) }),
-    /* @__PURE__ */ c("div", { className: "ecp-container-glass", children: [
-      /* @__PURE__ */ c("div", { className: "ecp-demo-header", children: [
-        /* @__PURE__ */ c("div", { children: [
-          /* @__PURE__ */ e("h1", { className: `ecp-demo-title${I === "dark" ? " ecp-demo-title--dark" : ""}`, children: "Audio Visualizer" }),
+function Nr() {
+  const [s, p] = b(null), [v, y] = b("No track loaded"), [T, h] = b("purple"), [q, te] = b(!1), [R, S] = b(!1), [V, U] = b("light"), a = u(null);
+  return /* @__PURE__ */ e("div", { className: "ecp-page-wrapper", style: { backgroundColor: V === "dark" ? "#222" : "white" }, children: /* @__PURE__ */ r("div", { className: "ecp-demo-container", children: [
+    q && /* @__PURE__ */ e(hr, { theme: T, setTheme: h, close: () => te(!1) }),
+    /* @__PURE__ */ r("div", { className: "ecp-container-glass", children: [
+      /* @__PURE__ */ r("div", { className: "ecp-demo-header", children: [
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("h1", { className: `ecp-demo-title${V === "dark" ? " ecp-demo-title--dark" : ""}`, children: "Audio Visualizer" }),
           /* @__PURE__ */ e("p", { className: "ecp-demo-subtitle", children: "Professional frequency analyzer" })
         ] }),
-        /* @__PURE__ */ c("button", { onClick: () => O(!y), className: "ecp-theme-btn", children: [
+        /* @__PURE__ */ r("button", { onClick: () => te(!q), className: "ecp-theme-btn", children: [
           /* @__PURE__ */ e("span", { children: "🎨" }),
           " Themes"
         ] })
       ] }),
       /* @__PURE__ */ e(
-        vt,
+        mr,
         {
           audio: s || void 0,
-          name: u || void 0,
+          name: v || void 0,
           author: "K.Prabhasha",
-          theme: C,
+          theme: T,
           autoPlay: !1,
           thumbnail: "https://cdn-icons-png.flaticon.com/512/3845/3845874.png",
-          mode: I,
-          transparent: x,
+          mode: V,
+          transparent: R,
           volume: 70,
           controls: {
             play: !0,
@@ -1434,7 +2012,7 @@ function Nt() {
         }
       ),
       /* @__PURE__ */ e(
-        bt,
+        fr,
         {
           audio: s || "",
           width: 400,
@@ -1445,7 +2023,7 @@ function Nt() {
         }
       ),
       /* @__PURE__ */ e(
-        gt,
+        gr,
         {
           audio: s || "",
           thumbnail: "https://cdn-icons-png.flaticon.com/512/17524/17524837.png",
@@ -1454,37 +2032,37 @@ function Nt() {
           background: "#c0ffefff"
         }
       ),
-      /* @__PURE__ */ c("div", { className: "ecp-demo-actions", children: [
-        /* @__PURE__ */ e("input", { type: "file", ref: E, onChange: (P) => {
-          var D;
-          const M = (D = P.target.files) == null ? void 0 : D[0];
-          if (M) {
-            const k = URL.createObjectURL(M);
-            l(k), v(M.name);
+      /* @__PURE__ */ r("div", { className: "ecp-demo-actions", children: [
+        /* @__PURE__ */ e("input", { type: "file", ref: a, onChange: (H) => {
+          var O;
+          const Y = (O = H.target.files) == null ? void 0 : O[0];
+          if (Y) {
+            const z = URL.createObjectURL(Y);
+            p(z), y(Y.name);
           }
         }, accept: "audio/*", className: "ecp-file-input-hidden" }),
-        /* @__PURE__ */ c("button", { onClick: () => {
-          var P;
-          return (P = E.current) == null ? void 0 : P.click();
+        /* @__PURE__ */ r("button", { onClick: () => {
+          var H;
+          return (H = a.current) == null ? void 0 : H.click();
         }, className: "ecp-action-btn", children: [
-          /* @__PURE__ */ e(pt, { size: 16 }),
+          /* @__PURE__ */ e(dr, { size: 16 }),
           "Load Audio"
         ] }),
-        /* @__PURE__ */ e("button", { onClick: () => z(I === "dark" ? "light" : "dark"), className: "ecp-action-btn", children: I === "dark" ? "Light" : "Dark" }),
-        /* @__PURE__ */ c("button", { onClick: () => F(!x), className: "ecp-action-btn", children: [
+        /* @__PURE__ */ e("button", { onClick: () => U(V === "dark" ? "light" : "dark"), className: "ecp-action-btn", children: V === "dark" ? "Light" : "Dark" }),
+        /* @__PURE__ */ r("button", { onClick: () => S(!R), className: "ecp-action-btn", children: [
           "Transparent: ",
-          String(x)
+          String(R)
         ] })
       ] })
     ] })
   ] }) });
 }
 export {
-  Nt as DemoVisualizePlayer,
-  gt as NanoAudioPlayer,
-  ht as ThemeSelector,
-  wt as VideoPlayer,
-  vt as VisualizePlayer,
-  bt as WaveAudioPlayer,
-  ge as themes
+  Nr as DemoVisualizePlayer,
+  gr as NanoAudioPlayer,
+  hr as ThemeSelector,
+  qr as VideoPlayer,
+  mr as VisualizePlayer,
+  fr as WaveAudioPlayer,
+  Ae as themes
 };