:root { --km-demo-home-height: 54px; }
.km-demo-home {
  position: sticky; top: 0; z-index: 1500;
  display: flex; align-items: center; box-sizing: border-box; min-height: var(--km-demo-home-height);
  padding: 5px clamp(14px, 3vw, 32px); background: #101b16; border-bottom: 1px solid #405647;
}
.km-demo-home a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 7px 15px;
  border-radius: 7px; background: #d4f18c; color: #182416;
  font: 750 16px/1.2 system-ui, sans-serif; text-decoration: none;
}
.km-demo-home a:hover { background: #e6ffa9; }
.km-demo-home a:focus-visible { outline: 2px solid white; outline-offset: 2px; }
body:has(> .km-demo-home) > header,
body:has(> .km-demo-home) :is(.site-header, .sidebar) {
  top: var(--km-demo-home-height);
}
body:has(> .km-demo-home) .takeoff-fullscreen {
  top: var(--km-demo-home-height);
  height: calc(100dvh - var(--km-demo-home-height));
  transform: translateZ(0);
}
html:has(.km-demo-home) { scroll-padding-top: var(--km-demo-home-height); }