.magic-card{--magic-card-bg:var(--color-background-surface,#fff);--magic-card-border:var(--color-border,#e5e7eb);--magic-mouse-x:-200px;--magic-mouse-y:-200px;--magic-gradient-size:200px;--magic-gradient-from:#9e7aff;--magic-gradient-to:#fe8bbb;--magic-spotlight:#d9d9d973;--magic-spotlight-opacity:.8;background:linear-gradient(var(--magic-card-bg) 0 0) padding-box, radial-gradient(var(--magic-gradient-size) circle at var(--magic-mouse-x) var(--magic-mouse-y), var(--magic-gradient-from), var(--magic-gradient-to), var(--magic-card-border) 100%) border-box;border-radius:var(--radius-container,1rem);isolation:isolate;border:1px solid #0000;position:relative;overflow:hidden}.magic-card-surface{z-index:1;pointer-events:none;background:var(--magic-card-bg);border-radius:inherit;position:absolute;inset:1px}.magic-card-spotlight{z-index:2;pointer-events:none;background:radial-gradient(var(--magic-gradient-size) circle at var(--magic-mouse-x) var(--magic-mouse-y), var(--magic-spotlight), transparent 100%);border-radius:inherit;opacity:0;transition:opacity .3s;position:absolute;inset:1px}.magic-card:hover .magic-card-spotlight,.magic-card:focus-within .magic-card-spotlight{opacity:var(--magic-spotlight-opacity)}.magic-card-content{z-index:3;position:relative}@media (prefers-reduced-motion:reduce){.magic-card-spotlight{transition:none}}