.demo-interactive-wrap{position:relative}.demo-spotlight{z-index:10;pointer-events:none;position:absolute;inset:0}.demo-spotlight__mask{-webkit-mask-image:radial-gradient(circle at var(--spot-x)var(--spot-y),transparent 0,transparent calc(var(--spot-r) - 20px),black var(--spot-r));mask-image:radial-gradient(circle at var(--spot-x)var(--spot-y),transparent 0,transparent calc(var(--spot-r) - 20px),black var(--spot-r));-webkit-mask-image:radial-gradient(circle at var(--spot-x)var(--spot-y),transparent 0,transparent calc(var(--spot-r) - 20px),black var(--spot-r));pointer-events:none;background:#0a0a0fb8;transition:-webkit-mask-image .4s,mask-image .4s;position:absolute;inset:0}.demo-spotlight__ring{left:var(--spot-x);top:var(--spot-y);width:calc(var(--spot-r)*2 - 40px);height:calc(var(--spot-r)*2 - 40px);border:2px dashed var(--lime);pointer-events:none;border-radius:50%;animation:2s ease-in-out infinite demo-ring-pulse;position:absolute;transform:translate(-50%,-50%)}@keyframes demo-ring-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.03)}}.demo-narration{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);pointer-events:auto;z-index:12;width:340px;padding:20px 22px;position:absolute}.demo-narration__step{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--violet);align-items:center;gap:8px;margin-bottom:8px;font-size:13px;display:flex}.demo-narration__step:before{content:"";background:var(--violet);flex-shrink:0;width:18px;height:2px;display:inline-block}.demo-narration__title{letter-spacing:-.01em;margin-bottom:8px;font-size:17px;font-weight:700;line-height:1.25}.demo-narration__body{color:#0a0a0fb3;margin-bottom:16px;font-size:13px;line-height:1.55}.demo-narration__controls{justify-content:flex-end;align-items:center;gap:10px;display:flex}.demo-narration__next{background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--font-sans);cursor:pointer;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;transition:transform .15s,box-shadow .15s;display:inline-flex}.demo-narration__next:hover{box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.demo-narration:before{content:"";background:var(--paper);width:14px;height:14px;position:absolute}.demo-narration.tail-left:before{border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);top:36px;left:-9px;transform:rotate(45deg)}.demo-narration.tail-right:before{border-right:2px solid var(--ink);border-top:2px solid var(--ink);top:36px;right:-9px;transform:rotate(45deg)}.demo-narration.tail-top:before{border-left:2px solid var(--ink);border-top:2px solid var(--ink);top:-9px;left:36px;transform:rotate(45deg)}.demo-narration.tail-bottom:before{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);bottom:-9px;left:36px;transform:rotate(45deg)}.demo-spotlight__pips{z-index:12;pointer-events:none;gap:6px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.demo-spotlight__pip{background:#f4f1ea4d;width:28px;height:4px;transition:background .3s}.demo-spotlight__pip.is-active{background:var(--lime)}.demo-tested-badge{background:var(--lime);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;opacity:0;align-items:center;gap:5px;margin-top:8px;padding:3px 8px;font-size:13px;animation:.3s forwards demo-badge-in;display:inline-flex}@keyframes demo-badge-in{to{opacity:1}}.demo-orbit{pointer-events:none;z-index:11;width:0;height:0;animation:18s linear infinite demo-orbit-spin;position:absolute}@keyframes demo-orbit-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.demo-orbit__icon{background:var(--paper);border:2px solid var(--ink);width:48px;height:48px;box-shadow:2px 2px 0 var(--ink);transform:rotate(var(--orbit-angle))translateY(calc(-1*var(--orbit-r)))rotate(calc(-1*var(--orbit-angle)));opacity:0;animation:demo-orbit-icon-in .3s var(--orbit-delay,0s)forwards;justify-content:center;align-items:center;padding:6px;display:flex;position:absolute;overflow:hidden}.demo-orbit__icon .agent-logo{-o-object-fit:contain;object-fit:contain;width:100%;height:100%;display:block}@keyframes demo-orbit-icon-in{to{opacity:1}}@media (prefers-reduced-motion:reduce){.demo-spotlight__ring{animation:none}.demo-spotlight__mask{transition:none}.demo-tested-badge{opacity:1;animation:none}.demo-orbit{animation:none}.demo-orbit__icon{opacity:1;animation:none}}