@layer components{.nn-spot{--nn-spot-wash: color-mix(in srgb, var(--color-brand-50) 95%, transparent);--nn-spot-edge: var(--color-brand-300);position:relative;isolation:isolate;display:block;padding:clamp(24px,2.4vw,32px);border:1px solid var(--nn-line);border-radius:var(--radius-frame);background:var(--color-white);color:inherit;transition:border-color var(--transition-duration-ds-hover) var(--ease-standard),box-shadow var(--transition-duration-ds-hover) var(--ease-standard)}.nn-spot-glacier{--nn-spot-wash: color-mix(in srgb, var(--color-glacier-50) 95%, transparent);--nn-spot-edge: var(--color-glacier-300)}.nn-spot-deep{--nn-spot-wash: rgb(255 255 255 / .06);--nn-spot-edge: rgb(255 255 255 / .45);background:#ffffff08}.nn-spot:hover{border-color:var(--nn-line-strong);box-shadow:var(--shadow-e1)}.nn-spot-deep:hover{box-shadow:none}.nn-spot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;background:radial-gradient(380px circle at var(--nn-x, 50%) var(--nn-y, 50%),var(--nn-spot-wash),transparent 65%);opacity:0;transition:opacity var(--transition-duration-ds-ui) var(--ease-standard);pointer-events:none}.nn-spot:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--nn-x, 50%) var(--nn-y, 50%),var(--nn-spot-edge),transparent 70%);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--transition-duration-ds-ui) var(--ease-standard);pointer-events:none}.nn-spot[data-lit]:before,.nn-spot[data-lit]:after{opacity:1}}@media (prefers-reduced-motion: reduce){.nn-spot,.nn-spot:before,.nn-spot:after{transition:none}.nn-spot:before,.nn-spot:after{display:none}}