.focus-container {
  position: relative;
  display: flex;
  gap: 0.35em;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  outline: none;
  user-select: none;
  width: 100%;
}

.focus-word {
  position: relative;
  font-size: inherit;
  font-weight: inherit;
  cursor: default;
  transition: filter 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  outline: none;
  user-select: none;
  line-height: 1.15;
}

.focus-word.active {
  filter: blur(0);
}

.focus-frame {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  box-sizing: content-box;
  border: none;
  opacity: 0;
  will-change: left, top, width, height, opacity;
}

.focus-frame.is-visible {
  opacity: 1;
}

.corner {
  position: absolute;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--border-color, #fff);
  filter: drop-shadow(0 0 4px var(--glow-color, var(--border-color, #fff)));
  border-radius: 2px;
  transition: none;
}

.top-left {
  top: -8px;
  left: -8px;
  border-right: none;
  border-bottom: none;
}

.top-right {
  top: -8px;
  right: -8px;
  border-left: none;
  border-bottom: none;
}

.bottom-left {
  bottom: -8px;
  left: -8px;
  border-right: none;
  border-top: none;
}

.bottom-right {
  bottom: -8px;
  right: -8px;
  border-left: none;
  border-top: none;
}