.bar{
  position:relative;z-index:10;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 22px;
  font-size:12px;
  letter-spacing:.01em;
}
.bar-left{grid-row:1;grid-column:1;display:flex;align-items:center;gap:16px;min-width:0}
.search{position:relative;display:flex;flex:0 1 11em;min-width:5em}
#search{
  width:100%;min-width:0;
  -webkit-appearance:none;appearance:none;
  border:0;border-radius:0;background:none;color:var(--fg);
  font:inherit;padding:4px 0;
  border-bottom:1px solid transparent;
  cursor:text;
}
#search::-webkit-search-decoration{-webkit-appearance:none}
#search::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search.filled #search{padding-right:18px}
#search::placeholder{color:var(--dim)}
#search:focus{outline:none;border-bottom-color:var(--faint)}
.search::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg);scale:0 1;transform-origin:0 50%;transition:scale .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.search:focus-within::after{scale:1 1}
.search-caret{position:absolute;left:0;top:4px;bottom:5px;width:1px;background:var(--fg);pointer-events:none;visibility:hidden}
.search.typing .search-caret{visibility:visible;animation:caret-blink 1.06s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .search.typing .search-caret{animation:none} }
.search-clear{
  position:absolute;right:-5px;top:50%;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;color:var(--dim);
  opacity:0;scale:.4;pointer-events:none;transition:opacity .2s linear, scale .36s cubic-bezier(.34,1.56,.64,1), color .2s linear;
}
.search.filled .search-clear{opacity:1;scale:1;pointer-events:auto}
.search-clear svg{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transition:rotate .46s cubic-bezier(.22,1,.36,1), scale .36s cubic-bezier(.34,1.56,.64,1)}
.search-clear:is(:hover, :focus-visible){color:var(--fg);outline:none}
.search-clear:is(:hover, :focus-visible) svg{rotate:90deg}
.search-clear:active svg{scale:.8;transition-duration:.46s, .08s}
.search-suggest{
  position:absolute;left:-10px;top:calc(100% + 6px);z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  width:max-content;min-width:calc(100% + 20px);padding:6px 16px 8px 10px;background:var(--bg);color:var(--dim);
}
.search-suggest[hidden]{display:none}
.suggest-item{display:block;padding:4px 0;font-size:17px;line-height:24px;text-align:left;white-space:nowrap;font-synthesis:none;transition:color .2s linear, padding-left .42s cubic-bezier(.22,1,.36,1)}
.suggest-item:is(:hover, .on){color:var(--fg);padding-left:5px}
.cats{display:flex;gap:12px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;color:var(--dim)}
.cats::-webkit-scrollbar{display:none}
.cat{transition:color .2s linear}
.cat.active{color:var(--fg)}
.cat:not(:has(:disabled)):hover{color:var(--fg)}
.cat:has(:disabled){color:var(--faint);cursor:default}

.current{
  grid-row:1;grid-column:2;
  justify-self:center;
  max-width:44vw;
  height:18px;line-height:18px;
  white-space:nowrap;
  font-size:13px;
  font-synthesis:none;
}
.bar-right{grid-row:1;grid-column:3;justify-self:end;display:flex;align-items:center;gap:16px;min-width:0;white-space:nowrap;color:var(--dim)}
.bar-right button{transition:color .2s linear}
.bar-right button:not(:disabled):hover{color:var(--fg)}
.bar-right button:disabled{color:var(--faint);cursor:default}
.export{position:relative;display:inline-flex;align-items:center;gap:6px}
.dl-icon{flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1}
.dl-icon .dl-arrow{transition:translate .46s cubic-bezier(.22,1,.36,1)}
.export:not(:disabled):active .dl-arrow{translate:0 1.5px;transition-duration:.08s}
@media (hover: hover) and (pointer: fine){ .dl-icon{display:none} }
#btn-svg-copy{margin-left:-8px;top:1px}
.copy-icon{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1}
.copy-icon path{transition:opacity .2s linear,translate .46s cubic-bezier(.22,1,.36,1),stroke-dashoffset .5s cubic-bezier(.22,1,.36,1)}
.copy-check{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.export:not(:disabled):active .copy-front{translate:1px -1px;transition-duration:.08s}
.copied .copy-back,.copied .copy-front{opacity:0}
.copied .copy-check{stroke-dashoffset:0;opacity:1;transition-delay:0s,0s,.08s}
#btn-svg-copy:disabled::after{transition-delay:.1s}
.export::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;scale:0 1;transform-origin:0 50%;transition:scale .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.export:disabled::after{scale:1 1}
.export.held .dl-icon{display:none}
@media (prefers-reduced-motion:reduce){ .export::after{transition:none} }
@media not all and (hover: hover) and (pointer: fine){ #btn-svg,#btn-svg-copy{display:none} }
.count{font-variant-numeric:tabular-nums}
.sources{display:flex;gap:16px}
body:not(.has-local) .sources,.has-local #btn-local{display:none}
.source.active{color:var(--fg)}
.weights-only{display:grid;place-items:center;padding:4px;margin:-4px}
.weights-only:focus-visible{outline-offset:0}
.weights-only[aria-pressed="true"]{color:var(--fg)}
.wo-icon{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1}
.wo-box{transform-box:fill-box;transform-origin:50% 50%;transition:scale .36s cubic-bezier(.34,1.56,.64,1)}
.weights-only:not(:disabled):active .wo-box{scale:.8;transition-duration:.08s}
.wo-check{stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .28s cubic-bezier(.4,0,1,1)}
.weights-only[aria-pressed="true"] .wo-check{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1)}
.wo-a{fill:currentColor;stroke:none;transition:translate .42s cubic-bezier(.34,1.56,.64,1)}
.wo-a:nth-of-type(4){transition-delay:.05s}
.wo-a:nth-of-type(5){transition-delay:.1s}
.weights-only:not(:disabled):is(:hover, :focus-visible) .wo-a{translate:0 -1.5px}
@media (max-width:720px){
  .bar-right{gap:12px}
  .weights-only{margin-right:-8px}
}