.app-demo{isolation:isolate;position:relative}.demo-window{background:var(--color-gray-50);text-align:left;border:1px solid #ffffff2e;border-radius:.875rem;overflow:hidden;box-shadow:0 30px 80px -20px #19281c73,0 12px 24px -12px #19281c4d}.dark .demo-window,[data-theme=dark] .demo-window{background:var(--color-gray-950)}.demo-chrome{border-bottom:1px solid var(--border);background:var(--background);align-items:center;gap:1rem;height:2.75rem;padding:0 1rem;display:flex}.demo-url{background:var(--muted);width:100%;max-width:22rem;height:1.75rem;color:color-mix(in oklch, var(--muted-foreground) 80%, var(--foreground));border-radius:.5rem;justify-content:center;align-items:center;gap:.375rem;margin-inline:auto;font-size:.75rem;display:inline-flex}.demo-viewport{height:clamp(30rem,62vw,40rem);display:flex;position:relative;overflow:hidden}.demo-sidebar{border-right:1px solid var(--border);background:var(--background);flex-direction:column;flex:none;gap:.125rem;width:13rem;padding:1rem .625rem;font-size:.8125rem;display:flex}.demo-nav{height:2rem;color:var(--foreground);border-radius:.5rem;align-items:center;gap:.625rem;padding:0 .625rem;display:flex}.demo-nav :global(svg){color:var(--muted-foreground)}.demo-nav-active{background:var(--muted);font-weight:500}.demo-nav-heading{color:var(--muted-foreground);padding:1.25rem .625rem .375rem;font-size:.6875rem}.demo-folder-dot{border-radius:9999px;width:.5rem;height:.5rem;margin-inline:.25rem}.demo-main{flex:1;min-width:0}.demo-header{align-items:center;gap:1rem;height:4rem;display:flex}.demo-search{background:var(--muted);cursor:text;border-radius:9999px;flex:1;align-items:center;min-width:0;max-width:30rem;margin-inline:auto;padding:0 .5rem 0 .875rem;display:flex}.demo-search:focus-within{box-shadow:0 0 0 1px var(--primary)}.demo-kbd{border:1px solid var(--border);background:var(--background);width:1.25rem;height:1.25rem;color:var(--muted-foreground);border-radius:.3rem;justify-content:center;align-items:center;font-family:inherit;font-size:.6875rem;display:inline-flex}@media (width<=47.99rem){.demo-sidebar{display:none}}.demo-grid{--demo-gap:1.5rem;gap:var(--demo-gap);display:flex}.demo-col{gap:var(--demo-gap);flex-direction:column;flex:1;min-width:0;display:flex}.demo-grid[data-filtered],.demo-grid[data-filtered] .demo-col{display:block}.demo-grid[data-filtered]{columns:5;column-gap:var(--demo-gap)}.demo-grid[data-filtered] .demo-col{display:contents}.demo-grid[data-filtered] .demo-item{margin-bottom:var(--demo-gap);break-inside:avoid}@container (width<=54.99rem){.demo-grid{columns:3;column-gap:var(--demo-gap);display:block}.demo-grid[data-filtered]{columns:3}.demo-col{display:contents}.demo-item{margin-bottom:var(--demo-gap);break-inside:avoid}}@container (width<=37.49rem){.demo-grid{--demo-gap:1rem}.demo-grid,.demo-grid[data-filtered]{columns:2}}.demo-card{width:100%;color:var(--card-foreground);font:inherit;text-align:left;cursor:pointer;contain:content;border-radius:1rem;padding:0;display:block;position:relative;overflow:hidden}.demo-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.demo-card:not([data-favorite]) .demo-heart{display:none}.demo-heart svg *,.demo-filled *{fill:currentColor}.demo-media img{transform-origin:50% 40%}.demo-card[data-type=video]:hover .demo-play{display:none}@media (prefers-reduced-motion:no-preference){.demo-card[data-type=video]:hover .demo-media img{animation:6s ease-in-out infinite alternate demo-video-pan}}@keyframes demo-video-pan{0%{transform:scale(1.02)translateY(0)}to{transform:scale(1.14)translateY(-4%)}}.demo-overlay{z-index:20;background:#00000080;justify-content:center;align-items:center;padding:3rem 1rem 1rem;animation:.15s ease-out demo-fade;display:flex;position:absolute;inset:0}.dark .demo-overlay,[data-theme=dark] .demo-overlay{background:#000c}.demo-overlay[hidden]{display:none}.demo-modal{background:var(--background);border-radius:1rem;flex-direction:column;width:100%;max-width:64rem;height:100%;animation:.18s ease-out demo-zoom;display:flex;overflow:hidden}.demo-modal-preview{flex:1.4;justify-content:center;align-items:center;min-height:0;padding:1rem;display:flex;overflow:hidden;container-type:size}@container (width>=48rem){.demo-overlay{padding:3rem 2.5rem 2rem}.demo-modal{flex-direction:row}.demo-modal-preview{border-right:1px solid var(--border);flex:2}}@keyframes demo-fade{0%{opacity:0}}@keyframes demo-zoom{0%{opacity:0;transform:scale(.96)}}