/* Pulsar hero: an XR editor floating in a room. Drawn at 1200 x 675 and scaled to fit (see xr-scene.js). */
.c-media.xr{aspect-ratio:16/9;background:#07060c}
.xr .st{position:absolute;left:0;top:0;width:1200px;height:675px;transform-origin:0 0;overflow:hidden;font-family:var(--text,Geist,system-ui,sans-serif);color:#f2f0f8;
  background:radial-gradient(75% 70% at 50% 34%,#8a7cd6 0%,#4a3f8e 42%,#241d50 78%,#171238 100%)}
.xr .floor{position:absolute;left:-10%;right:-10%;bottom:-8%;height:44%;transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;opacity:.8;
  background:
   repeating-linear-gradient(90deg,rgba(215,200,255,.34) 0 1px,transparent 1px 64px),
   repeating-linear-gradient(0deg,rgba(215,200,255,.34) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 90%);mask-image:linear-gradient(to top,#000 0%,transparent 90%)}
.xr .glow{position:absolute;left:50%;top:55%;width:760px;height:380px;margin:-190px 0 0 -380px;background:radial-gradient(closest-side,rgba(255,170,130,.34),rgba(190,160,255,.16) 55%,transparent);filter:blur(10px)}

/* floating panels */
.xr .persp{position:absolute;inset:0;perspective:1400px}
.xr .pn{position:absolute;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.34);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px}
.xr .pn h5{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.01em;color:#fff}
.xr .tabs{display:flex;gap:6px;margin:0 0 14px}
.xr .tabs span{font-size:11px;padding:5px 10px;border-radius:99px;color:#b9b6c8;background:rgba(255,255,255,.06)}
.xr .tabs span.on{background:rgba(255,255,255,.92);color:#16121f;font-weight:600}
.xr #pl{left:97px;top:96px;width:310px;height:372px;transform:rotateY(14deg);transform-origin:0 50%;padding:0}
.xr #pt{left:460px;top:456px;width:640px;height:128px;transform:rotateX(9deg);transform-origin:50% 0;padding:14px 18px}

.xr .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.xr .tile{aspect-ratio:1;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);display:grid;place-content:center;position:relative}
.xr .tile svg{width:30px;height:30px}
.xr .tile.aa{font-weight:700;font-size:22px;color:#fff}
.xr .tile .ring{position:absolute;inset:-3px;border-radius:19px;border:2px solid #fff;opacity:0}
.xr .cap{font-size:10.5px;color:#9a97ab;margin-top:14px;line-height:1.4}

.xr .row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#d9d6e6;margin:0 0 15px}
.xr .row em{font-style:normal;color:#fff;font-variant-numeric:tabular-nums}
.xr .sl{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.14);margin:6px 0 18px}
.xr .sl i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,#ff8a6a,#ff5f8a)}
.xr .sl b{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.xr .tg{width:34px;height:20px;border-radius:99px;background:#ff5f8a;position:relative}
.xr .tg::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.xr .sw{display:flex;gap:8px}.xr .sw i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.xr .sw i.on{border-color:#fff}

/* timeline panel */
.xr .bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.xr .btn{font-size:11.5px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);color:#eceaf5;white-space:nowrap;position:relative}
.xr .btn.go{margin-left:auto;background:#fff;color:#16121f;font-weight:600}
.xr .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-content:center;font-size:11px;color:#d9d6e6}
.xr .trk{position:relative;height:46px;border-radius:12px;background:rgba(255,255,255,.06);overflow:hidden}
.xr .clip{position:absolute;top:6px;bottom:6px;border-radius:8px;font-size:10px;padding:4px 8px;white-space:nowrap}
.xr .clip.v{left:6px;right:6px;background:linear-gradient(90deg,#3c2a63,#5a3a78 60%,#7a4670);color:#e9defa}
.xr .clip.t{left:26%;width:34%;top:20px;bottom:6px;background:#ffb27a;color:#2a1608;transform-origin:0 50%;font-weight:600}
.xr .clip.h{left:62%;width:20%;top:20px;bottom:6px;background:#ff6f91;color:#2a0a14;transform-origin:0 50%;font-weight:600}
.xr .ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}

/* the spatial video itself */
.xr #vf{position:absolute;left:500px;top:70px;width:600px;height:338px}
.xr .it{position:absolute;position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity}
.xr .ttl{font-weight:700;font-size:64px;letter-spacing:.04em;line-height:1;white-space:nowrap;color:#fff6ea;
  text-shadow:0 1px 0 #d9c8b0,0 2px 0 #c4b29b,0 3px 0 #ad9a83,0 4px 0 #94826c,0 5px 0 #7a6a57,0 14px 26px rgba(0,0,0,.55)}
.xr .sel{position:absolute;inset:-10px -14px;border:1.5px dashed rgba(255,255,255,.8);border-radius:10px;opacity:0}
.xr .sel i{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,95,138,.55)}
.xr .sel i:nth-child(1){left:-7px;top:-7px}.xr .sel i:nth-child(2){right:-7px;top:-7px}.xr .sel i:nth-child(3){left:-7px;bottom:-7px}.xr .sel i:nth-child(4){right:-7px;bottom:-7px}
.xr .heart{width:62px;height:58px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}

/* what the hand carries (above everything, outside the frame) */
.xr .fly{position:absolute;left:0;top:0;z-index:6;will-change:transform,opacity;pointer-events:none}
.xr .hand{position:absolute;left:0;top:0;z-index:7;width:208px;height:315px;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(20,16,60,.4)) drop-shadow(0 0 10px rgba(190,215,255,.45))}
.xr .hand .hp{position:absolute;left:0;top:0;width:208px;height:315px}
.xr .veil{position:absolute;inset:0;z-index:9;background:#241d50;pointer-events:none}
.xr .ping{position:absolute;left:0;top:0;z-index:7;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none;box-shadow:0 0 18px rgba(255,255,255,.6)}

@media (max-width:760px){.c-media.xr{aspect-ratio:16/9}}

/* toolbar rail + the single side panel */
.xr .rail{position:absolute;left:12px;top:14px;bottom:14px;width:46px;display:flex;flex-direction:column;gap:8px;padding:6px;border-radius:20px;background:rgba(20,14,60,.30);border:1px solid rgba(255,255,255,.16)}
.xr .ri{position:relative;width:34px;height:34px;border-radius:12px;display:grid;place-content:center;color:#cfcbe0;font-size:13px}
.xr .ri svg{width:19px;height:19px}.xr .ri b{font-weight:700;font-size:14px}
.xr .ri.bot{margin-top:auto;height:44px}.xr .ri em{font-style:normal;font-size:8.5px;margin-top:1px;letter-spacing:.02em}
.xr .ri .hl{position:absolute;inset:0;border-radius:12px;background:#fff;color:#16121f;display:grid;place-content:center;opacity:0}
.xr .ri .hl svg{width:19px;height:19px}
.xr .pcon{position:absolute;left:70px;right:16px;top:18px;bottom:16px}
.xr .vw{position:absolute;inset:0}

.xr .hand{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}

.xr #vf canvas,.xr #fgc{position:absolute;left:0;top:0;width:600px;height:338px;display:block}
.xr .bgph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.xr .bgph.on{opacity:1}
.xr .bgsh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,50,0),rgba(20,16,50,.10));pointer-events:none}
.xr.photo .floor,.xr.photo .glow{display:none}

.xr #vf #ecl{left:-200px;top:-70px;width:1000px;height:478px;opacity:.92}

/* nothing shows until the animations are running, so the panels never flash their unstyled stack */
.xr .st{opacity:0;transition:opacity .45s ease}
.xr.ready .st{opacity:1}

.xr .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.xr .bgvid.on{opacity:1}

/* shown only to visitors whose system asks for reduced motion: the hero is a still frame until they press play */
.xr-motion{display:block;margin:10px 0 0;padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;min-height:32px}
.xr-motion:hover{color:var(--fg)}
@media (pointer:coarse){.xr-motion{min-height:44px;padding:0 18px}}