.spatial-page{--source: var(--vu)}#spatialContainer{display:grid;gap:16px}.spatial-setup{margin-bottom:40px}.spatial-setup__header,.spatial-step{margin-bottom:16px}.spatial-setup__title{margin-top:6px}.spatial-setup__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.setup-field{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--panel-shadow);transition:border-color .2s,box-shadow .2s}.setup-field:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}.setup-field__label{color:var(--text);font:600 15px/1.2 var(--font-display)}.setup-field__select{width:100%;padding:11px 12px;font-size:15px;font-weight:500;cursor:pointer}.setup-field__hint{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}.intro-note{padding:18px;border:1px solid color-mix(in srgb,var(--vu) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--vu) 9%,var(--panel))}.intro-note h3{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:15px;font-weight:600}.intro-note h3 svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:var(--color-warning);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.intro-note p{margin:0 0 10px;color:var(--muted);font-size:13.5px;line-height:1.6}.intro-details summary{color:var(--color-warning);font-size:13.5px;font-weight:600;cursor:pointer}.intro-details[open] summary{margin-bottom:8px}.channel-info{display:inline-flex;align-items:center;align-self:flex-start;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--muted);font:500 12px/1.45 var(--font-mono)}.channel-info:empty{display:none}.channel-info--ok{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--text)}.channel-info--warn{border-color:color-mix(in srgb,var(--vu) 50%,transparent);background:color-mix(in srgb,var(--vu) 10%,var(--panel));color:var(--text)}.spatial-main-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}.spatial-room-section{min-width:0}.spatial-room-panel{padding:16px;border:1px solid var(--hw-line-2);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--hw-panel);box-shadow:var(--shadow),inset 0 1px #ffffff0a;color:var(--hw-text)}.spatial-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.spatial-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 14px 11px 30px;border:1px solid var(--hw-line-2);border-radius:10px;background:var(--hw-panel-2);box-shadow:0 2px #00000059,inset 0 1px #ffffff0a;color:var(--hw-muted);text-align:left;white-space:normal;cursor:pointer}.spatial-tab:before{content:"";position:absolute;left:13px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--led-off);transition:background-color .15s ease,box-shadow .15s ease}.spatial-tab:hover:not(:disabled):not(.active){border-color:color-mix(in srgb,var(--led) 45%,var(--hw-line-2));background:var(--hw-panel-2);color:var(--hw-text)}.spatial-tab.active,.spatial-tab.active:hover:not(:disabled){border-color:color-mix(in srgb,var(--led) 60%,transparent);background:color-mix(in srgb,var(--led) 10%,var(--hw-panel-2));color:var(--hw-text)}.spatial-tab.active:before{background:var(--led);box-shadow:0 0 8px var(--led)}.spatial-tab__title{font:600 15px/1.2 var(--font-display)}.spatial-tab__sub{font-size:12.5px;line-height:1.35;opacity:.8}.spatial-tab-content{animation:tabFadeIn .25s ease}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.room-layout-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.room-label-top,.room-label-bottom{color:var(--hw-faint);font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.room-layout{width:100%;max-width:640px}.room-border{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);gap:12px;padding:20px;border:1px solid var(--hw-line-2);border-radius:14px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--led) 7%,transparent),transparent 60%),var(--hw-ink)}.free-move-room{display:block!important;aspect-ratio:16 / 10;padding:0;overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--led) 9%,transparent),transparent 62%),var(--hw-ink)}.free-move-room.free-move-active{cursor:grabbing;border-color:color-mix(in srgb,var(--source) 70%,transparent);box-shadow:0 0 24px -6px color-mix(in srgb,var(--source) 50%,transparent)}.free-move-listener{position:absolute;top:50%;left:50%;z-index:1;display:grid;place-items:center;width:42px;height:42px;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--led) 45%,transparent);border-radius:50%;background:var(--hw-panel);pointer-events:none}.free-move-listener svg,.listener-icon svg{width:22px;height:22px;fill:none;stroke:var(--led);stroke-width:1.7;stroke-linecap:round}.free-move-speaker{position:absolute;z-index:2;width:30px;height:30px;line-height:1;translate:-50% -50%;rotate:var(--speaker-angle, 0deg);transform-origin:center;pointer-events:none;transition:rotate .05s linear;will-change:rotate}.free-move-speaker svg{display:block;width:100%;height:100%;fill:var(--source);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--source) 70%,transparent))}.free-move-speaker:before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--source) 45%,transparent) 0%,transparent 70%);animation:speakerHalo 1.8s ease-in-out infinite}@keyframes speakerHalo{0%,to{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}.free-move-room.free-move-active .free-move-speaker{width:36px;height:36px}.room-start{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;cursor:pointer;background:color-mix(in srgb,var(--hw-ink) 70%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .25s ease}.room-start.is-hidden{opacity:0;pointer-events:none}.room-start__btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border:none;border-radius:999px;background:var(--led);color:#06140d;font:600 15px/1 var(--font-body);cursor:pointer;box-shadow:0 0 0 6px color-mix(in srgb,var(--led) 18%,transparent),0 10px 24px -10px #000000e6}.room-start__btn:hover:not(:disabled){background:#6ae39b;transform:translateY(-1px)}.room-start__hint{max-width:34ch;color:var(--hw-text);font-size:13px;line-height:1.5}.free-move-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.toggle-card{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 14px;border:1px solid var(--hw-line-2);border-radius:10px;background:var(--hw-panel-2);transition:border-color .2s ease}.toggle-card.is-active{border-color:color-mix(in srgb,var(--led) 55%,transparent)}.toggle-card-header{display:flex;align-items:center}.toggle-card-label{color:var(--hw-text);font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none}.toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}.toggle-switch input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;margin:0;cursor:pointer}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--hw-line-2);cursor:pointer;pointer-events:none;transition:background-color .2s ease}.toggle-slider:before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--hw-text);box-shadow:0 1px 3px #0006;transition:transform .2s ease}input:checked+.toggle-slider{background:var(--led)}input:checked+.toggle-slider:before{transform:translate(18px);background:#06140d}.toggle-switch input:focus-visible+.toggle-slider{outline:2px solid var(--led);outline-offset:2px}.toggle-card-status{min-width:26px;color:var(--hw-faint);font:500 11px/1 var(--font-mono);letter-spacing:.1em}.toggle-card.is-active .toggle-card-status{color:var(--led)}.mute-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid var(--hw-line-2);border-radius:10px;background:var(--hw-panel-2);color:var(--hw-muted);line-height:1;cursor:pointer}.mute-btn svg{width:20px;height:20px}.mute-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--led) 55%,var(--hw-line-2));background:var(--hw-panel-2);color:var(--hw-text)}.mute-btn.is-muted,.mute-btn.is-muted:hover:not(:disabled){border-color:color-mix(in srgb,var(--clip) 60%,transparent);color:var(--clip)}.active-speaker-info{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:52px;margin-top:14px;padding:10px 14px;border:1px solid var(--hw-line);border-radius:10px;background:var(--hw-ink)}.active-label{color:var(--hw-text);font-size:14px}.active-coords,.channel-note{color:var(--led);font:500 12.5px/1.4 var(--font-mono)}.speaker-btn{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:80px;padding:12px 8px;border:1px solid var(--hw-line-2);border-radius:10px;background:var(--hw-panel-2);box-shadow:0 2px #00000059;color:var(--hw-text);cursor:pointer;white-space:normal}.speaker-btn:not(:disabled):hover{border-color:color-mix(in srgb,var(--source) 60%,var(--hw-line-2));background:color-mix(in srgb,var(--source) 8%,var(--hw-panel-2))}.speaker-btn.active,.speaker-btn.active:not(:disabled):hover{border-color:var(--source);background:color-mix(in srgb,var(--source) 18%,var(--hw-panel-2));color:var(--hw-text);box-shadow:0 0 16px -2px color-mix(in srgb,var(--source) 55%,transparent)}.speaker-btn:disabled{background:var(--hw-panel-2);border-color:var(--hw-line);color:var(--hw-faint);cursor:progress}.speaker-icon svg{width:20px;height:20px}.speaker-btn.active .speaker-icon{color:var(--source)}.speaker-short-label{font:600 13px/1 var(--font-mono);letter-spacing:.06em}.speaker-label{color:var(--hw-muted);font-size:11.5px;line-height:1.2;text-align:center}.listener-dot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px}.listener-label{color:var(--hw-faint);font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.sub-row{display:flex;justify-content:center;margin-top:10px}.sub-btn{flex-direction:row;gap:10px;min-width:180px}.room-map{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}.room-map__rings circle{fill:none;stroke:color-mix(in srgb,var(--led) 13%,transparent);stroke-width:.04}.room-map__rings text{fill:var(--hw-faint);font:500 .42px var(--font-mono)}.room-map__ref{fill:color-mix(in srgb,var(--led) 10%,transparent);stroke:color-mix(in srgb,var(--led) 70%,transparent);stroke-width:.06;transition:r .2s ease}.room-map__max{fill:none;stroke:color-mix(in srgb,var(--clip) 65%,transparent);stroke-width:.06;stroke-dasharray:.3 .2;transition:r .2s ease}.room-map__path{fill:none;stroke:color-mix(in srgb,var(--led) 42%,transparent);stroke-width:.05;stroke-dasharray:.22 .18}.room-map__cone-outer{fill:color-mix(in srgb,var(--source) 10%,transparent)}.room-map__cone-inner{fill:color-mix(in srgb,var(--source) 26%,transparent);stroke:color-mix(in srgb,var(--source) 55%,transparent);stroke-width:.04}.room-map .is-hidden{display:none}.room-readout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:14px;padding:10px 14px;border:1px solid var(--hw-line);border-radius:10px;background:var(--hw-ink)}.room-readout__text{display:flex;flex-direction:column;gap:3px;min-width:0}.room-readout__level{display:flex;align-items:center;gap:9px}.room-readout__level-label{color:var(--hw-faint);font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.room-readout__level-value{min-width:4ch;color:var(--hw-text);font:600 13px/1 var(--font-mono);text-align:right}.level-meter{position:relative;width:120px;height:8px;overflow:hidden;border-radius:999px;background:var(--hw-line)}.level-meter__fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--led),var(--vu))}.motion-controls{display:grid;gap:12px;margin-top:14px}.motion-row{display:flex;align-items:center;gap:10px}.motion-row .segmented{flex:1}.motion-row--sliders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px}.hw-slider{display:grid;gap:6px;min-width:0;transition:opacity .2s ease}.hw-slider__head{display:flex;justify-content:space-between;gap:8px;color:var(--hw-muted);font-size:13px;font-weight:600}.hw-slider output{color:var(--led);font:500 12.5px/1.4 var(--font-mono)}.hw-slider input[type=range]{--line: var(--hw-line-2);--accent: var(--led);--panel: var(--hw-panel);min-width:0;width:100%}.hw-slider.is-idle,.panner-field.is-idle{opacity:.45}.motion-hint{margin:0;color:var(--hw-faint);font-size:12.5px;line-height:1.5}.segmented{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.segmented button{flex:1;min-width:0;padding:7px 6px;border:1px solid transparent;border-radius:7px;background:transparent;box-shadow:none;color:var(--muted);font:600 13px/1.2 var(--font-body);white-space:nowrap;cursor:pointer}.segmented button:hover:not(:disabled):not(.is-on){background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}.segmented button.is-on,.segmented button.is-on:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0000001f}.segmented--hw{border-color:var(--hw-line-2);background:var(--hw-ink)}.segmented--hw button{color:var(--hw-muted)}.segmented--hw button:hover:not(:disabled):not(.is-on){background:color-mix(in srgb,var(--led) 8%,transparent);color:var(--hw-text)}.segmented--hw button.is-on,.segmented--hw button.is-on:hover:not(:disabled){border-color:color-mix(in srgb,var(--led) 55%,transparent);background:color-mix(in srgb,var(--led) 14%,var(--hw-panel-2));color:var(--hw-text)}.spatial-settings-panel{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--panel-shadow)}.spatial-settings-panel h3{margin:0;font-size:18px;font-weight:600}.spatial-settings-panel__text{margin:-8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}.preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset-chip{padding:8px 6px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);box-shadow:none;color:var(--text);font:600 12.5px/1.2 var(--font-body);white-space:normal;cursor:pointer}.preset-chip:hover:not(:disabled):not(.is-on){border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--panel-2)}.preset-chip.is-on,.preset-chip.is-on:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text)}.preset-listen{min-height:4.5em;margin:-4px 0 0;padding:10px 12px;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--accent) 7%,var(--panel));color:var(--muted);font-size:13px;line-height:1.5}.preset-listen strong{color:var(--text)}.distance-graph{margin:0;padding:10px 10px 4px;border:1px solid var(--hw-line-2);border-radius:12px;background:var(--hw-ink)}.distance-graph figcaption{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;color:var(--hw-muted);font:500 11px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.distance-graph__now{color:var(--led);letter-spacing:0;text-transform:none}.distance-graph svg{display:block;width:100%;height:auto;overflow:visible}.distance-graph__grid line{stroke:var(--hw-line);stroke-width:1}.distance-graph__grid text{fill:var(--hw-faint);font:500 8.5px var(--font-mono);text-anchor:middle}.distance-graph__ref{stroke:color-mix(in srgb,var(--led) 55%,transparent);stroke-dasharray:3 3}.distance-graph__area{fill:color-mix(in srgb,var(--led) 12%,transparent)}.distance-graph__curve{fill:none;stroke:var(--led);stroke-width:2;stroke-linejoin:round}.distance-graph__dot{fill:var(--vu);stroke:var(--hw-ink);stroke-width:2;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--vu) 70%,transparent))}.distance-graph__dot.is-off-scale{opacity:.4}.panner-field{display:grid;gap:6px;transition:opacity .2s ease}.panner-field__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.panner-field__label{color:var(--text);font-size:13.5px;font-weight:600}.panner-field output{color:var(--accent);font:600 12.5px/1 var(--font-mono)}.panner-field input[type=range]{min-width:0;width:100%}.panner-field__help{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}.panner-select{width:100%;padding:8px 10px;font-size:14px}.panner-group{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--line)}.panner-group__title{margin:0;color:var(--text);font:600 15px/1.2 var(--font-display)}.panner-group>.panner-field__help{margin-top:-6px}.panner-reset{align-self:flex-start;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;box-shadow:none;color:var(--muted);font:600 13px/1 var(--font-body);cursor:pointer}.panner-reset:hover:not(:disabled){border-color:var(--muted);background:transparent;color:var(--text)}@media (min-width: 1001px) and (min-height: 940px){.spatial-room-section{position:sticky;top:calc(var(--nav-h) + 58px + 16px)}}.spatial-coords-panel{margin-top:40px}.spatial-coords-panel h2{margin:6px 0 8px}.coords-desc{max-width:64ch;margin:0 0 16px;color:var(--muted);line-height:1.6}.coords-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}.coord-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color .2s,background-color .2s}.coord-row.active{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}.coord-label{color:var(--text);font:600 13px/1 var(--font-mono)}.coord-value{color:var(--muted);font:500 12.5px/1 var(--font-mono)}@media (max-width: 1000px){.spatial-setup__fields{grid-template-columns:1fr 1fr}.intro-note{grid-column:1 / -1}.spatial-main-layout{grid-template-columns:minmax(0,1fr)}}@media (max-width: 640px){.spatial-setup__fields{grid-template-columns:minmax(0,1fr)}.spatial-tab__sub{display:none}.free-move-room{aspect-ratio:1 / 1}.motion-row--sliders{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.motion-row--sliders .toggle-card{grid-column:1 / -1;justify-self:start}.level-meter{width:90px}.room-border{gap:6px;padding:12px}.speaker-btn{min-width:0;padding:8px 4px}.speaker-label{display:none}}