/* Полоска длины (макет «сочинение.html», «фитиль»): пять зон видны заранее
   подложками, заливка поверх — цветом зоны, в которой текст сейчас. */
.vx-fit{display:flex;align-items:center;gap:12px}
.vx-fit__track{position:relative;flex:1;height:8px;border-radius:999px;overflow:hidden;background:rgba(36,23,3,.12)}
.vx-fit__zone{position:absolute;top:0;bottom:0}
.vx-fit__zone--short,.vx-fit__zone--long{background:rgba(255,92,72,.22)}
.vx-fit__zone--roomy,.vx-fit__zone--tight{background:rgba(245,173,69,.22)}
.vx-fit__zone--fits{background:rgba(79,201,138,.30)}
.vx-fit__fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--fit-color);transition:width .15s,background .3s}
.vx-fit__label{flex:none;min-width:110px;text-align:right;font:800 13px var(--font-display);color:var(--fit-color)}

.vx-fit--short,.vx-fit--long{--fit-color:var(--coral-500)}
.vx-fit--roomy,.vx-fit--tight{--fit-color:var(--amber-500)}
.vx-fit--fits{--fit-color:var(--mint-500)}

@media (prefers-reduced-motion:reduce){
  .vx-fit__fill{transition:none}
}