html,body{height:100%;margin:0;background:#081818}
body{display:flex;flex-direction:column;overflow:hidden}
.demo-navigation{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;width:100%;max-width:450px;height:34px;padding:0 14px;margin:auto;color:var(--demo-ink,#deeee7);background:var(--demo-bg,#081818);font:12px/1.2 "Segoe UI",sans-serif}
.demo-navigation a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px}
.demo-navigation span{font-weight:600;animation:demo-label-pulse 1.8s ease-in-out infinite}
.demo-navigation a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.demo-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:var(--demo-bg,#081818)}
@keyframes demo-label-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.demo-navigation span{animation:none}}