.demo-spotlight__layer,.demo-spotlight__shade{position:absolute;inset:0}.demo-spotlight__shade{animation:.3s ease-out backwards demo-spotlight-shade-in}.demo-spotlight__mark{box-shadow:0 0 0 1px color-mix(in oklab,var(--ui-primary) 34%,transparent),0 0 18px -2px color-mix(in oklab,var(--ui-primary) 20%,transparent);transition:opacity .2s,box-shadow .2s;animation:.34s ease-out backwards demo-spotlight-mark-in;position:absolute}.demo-spotlight__mark:before{content:"";opacity:.85;width:3px;transition:opacity .2s,box-shadow .2s;top:7px;bottom:7px;left:-1px}.demo-spotlight__badge,.demo-spotlight__mark:before{background:var(--ui-primary);border-radius:9999px;position:absolute}.demo-spotlight__badge{color:#fff;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:700;line-height:1;transition:transform .2s,opacity .2s;display:inline-flex;top:-9px;left:-9px;box-shadow:0 1px 4px #00000059}.demo-spotlight__badge--tucked{top:5px;left:5px}.demo-spotlight--lit .demo-spotlight__mark{opacity:.3;box-shadow:none}.demo-spotlight--lit .demo-spotlight__mark:before{opacity:.5}.demo-spotlight--lit .demo-spotlight__mark--lit,.demo-spotlight__mark--lit{opacity:1;box-shadow:0 0 46px 2px color-mix(in oklab,var(--ui-primary) 40%,transparent);animation:.38s cubic-bezier(.2,.85,.25,1) backwards demo-spotlight-lit-in}.demo-spotlight--lit .demo-spotlight__mark--lit:before{opacity:1;box-shadow:0 0 12px color-mix(in oklab,var(--ui-primary) 70%,transparent)}.demo-spotlight--lit .demo-spotlight__mark--lit .demo-spotlight__badge{transform:scale(1.18)}.demo-spotlight__corner{border:2px solid var(--ui-primary);width:20px;height:20px;animation:.42s cubic-bezier(.2,.85,.25,1) backwards demo-spotlight-corner-in;position:absolute}.demo-spotlight__corner--tl{border-bottom:0;border-right:0;border-top-left-radius:12px;top:-1px;left:-1px}.demo-spotlight__corner--tr{border-bottom:0;border-left:0;border-top-right-radius:12px;top:-1px;right:-1px}.demo-spotlight__corner--bl{border-top:0;border-right:0;border-bottom-left-radius:12px;bottom:-1px;left:-1px}.demo-spotlight__corner--br{border-top:0;border-left:0;border-bottom-right-radius:12px;bottom:-1px;right:-1px}.demo-spotlight__name{border:1px solid color-mix(in oklab,var(--ui-primary) 45%,transparent);max-width:22rem;height:24px;color:color-mix(in oklab,var(--ui-primary) 82%,#fff);letter-spacing:.015em;white-space:nowrap;text-overflow:ellipsis;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#020610d1;border-radius:6px;align-items:center;padding:0 .6rem;font-size:11.5px;font-weight:600;animation:.32s ease-out backwards demo-spotlight-name-in;display:inline-flex;position:absolute;overflow:hidden}.demo-spotlight__name:after{content:"";background:color-mix(in oklab,var(--ui-primary) 60%,transparent);width:1px;height:8px;position:absolute;bottom:-8px;left:14px}.demo-spotlight__name--below:after{top:-8px;bottom:auto}@keyframes demo-spotlight-mark-in{0%{opacity:0}to{opacity:1}}@keyframes demo-spotlight-shade-in{0%{opacity:0}to{opacity:1}}@keyframes demo-spotlight-lit-in{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ui-primary) 55%,transparent);transform:scale(1.015)}to{box-shadow:0 0 46px 2px color-mix(in oklab,var(--ui-primary) 40%,transparent);transform:scale(1)}}@keyframes demo-spotlight-corner-in{0%{opacity:0;margin:-7px}to{opacity:1;margin:0}}@keyframes demo-spotlight-name-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.demo-spotlight__corner,.demo-spotlight__mark,.demo-spotlight__mark--lit,.demo-spotlight__name,.demo-spotlight__shade{animation:none}}