.spatial-lab-card{--spatial-spread:1.08;position:relative;overflow:hidden;margin:0 0 14px;padding:18px;border:1px solid rgba(93,220,195,.34);border-radius:16px;background:radial-gradient(120% 95% at 8% -8%,rgba(56,205,183,.18),transparent 55%),radial-gradient(100% 85% at 108% 100%,rgba(122,106,232,.16),transparent 58%),#0c1217c2;box-shadow:inset 0 1px #ffffff0a}.spatial-lab-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.025) 50%,transparent 80%)}.spatial-top,.spatial-copy,.spatial-field,.spatial-controls,.spatial-result,.spatial-foot{position:relative}.spatial-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.spatial-kicker{display:flex;align-items:center;gap:7px;font:700 9.5px/1 var(--font-mono);letter-spacing:1.25px;text-transform:uppercase;color:#91ead9}.spatial-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#65dec7;box-shadow:0 0 12px #65dec7}.spatial-preview-badge{font:700 8.5px/1 var(--font-mono);letter-spacing:.9px;color:#b8adf5;border:1px solid rgba(139,124,240,.35);border-radius:999px;padding:5px 8px;background:#8b7cf01a}.spatial-copy h3{margin:0;color:var(--text,#fff);font-size:20px;line-height:1.08;letter-spacing:-.35px}.spatial-copy p{margin:8px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.55}.spatial-copy strong{color:#a7f0e2;font-weight:650}.spatial-field{height:150px;margin:16px 0 14px;border:1px solid rgba(106,224,203,.16);border-radius:13px;background:radial-gradient(circle at 50% 52%,rgba(82,225,198,.12),transparent 18%),linear-gradient(180deg,rgba(255,255,255,.018),transparent);overflow:hidden}.spatial-field:after{content:"HEADPHONE FIELD";position:absolute;left:10px;bottom:8px;font:600 8px/1 var(--font-mono);letter-spacing:1.1px;color:#aaebe073}.spatial-orbit{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%) scale(var(--spatial-spread));transition:transform .28s ease}.spatial-ring{position:absolute;inset:0;border:1px solid rgba(109,224,203,.38);border-radius:50%;box-shadow:0 0 28px #49dbc114}.spatial-ring.r2{inset:-24px;border-color:#8b7cf03d}.spatial-ring.r3{inset:-48px;border-color:#8b7cf01f}.spatial-head{position:absolute;left:50%;top:50%;width:33px;height:42px;transform:translate(-50%,-50%);border:1.5px solid rgba(218,255,248,.68);border-radius:48% 48% 44% 44%;background:#132427eb;box-shadow:0 0 20px #55e0c626}.spatial-head:after{content:"";position:absolute;left:50%;top:9px;width:1px;height:24px;background:linear-gradient(rgba(218,255,248,.65),transparent)}.spatial-source{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#8fe6d5;box-shadow:0 0 12px #69d9c3;transition:transform .28s ease}.spatial-source.left{left:-39px;transform:translate(calc(-34px * var(--spatial-spread)),-50%)}.spatial-source.right{right:-39px;transform:translate(calc(34px * var(--spatial-spread)),-50%)}.spatial-source.rear{left:50%;top:auto;bottom:-43px;background:#a99df3;box-shadow:0 0 12px #8f7de9;transform:translate(-50%,calc(15px * var(--spatial-spread)))}.spatial-beam{position:absolute;left:50%;top:50%;height:1px;width:112px;transform-origin:left center;background:linear-gradient(90deg,rgba(111,227,206,.55),transparent)}.spatial-beam.b1{transform:rotate(160deg)}.spatial-beam.b2{transform:rotate(20deg)}.spatial-beam.b3{transform:rotate(90deg);width:76px;background:linear-gradient(90deg,rgba(158,142,241,.52),transparent)}.spatial-stats{position:absolute;inset:10px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.spatial-stat{text-align:left}.spatial-stat:last-child{text-align:right}.spatial-stat b{display:block;font:700 15px/1 var(--font-mono);color:#c7fff5}.spatial-stat span{display:block;margin-top:5px;font:600 7.5px/1 var(--font-mono);letter-spacing:.85px;color:var(--text-muted);text-transform:uppercase}.spatial-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.spatial-mode{border:1px solid rgba(116,221,202,.22);border-radius:9px;background:#ffffff06;color:var(--text-secondary);padding:8px 5px;font:650 10.5px/1.2 var(--font-sans);cursor:pointer;transition:.16s ease}.spatial-mode:hover{border-color:#74ddca7a;color:var(--text)}.spatial-mode.active{color:#10201e;background:linear-gradient(135deg,#78e4cf,#b3f4e8);border-color:transparent;box-shadow:0 5px 16px #53dcc22e}.spatial-recipe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px}.spatial-recipe-item{padding:8px 9px;border-radius:9px;background:#ffffff06;border:1px solid rgba(255,255,255,.05)}.spatial-recipe-item span{display:block;font:600 7.5px/1 var(--font-mono);letter-spacing:.75px;color:var(--text-muted);text-transform:uppercase}.spatial-recipe-item b{display:block;margin-top:5px;color:var(--text);font-size:11px;font-weight:650}.spatial-render-btn{width:100%;border:0;border-radius:11px;padding:12px 13px;background:linear-gradient(135deg,#65dec7,#b1f4e7);color:#0c1b19;font:750 12.5px/1 var(--font-sans);cursor:pointer;box-shadow:0 8px 24px #4bd5bb29;transition:filter .15s ease,transform .15s ease}.spatial-render-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.spatial-render-btn:disabled{cursor:not-allowed;filter:saturate(.3);opacity:.58;box-shadow:none}.spatial-status{min-height:15px;margin:9px 0 0;text-align:center;font:600 9px/1.4 var(--font-mono);color:#8cdccb}.spatial-progress{height:3px;margin-top:8px;border-radius:99px;background:#ffffff0f;overflow:hidden}.spatial-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#65dec7,#9e8ef0);transition:width .25s ease}.spatial-result{margin-top:14px;padding-top:14px;border-top:1px solid rgba(109,224,203,.14)}.spatial-result[hidden]{display:none}.spatial-result-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.spatial-ready{font-size:12px;font-weight:700;color:#bdf8ed}.spatial-safe{font:600 8px/1 var(--font-mono);letter-spacing:.5px;color:#7fd8c8}.spatial-ab{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:9px;background:#00000038;margin-bottom:9px}.spatial-ab button{border:0;border-radius:7px;padding:7px;background:transparent;color:var(--text-muted);font:650 10px/1 var(--font-sans);cursor:pointer}.spatial-ab button.active{background:#68e0ca24;color:#bdf8ed}#spatialAudio{width:100%;height:34px;accent-color:#67dec8}.spatial-downloads{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.spatial-downloads button{border:1px solid rgba(108,224,203,.3);border-radius:9px;padding:9px 7px;background:#67dec814;color:#aef1e4;font:700 10.5px/1 var(--font-sans);cursor:pointer}.spatial-downloads button:hover{background:#67dec824}.spatial-foot{margin:11px 0 0;color:var(--text-muted);font-size:9.5px;line-height:1.5}.spatial-foot b{color:var(--text-secondary)}.spatial-foot .spatial-local{display:block;margin-top:5px;color:#988ce4}@media(max-width:760px){.spatial-field{height:135px}.spatial-copy h3{font-size:18px}}@media(prefers-reduced-motion:reduce){.spatial-orbit,.spatial-source,.spatial-render-btn,.spatial-progress i{transition:none}}