/* Invisible in the approved composition; appears only when using the keyboard. */
.zebra-skip-link{position:fixed;top:10px;left:16px;z-index:999999;padding:12px 18px;background:#f2ede4;color:#080808;border:2px solid #080808;transform:translateY(-160%)}
.zebra-skip-link:focus{transform:translateY(0)}
body.zebra-front-page a:focus-visible,body.zebra-front-page button:focus-visible,body.zebra-contact-page a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
#zebra-main-content:focus{outline:none}
/* Enlarge touch targets without moving or resizing the visible controls. */
@media(pointer:coarse){
 .zebra-nav a{position:relative}
 .zebra-nav a:before{content:"";position:absolute;inset:-12px 0}
 .zebra-demo__open:before{content:"";position:absolute;inset:-4px 0}
}
/* At 320–360px the original nav and pause label exceed their containers.
   Keep every label, its order and typography; reduce gaps and allow wrapping. */
@media(max-width:360px){
 body.zebra-front-page .zebra-header .zebra-header__inner,body.zebra-contact-page .zebra-header .zebra-header__inner{gap:10px}
 body.zebra-front-page .zebra-header .zebra-nav,body.zebra-contact-page .zebra-header .zebra-nav{gap:6px}
 .zebra-demos__heading{grid-template-columns:minmax(0,1fr)}
 .zebra-demos__toggle{white-space:normal;max-width:100%}
}