:root{
  --sig-mark-top:  -0.9em;
  --sig-mark-end:  8px;
  --sig-mark-fg:   #3f4859;
  --sig-mark-bg:   #f1f3f8;
  --sig-mark-size: 10px;
}

.sig{
  --sig-bar-bg:        var(--sig-u-bar-bg, #eef0f4);
  --sig-active-bg:     var(--sig-u-active-bg, #ffffff);
  --sig-text:          var(--sig-u-text, #5b6474);
  --sig-text-hover:    var(--sig-u-text-hover, #1b2130);
  --sig-text-active:   var(--sig-u-text-active, #1b2130);
  --sig-on-bg:         var(--sig-active-bg);
  --sig-on-shadow:     var(--sig-e1);
  --sig-menu-bg:       #ffffff;
  --sig-hair:          color-mix(in srgb, var(--sig-text) 22%, transparent);
  --sig-border-w:      var(--sig-u-border-w, 0px);
  --sig-border-c:      var(--sig-u-border-c, var(--sig-hair));
  --sig-tab-border-w:  var(--sig-u-tab-border-w, 0px);
  --sig-tab-border-c:  var(--sig-u-tab-border-c, var(--sig-hair));
  --sig-shadow-rgb:    16 22 34;

  --sig-pad-x:         16px;
  --sig-pad-y:         9px;
  --sig-fs:            var(--sig-u-fs, 15px);
  --sig-fw:            var(--sig-u-fw, 700);
  --sig-stroke:        .3px;
  --sig-ls:            -0.005em;
  --sig-icon:          var(--sig-u-icon, 17px);
  --sig-gap:           var(--sig-u-gap, 4px);
  --sig-narrow-gap:    var(--sig-u-narrow-gap, 10px);
  --sig-bar-pad:       var(--sig-u-bar-pad, 4px);
  --sig-bar-w:         var(--sig-u-bar-w, 220px);

  --sig-radius:        var(--sig-u-radius, 14px);
  --sig-radius-inner:  var(--sig-radius);

  --sig-e0: none;
  --sig-e1: 0 .5px 1px  rgb(var(--sig-shadow-rgb) / .07),
            0 1px 2.5px rgb(var(--sig-shadow-rgb) / .05);
  --sig-e2: 0 .5px 1px  rgb(var(--sig-shadow-rgb) / .08),
            0 2px 4px   rgb(var(--sig-shadow-rgb) / .06),
            0 5px 10px  rgb(var(--sig-shadow-rgb) / .04);
  --sig-bar-shadow:    var(--sig-e0);
  --sig-marker-shadow: var(--sig-e1);
  --sig-pick-shadow:      var(--sig-e1);
  --sig-pick-open-shadow: var(--sig-e2);

  --sig-bar-subtle: 0 1px 2px  rgb(var(--sig-shadow-rgb) / .10),
                    0 3px 9px  rgb(var(--sig-shadow-rgb) / .11);
  --sig-bar-raised: 0 2px 5px  rgb(var(--sig-shadow-rgb) / .11),
                    0 10px 26px rgb(var(--sig-shadow-rgb) / .20),
                    0 20px 44px rgb(var(--sig-shadow-rgb) / .10);
  --sig-bar-inset:  inset 0 2px 5px rgb(var(--sig-shadow-rgb) / .15),
                    inset 0 0 0 1px rgb(var(--sig-shadow-rgb) / .07);

  --sig-dur:   var(--sig-u-dur, 340ms);
  --sig-dur-2: 200ms;
  --sig-ease:  cubic-bezier(.32,.72,0,1);
}

.sig[data-size="small"]{ --sig-pad-x:12px; --sig-pad-y:6px;  --sig-icon:var(--sig-u-icon,15px); --sig-bar-pad:var(--sig-u-bar-pad,3px); }
.sig[data-size="large"]{ --sig-pad-x:22px; --sig-pad-y:13px; --sig-icon:var(--sig-u-icon,20px); --sig-bar-pad:var(--sig-u-bar-pad,5px); }

.sig[data-fw="400"]{ --sig-u-fw: 400; --sig-stroke: 0; }
.sig[data-fw="700"]{ --sig-u-fw: 700; --sig-stroke: .3px; }
.sig[data-fw="800"]{ --sig-u-fw: 800; --sig-stroke: .72px; }

.sig[data-corner="sharp"]{ --sig-radius:var(--sig-u-radius,0px); }
.sig[data-corner="soft"] { --sig-radius:var(--sig-u-radius,8px); }
.sig[data-corner="round"]{ --sig-radius:var(--sig-u-radius,14px); }
.sig[data-corner="pill"] { --sig-radius:999px; --sig-radius-inner:999px; }

.sig[data-ease="spring"]{ --sig-ease: cubic-bezier(.34,1.28,.42,1); }
.sig[data-ease="linear"]{ --sig-ease: linear; }
.sig[data-ease="decelerate"]{ --sig-ease: cubic-bezier(.05,.7,.1,1); }

.sig{ position: relative; display: block; }
.sig *, .sig *::before, .sig *::after{ box-sizing: border-box; }

.sig__scroll{
  position: relative;
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding: 8px;
  margin: -8px;
}
.sig__scroll::-webkit-scrollbar{ display: none; }

.sig.is-scrollable .sig__scroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 var(--sig-fade-l,0px),
                      #000 calc(100% - var(--sig-fade-r,0px)), #0000 100%);
  mask-image: linear-gradient(90deg, #0000 0, #000 var(--sig-fade-l,0px),
              #000 calc(100% - var(--sig-fade-r,0px)), #0000 100%);
}
.sig.is-of-left  { --sig-fade-l: 38px; }
.sig.is-of-right { --sig-fade-r: 38px; }

.sig__bar{
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--sig-gap);
  padding: var(--sig-bar-pad);
  width: 100%;
  min-width: 0;
  justify-content: center;
  border: var(--sig-border-w) solid var(--sig-border-c);
  border-radius: var(--sig-radius);
  box-shadow: var(--sig-bar-shadow);
}

.sig[data-flow="vertical"] .sig__scroll{ overflow: visible; width: var(--sig-bar-w); max-width: 100%; }
.sig[data-flow="vertical"] .sig__bar{ flex-direction: column; }
.sig[data-align="left"]   .sig__bar{ justify-content: flex-start; }
.sig[data-align="center"] .sig__bar{ justify-content: center; }
.sig[data-align="right"]  .sig__bar{ justify-content: flex-end; }

.sig[data-bar-fit="true"] .sig__bar{ width: fit-content; max-width: 100%; margin-inline: auto; }
.sig[data-bar-fit="true"] .sig__tab{ flex: 0 0 auto; }
.sig[data-bar-fit="true"][data-align="left"]  .sig__bar{ margin-inline: 0 auto; }
.sig[data-bar-fit="true"][data-align="right"] .sig__bar{ margin-inline: auto 0; }

.sig__tab{
  position: relative;
  z-index: 1;
  appearance: none; -webkit-appearance: none;
  background: transparent;
  margin: 0;
  border: var(--sig-tab-border-w) solid var(--sig-tab-border-c);
  padding: var(--sig-pad-y) var(--sig-pad-x);
  font: inherit;
  font-size: var(--sig-fs);
  font-weight: var(--sig-fw);
  letter-spacing: var(--sig-ls);
  line-height: 1.35;
  -webkit-text-stroke: var(--sig-stroke) currentColor;
  color: var(--sig-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  gap: .55em;
  white-space: nowrap;
  border-radius: var(--sig-radius-inner);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--sig-dur-2) var(--sig-ease),
              background-color var(--sig-dur-2) var(--sig-ease),
              opacity var(--sig-dur-2) linear;
}
.sig[data-upper="true"] .sig__tab{ text-transform: uppercase; letter-spacing: .06em; }
.sig[data-icon-pos="top"]   .sig__tab{ flex-direction: column; gap: .35em; }
.sig[data-icon-pos="right"] .sig__tab{ flex-direction: row-reverse; }
.sig[data-flow="vertical"] .sig__tab{ justify-content: center; white-space: normal; text-align: center; }

.sig .sig__tab:hover{ color: var(--sig-text-hover); }
.sig[data-skin="inset"]   .sig__tab:not([aria-selected="true"]):not(.sig-edit-active):hover,
.sig[data-skin="capsule"] .sig__tab:not([aria-selected="true"]):not(.sig-edit-active):hover{
  background: var(--sig-active-bg);
}
.sig .sig__tab[aria-selected="true"]:hover{ color: var(--sig-u-text-hover, var(--sig-text-active)); }
.sig:not(.is-ready) .sig__tab.sig-edit-active:hover{ color: var(--sig-u-text-hover, var(--sig-text-active)); }
.sig__tab:focus{ outline: none; }
.sig__tab:focus-visible{ outline: 2px solid var(--sig-text-active); outline-offset: 2px; z-index: 3; }
.sig__tab[aria-selected="true"]{ color: var(--sig-text-active); }
.sig__tab[disabled]{ opacity: .4; cursor: not-allowed; }
.sig__tab[hidden]{ display: none; }

.sig__label{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sig__ico{
  width: var(--sig-icon); height: var(--sig-icon);
  flex: none; display: none;
  overflow: visible;
}
.sig__ico:empty{ display: none !important; }
.sig[data-tab-content="icontext"] .sig__ico,
.sig[data-tab-content="icononly"] .sig__ico{ display: block; }
.sig[data-tab-content="icononly"] .sig__label{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sig[data-tab-content="icononly"] .sig__tab{ padding-inline: var(--sig-pad-y); }

.sig__badge{
  font-size: .74em; font-weight: 700; line-height: 1;
  padding: .28em .5em; min-width: 1.55em; text-align: center;
  border-radius: var(--sig-radius-inner); flex: none;
  -webkit-text-stroke: 0;
  background: color-mix(in srgb, var(--sig-badge-src) 16%, transparent);
  color: var(--sig-badge-src);
  transition: background-color var(--sig-dur-2) var(--sig-ease);
}
.sig__badge:empty{ display: none; }
.sig__tab, .sig__opt{ --sig-badge-src: var(--sig-text); }
.sig__pick{ --sig-badge-src: var(--sig-text-active); }
.sig .sig__tab:hover, .sig .sig__opt:hover, .sig .sig__pick:hover{ --sig-badge-src: var(--sig-text-hover); }
.sig .sig__tab[aria-selected="true"],
.sig .sig__opt[aria-selected="true"]{ --sig-badge-src: var(--sig-text-active); }
.sig:not(.is-ready) .sig__tab.sig-edit-active{ --sig-badge-src: var(--sig-text-active); }

.sig__marker{
  position: absolute; z-index: 0; top: 0; left: 0;
  width: var(--sig-mx-w, 0px);
  height: var(--sig-mx-h, 0px);
  transform: translate3d(var(--sig-mx-x, 0px), var(--sig-mx-y, 0px), 0);
  border-radius: var(--sig-radius-inner);
  background: var(--sig-active-bg);
  box-shadow: var(--sig-marker-shadow);
  pointer-events: none;
  opacity: 0;
  transition: transform var(--sig-dur) var(--sig-ease),
              width var(--sig-dur) var(--sig-ease),
              height var(--sig-dur) var(--sig-ease),
              opacity var(--sig-dur-2) linear,
              background-color var(--sig-dur-2) linear;
}
.sig.is-ready .sig__marker{ opacity: 1; }
.sig.is-jump  .sig__marker{ transition: none; }
.sig[data-marker-motion="none"] .sig__marker{ transition: opacity var(--sig-dur-2) linear; }
.sig[data-marker-motion="fade"] .sig__marker{
  transition: opacity calc(var(--sig-dur) * .5) var(--sig-ease);
}
.sig[data-marker-motion="fade"].is-swap .sig__marker{ opacity: 0; }

.sig[data-skin="inset"]{
  --sig-bar-shadow:  var(--sig-bar-inset);
  --sig-pick-shadow:      var(--sig-bar-inset);
  --sig-pick-open-shadow: var(--sig-bar-inset);
  --sig-on-bg:       var(--sig-active-bg);
  --sig-on-shadow:   var(--sig-e1), 0 0 0 .5px rgb(var(--sig-shadow-rgb) / .05);
  --sig-menu-bg:     var(--sig-bar-bg);
}
.sig[data-skin="inset"] .sig__bar{ background: var(--sig-bar-bg); }
.sig[data-skin="inset"] .sig__marker{
  background: var(--sig-active-bg);
  box-shadow: var(--sig-on-shadow);
}

.sig[data-skin="rail"]{
  --sig-bar-pad: var(--sig-u-bar-pad, 0px);
  --sig-radius-inner: var(--sig-u-radius, 8px);
  --sig-on-bg:       transparent;
  --sig-on-shadow:   none;
  --sig-border-w:     0px;
  --sig-tab-border-w: 0px;
}
.sig[data-skin="rail"] .sig__bar{
  background: none;
  border-radius: 0;
  padding-bottom: 4px;
}
.sig[data-skin="rail"] .sig__marker{ display: none; }
.sig[data-skin="rail"] .sig__tab,
.sig[data-skin="rail"] .sig__tab:hover,
.sig[data-skin="rail"] .sig__tab:focus,
.sig[data-skin="rail"] .sig__tab:active,
.sig[data-skin="rail"] .sig__tab[aria-selected="true"],
.sig[data-skin="rail"] .sig__tab.sig-edit-active{
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.sig[data-skin="rail"] .sig__tab::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 0;
  background: var(--sig-text-active);
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sig-dur-2) var(--sig-ease);
}
.sig[data-skin="rail"] .sig__tab:hover::before,
.sig[data-skin="rail"] .sig__tab[aria-selected="true"]::before{ opacity: 1; }
.sig[data-skin="rail"][data-flow="vertical"] .sig__bar{
  padding-bottom: 0;
  padding-inline-start: 4px;
}
.sig[data-skin="rail"][data-flow="vertical"] .sig__tab::before{
  left: -4px; right: auto; top: 0; bottom: 0;
  width: 3px; height: auto;
  transform: none;
}

.sig[data-skin="capsule"]{
  --sig-bar-pad: var(--sig-u-bar-pad, 0px);
  --sig-radius-inner: var(--sig-u-radius, 999px);
  --sig-marker-shadow: var(--sig-bar-subtle);
  --sig-on-shadow: var(--sig-bar-subtle);
  --sig-border-w: 0px;
}
.sig[data-skin="capsule"] .sig__bar{ background: none; border-radius: 999px; }
.sig[data-skin="capsule"] .sig__tab{ border-radius: 999px; }
.sig[data-skin="capsule"] .sig__marker{ border-radius: 999px; }

.sig[data-skin="dropdown"]{
  --sig-menu-bg: var(--sig-bar-bg);
}
.sig[data-skin="dropdown"] .sig__scroll{ display: none; }
.sig[data-skin="dropdown"] .sig__picker{
  position: relative; width: auto; height: auto;
  margin: 0; overflow: visible; clip-path: none; white-space: normal;
  display: block;
}

.sig[data-skin="bare"]{
  --sig-bar-pad: var(--sig-u-bar-pad, 0px);
  --sig-on-bg:       transparent;
  --sig-on-shadow:   none;
  --sig-border-w:     0px;
  --sig-tab-border-w: 0px;
}
.sig[data-skin="bare"] .sig__bar{ background: none; border-radius: 0; }
.sig[data-skin="bare"] .sig__marker{ display: none; }
.sig[data-skin="bare"] .sig__tab[aria-selected="true"]{ font-weight: 700; }

.sig[data-bar-elev="none"]  {
  --sig-bar-shadow: none;
  --sig-marker-shadow: none;
  --sig-on-shadow: none;
  --sig-pick-shadow: none;
  --sig-pick-open-shadow: none;
}
.sig[data-bar-elev="inset"] {
  --sig-bar-shadow: var(--sig-bar-inset);
  --sig-pick-shadow: var(--sig-bar-inset);
  --sig-pick-open-shadow: var(--sig-bar-inset);
}
.sig[data-bar-elev="subtle"]{
  --sig-bar-shadow: var(--sig-bar-subtle);
  --sig-pick-shadow: var(--sig-bar-subtle);
  --sig-pick-open-shadow: var(--sig-bar-subtle);
}
.sig[data-bar-elev="raised"]{
  --sig-bar-shadow: var(--sig-bar-raised);
  --sig-pick-shadow: var(--sig-bar-raised);
  --sig-pick-open-shadow: var(--sig-bar-raised);
}

.sig__picker{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sig__pick{
  position: relative;
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center; gap: .55em;
  width: 100%; margin: 0;
  padding: calc(var(--sig-pad-y) + 2px) calc(var(--sig-pad-x) + 1.8em);
  font: inherit; font-size: var(--sig-fs); font-weight: var(--sig-fw);
  letter-spacing: var(--sig-ls); line-height: 1.35;
  -webkit-text-stroke: var(--sig-stroke) currentColor;
  color: var(--sig-text-active);
  background: var(--sig-menu-bg);
  border: var(--sig-border-w) solid var(--sig-border-c);
  border-radius: var(--sig-radius);
  box-shadow: var(--sig-pick-shadow);
  cursor: pointer; text-align: left;
  transition: border-color var(--sig-dur-2) var(--sig-ease), box-shadow var(--sig-dur-2) var(--sig-ease);
}
.sig .sig__pick:hover{ color: var(--sig-u-text-hover, var(--sig-text-active)); }
.sig__pick:focus{ outline: none; }
.sig__pick:focus-visible{ outline: 2px solid var(--sig-text-active); outline-offset: 2px; }
.sig__pick-label{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig__pick-arrow{
  position: absolute;
  top: 50%;
  inset-inline-end: var(--sig-pad-x);
  flex: none; width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateY(-50%);
  transition: transform var(--sig-dur-2) var(--sig-ease);
}
.sig.is-open .sig__pick-arrow{ transform: translateY(-50%) rotate(180deg); }
.sig.is-open .sig__pick{ box-shadow: var(--sig-pick-open-shadow); }

.sig__list{
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 6px);
  display: none; flex-direction: column;
  gap: var(--sig-narrow-gap);
  padding: 5px;
  max-height: 60vh; overflow-y: auto;
  color: var(--sig-text);
  background: var(--sig-menu-bg);
  border: var(--sig-border-w) solid var(--sig-border-c);
  border-radius: min(var(--sig-radius), 22px);
  box-shadow: var(--sig-e2);
}
.sig.is-open .sig__list{ display: flex; }
.sig__opt{
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center; gap: .55em;
  width: 100%; margin: 0;
  padding: var(--sig-pad-y) var(--sig-pad-x);
  font: inherit; font-size: var(--sig-fs); font-weight: var(--sig-fw);
  letter-spacing: var(--sig-ls); line-height: 1.35;
  -webkit-text-stroke: var(--sig-stroke) currentColor;
  color: var(--sig-text);
  background: transparent;
  border: var(--sig-tab-border-w) solid var(--sig-tab-border-c);
  border-radius: var(--sig-radius-inner);
  cursor: pointer; text-align: center;
  transition: background-color var(--sig-dur-2) var(--sig-ease), color var(--sig-dur-2) var(--sig-ease);
}
.sig .sig__opt:hover{ color: var(--sig-text-hover); }
.sig .sig__opt[aria-selected="true"]:hover{ color: var(--sig-u-text-hover, var(--sig-text-active)); }
.sig__opt:focus{ outline: none; }
.sig__opt:focus-visible{ outline: 2px solid var(--sig-text-active); outline-offset: -2px; }
.sig__opt[aria-selected="true"]{
  color: var(--sig-text-active);
  background: var(--sig-on-bg);
  box-shadow: var(--sig-on-shadow);
}
.sig[data-skin="rail"] .sig__opt[aria-selected="true"]{ box-shadow: inset 0 -3px 0 var(--sig-text-active); }
.sig[data-skin="bare"] .sig__opt[aria-selected="true"]{ font-weight: 700; }

.sig__opt .sig__label{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sig[data-icon-pos="right"] .sig__opt,
.sig[data-icon-pos="right"] .sig__pick{ flex-direction: row-reverse; }
.sig[data-icon-pos="top"] .sig__opt,
.sig[data-icon-pos="top"] .sig__pick{ flex-direction: column; gap: .35em; }
.sig[data-tab-content="icononly"] .sig__opt .sig__label,
.sig[data-tab-content="icononly"] .sig__pick-label{
  position: static; width: auto; height: auto; padding: 0; margin: 0;
  clip-path: none; overflow: hidden;
}
.sig__pick .sig__ico{ flex: none; }
.sig__pick .sig__badge{ flex: none; }

.sig[data-mode="dropdown"] .sig__scroll{ display: none; }
.sig[data-mode="dropdown"] .sig__picker{
  position: relative; width: auto; height: auto;
  margin: 0; overflow: visible; clip-path: none; white-space: normal;
  display: block;
}

.sig[data-mode="grid"] .sig__scroll,
.sig[data-mode="stack"] .sig__scroll{
  overflow: visible; padding: 0; margin: 0;
  -webkit-mask-image: none; mask-image: none; width: auto;
}
.sig[data-mode="grid"] .sig__bar,
.sig[data-mode="stack"] .sig__bar{ border-radius: min(var(--sig-radius), 22px); }
.sig[data-mode="grid"] .sig__bar{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sig-narrow-gap);
  width: 100%;
}
.sig[data-mode="stack"] .sig__bar{
  flex-direction: column;
  width: 100%;
  gap: var(--sig-narrow-gap);
}
.sig[data-mode="grid"] .sig__marker,
.sig[data-mode="stack"] .sig__marker{ display: none; }

.sig[data-mode="grid"] .sig__tab,
.sig[data-mode="stack"] .sig__tab{
  width: 100%;
  white-space: normal;
  justify-content: center;
  text-align: center;
}
.sig[data-align="left"]   .sig__tab,
.sig[data-align="left"]   .sig__opt,
.sig[data-align="left"]   .sig__pick{ justify-content: flex-start; text-align: left; }
.sig[data-align="center"] .sig__tab,
.sig[data-align="center"] .sig__opt,
.sig[data-align="center"] .sig__pick{ justify-content: center; text-align: center; }
.sig[data-align="right"]  .sig__tab,
.sig[data-align="right"]  .sig__opt,
.sig[data-align="right"]  .sig__pick{ justify-content: flex-end; text-align: right; }

.sig[data-mode="grid"] .sig__tab[aria-selected="true"],
.sig[data-mode="stack"] .sig__tab[aria-selected="true"]{
  background: var(--sig-on-bg);
  box-shadow: var(--sig-on-shadow);
}

@media (max-width: 620px){
  .sig:not(.is-ready)[data-narrow="dropdown"] .sig__scroll{ display: none; }
  .sig:not(.is-ready)[data-narrow="dropdown"] .sig__picker{
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none; white-space: normal;
    display: block;
  }

  .sig:not(.is-ready)[data-narrow="grid"] .sig__scroll,
  .sig:not(.is-ready)[data-narrow="stack"] .sig__scroll{
    overflow: visible; padding: 0; margin: 0;
    -webkit-mask-image: none; mask-image: none; width: auto;
  }
  .sig:not(.is-ready)[data-narrow="grid"] .sig__bar,
  .sig:not(.is-ready)[data-narrow="stack"] .sig__bar{ border-radius: min(var(--sig-radius), 22px); }
  .sig:not(.is-ready)[data-narrow="grid"] .sig__bar{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sig-narrow-gap);
    width: 100%;
  }
  .sig:not(.is-ready)[data-narrow="stack"] .sig__bar{
    flex-direction: column;
    width: 100%;
    gap: var(--sig-narrow-gap);
  }
  .sig:not(.is-ready)[data-narrow="grid"] .sig__marker,
  .sig:not(.is-ready)[data-narrow="stack"] .sig__marker{ display: none; }

  .sig:not(.is-ready)[data-narrow="grid"] .sig__tab,
  .sig:not(.is-ready)[data-narrow="stack"] .sig__tab{
    width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
}

.sig-target[hidden]{ display: none !important; }
.sig-target:focus{ outline: none; }
.sig-target:focus-visible{ outline: 2px solid var(--sig-text-active, #1b2130); outline-offset: 6px; }

.sig-target.is-in[data-sig-motion="fade"] { animation: sig-fade  var(--sig-t-dur,340ms) var(--sig-t-ease,cubic-bezier(.32,.72,0,1)) both; }
.sig-target.is-in[data-sig-motion="rise"] { animation: sig-rise  var(--sig-t-dur,340ms) var(--sig-t-ease,cubic-bezier(.32,.72,0,1)) both; }
.sig-target.is-in[data-sig-motion="scale"]{ animation: sig-scale var(--sig-t-dur,340ms) var(--sig-t-ease,cubic-bezier(.32,.72,0,1)) both; }
.sig-target.is-in[data-sig-motion="slide"][data-sig-dir="fwd"] { animation: sig-slide-f var(--sig-t-dur,340ms) var(--sig-t-ease,cubic-bezier(.32,.72,0,1)) both; }
.sig-target.is-in[data-sig-motion="slide"][data-sig-dir="back"]{ animation: sig-slide-b var(--sig-t-dur,340ms) var(--sig-t-ease,cubic-bezier(.32,.72,0,1)) both; }

@keyframes sig-fade   { from{ opacity:0 } to{ opacity:1 } }
@keyframes sig-rise   { from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform:none } }
@keyframes sig-scale  { from{ opacity:0; transform: scale(.982) } to{ opacity:1; transform:none } }
@keyframes sig-slide-f{ from{ opacity:0; transform: translateX(18px) } to{ opacity:1; transform:none } }
@keyframes sig-slide-b{ from{ opacity:0; transform: translateX(-18px) } to{ opacity:1; transform:none } }

/* ---- Content FX: fulenkent kivalasztott elem sajat animacioja ---- */

.sig-fx{
  --sig-fx-dur:  2000ms;
  --sig-fx-amt:  1;
  --sig-fx-ease: cubic-bezier(.22,.68,0,1);
  --sig-fx-dx:   46px;
  --sig-fx-dy:   22px;
  --sig-fx-x:    1;
  --sig-fx-y:    0;
}
.sig-fx[data-sig-fx-d="r"]{ --sig-fx-x:  1; --sig-fx-y:  0; }
.sig-fx[data-sig-fx-d="l"]{ --sig-fx-x: -1; --sig-fx-y:  0; }
.sig-fx[data-sig-fx-d="b"]{ --sig-fx-x:  0; --sig-fx-y:  1; }
.sig-fx[data-sig-fx-d="t"]{ --sig-fx-x:  0; --sig-fx-y: -1; }

.sig-fx.is-fx[data-sig-fx="fade"]{ animation: sigfx-fade var(--sig-fx-dur) var(--sig-fx-ease) both; }

.sig-fx.is-fx[data-sig-fx="rise"],
.sig-fx.is-fx[data-sig-fx="drop"],
.sig-fx.is-fx[data-sig-fx="slide"]{ animation: sigfx-move var(--sig-fx-dur) var(--sig-fx-ease) both; }

.sig-fx.is-fx[data-sig-fx="scale"]{ animation: sigfx-scale var(--sig-fx-dur) var(--sig-fx-ease) both; }

.sig-fx.is-fx[data-sig-fx="flip"]{ animation: sigfx-flip-x var(--sig-fx-dur) var(--sig-fx-ease) both; transform-origin: 50% 0; }
.sig-fx.is-fx[data-sig-fx="flip"][data-sig-fx-d="l"],
.sig-fx.is-fx[data-sig-fx="flip"][data-sig-fx-d="r"]{ animation-name: sigfx-flip-y; transform-origin: 50% 50%; }

.sig-fx.is-fx[data-sig-fx="blurin"]{ animation: sigfx-blur var(--sig-fx-dur) var(--sig-fx-ease) both; }

.sig-fx.is-fx[data-sig-fx="revealup"]{ animation: sigfx-reveal-b var(--sig-fx-dur) var(--sig-fx-ease) both; }
.sig-fx.is-fx[data-sig-fx="revealup"][data-sig-fx-d="t"]{ animation-name: sigfx-reveal-t; }
.sig-fx.is-fx[data-sig-fx="revealup"][data-sig-fx-d="l"]{ animation-name: sigfx-reveal-l; }
.sig-fx.is-fx[data-sig-fx="revealup"][data-sig-fx-d="r"]{ animation-name: sigfx-reveal-r; }

.sig-fx.is-fx[data-sig-fx="maskwipe"]{ animation: sigfx-wipe-r var(--sig-fx-dur) var(--sig-fx-ease) both; }
.sig-fx.is-fx[data-sig-fx="maskwipe"][data-sig-fx-d="l"]{ animation-name: sigfx-wipe-l; }
.sig-fx.is-fx[data-sig-fx="maskwipe"][data-sig-fx-d="t"]{ animation-name: sigfx-wipe-t; }
.sig-fx.is-fx[data-sig-fx="maskwipe"][data-sig-fx-d="b"]{ animation-name: sigfx-wipe-b; }

.sig-fx.is-fx[data-sig-fx="springpop"]{ animation: sigfx-spring calc(var(--sig-fx-dur) * 1.25) cubic-bezier(.34,1.56,.64,1) both; }

.sig-fx.is-fx[data-sig-fx="skewslide"]{ animation: sigfx-skew-x var(--sig-fx-dur) var(--sig-fx-ease) both; }
.sig-fx.is-fx[data-sig-fx="skewslide"][data-sig-fx-d="t"],
.sig-fx.is-fx[data-sig-fx="skewslide"][data-sig-fx-d="b"]{ animation-name: sigfx-skew-y; }

.sig-fx.is-fx[data-sig-fx="split"]{ animation: sigfx-split-h var(--sig-fx-dur) var(--sig-fx-ease) both; }
.sig-fx.is-fx[data-sig-fx="split"][data-sig-fx-d="t"],
.sig-fx.is-fx[data-sig-fx="split"][data-sig-fx-d="b"]{ animation-name: sigfx-split-v; }

.sig-fx.is-fx[data-sig-fx="stagger"] > *{
  animation: sigfx-move var(--sig-fx-dur) var(--sig-fx-ease) both;
  animation-delay: calc(var(--sig-fx-step, 70ms) * var(--sig-fx-i, 0));
}
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(1) { --sig-fx-i: 0; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(2) { --sig-fx-i: 1; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(3) { --sig-fx-i: 2; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(4) { --sig-fx-i: 3; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(5) { --sig-fx-i: 4; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(6) { --sig-fx-i: 5; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(7) { --sig-fx-i: 6; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(8) { --sig-fx-i: 7; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(9) { --sig-fx-i: 8; }
.sig-fx.is-fx[data-sig-fx="stagger"] > *:nth-child(n+10){ --sig-fx-i: 9; }

@keyframes sigfx-fade{ from{ opacity:0 } to{ opacity:1 } }

@keyframes sigfx-move{
  from{ opacity:0; transform: translate(calc(var(--sig-fx-dx) * var(--sig-fx-amt, 1) * var(--sig-fx-x, 1)),
                                        calc(var(--sig-fx-dy) * var(--sig-fx-amt, 1) * var(--sig-fx-y, 0))) }
  to  { opacity:1; transform: none }
}

@keyframes sigfx-scale{ from{ opacity:0; transform: scale(calc(1 - .08 * var(--sig-fx-amt, 1))) } to{ opacity:1; transform:none } }

@keyframes sigfx-flip-x{
  from{ opacity:0; transform: perspective(900px) rotateX(calc(14deg * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1))) }
  to  { opacity:1; transform: none }
}
@keyframes sigfx-flip-y{
  from{ opacity:0; transform: perspective(900px) rotateY(calc(-14deg * var(--sig-fx-amt, 1) * var(--sig-fx-x, 1))) }
  to  { opacity:1; transform: none }
}

@keyframes sigfx-blur{ from{ opacity:0; filter: blur(calc(16px * var(--sig-fx-amt, 1))) } to{ opacity:1; filter: blur(0) } }

@keyframes sigfx-reveal-b{
  from{ opacity:0; clip-path: inset(100% 0 0 0);
        transform: translate(calc(var(--sig-fx-dx) * var(--sig-fx-amt, 1) * var(--sig-fx-x, 0)),
                             calc(var(--sig-fx-dy) * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1))) }
  to  { opacity:1; clip-path: inset(0 0 0 0); transform: none }
}
@keyframes sigfx-reveal-t{
  from{ opacity:0; clip-path: inset(0 0 100% 0);
        transform: translate(calc(var(--sig-fx-dx) * var(--sig-fx-amt, 1) * var(--sig-fx-x, 0)),
                             calc(var(--sig-fx-dy) * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1))) }
  to  { opacity:1; clip-path: inset(0 0 0 0); transform: none }
}
@keyframes sigfx-reveal-l{
  from{ opacity:0; clip-path: inset(0 100% 0 0);
        transform: translate(calc(var(--sig-fx-dx) * var(--sig-fx-amt, 1) * var(--sig-fx-x, 0)),
                             calc(var(--sig-fx-dy) * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1))) }
  to  { opacity:1; clip-path: inset(0 0 0 0); transform: none }
}
@keyframes sigfx-reveal-r{
  from{ opacity:0; clip-path: inset(0 0 0 100%);
        transform: translate(calc(var(--sig-fx-dx) * var(--sig-fx-amt, 1) * var(--sig-fx-x, 0)),
                             calc(var(--sig-fx-dy) * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1))) }
  to  { opacity:1; clip-path: inset(0 0 0 0); transform: none }
}

@keyframes sigfx-wipe-r{ from{ clip-path: inset(0 0 0 100%) } to{ clip-path: inset(0 0 0 0) } }
@keyframes sigfx-wipe-l{ from{ clip-path: inset(0 100% 0 0) } to{ clip-path: inset(0 0 0 0) } }
@keyframes sigfx-wipe-t{ from{ clip-path: inset(0 0 100% 0) } to{ clip-path: inset(0 0 0 0) } }
@keyframes sigfx-wipe-b{ from{ clip-path: inset(100% 0 0 0) } to{ clip-path: inset(0 0 0 0) } }

@keyframes sigfx-spring{ from{ opacity:0; transform: scale(calc(1 - .14 * var(--sig-fx-amt, 1))) } to{ opacity:1; transform: scale(1) } }

@keyframes sigfx-skew-x{
  from{ opacity:0; transform: translate(calc(var(--sig-fx-dx) * var(--sig-fx-amt, 1) * var(--sig-fx-x, 1)), 0)
                              skewX(calc(7deg * var(--sig-fx-amt, 1) * var(--sig-fx-x, 1))) }
  to  { opacity:1; transform: none }
}
@keyframes sigfx-skew-y{
  from{ opacity:0; transform: translate(0, calc(var(--sig-fx-dy) * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1)))
                              skewY(calc(7deg * var(--sig-fx-amt, 1) * var(--sig-fx-y, 1))) }
  to  { opacity:1; transform: none }
}

@keyframes sigfx-split-h{ from{ opacity:.4; clip-path: inset(0 50% 0 50%) } to{ opacity:1; clip-path: inset(0 0 0 0) } }
@keyframes sigfx-split-v{ from{ opacity:.4; clip-path: inset(50% 0 50% 0) } to{ opacity:1; clip-path: inset(0 0 0 0) } }

@media (prefers-reduced-motion: reduce){
  .sig[data-respect-motion="true"] *,
  .sig[data-respect-motion="true"] *::before,
  .sig[data-respect-motion="true"] *::after,
  .sig-target,
  .sig-fx{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more){
  .sig{ --sig-bar-shadow: none; --sig-marker-shadow: none; }
  .sig__bar{ outline: 1px solid var(--sig-text); }
  .sig__tab[aria-selected="true"]{ text-decoration: underline; text-underline-offset: 4px; }
}
@media print{
  .sig__scroll{ display: none !important; }
  .sig-target[hidden]{ display: block !important; }
  .sig-target,
  .sig-fx{ animation: none !important; break-inside: avoid; }
}

.sig:not(.is-ready){ min-height: 40px; }
.sig:not(.is-ready) .sig__marker{ opacity: 0; }
.sig:not(.is-ready) .sig__tab.sig-edit-active{
  color: var(--sig-text-active);
  background: var(--sig-on-bg);
  box-shadow: var(--sig-on-shadow);
}
.sig:not(.is-ready)[data-skin="rail"] .sig__tab.sig-edit-active::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 0;
  background: var(--sig-text-active);
  transform: translateY(4px);
  opacity: 1;
}
.sig:not(.is-ready)[data-skin="rail"][data-flow="vertical"] .sig__tab.sig-edit-active::before{
  left: -4px; right: auto; top: 0; bottom: 0;
  width: 3px; height: auto;
  border-radius: 0;
  transform: none;
  opacity: 1;
}
.sig:not(.is-ready)[data-skin="bare"] .sig__tab.sig-edit-active{ font-weight: 700; }

.sig[data-show-ids="false"]:not(.is-ready) .sig__tab::after{ content: none; }
.sig[data-show-ids="false"]:not(.is-ready)::after{ content: none; }

.sig:not(.is-ready)::after{
  content: "";
  display: block;
  height: calc(var(--sig-mark-size, 10px) * 1.8 + 8px);
  pointer-events: none;
}
.sig:not(.is-ready) .sig__scroll{
  overflow: visible;
  padding: 0;
  margin: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.sig:not(.is-ready) .sig__tab::after{
  content: "#" attr(data-sig-target);
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  padding: .4em .7em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--sig-mark-size, 10px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sig-mark-fg, #3f4859);
  background: var(--sig-mark-bg, #f1f3f8);
  border-radius: .5em;
  box-shadow: 0 0 0 1px var(--sig-mark-line, color-mix(in srgb, var(--sig-mark-fg, #3f4859) 26%, transparent));
  pointer-events: none;
}
.sig:not(.is-ready) .sig__tab[data-sig-target=""]::after{
  content: "no ID";
  color: #8a4b00;
  background: #fdf3e0;
  box-shadow: 0 0 0 1px rgb(160 104 12 / .38);
}
.sig:not(.is-ready)[data-skin="rail"]::after{ height: calc(var(--sig-mark-size, 10px) * 1.8 + 14px); }
.sig:not(.is-ready)[data-skin="rail"] .sig__tab::after{ margin-top: 14px; }
.sig:not(.is-ready)[data-flow="vertical"]::after{ height: 0; }
.sig:not(.is-ready)[data-skin="rail"][data-flow="vertical"] .sig__tab::after{ margin-top: 0; }

@media (max-width: 620px){
  .sig:not(.is-ready)[data-narrow="stack"] .sig__tab,
  .sig:not(.is-ready)[data-narrow="grid"] .sig__tab{ margin-bottom: 24px; }
  .sig:not(.is-ready)[data-narrow="stack"]::after,
  .sig:not(.is-ready)[data-narrow="grid"]::after,
  .sig:not(.is-ready)[data-narrow="dropdown"]::after{ height: 0; }
}

@media (max-width: 620px){
  .sig:not(.is-ready)[data-narrow="stack"] .sig__tab,
  .sig:not(.is-ready)[data-narrow="grid"] .sig__tab{ margin-bottom: 24px; }
  .sig:not(.is-ready)[data-narrow="stack"]::after,
  .sig:not(.is-ready)[data-narrow="grid"]::after,
  .sig:not(.is-ready)[data-narrow="dropdown"]::after{ height: 0; }
}

[data-sig-mark]{ position: relative; }
[data-sig-mark]::after{
  content: "#" attr(data-sig-mark);
  position: absolute;
  z-index: 60;
  top: 6px;
  inset-inline-end: 6px;
  padding: 4px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: #3f4859;
  background: #f1f3f8;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgb(63 72 89 / .26);
  pointer-events: none;
}
.sig:not(.is-ready)[data-flow="vertical"] .sig__tab::after{
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-top: 0;
  margin-inline-start: 9px;
  max-width: none;
}

.sig:not(.is-ready) .sig__tab[hidden]{ display: inline-flex; opacity: .35; }
.sig:not(.is-ready) .sig__tab[disabled]{ opacity: .45; }