
html[data-lang="en"]{--ui: Geist, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif}

.lang-btn{grid-row:1;grid-column:3;justify-self:end;display:inline-flex;align-items:baseline;gap:.3em;margin-right:64px;color:var(--dim);letter-spacing:.04em}
.lang-btn[hidden]{display:none}
.bar:has(> .lang-btn:not([hidden])) .bar-right{margin-right:calc(80px + var(--lang-w, 0px))}
.lang-op{transition:color .2s linear}
.lang-sep{color:var(--faint)}
html:not([data-lang="en"]) .lang-op[data-l="ja"], html[data-lang="en"] .lang-op[data-l="en"]{color:var(--fg)}
html:not([data-lang="en"]) .lang-btn:is(:hover, :focus-visible) .lang-op[data-l="en"] > .lbl > span,
html[data-lang="en"] .lang-btn:is(:hover, :focus-visible) .lang-op[data-l="ja"] > .lbl > span{translate:0 -1.8em}
@media (max-width:720px){
  .lang-btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;height:1.5em;overflow:hidden;line-height:1.5em}
  .lang-sep{display:none}
  .lang-op{color:var(--fg);transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
  html[data-lang="en"] .lang-op{translate:0 -1.5em}
  .lang-btn .lang-op > .lbl > span{translate:none !important}
}

@media (min-width:993px) and (max-width:1486px){
  .bar{grid-template-columns:auto minmax(0, 1fr) minmax(0, auto)}
  .current{grid-column:1;justify-self:start}
  .bar-left{grid-column:2}
}
@media (min-width:1487px) and (max-width:1545px){
  html[data-lang="en"] .bar{grid-template-columns:auto minmax(0, 1fr) minmax(0, auto)}
  html[data-lang="en"] .current{grid-column:1;justify-self:start}
  html[data-lang="en"] .bar-left{grid-column:2}
}

@media (max-width:992px){
  .bar{--bar-x:22px;--bar-y:14px;--filter:192px;grid-template-columns:auto minmax(0, 1fr)}
  .bar-left{display:contents}
  .current{grid-row:1;grid-column:1;justify-self:start}
  .bar-right{grid-row:1;grid-column:2}
  .lang-btn,.tour-btn,#btn-license{grid-row:1;grid-column:2;justify-self:end}
  .cats{grid-row:2;grid-column:1 / -1;margin-left:var(--filter)}
  .weights-only{position:absolute;left:var(--bar-x);bottom:calc(var(--bar-y) + 2px);margin:-4px}
  .search{position:absolute;left:calc(var(--bar-x) + 44px);bottom:calc(var(--bar-y) - 3px);width:132px;flex:none;min-width:0}
  html[data-lang="en"] .weights-only{bottom:calc(var(--bar-y) + 1px)}
  html[data-lang="en"] .search{bottom:calc(var(--bar-y) - 4.5px)}
}
@media (max-width:720px){
  .bar{--bar-x:16px;--bar-y:12px;--filter:188px}
  .lang-btn{margin-right:56px}
  #btn-license{margin-right:22px}
  .bar:has(> .lang-btn:not([hidden])) .bar-right{margin-right:calc(68px + var(--lang-w, 0px))}
}
@media (max-width:480px){ .bar-right .count{display:none} }
@media (max-width:400px){ .bar-right .dl-icon{display:none} }
