.article-page .article-language {margin-top: 12px;}
.article-page .article-language-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(209,154,86,.34);
  border-radius: 4px;
  background: rgba(0,43,43,.32);
}
.article-page .article-language-control a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 47px;
  min-height: 31px;
  padding: 7px 14px;
  border-radius: 2px;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  color: #b9b1a3;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}
.article-page .article-language-control a[aria-current="page"] {background: #d5a16a; color: #0c2725;}
.article-page .article-language-control a:focus-visible {outline: 2px solid #d5a16a; outline-offset: 4px;}
@media (hover: hover) {
  .article-page .article-language-control a:not([aria-current="page"]):hover {background: rgba(209,154,86,.1); color: #e3bd8e;}
}
@media (max-width: 700px) {
  #blog summary {touch-action: manipulation;}
  #blog .blog-article {overflow-anchor: none;}
  #blog .blog-article-toggle::after {transition-duration: 140ms;}
  #blog .blog-article-title {transition-duration: 90ms;}
  .blog-page:not(.article-page) main {animation: none;}
  @media (prefers-reduced-motion: no-preference) {
    .article-page main {animation-duration: 160ms;}
  }
}
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  @media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
    #blog .blog-article {interpolate-size: allow-keywords;}
    #blog .blog-article::details-content {
      height: 0;
      opacity: 0;
      overflow: clip;
      transition: height 140ms cubic-bezier(.2,.75,.25,1), opacity 80ms ease-out, content-visibility 140ms allow-discrete;
    }
    #blog .blog-article[open]::details-content {height: auto; opacity: 1;}
  }
}