/* The Kelra frame around each demo (top banner and "Ask Kelra" drawer) in the site's current type and colors.
   The demo product itself keeps its own fictional design. */
.experience-banner, .kelra-review-trigger, .kelra-review-drawer { font-family: "DM Sans", system-ui, sans-serif; }
.experience-banner { height: 44px; background: #0a0b0d; color: #d5d8de; font-size: 14px; }
.experience-banner a { color: #fff; }
.kelra-review-trigger { min-height: 46px; padding: 0 18px; border-color: #0a0b0d; background: #0a0b0d; font-size: 14px; font-weight: 500; }
.kelra-review-trigger:focus-visible, .experience-banner a:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 3px; }
@media (max-width: 780px) { .experience-banner { font-size: 12px; } }
@media (max-width: 500px) { .experience-banner { height: 40px; } }
.tix .kelra-review-trigger { border-color: #7c5cff; }