/* kit nav: floating centered pill. Theme through CSS variables, no brand imposed. */
:root {
  --kit-nav-top: 12px;
  --kit-nav-gutter: 16px;
  --kit-nav-font: inherit;
  --kit-nav-ease: cubic-bezier(.2, .7, .2, 1);
}
.kit-skip {
  position: absolute; left: 50%; top: -120px; transform: translateX(-50%); z-index: 1100;
  padding: .65rem 1.1rem; border-radius: 9999px; background: #fff; color: #000;
  font: 600 14px/1 var(--kit-nav-font); text-decoration: none; transition: top .15s;
}
.kit-skip:focus { top: 8px; outline: 2px solid #000; outline-offset: 2px; }

.kit-nav {
  /* default = dark */
  --_bg: var(--kit-nav-bg, rgba(18, 19, 22, .92));
  --_fg: var(--kit-nav-fg, #f2f3f5);
  --_fg2: var(--kit-nav-fg-muted, #a8adb6);
  --_bd: var(--kit-nav-border, rgba(255, 255, 255, .14));
  --_hover: var(--kit-nav-hover, rgba(255, 255, 255, .09));
  --_cur-bg: var(--kit-nav-current-bg, rgba(255, 255, 255, .16));
  --_cur-fg: var(--kit-nav-current-fg, #fff);
  --_focus: var(--kit-nav-focus, #9ad8ff);
  --_shadow: var(--kit-nav-shadow, 0 10px 30px rgba(0, 0, 0, .35));
  --_panel: var(--kit-nav-panel-bg, #121316);
  --_blur: var(--kit-nav-blur, none);
  position: sticky; top: var(--kit-nav-top); z-index: 1000;
  display: flex; justify-content: center;
  margin: var(--kit-nav-top) 0 0; padding: 0 var(--kit-nav-gutter);
  pointer-events: none; font-family: var(--kit-nav-font);
}
.kit-nav[data-variant="light"] {
  --_panel: var(--kit-nav-panel-bg, #fff); --_bg: var(--kit-nav-bg, rgba(255, 255, 255, .94)); --_fg: var(--kit-nav-fg, #14161a);
  --_fg2: var(--kit-nav-fg-muted, #555b66); --_bd: var(--kit-nav-border, rgba(0, 0, 0, .12));
  --_hover: var(--kit-nav-hover, rgba(0, 0, 0, .06)); --_cur-bg: var(--kit-nav-current-bg, #14161a);
  --_cur-fg: var(--kit-nav-current-fg, #fff); --_focus: var(--kit-nav-focus, #0b57d0);
  --_shadow: var(--kit-nav-shadow, 0 8px 24px rgba(20, 22, 26, .12));
}
.kit-nav[data-variant="glass"] {
  --_panel: var(--kit-nav-panel-bg, rgba(30, 32, 38, .82)); --_bg: var(--kit-nav-bg, rgba(40, 42, 50, .38)); --_bd: var(--kit-nav-border, rgba(255, 255, 255, .18));
  --_blur: var(--kit-nav-blur, blur(14px) saturate(1.4)); --_fg2: var(--kit-nav-fg-muted, #b9bec8);
  --_shadow: var(--kit-nav-shadow, inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 36px rgba(0, 0, 0, .3));
}
.kit-nav[data-variant="outline"] {
  --_panel: var(--kit-nav-panel-bg, Canvas); --_bg: var(--kit-nav-bg, transparent); --_bd: var(--kit-nav-border, currentColor);
  --_shadow: var(--kit-nav-shadow, none); --_hover: var(--kit-nav-hover, rgba(127, 127, 127, .16));
  --_cur-bg: var(--kit-nav-current-bg, transparent); --_cur-fg: var(--kit-nav-current-fg, var(--_fg));
  color: var(--_fg);
}
.kit-nav[data-variant="outline"] .kit-nav__pill { border-width: 1.5px; }
.kit-nav[data-variant="outline"] [aria-current] { box-shadow: inset 0 0 0 1.5px var(--_fg); }

.kit-nav__pill {
  position: relative; display: flex; align-items: center; gap: 4px;
  max-width: 100%; box-sizing: border-box; padding: 5px;
  border-radius: 9999px; border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg); box-shadow: var(--_shadow);
  -webkit-backdrop-filter: var(--_blur); backdrop-filter: var(--_blur);
  pointer-events: auto;
  transition: padding .3s var(--kit-nav-ease), box-shadow .3s var(--kit-nav-ease), transform .3s var(--kit-nav-ease);
}
.kit-nav__brand, .kit-nav__link, .kit-nav__toggle {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 40px;
  padding: 0 16px; border-radius: 9999px; border: 0; background: none; color: inherit;
  font: 500 14px/1 var(--kit-nav-font); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, color .2s, min-height .3s var(--kit-nav-ease), padding .3s var(--kit-nav-ease), font-size .3s;
}
.kit-nav__brand { font-weight: 700; padding-inline: 14px 12px; }
.kit-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kit-nav__list::-webkit-scrollbar { display: none; }
.kit-nav__link { color: var(--_fg2); }
.kit-nav__link:hover { background: var(--_hover); color: var(--_fg); }
.kit-nav__link[aria-current] { background: var(--_cur-bg); color: var(--_cur-fg); }
.kit-nav a:focus-visible, .kit-nav button:focus-visible { outline: 2px solid var(--_focus); outline-offset: 2px; }
.kit-nav__toggle { display: none; margin-left: auto; gap: 8px; }
.kit-nav__toggle i, .kit-nav__toggle i::before { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--kit-nav-ease); }
.kit-nav__toggle i { position: relative; }
.kit-nav__toggle i::before { content: ""; position: absolute; top: 5px; }
.kit-nav__toggle[aria-expanded="true"] i { transform: translateY(2.5px) rotate(45deg); }
.kit-nav__toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(-90deg); }

/* compact on scroll */
.kit-nav[data-compact] .kit-nav__pill { padding: 3px; box-shadow: var(--kit-nav-shadow-compact, 0 4px 14px rgba(0, 0, 0, .25)); }
.kit-nav[data-compact] .kit-nav__brand, .kit-nav[data-compact] .kit-nav__link, .kit-nav[data-compact] .kit-nav__toggle { min-height: 32px; padding-inline: 12px; font-size: 13px; }

/* mobile: pill collapses into a menu panel (only when JS is available) */
@media (max-width: 720px) {
  .kit-nav__pill { width: 100%; }
  .kit-js .kit-nav__toggle { display: inline-flex; }
  .kit-js .kit-nav__list {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 8px; border-radius: 24px; border: 1px solid var(--_bd); background: var(--_panel);
    -webkit-backdrop-filter: var(--_blur); backdrop-filter: var(--_blur); box-shadow: var(--_shadow);
    overflow: visible; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
    transition: opacity .2s, transform .25s var(--kit-nav-ease), visibility 0s .25s;
  }
  .kit-js .kit-nav[data-open] .kit-nav__list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .kit-js .kit-nav__list .kit-nav__link { min-height: 44px; justify-content: flex-start; }
  .kit-nav .kit-nav__link { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-nav *, .kit-skip { transition: none !important; }
}

/* kit skeleton: placeholders that overlay real/reserved space, so layout never shifts. */
.kit-sk {
  --_b: var(--kit-sk-base, rgba(127, 134, 148, .22));
  --_h: var(--kit-sk-highlight, rgba(255, 255, 255, .16));
  position: relative; display: block; overflow: hidden; box-sizing: border-box;
  background: var(--_b); border-radius: var(--kit-sk-radius, 8px);
}
.kit-sk::after {
  content: ""; position: absolute; inset: 0; transform: translate3d(-100%, 0, 0);
  background: linear-gradient(90deg, transparent, var(--_h), transparent);
  animation: kit-sk-shimmer var(--kit-sk-speed, 1.5s) ease-in-out infinite;
}
@keyframes kit-sk-shimmer { to { transform: translate3d(100%, 0, 0); } }

.kit-sk-line { height: 1em; width: var(--w, 100%); margin-block: .5em; border-radius: 6px; }
.kit-sk-line:last-child:not(:only-child) { width: calc(var(--w, 100%) * .6); }
.kit-sk-title { height: 1.6em; width: var(--w, 55%); margin-block: .3em .7em; }
.kit-sk-img { width: 100%; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--kit-sk-img-radius, 12px); }
.kit-sk-avatar { width: var(--size, 48px); height: var(--size, 48px); border-radius: 50%; flex: none; }
.kit-sk-btn { width: var(--w, 120px); height: 44px; border-radius: 9999px; }
.kit-sk-card { padding: 16px; border: 1px solid var(--kit-sk-border, rgba(127, 134, 148, .25)); border-radius: var(--kit-sk-card-radius, 14px); background: transparent; overflow: hidden; }
.kit-sk-card::after { display: none; }
.kit-sk-chart { display: flex; align-items: flex-end; gap: 6px; width: 100%; height: var(--h, 180px); padding: 8px 0; background: none; }
.kit-sk-chart::after { display: none; }
.kit-sk-chart > i { position: relative; flex: 1; height: var(--h, 50%); overflow: hidden; border-radius: 4px 4px 0 0; background: var(--_b); }
.kit-sk-chart > i::after { content: ""; position: absolute; inset: 0; transform: translate3d(-100%, 0, 0); background: linear-gradient(90deg, transparent, var(--_h), transparent); animation: kit-sk-shimmer var(--kit-sk-speed, 1.5s) ease-in-out infinite; }
.kit-sk-row { display: flex; align-items: center; gap: 12px; }
.kit-sk-row > .kit-sk-line:not(.kit-sk-avatar) { flex: 1; }

/* container: reserve the space, hide real content, overlay the placeholder layer.
   Rules apply only when JS runs, so no-JS users never see a stuck skeleton. */
.kit-js [data-skeleton] { position: relative; }
.kit-js [data-skeleton="loading"] > :not(.kit-sk-layer) { visibility: hidden; }
.kit-js [data-skeleton="loading"] > .kit-sk-layer { display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.kit-sk-layer { display: none; }
.kit-js [data-skeleton="done"] > .kit-sk-layer { display: none; }
.kit-js [data-skeleton="done"] { animation: kit-sk-in .25s ease-out; }
@keyframes kit-sk-in { from { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .kit-sk::after, .kit-sk-chart > i::after { animation: none; display: none; }
  .kit-js [data-skeleton="done"] { animation: none; }
}

/* kit marquee: seamless loop, translate3d by exactly one set width (--kit-mk-shift, set by JS). */
.kit-marquee {
  --kit-mk-gap: 2.5rem;
  position: relative; overflow-x: auto; scrollbar-width: none;
}
.kit-marquee::-webkit-scrollbar { display: none; }
.kit-marquee[data-fade] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.kit-marquee__track { display: flex; width: max-content; }
.kit-marquee__set { display: flex; flex: none; align-items: center; gap: var(--kit-mk-gap); padding-right: var(--kit-mk-gap); }
.kit-marquee__set > * { flex: none; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .kit-js .kit-marquee[data-ready] { overflow: hidden; }
  .kit-js .kit-marquee[data-ready] .kit-marquee__track {
    will-change: transform;
    animation: kit-mk var(--kit-mk-dur, 30s) linear infinite;
  }
  .kit-js .kit-marquee[data-direction="right"][data-ready] .kit-marquee__track { animation-direction: reverse; }
  .kit-js .kit-marquee[data-pause]:hover .kit-marquee__track,
  .kit-js .kit-marquee[data-pause]:focus-within .kit-marquee__track { animation-play-state: paused; }
}
@keyframes kit-mk {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--kit-mk-shift, 0px) * -1), 0, 0); }
}

.kit-contacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kit-contacts__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 0 16px;
  border-radius: 9999px; border: 1px solid var(--kit-contacts-border, rgba(127, 134, 148, .4));
  color: var(--kit-contacts-fg, inherit); text-decoration: none; font: 500 14px/1 var(--kit-contacts-font, inherit);
  transition: background-color .2s, border-color .2s;
}
.kit-contacts__link:hover { background: var(--kit-contacts-hover, rgba(127, 134, 148, .16)); }
.kit-contacts__link:focus-visible { outline: 2px solid var(--kit-contacts-focus, currentColor); outline-offset: 2px; }
.kit-contacts__icon { flex: none; }
[data-kit-contacts]:empty { min-height: 44px; }