.spatial-grid{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:22px}.spatial-main{padding:27px 30px}.spatial-main .row{margin:13px 0 0;padding-bottom:15px;border-bottom:1px solid #33343b}.spatial-main .tag{font-size:9px}.spatial-map{position:relative;width:100%;max-width:490px;height:350px;margin:14px auto 0;isolation:isolate}.spatial-orbit{position:absolute;left:50%;top:49%;border:1px solid #dba87413;border-radius:50%;transform:translate(-50%,-50%);z-index:-1}.orbit-one{width:60%;height:65%;background:#a17b4d05}.orbit-two{width:33%;height:37%;background:#c3a27708}.spatial-listener{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#827564;gap:5px}.spatial-listener svg{width:78px;height:78px;stroke:#dfb28d;fill:#3b3129;stroke-width:2.5}.spatial-listener span{font-size:10px;color:#85818a}.direction-speaker{position:absolute;transform:translate(-50%,-50%);padding:0;width:51px;height:51px;border-radius:50%;background:#2c2c30;border:1px solid #49413b;display:flex;justify-content:center;align-items:center;color:#cba17d}.direction-speaker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.direction-speaker small{position:absolute;top:58px;font-size:10px;color:#858791;white-space:nowrap}.direction-speaker:hover{transform:translate(-50%,-50%) scale(1.08);background:#493526}.direction-speaker.testing{background:#c99160;color:#21180f;border-color:#f4b785;box-shadow:0 0 25px #e1a16e33}.speaker-pulse{position:absolute;inset:-5px;border:1px solid #e5a77766;border-radius:50%;opacity:0}.testing .speaker-pulse{animation:speakerPulse .85s ease-out infinite}.spatial-status{font-size:11px;min-height:24px;text-align:center;color:#cab49b;margin:12px 0}.spatial-actions{display:flex;justify-content:center;gap:12px}.spatial-actions button{font-size:12px;min-width:115px}.spatial-volume{display:flex;align-items:center;gap:13px;max-width:370px;margin:25px auto 0;font-size:10px;color:#92949e}.spatial-volume label{white-space:nowrap}.spatial-volume input{flex:1;min-width:30px}.spatial-volume output{min-width:30px;text-align:right;font-variant-numeric:tabular-nums}.spatial-size{padding:24px 20px}.spatial-size>p{font-size:10px;line-height:1.8;margin-top:9px}.spatial-size fieldset{border:0;padding:0;margin:20px 0 0;display:grid;gap:12px}.room-option{position:relative;display:block;padding:15px;border:1px solid #3b3c44;border-radius:10px;cursor:pointer;background:#1b1c20;transition:background .25s,border-color .25s}.room-option.selected{border-color:#b48359;background:#392c21}.room-option input{position:absolute;opacity:0;width:1px;height:1px}.room-option:focus-within{outline:2px solid #dca16e;outline-offset:3px}.room-header{display:flex;justify-content:space-between;align-items:center}.room-header b{font-weight:500;font-size:12px;color:#d2c5b9}.room-radio{width:11px;height:11px;border-radius:50%;border:1px solid #6d675f}.selected .room-radio{background:#e9b181;border:3px solid #59402c;box-shadow:0 0 0 1px #d29c70}.room-option>small{display:block;font-size:9px;color:#8b8790;line-height:1.6;margin-top:8px}.room-mini{display:block;width:95px;height:75px;position:relative;margin:8px auto}.room-mini i{position:absolute;width:19px;height:19px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#a7a1a633}.room-mini em{position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);width:4px;height:4px;background:#cb9f7a;border-radius:50%;transform:rotate(var(--angle)) translateY(-22px)}.room-medium em{transform:rotate(var(--angle)) translateY(-29px)}.room-large em{transform:rotate(var(--angle)) translateY(-36px)}.spatial-size .spatial-size-note{font-size:9px;color:#737782;margin-top:18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes speakerPulse{from{opacity:.6;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}@media(max-width:1050px){.spatial-grid{grid-template-columns:minmax(0,1fr) 190px;gap:15px}.spatial-main{padding:23px 20px}.spatial-size{padding:23px 15px}.spatial-map{height:330px}.direction-speaker{width:44px;height:44px}.direction-speaker small{top:50px}.room-option{padding:12px}.spatial-main .tag{display:none}}@media(max-width:800px){.spatial-grid{grid-template-columns:1fr}.spatial-size fieldset{grid-template-columns:repeat(3,1fr);gap:8px}.room-option{padding:12px 8px}.room-mini{width:75px}.room-option>small{font-size:8px}.spatial-map{max-width:450px}}@media(max-width:450px){.spatial-main{padding:22px 15px}.spatial-map{height:315px}.direction-speaker{width:40px;height:40px}.direction-speaker small{font-size:9px;top:47px}.spatial-main .panel-heading p{font-size:10px}.room-mini{width:65px;height:70px}.room-large em{transform:rotate(var(--angle)) translateY(-30px)}.room-medium em{transform:rotate(var(--angle)) translateY(-24px)}.room-small em{transform:rotate(var(--angle)) translateY(-18px)}}@media(prefers-reduced-motion:reduce){.testing .speaker-pulse{animation:none}}