#soundControlsContainer{display:flex;flex-direction:column;gap:.5rem;display:none}#soundControlsContainer.show{display:flex}.sound-manager-demo{font-family:Arial,sans-serif;max-width:1200px;margin:0 auto;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--panel-gap)}.spinner{display:none;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preload-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:36px}.preload-btn.loading{opacity:.8}.preload-btn.loading .spinner{display:block}.preload-btn.loading .button-text{opacity:.7}.volume-controls{padding-top:var(--spacing-md);flex:.8;display:flex}.button-group-global{display:flex;flex-direction:row;align-items:center;gap:5px;margin-right:20px}.sound-manager-header{padding:var(--spacing-sm) 0;margin-bottom:var(--spacing-md)}.demo-nav{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.nav-back-link{font-size:.85rem;color:var(--color-primary);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:4px;transition:opacity .2s}.nav-back-link:hover{opacity:.8;text-decoration:underline}.title-container{display:flex;align-items:center;gap:var(--spacing-sm)}.main-title-container{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.main-title{font-size:1.25rem;font-weight:600;margin:0;color:var(--color-primary)}.header-info{display:flex;flex-direction:column;gap:.5rem}.header-info--title{display:flex;flex-direction:row;gap:.85rem}.version-badge{background:var(--color-primary);color:var(--color-surface);padding:.2rem .5rem;border-radius:var(--border-radius);font-size:.8rem;font-weight:500}.subtitle{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-xs);font-size:.9rem;color:var(--color-text-secondary, var(--color-text))}.tagline{font-style:italic}.copyright{font-size:.8rem}.sound-manager-intro{margin-bottom:var(--spacing-lg)}.sound-manager-intro .control-content{margin-top:var(--spacing-md)}.links-container{display:flex;align-items:center;gap:var(--spacing-md)}.header-link{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:.3rem .6rem;border-radius:var(--border-radius);text-decoration:none;color:var(--color-text);font-size:.9rem;font-weight:500;transition:all .2s ease;background:var(--color-surface);border:1px solid var(--color-border)}.header-link:hover{background:var(--color-surface-hover, var(--color-surface-secondary));transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.header-link svg{opacity:.8}.docs-link{color:var(--color-primary)}.npm-link{color:#cb3837}.subtitle{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-sm);padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.theme-toggle{top:20px;right:20px;display:flex;align-items:center;margin-right:.5rem}.theme-switch{position:relative;display:inline-block;width:40px;height:20px}.theme-switch input{opacity:0;width:0;height:0}.theme-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background-color:#ccc;transition:.4s;border-radius:20px}.theme-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.theme-slider{background-color:#2196f3}input:checked+.theme-slider:before{transform:translate(20px)}.theme-slider.round{border-radius:20px}.theme-slider.round:before{border-radius:50%}.audio-controller{width:100px;margin-right:.25rem}.audio-controller svg{width:100%;border-radius:.25rem;height:auto;display:block}.control-knob{transform-origin:77px 75px;animation:rotateKnob 8s infinite ease-in-out}.bass-handle{animation:moveBass 5s infinite ease-in-out}.mid-handle{animation:moveMid 7s infinite ease-in-out;animation-delay:1s}.treble-handle{animation:moveTreble 6s infinite ease-in-out;animation-delay:2s}.wave-bar{fill:#999;transform-origin:bottom;animation:wave .8s infinite ease-in-out;transform:scaleY(var(--initial-scale))}.wave-bar:nth-child(odd){fill:#555}@keyframes rotateKnob{0%,to{transform:translate(518px,356.5px) rotate(0)}20%{transform:translate(518px,356.5px) rotate(130deg)}40%{transform:translate(518px,356.5px) rotate(-10deg)}60%{transform:translate(518px,356.5px) rotate(45deg)}80%{transform:translate(518px,356.5px) rotate(-90deg)}}@keyframes moveBass{0%,to{transform:translateY(0)}25%{transform:translateY(-30px)}50%{transform:translateY(80px)}75%{transform:translateY(-20px)}}@keyframes moveMid{0%,to{transform:translateY(0)}25%{transform:translateY(-40px)}50%{transform:translateY(40px)}75%{transform:translateY(-30px)}}@keyframes moveTreble{0%,to{transform:translateY(0)}25%{transform:translateY(-80px)}50%{transform:translateY(10px)}75%{transform:translateY(-20px)}}@keyframes wave{0%,to{transform:scaleY(var(--initial-scale))}50%{transform:scaleY(var(--peak-scale))}}@media (max-width: 768px){.subtitle{flex-direction:column;gap:var(--spacing-sm);text-align:center}.links-container{justify-content:center;flex-wrap:wrap}.tagline{order:-1}}@media (max-width: 460px){.header-link{font-size:.8rem;padding:.2rem .4rem}.links-container{gap:var(--spacing-sm)}}@media (max-width: 768px){.sound-manager-demo{padding:var(--spacing-sm)}.sound-manager-intro{text-align:center}}@media (max-width: 460px){.button-group-global{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}}#masterVolumeValue,#masterPanValue{white-space:nowrap;font-size:var(--range-value-size)}#masterVolumeValue{margin-left:10px}body.dark-theme .master-controls{color:var(--color-text);background-color:var(--color-surface)}body .control-group.sticky.master-controls.is-stuck{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:#ff7519ba;box-shadow:1px 1px 20px 1px #000c}body.dark-theme .control-group.sticky.master-controls.is-stuck{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#masterControlContainer{top:10px;z-index:100;position:sticky}.control-group.master-controls input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--color-master) var(--range-progress, 0%),#ddd var(--range-progress, 0%))}.control-group.master-controls input[type=range]::-webkit-slider-thumb{background:var(--color-master)}.control-group.master-controls input[type=range]::-moz-range-thumb{background:var(--color-master)}.control-group.master-controls input[type=range]::-ms-thumb{background:var(--color-master)}.control-group.master-controls .icon-button,.control-group.master-controls button{background:var(--color-master)}.control-group.master-controls button:disabled{background-color:var(--color-master-disabled)}.control-group.master-controls button:hover:not(:disabled){background:var(--color-master-hover)}.control-group.master-controls button:focus{outline-color:var(--color-master)}body.dark-theme .control-group.master-controls{background:#4caf4f3f}.sound-control{margin-bottom:1rem}.sound-control-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-bottom:1px solid var(--color-border)}.sound-control-header.sprite-header{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.1),transparent);border-left:3px solid var(--color-primary)}.header-content{display:flex;align-items:center;gap:.5rem}.sound-title{display:flex;align-items:center;gap:.75rem}.sound-title h4{margin:0;font-size:1.125rem;color:var(--color-text-title);font-weight:500}.sound-title-content{display:flex;gap:.25rem}.music-note{color:var(--color-music-note)}.sprite-badge{display:flex;align-items:center;gap:.25rem;background-color:var(--color-primary);color:#fff;padding:.25rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:500}.sprite-badge svg{width:14px;height:14px}.icon-button.close-btn{top:-5px;right:-5px;position:relative;transform:scale(.8);background:var(--color-warning)}.close-icon{color:var(--color-close-icon)}.icon-button.close-btn:hover:not(:disabled){background:var(--color-warning);transform:scale(.9)}.icon-button:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px)}.icon-button:disabled{background:var(--color-disabled);cursor:not-allowed}.slider-container{display:flex;align-items:center;gap:.5rem;flex:1;min-width:200px}.volume-slider-container{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:unset;width:40px}.volume-slider{writing-mode:bt-lr;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;width:8px;height:120px;padding:0;cursor:pointer}.volume-value{min-width:30px;white-space:nowrap;text-align:right;font-size:var(--range-value-size)}.volume-value-top{text-align:center;color:var(--color-primary);font-weight:500}.volume-value-bottom{text-align:center}.time-display{white-space:nowrap;font-size:var(--range-value-size)}.button-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.pan-value{min-width:60px;text-align:right;white-space:nowrap;font-size:var(--range-value-size)}.control-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:var(--spacing-xs) 0}.collapse-btn{transition:transform .3s ease}.collapsed+.control-content{display:none}.spatial-content{transition:height .3s ease-out;gap:1rem}.spatial-content.collapsed{display:none}.collapsed .collapse-btn svg{transform:rotate(-90deg)}.loop-controls{display:flex;flex-direction:column;gap:.5rem}.checkbox-container{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-label{font-size:var(--range-value-size);-webkit-user-select:none;user-select:none}.max-loops-select{padding:.25rem;border:1px solid var(--color-border);border-radius:4px;margin-right:.5rem}.loop-count-container{display:flex;align-items:center;gap:.5rem}.max-loops-input{width:60px;padding:.25rem;border:1px solid var(--color-border);border-radius:4px}.loop-settings{margin-left:1rem;display:flex;flex-direction:column;gap:.5rem}.playback-rate-container{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.playback-rate-input{width:60px;padding:.25rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text)}.playback-rate-input:focus{outline:none;border-color:var(--color-primary)}@media (max-width: 768px){.button-group{justify-content:center;flex-wrap:wrap}.slider-container{flex-direction:row;justify-content:space-between}}body.dark-theme .sound-control{background:#1e1e1eb5;border:1px solid var(--color-border);border-radius:var(--panel-radius);box-shadow:0 6px 20px #00000080,0 2px 8px #0000004d}body.dark-theme .sound-control>.control-content{border-top:1px solid var(--color-border);margin-top:0}body.dark-theme .sound-control>.control-content:first-of-type{border-top:none}#waveVisualizerContainer{padding:0;margin-bottom:.5rem}.wave-visualizer{position:relative;background:var(--visualizer-bg, #0d0d1a);border-radius:var(--panel-radius);border:1px solid rgb(182 182 182 / 28%);padding:12px 16px 10px;margin:0;box-shadow:inset 2px 2px 10px 2px #00000070}.wave-visualizer__label{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-title);margin-bottom:10px;-webkit-user-select:none;user-select:none}.wave-visualizer__canvas{display:block;width:100%;height:72px;border-radius:6px}body:not(.dark-theme) .wave-visualizer{--visualizer-bg: #f0f2ff;--visualizer-label: rgba(74, 107, 255, .55)}body.dark-theme .wave-visualizer{border:1px solid rgb(86,86,86)}