:root{--panel-open-dur:400ms;--panel-close-dur:350ms;--panel-translate-y:8px;--panel-blur:2px;--panel-ease:cubic-bezier(.22,1,.36,1)}
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}
.example-slides{display:grid;min-width:0;overflow:hidden;isolation:isolate}
.example-showcase{min-width:0;width:100%;align-self:start}
.home-slideshow .preview-browser{padding:10px 12px;gap:12px}
.example-slide{grid-area:1 / 1;min-width:0;align-self:start}
.example-slide[data-open="true"]{z-index:1}
.home-slideshow .site-demo-cover[data-preview-width]{width:100%;height:auto}
.example-controls{display:flex;align-items:center;gap:0;margin-left:auto}
.example-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);flex:none}
.example-controls button:hover,.example-controls button:focus-visible{background:var(--accent);color:var(--accent-ink)}
.example-controls button:active{transform:scale(.95)}
.example-controls .icon-arrow{font-size:18px}
.example-counter{min-width:44px;text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.home-slideshow .home-example-caption>[data-example-heading]{font-size:23px;font-weight:500;letter-spacing:-.035em}
.example-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1100px){.example-counter{display:none}}
@media(max-width:600px){.home-slideshow .home-example-caption>[data-example-heading]{font-size:21px}}