body{background:radial-gradient(ellipse at 50% -5%,#c5d5ff,#96abeb,#768aa9 70%,#f5f0ff) fixed;min-height:100vh;padding:0;margin:0}::selection{background:rgba(var(--color-primary-rgb, 76, 175, 80),.28);color:inherit}*{scrollbar-width:thin;scrollbar-color:rgba(128,149,163,.55) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background-clip:content-box;background-color:#8095a380}*::-webkit-scrollbar-thumb:hover{background-color:#8095a3cc}html{scroll-behavior:smooth;scroll-padding-top:96px}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}:root{--color-primary: #4caf50;--color-primary-rgb: 76, 175, 80;--color-primary-hover: #45a049;--color-primary-text: #2e7d32;--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;--color-text-muted: #56616b;--color-meter-track: #dfe3e6;--color-meter-gap: #f5f5f5;--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;align-items:center}.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;color:#e8890c;background:linear-gradient(150deg,#fffdf6,#ffe6b8);border:1px solid rgba(232,137,12,.5);box-shadow:0 2px 6px #00000026,inset 0 1px #ffffffe6;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background .4s ease,border-color .4s ease,color .4s ease}.theme-switch input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.theme-switch:hover{transform:translateY(-2px);box-shadow:0 6px 14px #e8890c59,inset 0 1px #ffffffe6}.theme-switch:active{transform:translateY(0) scale(.92)}.theme-switch input:focus-visible~.theme-switch__icons{outline:2px solid currentColor;outline-offset:8px;border-radius:50%}.theme-switch:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:1px solid currentColor;opacity:0;transform:scale(.75);pointer-events:none;transition:opacity .3s ease,transform .3s ease}.theme-switch:hover:after{opacity:.5;transform:scale(1)}.theme-switch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none}.theme-switch:active:before{animation:themeSwitchRipple .55s ease-out}@keyframes themeSwitchRipple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}.theme-switch__icons{position:relative;width:22px;height:22px}.theme-icon{position:absolute;top:0;right:0;bottom:0;left:0;width:22px;height:22px;transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1)}.theme-icon--sun{opacity:1;transform:rotate(0) scale(1)}.theme-icon--moon{opacity:0;transform:rotate(-90deg) scale(.3)}body.dark-theme .theme-icon--sun{opacity:0;transform:rotate(90deg) scale(.3)}body.dark-theme .theme-icon--moon{opacity:1;transform:rotate(0) scale(1)}body:not(.dark-theme) .theme-switch:hover .theme-icon--sun{transform:rotate(45deg) scale(1.1)}body.dark-theme .theme-switch:hover .theme-icon--moon{transform:rotate(-20deg) scale(1.1)}.theme-switch__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (prefers-reduced-motion: reduce){.theme-switch,.theme-switch:after,.theme-icon{transition-duration:.01ms}.theme-switch:hover{transform:none}.theme-switch:active:before{animation:none}body:not(.dark-theme) .theme-switch:hover .theme-icon--sun,body.dark-theme .theme-switch:hover .theme-icon--moon{transform:none}}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-primary-text: #8fd894;--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;--color-text-muted: #9aa7ad;--color-meter-track: #2a2f33;--color-meter-gap: #1e1e1e;--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-switch{color:#ffc46b;background:linear-gradient(150deg,#2a3358,#161c38);border-color:#ffc46b80;box-shadow:0 2px 8px #00000073,inset 0 1px #ffffff1a}body.dark-theme .theme-switch:hover{box-shadow:0 6px 16px #ffc46b4d,inset 0 1px #ffffff1f}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}.demo-nav{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.breadcrumb__item{display:flex;align-items:center}.breadcrumb__link{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 11px;border-radius:999px;border:1px solid rgba(var(--color-primary-rgb),.45);background:rgba(var(--color-primary-rgb),.1);color:var(--color-primary);font-size:.82rem;font-weight:700;text-decoration:none;line-height:1.2;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}.breadcrumb__link:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);box-shadow:0 3px 10px -3px rgba(var(--color-primary-rgb),.9)}.breadcrumb__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.breadcrumb__arrow{flex-shrink:0;transition:transform .18s ease}.breadcrumb__link:hover .breadcrumb__arrow{transform:translate(-3px)}.breadcrumb__home-icon{flex-shrink:0;opacity:.9}.breadcrumb__sep{display:flex;align-items:center;color:var(--color-text-secondary, #6b7280);opacity:.7}.breadcrumb__current{font-size:.82rem;font-weight:600;color:var(--color-text-secondary, #6b7280)}body.dark-theme .breadcrumb__link{background:rgba(var(--color-primary-rgb),.18);border-color:rgba(var(--color-primary-rgb),.55);color:#7fdc83}body.dark-theme .breadcrumb__link:hover{background:var(--color-primary);color:#06210a}body.dark-theme .breadcrumb__current,body.dark-theme .breadcrumb__sep{color:#ffffffb3}@media (min-width: 769px){.control-group{min-width:250px}}.audio-controller{--ac-accent: var(--ac-page-accent, var(--color-primary, #4a6bff));--ac-body-top: #6f7684;--ac-body-mid: #4d5361;--ac-body-bottom: #2f3440;--ac-edge: rgba(0, 0, 0, .55);--ac-shine: rgba(255, 255, 255, .3);--ac-screen-top: #0b1016;--ac-screen-bottom: #05080c;--ac-grid: color-mix(in srgb, var(--ac-accent) 22%, transparent);--ac-metal: #9aa2b1;--ac-metal-dark: #3a3f4b;width:100px;margin-right:.25rem;flex-shrink:0}.audio-controller svg{width:100%;height:auto;display:block;border-radius:.35rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.ac-body-top{stop-color:var(--ac-body-top)}.ac-body-mid{stop-color:var(--ac-body-mid)}.ac-body-bottom{stop-color:var(--ac-body-bottom)}.ac-screen-top{stop-color:var(--ac-screen-top)}.ac-screen-bottom{stop-color:var(--ac-screen-bottom)}.ac-haze-in{stop-color:var(--ac-accent);stop-opacity:.16}.ac-haze-out{stop-color:var(--ac-accent);stop-opacity:0}.ac-glass-in{stop-color:#fff;stop-opacity:.13}.ac-glass-out{stop-color:#fff;stop-opacity:0}.ac-knob-in{stop-color:#c8cedb}.ac-knob-out{stop-color:#454b58}.ac-handle-top{stop-color:#e2e6ee}.ac-handle-bottom{stop-color:#8b93a3}.ac-case-edge{stroke:var(--ac-edge);stroke-width:5}.ac-case-shine{fill:var(--ac-shine)}.ac-bezel{fill:#14171d;stroke:#00000080;stroke-width:3}.ac-screen-edge{stroke:color-mix(in srgb,var(--ac-accent) 35%,transparent);stroke-width:3}.ac-grid path{stroke:var(--ac-grid);stroke-width:2}.ac-baseline{stroke:color-mix(in srgb,var(--ac-accent) 60%,transparent);stroke-width:3}.ac-glass{pointer-events:none}.ac-scanlines path{stroke:#00000038;stroke-width:3}.wave-bar{fill:var(--ac-bar, var(--ac-accent));transform-origin:bottom;animation:wave .8s infinite ease-in-out;transform:scaleY(var(--initial-scale))}.wave-bar:nth-child(2n){opacity:.62}.ac-meter-seg{fill:var(--ac-accent);opacity:.18;animation:acMeter 1.6s infinite ease-in-out}.ac-knob-base{fill:var(--ac-metal-dark);stroke:#00000080;stroke-width:3}.ac-knob-ring{stroke:#ffffff59;stroke-width:3}.ac-knob-ticks path{stroke:color-mix(in srgb,var(--ac-accent) 55%,var(--ac-metal));stroke-width:5;stroke-linecap:round}.ac-knob-pointer{stroke:var(--ac-accent);stroke-width:9;stroke-linecap:round}.ac-knob-cap{fill:#1a1e26}.control-knob{animation:rotateKnob 8s infinite ease-in-out}.ac-slot{fill:#00000073}.slider-track{stroke:color-mix(in srgb,var(--ac-accent) 45%,transparent);stroke-width:4;stroke-linecap:round}.ac-handle{stroke:#0000008c;stroke-width:3}.ac-handle-grip{stroke:#00000073;stroke-width:3}.ac-handle-shine{stroke:#ffffffbf;stroke-width:2}.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}.ac-led{fill:var(--ac-accent);animation:acLed 2.4s infinite ease-in-out}.ac-led-halo{fill:var(--ac-accent);opacity:.2;animation:acLedHalo 2.4s infinite ease-in-out}@keyframes rotateKnob{0%,to{transform:rotate(0)}20%{transform:rotate(130deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(45deg)}80%{transform: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))}}@keyframes acMeter{0%,to{opacity:.18}45%{opacity:1}}@keyframes acLed{0%,to{opacity:.7}50%{opacity:1}}@keyframes acLedHalo{0%,to{opacity:.12}50%{opacity:.32}}@media (prefers-reduced-motion: reduce){.wave-bar,.control-knob,.bass-handle,.mid-handle,.treble-handle,.ac-meter-seg,.ac-led,.ac-led-halo{animation:none}}