body{background:radial-gradient(ellipse at 50% -5%,#c5d5ff,#96abeb,#768aa9 70%,#f5f0ff) fixed;min-height:100vh;padding:0;margin:0}:root{--color-primary: #4caf50;--color-primary-rgb: 76, 175, 80;--color-primary-hover: #45a049;--color-master: #2196F3;--color-master-hover: #1976D2;--color-master-disabled: #a8c1d9;--color-warning: rgb(182, 104, 1);--color-disabled: #cccccc;--color-background: rgb(0, 18, 74);--color-surface: #f5f5f5;--color-surface-secondary: #f0f0f0;--color-border: #ddd;--color-text: #000;--color-text-title: #0e8ee8;--color-close-icon: #fff;--color-white: #fff;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 12px;--border-radius: 5px;--range-value-size: .85rem;--input-number-width: 70px;--range-min-width: 200px;--value-display-width: 50px;--panel-radius: 10px;--panel-gap: 10px;--panel-background: rgb(51 95 143 / 83%);--panel-shadow: 0 2px 4px rgba(0, 0, 0, .1);--controls-shadow: inset 0 2px 4px 0px rgb(170 170 170);--color-grid-circle: rgba(227, 16, 72, .658);--color-music-note: #2196F3;--color-grid-line: #ddddddb5}.theme-toggle-container{display:flex;gap:5px}.theme-icon{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:24px;width:24px}.theme-icon--moon,.theme-icon--sun{grid-row:1;grid-column:1;width:24px;height:24px;transition:opacity .3s ease}.theme-icon--moon{opacity:0}.theme-icon--sun{opacity:1}button{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius);background-color:var(--color-primary);color:var(--color-white);cursor:pointer;transition:all .3s ease;white-space:nowrap}button:hover:not(:disabled){background-color:var(--color-primary-hover);transform:translateY(-1px)}button:disabled{background-color:var(--color-disabled);color:#666;cursor:not-allowed;transform:none;opacity:.7;box-shadow:none}button:active:not(:disabled){transform:translateY(1px)}button:focus{outline:2px solid var(--color-primary);outline-offset:2px}button:focus:not(:focus-visible){outline:none}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:4px;background:transparent;outline:none;cursor:pointer;position:relative;flex:1;min-width:var(--range-min-width);max-width:100%}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,var(--color-primary) var(--range-progress, 0%),#ddd var(--range-progress, 0%))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform .1s;margin-top:-4px}input[type=range]::-moz-range-track{width:100%;height:8px;border-radius:4px;background:#ddd}input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--color-primary)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform .1s;margin-top:-4px}input[type=range]::-webkit-slider-thumb:hover,input[type=range]::-moz-range-thumb:hover{transform:scale(1.3)}input[type=range]::-webkit-slider-thumb:active,input[type=range]::-moz-range-thumb:active{transform:scale(1.1)}.control-group{background:var(--color-surface);border-radius:var(--panel-radius);padding:var(--spacing-md);box-shadow:var(--panel-shadow);margin-bottom:.5rem;flex:1}.control-content{display:flex;gap:var(--spacing-sm);padding:var(--spacing-md) 0 0 0;justify-content:space-between;flex-wrap:wrap}.control-group:not(.control-group .control-group){border-radius:5px;margin-bottom:0;box-shadow:0 6px 20px #335f8f38,0 2px 8px #00000014}.control-group h4{margin:0 0 var(--spacing-md) 0;color:var(--color-text);font-size:1.05rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:400}.icon-button{position:relative;width:32px;height:32px;min-width:32px;padding:8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary);border:none;cursor:pointer;transition:all .2s ease;flex-shrink:0}.mute-icon,.unmute-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:0}.spatial-position-circle{position:absolute;width:20px;height:20px;background:var(--color-primary);border-radius:50%;top:40px;left:40px;cursor:grab;transform:translate(-50%,-50%);transition:background-color .2s;z-index:10}.spatial-position-circle:active{cursor:grabbing;background:var(--color-primary-hover)}.spatial-controls{display:flex;justify-content:center;margin-top:-.5rem}.spatial-coordinates{font-size:.75rem;color:var(--color-text)}.spatial-settings{margin-top:var(--spacing-md);display:flex;flex-wrap:wrap;margin-left:25px;flex:1;gap:var(--spacing-md)}.spatial-setting-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.spatial-setting-group label{font-size:.9rem;color:var(--color-text)}.spatial-setting-group select,.spatial-setting-group input{padding:var(--spacing-xs);border:1px solid var(--color-border);border-radius:var(--border-radius);background:var(--color-surface)}.spatial-setting-group input[type=number]{width:100px}.spatial-grid-container{position:relative;display:flex;flex-direction:column;gap:1rem}.spatial-grid{position:relative;width:100px;height:100px;background:linear-gradient(to right,var(--color-grid-line) .5px,transparent 1px) 0 0 / 10.1px 100%,linear-gradient(to bottom,var(--color-grid-line) .5px,transparent .5px) 0 0 / 100% 10.1px;border:2px solid #c3c3c3;cursor:pointer}.spatial-grid:before,.spatial-grid:after{content:"";position:absolute;z-index:8;background-color:#151594}.spatial-grid:before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}.spatial-grid:after{width:2px;height:100%;left:50%;top:0;transform:translate(-50%)}.front-line{width:100px;text-align:center;border-bottom:4px solid rgb(99,99,99);font-size:.75rem}.vertical-slider-container{display:block;left:55px;bottom:108px;position:absolute;gap:.5rem;margin-left:1rem}.vertical-slider-container input[type=range]{width:100px;min-width:100px}.vertical-slider{transform:rotate(270deg);width:100px;height:8px;margin:0;cursor:pointer}.step-button{border-radius:50%;width:25px;height:25px}body.dark-theme{background:radial-gradient(ellipse at 50% -5%,#0e5e4e,#205e44 25%,#0d351c 55%,#050414);--color-primary: #66bb6a;--color-primary-rgb: 102, 187, 106;--color-primary-hover: #4caf50;--color-master: #42a5f5;--color-master-hover: #2196f3;--color-master-disabled: #64b5f6;--color-warning: #ffb74d;--color-disabled: #ffffffad;--color-background: #121212;--color-surface: #1e1e1e;--color-surface-secondary: #2d2d2d;--color-border: #404040;--color-text: #ecebeb;--color-text-title: #ffc061;--color-close-icon: #000;--color-text-secondary: #b0b0b0;--panel-shadow: 0 2px 4px rgba(0, 0, 0, .2);--controls-shadow: inset 0 2px 4px 0px rgba(0, 0, 0, .2);--panel-background: #00000052;--color-grid-circle: rgba(227, 16, 72, 1);--color-music-note: rgb(182, 104, 1)}body.dark-theme .theme-icon--moon{opacity:1;stroke:#ffb74d}body.dark-theme .theme-icon--sun{opacity:0}body.dark-theme .control-group{background:#1e1e1eb5;box-shadow:var(--panel-shadow);border:1px solid rgb(86,86,86)}body.dark-theme .sound-control .control-group{background:transparent;border:none;box-shadow:none;margin-bottom:0;padding:var(--spacing-md) 0}body.dark-theme .control-content{color:var(--color-text)}body.dark-theme .control-group:not(.control-group .control-group){border:none;box-shadow:0 6px 20px #00000080,0 2px 8px #0000004d}body.dark-theme .copyright,body.dark-theme .spatial-setting-group select,.spatial-setting-group input{color:var(--color-text)}body.dark-theme .spatial-position-circle{background:var(--color-grid-circle)}body.dark-theme .spatial-grid:before,body.dark-theme .spatial-grid:after{background-color:#10ff24}@media (min-width: 769px){.control-group{min-width:250px}}.audio-controller{width:100px;margin-right:.25rem;flex-shrink:0}.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))}}