.blog-app-demo-figure{margin:2.5rem 0}.blog-app-demo{aspect-ratio:16/9;isolation:isolate;border:1px solid hsl(var(--border));background:#a4a4a4;border-radius:6px;outline:none;width:100%;position:relative;overflow:clip}.blog-app-demo-background{pointer-events:none;will-change:transform;background:url(/blog-media/demo-background.svg) 50%/cover;position:absolute;inset:-3%}.blog-app-demo-window{transform-origin:0 0;will-change:transform;background:#090909;border-radius:12px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 32px 90px #08071366,0 5px 22px #08071350,0 0 0 1px #ffffff26}.blog-app-demo-clip{border-radius:inherit;clip-path:inset(0 round 12px);position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff)}.blog-app-demo-window iframe{border:0;max-width:none;display:block}.blog-app-demo[data-demo-interaction=expanded]:not(.blog-app-demo-expanded) iframe{pointer-events:none}.blog-app-demo-cursor{pointer-events:none;filter:drop-shadow(0 2px 2px #0004);position:absolute;top:0;left:0}.blog-app-demo-controls{color:#fff;-webkit-backdrop-filter:blur(18px)saturate(1.25);backdrop-filter:blur(18px)saturate(1.25);opacity:0;pointer-events:none;background:#18181845;border-radius:9px;align-items:center;gap:6px;width:min(280px,100% - 24px);padding:3px 6px;transition:opacity .16s ease-out;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #ffffff21,0 2px 10px #0002}@media (hover:hover){.blog-app-demo:hover .blog-app-demo-controls{opacity:1;pointer-events:auto}}.blog-app-demo[data-demo-error] .blog-app-demo-controls,.blog-app-demo[data-touch-controls=true] .blog-app-demo-controls{opacity:1;pointer-events:auto}.blog-app-demo-controls:has(:focus-visible){opacity:1;pointer-events:auto}.blog-app-demo-controls button{width:28px;height:28px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:5px;flex-shrink:0;place-items:center;display:grid}.blog-app-demo-controls button:hover{background:#ffffff20}.blog-app-demo-controls :focus-visible{outline-offset:2px;outline:2px solid #fff}.blog-app-demo-controls svg{fill:currentColor;width:16px;height:16px}.blog-app-demo-controls input{accent-color:#fff;cursor:pointer;flex:1;width:100%;min-width:0;height:18px}.blog-app-demo-expanded{z-index:100;border-radius:0;width:min(100vw,177.778dvh);height:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax #000e}.blog-app-demo-expanded .blog-app-demo-window{border-radius:18px}.blog-app-demo-expanded .blog-app-demo-clip{clip-path:inset(0 round 18px)}.blog-app-demo-click{pointer-events:none;background:#ffffff15;border:2px solid #fff9;border-radius:50%;width:32px;height:32px;margin:-16px 0 0 -16px;animation:.45s ease-out forwards demo-click;position:absolute}@keyframes demo-click{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.25)}}.blog-app-demo-caption{text-align:center;color:hsl(var(--muted-foreground));margin-top:12px;font-size:13px;line-height:20px}@media (pointer:coarse){.blog-app-demo-controls button{width:44px;height:44px}.blog-app-demo-controls input{height:44px}}@media (prefers-reduced-motion:reduce){.blog-app-demo-click{display:none}.blog-app-demo-controls{transition:none}}.blog-app-demo-error{z-index:2;max-height:calc(100% - 76px);color:hsl(var(--foreground));background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:6px;margin:0;padding:8px;font-size:13px;position:absolute;bottom:64px;left:16px;right:16px;overflow:auto}.blog-app-demo-expanded{margin:0;padding:0;bottom:auto;right:auto}.blog-app-demo-expanded::backdrop{background:#000000d9}