.na-bar,
.na-bar *{
  box-sizing:border-box;
}

.na-bar{
  position:relative;
  left:50%;
  right:50%;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  background:var(--na-bg,#000);
  color:var(--na-text,#fff);
  font-family:var(--na-font,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  font-size:var(--na-font-size,16px);
  font-weight:var(--na-font-weight,500);
  line-height:1.35;
  min-height:var(--na-height,40px);
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  padding:var(--na-pad-y,8px) var(--na-pad-x,16px);
}

.na-viewport{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}

.na-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:na-loop var(--na-duration,20s) linear infinite;
}

.na-sequence{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:var(--na-gap,48px);
  padding-inline-end:var(--na-gap,48px);
}

.na-item{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  white-space:nowrap;
}

.na-item p,
.na-item ul,
.na-item ol{
  margin:0;
}

.na-item ul,
.na-item ol{
  display:inline-flex;
  gap:1.5em;
  padding-inline-start:1.25em;
}

@keyframes na-loop{
  from{transform:translate3d(var(--na-from,0),0,0)}
  to{transform:translate3d(var(--na-to,-1000px),0,0)}
}

.na-neon{
  text-shadow:
    0 0 calc(2px * var(--na-neon-int,2)) var(--na-neon,#0ff),
    0 0 calc(6px * var(--na-neon-int,2)) var(--na-neon,#0ff),
    0 0 calc(12px * var(--na-neon-int,2)) var(--na-neon,#0ff);
}

.na-bar a{
  color:inherit;
  text-decoration:none;
}

.na-bar a:hover,
.na-bar a:focus-visible{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.15em;
}

.na-motion-toggle{
  flex:0 0 auto;
  position:relative;
  z-index:1;
  min-height:30px;
  padding:3px 9px;
  border:1px solid currentColor;
  border-radius:4px;
  background:transparent;
  color:inherit;
  font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-shadow:none;
  cursor:pointer;
}

.na-motion-toggle:hover,
.na-motion-toggle:focus-visible{
  background:rgba(127,127,127,.24);
  outline:2px solid currentColor;
  outline-offset:2px;
}

.na-user-paused .na-track,
.na-content-focused .na-track,
.na-pause-on-hover:hover .na-track{
  animation-play-state:paused;
}

.na-fixed{
  position:fixed;
  top:var(--na-fixed-top,0);
  left:0;
  right:auto;
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  z-index:99990;
}

.na-fixed-spacer{
  display:block;
  width:100%;
  pointer-events:none;
}

.na-reduced-motion .na-track{
  animation:none !important;
  transform:none !important;
  width:100%;
}

.na-reduced-motion .na-viewport{
  overflow-x:auto;
}

.na-reduced-motion .na-sequence{
  min-width:100%;
  padding-inline-end:0;
}

.na-reduced-motion .na-item{
  white-space:normal;
}

@media (prefers-reduced-motion:reduce){
  .na-track{
    animation:none !important;
    transform:none !important;
  }
}

@media (max-width:600px){
  .na-bar{
    gap:6px;
  }
  .na-motion-toggle{
    padding:3px 7px;
  }
}
