/* TrueFocus adapted to compact algorithm-method badges. */
.algo-entry-head .algo-method {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 10px 14px;
  min-height: 42px;
  border: 1px solid rgb(255 208 120 / .65);
  border-radius: 10px;
  background: rgb(255 194 76 / .1);
  box-shadow: inset 0 1px 0 rgb(255 225 168 / .12), 0 0 14px rgb(255 193 75 / .08);
  color: #ffda8c;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.5;
}
.algo-method .tf-word {
  display: inline-block;
  white-space: nowrap;
  transition: filter 500ms ease, color 500ms ease;
}
.algo-method[data-focus-ready] .tf-word { filter: blur(.65px); }
.algo-method[data-focus-ready] .tf-word[data-active],
.algo-method:hover .tf-word,
.algo-method:focus .tf-word { filter: none; }
.algo-method .tf-word[data-active] { color: #fff0c2; }
.algo-method:focus-visible { outline: 2px solid #ffe5aa; outline-offset: 3px; }
.algo-method .tf-frame {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: transform 500ms ease, width 500ms ease, height 500ms ease;
}
.tf-frame > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 2px solid #ffcf70;
  filter: drop-shadow(0 0 3px rgb(255 193 75 / .55));
}
.tf-frame > i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tf-frame > i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.tf-frame > i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.tf-frame > i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.algo-method .tf-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .algo-method[data-focus-ready] .tf-word { filter: none; transition: none; }
  .algo-method .tf-frame { transition: none; }
}