/* The hero is a capture of the real demo, with one accessible entry link. */
.demo-preview-link{display:block;color:#fff;text-decoration:none;isolation:isolate;cursor:pointer}
.demo-preview-image{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.demo-preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:rgb(0 0 0 / 66%);opacity:0;transition:opacity 220ms ease;z-index:1}
.demo-preview-label{display:flex;align-items:center;gap:12px;font-size:clamp(16px,2.3vw,28px);font-weight:700;line-height:1.35;transform:translateY(8px);transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.demo-preview-label svg{width:24px;height:24px;flex:none}
@media(hover:hover){
 .demo-preview-link:hover .demo-preview-overlay{opacity:1}
 .demo-preview-link:hover .demo-preview-label{transform:translateY(0)}
}
.demo-preview-link:focus-visible{outline:3px solid #7b59ff;outline-offset:5px}
.demo-entry-veil{position:fixed;inset:0;background:#0c0c0c;z-index:2147483647;opacity:0;pointer-events:none;transition:opacity 320ms cubic-bezier(.4,0,.2,1)}
html[data-demo-leaving] .demo-entry-veil{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.demo-preview-overlay,.demo-preview-label,.demo-entry-veil{transition:none}.demo-preview-label{transform:none}}